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

interface ModelFormData {
  model_number: string
  model_image: string
}

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

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

  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, model_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.model_number}
              onChange={(e) => onFormDataChange({ ...formData, model_number: e.target.value })}
              placeholder="请输入模特编号，如：M001"
              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.model_image}
                onChange={(e) => onFormDataChange({ ...formData, model_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.model_image && (
              <div className="mt-2">
                <p className="text-xs text-gray-500 mb-1">预览:</p>
                <div className="w-32 h-40 border border-gray-200 rounded-lg overflow-hidden">
                  <ProjectImage
                    imagePath={formData.model_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.model_number.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 ModelForm
