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

interface BatchVideoFormProps {
  selectedFolder: string
  onFolderChange: (folder: string) => void
  batchPrompts: string[]
  onPromptsChange: (prompts: string[]) => void
  outputFolder: string
  onOutputFolderChange: (folder: string) => void
}

const BatchVideoForm: React.FC<BatchVideoFormProps> = ({
  selectedFolder,
  onFolderChange,
  batchPrompts,
  onPromptsChange,
  outputFolder,
  onOutputFolderChange
}) => {
  const handleFolderSelect = async () => {
    try {
      console.log('Opening folder dialog...')
      const folderPath = await invoke('select_folder') as string
      console.log('Selected folder:', folderPath)
      onFolderChange(folderPath)
    } catch (error) {
      console.error('Failed to select folder:', error)
      alert(`文件夹选择失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

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

  const addPrompt = () => {
    onPromptsChange([...batchPrompts, ''])
  }

  const removePrompt = (index: number) => {
    if (batchPrompts.length > 1) {
      onPromptsChange(batchPrompts.filter((_, i) => i !== index))
    }
  }

  const updatePrompt = (index: number, value: string) => {
    const newPrompts = [...batchPrompts]
    newPrompts[index] = value
    onPromptsChange(newPrompts)
  }

  return (
    <div className="space-y-4">
      {/* Image Folder Selection */}
      <div>
        <label className="block text-sm font-medium text-secondary-700 mb-2">
          选择图片文件夹
        </label>
        <div className="flex items-center space-x-3">
          <button
            onClick={handleFolderSelect}
            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">
            {selectedFolder || '未选择文件夹'}
          </span>
        </div>
      </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">
          <input
            type="text"
            value={outputFolder}
            onChange={(e) => onOutputFolderChange(e.target.value)}
            placeholder="输入保存目录路径"
            className="input flex-1"
          />
          <button
            type="button"
            onClick={handleOutputFolderSelect}
            className="btn-secondary px-3 py-2"
            title="选择输出文件夹"
          >
            <Folder size={16} />
          </button>
        </div>
      </div>

      {/* Batch Prompts */}
      <div>
        <label className="block text-sm font-medium text-secondary-700 mb-2">
          生成提示词
        </label>
        <div className="space-y-2">
          <div className="text-xs text-secondary-600 mb-2">
            添加多个提示词，将循环使用于不同图片
          </div>
          {batchPrompts.map((prompt, index) => (
            <div key={index} className="flex gap-2">
              <input
                type="text"
                value={prompt}
                onChange={(e) => updatePrompt(index, e.target.value)}
                placeholder={`提示词 ${index + 1}`}
                className="input flex-1"
              />
              {batchPrompts.length > 1 && (
                <button
                  type="button"
                  onClick={() => removePrompt(index)}
                  className="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                  title="删除此提示词"
                >
                  <Trash2 size={16} />
                </button>
              )}
            </div>
          ))}
          <button
            type="button"
            onClick={addPrompt}
            className="w-full px-3 py-2 border-2 border-dashed border-secondary-300 text-secondary-600 rounded-lg hover:border-primary-500 hover:text-primary-600 transition-colors"
          >
            + 添加提示词
          </button>
        </div>
      </div>
    </div>
  )
}

export default BatchVideoForm
