import React from 'react'
import { Save, X, FolderOpen, Package } from 'lucide-react'
import { open } from '@tauri-apps/plugin-dialog'
import ProjectImage from './ProjectImage'

interface ProjectFormData {
  name: string
  local_directory: string
  product_name: string
  product_image: string
}

interface ProjectFormProps {
  isOpen: boolean
  isEditing: boolean
  formData: ProjectFormData
  onFormDataChange: (data: ProjectFormData) => void
  onSubmit: () => void
  onCancel: () => void
}

const ProjectForm: React.FC<ProjectFormProps> = ({
  isOpen,
  isEditing,
  formData,
  onFormDataChange,
  onSubmit,
  onCancel
}) => {
  if (!isOpen) return null

  const selectDirectory = async () => {
    try {
      const directory = await open({
        directory: true,
        multiple: false,
        title: '选择项目目录'
      })
      
      if (directory && typeof directory === 'string') {
        onFormDataChange({ ...formData, local_directory: directory })
      }
    } catch (error) {
      console.error('Failed to select directory:', error)
    }
  }

  const selectImage = async () => {
    try {
      const imagePath = await open({
        multiple: false,
        title: '选择商品图片',
        filters: [
          {
            name: '图片文件',
            extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg']
          }
        ]
      })
      
      if (imagePath && typeof imagePath === 'string') {
        onFormDataChange({ ...formData, product_image: imagePath })
      }
    } catch (error) {
      console.error('Failed to select image:', error)
    }
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
        {/* 表单标题 */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">
            {isEditing ? '编辑项目' : '新建项目'}
          </h2>
          <button
            onClick={onCancel}
            className="text-gray-400 hover:text-gray-600"
          >
            <X size={24} />
          </button>
        </div>

        {/* 表单内容 */}
        <div className="p-6 space-y-4">
          {/* 项目名 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              项目名 *
            </label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => onFormDataChange({ ...formData, name: e.target.value })}
              placeholder="请输入项目名称"
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          {/* 本地目录 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              本地目录 *
            </label>
            <div className="flex space-x-2">
              <input
                type="text"
                value={formData.local_directory}
                onChange={(e) => onFormDataChange({ ...formData, local_directory: e.target.value })}
                placeholder="请选择项目目录路径"
                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                readOnly
              />
              <button
                onClick={selectDirectory}
                className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors flex items-center space-x-1"
                title="选择目录"
              >
                <FolderOpen size={16} />
                <span className="text-sm">选择</span>
              </button>
            </div>
          </div>

          {/* 商品名 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              商品名
            </label>
            <input
              type="text"
              value={formData.product_name}
              onChange={(e) => onFormDataChange({ ...formData, product_name: e.target.value })}
              placeholder="请输入商品名称"
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          {/* 商品图片 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              商品图片
            </label>
            <div className="flex space-x-2">
              <input
                type="text"
                value={formData.product_image}
                onChange={(e) => onFormDataChange({ ...formData, product_image: e.target.value })}
                placeholder="请选择商品图片文件"
                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                readOnly
              />
              <button
                onClick={selectImage}
                className="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors flex items-center space-x-1"
                title="选择图片"
              >
                <Package size={16} />
                <span className="text-sm">选择</span>
              </button>
            </div>
            {/* 图片预览 */}
            {formData.product_image && (
              <div className="mt-2">
                <p className="text-xs text-gray-500 mb-1">预览:</p>
                <div className="w-20 h-20 border border-gray-200 rounded-lg overflow-hidden">
                  <ProjectImage
                    imagePath={formData.product_image}
                    alt="商品图片预览"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 表单按钮 */}
        <div className="flex items-center justify-end space-x-3 p-6 border-t border-gray-200">
          <button
            onClick={onCancel}
            className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          >
            取消
          </button>
          <button
            onClick={onSubmit}
            disabled={!formData.name.trim() || !formData.local_directory.trim()}
            className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
          >
            <Save size={16} className="mr-2" />
            {isEditing ? '保存' : '创建'}
          </button>
        </div>
      </div>
    </div>
  )
}

export default ProjectForm
