import React from 'react';
import { motion } from 'framer-motion';
import { X, Plus, Package, Hash, Layers, Tag } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';
import type { Product } from '../../types';

interface InboundFormData {
  product_id: string;
  batch_no: string;
  rolls: number;
  meters: number;
  notes: string;
}

interface InboundFormProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: () => void;
  products: Product[];
  formData: InboundFormData;
  setFormData: React.Dispatch<React.SetStateAction<InboundFormData>>;
}

export function InboundForm({
  isOpen,
  onClose,
  onSubmit,
  products,
  formData,
  setFormData
}: InboundFormProps) {
  const { isMobile } = useResponsive();

  if (!isOpen) return null;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
    >
      <motion.div
        initial={{ opacity: 0, scale: 0.95, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.95, y: 20 }}
        className={`bg-white rounded-2xl shadow-2xl ${isMobile ? 'w-full' : 'w-96'}`}
      >
        {/* 头部 */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-gray-50">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
              <Plus className="w-5 h-5 text-white" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900">原坯布生产</h3>
              <p className="text-xs text-gray-500">添加新的入库记录</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>

        {/* 内容 */}
        <div className="p-6">
          <div className="space-y-4">
            <div>
              <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                <Package className="w-4 h-4 text-gray-400" />
                选择产品
              </label>
              <select
                value={formData.product_id}
                onChange={e => setFormData(prev => ({ ...prev, product_id: e.target.value }))}
                className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all bg-white"
              >
                <option value="">请选择产品</option>
                {products.map(p => (
                  <option key={p.id} value={p.id}>
                    {p.product_name}-{p.weight}g-{p.color} ({p.fabric_code})
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                <Hash className="w-4 h-4 text-gray-400" />
                批号
              </label>
              <input
                type="text"
                value={formData.batch_no}
                onChange={e => setFormData(prev => ({ ...prev, batch_no: e.target.value }))}
                placeholder="输入批号"
                className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all"
              />
            </div>

            <div className={`grid ${isMobile ? 'grid-cols-1 gap-4' : 'grid-cols-2 gap-4'}`}>
              <div>
                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                  <Layers className="w-4 h-4 text-gray-400" />
                  匹/件数
                </label>
                <input
                  type="number"
                  value={formData.rolls}
                  onChange={e => setFormData(prev => ({ ...prev, rolls: Number(e.target.value) }))}
                  className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all"
                />
              </div>
              <div>
                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                  <Hash className="w-4 h-4 text-gray-400" />
                  米数
                </label>
                <input
                  type="number"
                  value={formData.meters}
                  onChange={e => setFormData(prev => ({ ...prev, meters: Number(e.target.value) }))}
                  className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all"
                />
              </div>
            </div>

            <div>
              <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                <Tag className="w-4 h-4 text-gray-400" />
                备注
              </label>
              <textarea
                value={formData.notes}
                onChange={e => setFormData(prev => ({ ...prev, notes: e.target.value }))}
                placeholder="可选"
                className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm h-20 resize-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all"
              />
            </div>
          </div>
        </div>

        {/* 底部 */}
        <div className="flex gap-3 p-4 border-t border-gray-200 bg-gray-50">
          <button
            onClick={onClose}
            className={`py-2.5 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-100 font-medium transition-colors ${isMobile ? 'w-full' : 'flex-1'}`}
          >
            取消
          </button>
          <button
            onClick={onSubmit}
            className={`py-2.5 bg-gradient-to-r from-emerald-500 to-green-500 text-white rounded-xl font-medium hover:from-emerald-600 hover:to-green-600 transition-all shadow-md hover:shadow-lg ${isMobile ? 'w-full' : 'flex-1'}`}
          >
            确认入库
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
}
