import { useState } from 'react';
import Input from '../ui/Input';

interface ShippingFormProps {
  onSubmit: (data: any) => void;
}

export default function ShippingForm({ onSubmit }: ShippingFormProps) {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    phone: '',
    address: '',
    province: '',
    district: '',
    subdistrict: '',
    postalCode: ''
  });
  const [errors, setErrors] = useState<Record<string, string>>({});

  const provinces = [
    'กรุงเทพมหานคร', 'นนทบุรี', 'ปทุมธานี', 'สมุทรปราการ', 'สมุทรสาคร',
    'เชียงใหม่', 'ภูเก็ต', 'ขอนแก่น', 'นครราชสีมา', 'สงขลา'
  ];

  const validate = () => {
    const newErrors: Record<string, string> = {};
    if (!formData.firstName) newErrors.firstName = 'กรุณากรอกชื่อ';
    if (!formData.lastName) newErrors.lastName = 'กรุณากรอกนามสกุล';
    if (!formData.phone) newErrors.phone = 'กรุณากรอกเบอร์โทรศัพท์';
    if (!formData.address) newErrors.address = 'กรุณากรอกที่อยู่';
    if (!formData.province) newErrors.province = 'กรุณาเลือกจังหวัด';
    if (!formData.postalCode) newErrors.postalCode = 'กรุณากรอกรหัสไปรษณีย์';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validate()) {
      onSubmit(formData);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid grid-cols-2 gap-4">
        <Input
          label="ชื่อ *"
          value={formData.firstName}
          onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
          error={errors.firstName}
          placeholder="สมชาย"
        />
        <Input
          label="นามสกุล *"
          value={formData.lastName}
          onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
          error={errors.lastName}
          placeholder="ใจดี"
        />
      </div>

      <Input
        label="เบอร์โทรศัพท์ *"
        type="tel"
        value={formData.phone}
        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
        error={errors.phone}
        placeholder="0812345678"
      />

      <div>
        <label className="block text-sm font-medium mb-1">ที่อยู่ *</label>
        <textarea
          value={formData.address}
          onChange={(e) => setFormData({ ...formData, address: e.target.value })}
          className={`w-full border rounded-lg px-3 py-2 h-24 ${errors.address ? 'border-red-500' : ''}`}
          placeholder="123/45 ถนนสุขุมวิท แขวงคลองเตย เขตคลองเตย"
        />
        {errors.address && <p className="text-red-500 text-sm mt-1">{errors.address}</p>}
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">จังหวัด *</label>
          <select
            value={formData.province}
            onChange={(e) => setFormData({ ...formData, province: e.target.value })}
            className={`w-full border rounded-lg px-3 py-2 ${errors.province ? 'border-red-500' : ''}`}
          >
            <option value="">เลือกจังหวัด</option>
            {provinces.map((p) => (
              <option key={p} value={p}>{p}</option>
            ))}
          </select>
          {errors.province && <p className="text-red-500 text-sm mt-1">{errors.province}</p>}
        </div>
        <Input
          label="รหัสไปรษณีย์ *"
          value={formData.postalCode}
          onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
          error={errors.postalCode}
          placeholder="10110"
        />
      </div>

      <button
        type="submit"
        className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700"
      >
        ถัดไป
      </button>
    </form>
  );
}
