import React from 'react'
import { Upload, Folder } from 'lucide-react'
import { invoke } from '@tauri-apps/api/core'

interface SingleVideoFormProps {
  selectedImage: string
  onImageChange: (image: string) => void
  customPrompt: string
  onPromptChange: (prompt: string) => void
  singleOutputFolder: string
  onOutputFolderChange: (folder: string) => void
}

const SingleVideoForm: React.FC<SingleVideoFormProps> = ({
  selectedImage,
  onImageChange,
  customPrompt,
  onPromptChange,
  singleOutputFolder,
  onOutputFolderChange
}) => {
  const handleImageSelect = async () => {
    try {
      console.log('Opening image file dialog...')
      const imagePath = await invoke('select_image_file') as string
      console.log('Selected image:', imagePath)
      onImageChange(imagePath)
    } catch (error) {
      console.error('Failed to select image:', error)
      alert(`图片选择失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

  const handleOutputFolderSelect = async () => {
    try {
      console.log('Opening output folder dialog...')
      const folderPath = await invoke('select_folder') as string
      console.log('Selected output folder:', folderPath)
      onOutputFolderChange(folderPath)
    } catch (error) {
      console.error('Failed to select output folder:', error)
      alert(`输出文件夹选择失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

  return (
    <div className="space-y-4">
      {/* Image Selection */}
      <div>
        <label className="block text-sm font-medium text-secondary-700 mb-2">
          选择图片文件
        </label>
        <div className="flex items-center space-x-3 mb-2">
          <button
            onClick={handleImageSelect}
            className="flex items-center px-4 py-2 bg-secondary-100 hover:bg-secondary-200 rounded-lg transition-colors"
          >
            <Upload size={16} className="mr-2" />
            选择文件
          </button>
          <span className="text-sm text-secondary-600">
            {selectedImage ? selectedImage.split(/[\\\/]/).pop() : '未选择文件'}
          </span>
        </div>
        <input
          type="text"
          value={selectedImage}
          onChange={(e) => onImageChange(e.target.value)}
          placeholder="或手动输入完整的图片文件路径 (例如: C:\Users\用户名\Pictures\image.jpg)"
          className="input w-full text-sm"
        />
      </div>

      {/* Prompt Input */}
      <div>
        <label className="block text-sm font-medium text-secondary-700 mb-2">
          生成提示词
        </label>
        <textarea
          value={customPrompt}
          onChange={(e) => onPromptChange(e.target.value)}
          placeholder="输入视频生成提示词..."
          rows={3}
          className="input w-full resize-none"
        />
      </div>

      {/* Output Directory */}
      <div>
        <label className="block text-sm font-medium text-secondary-700 mb-2">
          视频保存目录 (可选)
        </label>
        <div className="flex items-center space-x-3">
          <button
            onClick={handleOutputFolderSelect}
            className="flex items-center px-4 py-2 bg-secondary-100 hover:bg-secondary-200 rounded-lg transition-colors"
          >
            <Folder size={16} className="mr-2" />
            选择保存目录
          </button>
          <span className="text-sm text-secondary-600">
            {singleOutputFolder || '未选择 (将使用默认目录)'}
          </span>
        </div>
        <input
          type="text"
          value={singleOutputFolder}
          onChange={(e) => onOutputFolderChange(e.target.value)}
          placeholder="或手动输入保存目录路径 (例如: C:\Users\用户名\Videos)"
          className="input w-full text-sm mt-2"
        />
      </div>
    </div>
  )
}

export default SingleVideoForm
