import React, { useState, useEffect, useCallback } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import {
  FaSave,
  FaTimes,
  FaBuilding,
  FaUser,
  FaMapMarkerAlt,
  FaCreditCard,
  FaPhone,
  FaEnvelope,
  FaStar,
} from 'react-icons/fa'
import LoadingSpinner from '../../../components/common/LoadingSpinner'
import { mockBusinessParties, mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
import { BusinessParty } from '../../../types/common'
import { Container } from '@/components/shared'

interface ValidationErrors {
  [key: string]: string
}

const SupplierForm: React.FC = () => {
  const navigate = useNavigate()
  const { id } = useParams<{ id: string }>()
  const isEdit = Boolean(id)

  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [errors, setErrors] = useState<ValidationErrors>({})
  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)

  const loadFormData = useCallback(async () => {
    setLoading(true)
    try {
      if (isEdit && id) {
        // Simulate API call
        await new Promise((resolve) => setTimeout(resolve, 1000))

        setFormData(mockBusinessParties.find((s) => s.id === id) || mockBusinessPartyNew)
      }
    } catch (error) {
      console.error('Error loading form data:', error)
    } finally {
      setLoading(false)
    }
  }, [isEdit, id])

  useEffect(() => {
    loadFormData()
  }, [loadFormData])

  const validateForm = (): boolean => {
    const newErrors: ValidationErrors = {}

    if (!formData.code?.trim()) {
      newErrors.customerCode = 'Tedarikçi kodu zorunludur'
    }
    if (!formData.name.trim()) {
      newErrors.companyName = 'Şirket adı zorunludur'
    }
    if (!formData.primaryContact?.fullName?.trim()) {
      newErrors.contactPerson = 'İletişim kişisi zorunludur'
    }
    if (!formData.email?.trim()) {
      newErrors.email = 'Email zorunludur'
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Geçerli bir email adresi girin'
    }
    if (!formData.phone?.trim()) {
      newErrors.phone = 'Telefon numarası zorunludur'
    }
    if (!formData.address?.street?.trim()) {
      newErrors.street = 'Adres zorunludur'
    }
    if (!formData.address?.city.trim()) {
      newErrors.city = 'Şehir zorunludur'
    }
    if (!formData.address?.country.trim()) {
      newErrors.country = 'Ülke zorunludur'
    }
    if (!formData.paymentTerms) {
      newErrors.paymentTerms = 'Ödeme koşulları seçilmelidir'
    }
    if (!formData.supplierType) {
      newErrors.supplierType = 'Tedarikçi tipi seçilmelidir'
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleInputChange = (field: string, value: any) => {
    setFormData((prev) => {
      const keys = field.split('.')
      const updated: any = { ...prev }
      let temp = updated

      keys.forEach((key, index) => {
        if (index === keys.length - 1) {
          temp[key] = value
        } else {
          temp[key] = { ...temp[key] }
          temp = temp[key]
        }
      })

      return updated
    })
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!validateForm()) {
      return
    }

    setSaving(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

      console.log('Supplier data:', {
        ...formData,
        id: isEdit ? id : undefined,
      })

      // Show success message
      alert(isEdit ? 'Tedarikçi başarıyla güncellendi!' : 'Tedarikçi başarıyla oluşturuldu!')

      // Navigate back to list
      navigate('/admin/supplychain')
    } catch (error) {
      console.error('Error saving supplier:', error)
      alert('Bir hata oluştu. Lütfen tekrar deneyin.')
    } finally {
      setSaving(false)
    }
  }

  const handleCancel = () => {
    navigate('/admin/supplychain')
  }

  if (loading) {
    return <LoadingSpinner />
  }

  return (
    <Container>
      <div className="space-y-2">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">
              {isEdit ? 'Tedarikçi Düzenle' : 'Yeni Tedarikçi'}
            </h2>
            <p className="text-sm text-gray-600 mt-1">
              {isEdit
                ? 'Mevcut tedarikçi bilgilerini güncelleyin'
                : 'Yeni tedarikçi bilgilerini girin'}
            </p>
          </div>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="space-y-3">
          {/* Basic Information */}
          <div className="bg-white shadow rounded-lg">
            <div className="px-4 py-3 border-b border-gray-200">
              <h3 className="text-base font-medium text-gray-900 flex items-center">
                <FaBuilding className="w-5 h-5 mr-2" />
                Genel Bilgiler
              </h3>
            </div>

            <div className="px-4 py-3 space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Tedarikçi Kodu *
                  </label>
                  <input
                    type="text"
                    value={formData.code}
                    onChange={(e) => handleInputChange('customerCode', e.target.value)}
                    className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                      errors.customerCode
                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                    }`}
                    placeholder="Örn: SUP001"
                  />
                  {errors.supplierCode && (
                    <p className="mt-1 text-sm text-red-600">{errors.supplierCode}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Tedarikçi Tipi *
                  </label>
                  <select
                    value={formData.supplierType}
                    onChange={(e) => handleInputChange('supplierType', e.target.value)}
                    className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                      errors.supplierType
                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                    }`}
                  >
                    <option value="">Tip seçin</option>
                    <option value="MANUFACTURER">Üretici</option>
                    <option value="DISTRIBUTOR">Distribütör</option>
                    <option value="WHOLESALER">Toptancı</option>
                    <option value="SERVICE_PROVIDER">Hizmet Sağlayıcı</option>
                    <option value="OTHER">Diğer</option>
                  </select>
                  {errors.supplierType && (
                    <p className="mt-1 text-sm text-red-600">{errors.supplierType}</p>
                  )}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Şirket Adı *</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => handleInputChange('companyName', e.target.value)}
                  className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                    errors.companyName
                      ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                      : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                  }`}
                  placeholder="Şirket adı"
                />
                {errors.companyName && (
                  <p className="mt-1 text-sm text-red-600">{errors.companyName}</p>
                )}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Vergi Numarası
                  </label>
                  <input
                    type="text"
                    value={formData.taxNumber}
                    onChange={(e) => handleInputChange('taxNumber', e.target.value)}
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                    placeholder="1234567890"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Sertifikalar
                  </label>
                  <input
                    type="text"
                    value={formData.certifications}
                    onChange={(e) => handleInputChange('certifications', e.target.value)}
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                    placeholder="ISO 9001, ISO 14001, CE"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Contact Information */}
          <div className="bg-white shadow rounded-lg">
            <div className="px-4 py-3 border-b border-gray-200">
              <h3 className="text-base font-medium text-gray-900 flex items-center">
                <FaUser className="w-5 h-5 mr-2" />
                İletişim Bilgileri
              </h3>
            </div>

            <div className="px-4 py-3 space-y-3">
              {/* Primary Contact */}
              <div className="bg-white rounded-lg shadow p-4">
                <h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
                  <FaUser className="w-5 h-5 mr-2" />
                  Ana İletişim Kişisi
                </h3>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-medium text-gray-700 mb-1">Ad *</label>
                    <input
                      type="text"
                      value={formData.primaryContact?.firstName}
                      onChange={(e) =>
                        handleInputChange('primaryContact.firstName', e.target.value)
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      required
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-700 mb-1">Soyad *</label>
                    <input
                      type="text"
                      value={formData.primaryContact?.lastName}
                      onChange={(e) => handleInputChange('primaryContact.lastName', e.target.value)}
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      required
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-700 mb-1">Ünvan</label>
                    <input
                      type="text"
                      value={formData.primaryContact?.title}
                      onChange={(e) => handleInputChange('primaryContact.title', e.target.value)}
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="Genel Müdür, Satış Direktörü vb."
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-700 mb-1">
                      Departman
                    </label>
                    <input
                      type="text"
                      value={formData.primaryContact?.department}
                      onChange={(e) =>
                        handleInputChange('primaryContact.department', e.target.value)
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="Satış, Pazarlama, İnsan Kaynakları vb."
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-700 mb-1">
                      E-posta *
                    </label>
                    <input
                      type="email"
                      value={formData.primaryContact?.email}
                      onChange={(e) => handleInputChange('primaryContact.email', e.target.value)}
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      required
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-700 mb-1">Telefon</label>
                    <input
                      type="tel"
                      value={formData.primaryContact?.phone}
                      onChange={(e) => handleInputChange('primaryContact.phone', e.target.value)}
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="+90 (212) 555 0123"
                    />
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-xs font-medium text-gray-700 mb-1">
                      Mobil Telefon
                    </label>
                    <input
                      type="tel"
                      value={formData.primaryContact?.mobile}
                      onChange={(e) => handleInputChange('primaryContact.mobile', e.target.value)}
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="+90 (555) 123 4567"
                    />
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                  <div className="relative">
                    <FaEnvelope className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                    <input
                      type="email"
                      value={formData.email}
                      onChange={(e) => handleInputChange('email', e.target.value)}
                      className={`block w-full pl-10 pr-3 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                        errors.email
                          ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                          : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                      }`}
                      placeholder="email@example.com"
                    />
                  </div>
                  {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Telefon *</label>
                  <div className="relative">
                    <FaPhone className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                    <input
                      type="tel"
                      value={formData.phone}
                      onChange={(e) => handleInputChange('phone', e.target.value)}
                      className={`block w-full pl-10 pr-3 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                        errors.phone
                          ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                          : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                      }`}
                      placeholder="+90 212 555 0123"
                    />
                  </div>
                  {errors.phone && <p className="mt-1 text-sm text-red-600">{errors.phone}</p>}
                </div>
              </div>
            </div>
          </div>

          {/* Address */}
          <div className="bg-white shadow rounded-lg">
            <div className="px-4 py-3 border-b border-gray-200">
              <h3 className="text-base font-medium text-gray-900 flex items-center">
                <FaMapMarkerAlt className="w-5 h-5 mr-2" />
                Adres Bilgileri
              </h3>
            </div>

            <div className="px-4 py-3 space-y-3">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Adres *</label>
                <input
                  type="text"
                  value={formData.address?.street}
                  onChange={(e) => handleInputChange('address.street', e.target.value)}
                  className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                    errors.street
                      ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                      : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                  }`}
                  placeholder="Sokak, cadde, mahalle"
                />
                {errors.street && <p className="mt-1 text-sm text-red-600">{errors.street}</p>}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Şehir *</label>
                  <input
                    type="text"
                    value={formData.address?.city}
                    onChange={(e) => handleInputChange('address.city', e.target.value)}
                    className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                      errors.city
                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                    }`}
                    placeholder="Şehir"
                  />
                  {errors.city && <p className="mt-1 text-sm text-red-600">{errors.city}</p>}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">İl/Bölge</label>
                  <input
                    type="text"
                    value={formData.address?.state}
                    onChange={(e) => handleInputChange('address.state', e.target.value)}
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                    placeholder="İl/Bölge"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Posta Kodu</label>
                  <input
                    type="text"
                    value={formData.address?.postalCode}
                    onChange={(e) => handleInputChange('address.postalCode', e.target.value)}
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                    placeholder="34000"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Ülke *</label>
                  <input
                    type="text"
                    value={formData.address?.country}
                    onChange={(e) => handleInputChange('address.country', e.target.value)}
                    className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                      errors.country
                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                    }`}
                    placeholder="Ülke"
                  />
                  {errors.country && <p className="mt-1 text-sm text-red-600">{errors.country}</p>}
                </div>
              </div>
            </div>
          </div>

          {/* Financial Information */}
          <div className="bg-white shadow rounded-lg">
            <div className="px-4 py-3 border-b border-gray-200">
              <h3 className="text-base font-medium text-gray-900 flex items-center">
                <FaCreditCard className="w-5 h-5 mr-2" />
                Finansal Bilgiler
              </h3>
            </div>

            <div className="px-4 py-3 space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Kredi Limiti *
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    min="0"
                    value={formData.creditLimit}
                    onChange={(e) =>
                      handleInputChange('creditLimit', parseFloat(e.target.value) || 0)
                    }
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                    placeholder="0.00"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Ödeme Koşulları *
                  </label>
                  <select
                    value={formData.paymentTerms}
                    onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
                    className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
                      errors.paymentTerms
                        ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
                    }`}
                  >
                    <option value="">Ödeme koşulu seçin</option>
                    <option value="CASH">Nakit</option>
                    <option value="NET_15">Net 15 Gün</option>
                    <option value="NET_30">Net 30 Gün</option>
                    <option value="NET_60">Net 60 Gün</option>
                    <option value="NET_90">Net 90 Gün</option>
                  </select>
                  {errors.paymentTerms && (
                    <p className="mt-1 text-sm text-red-600">{errors.paymentTerms}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Para Birimi *
                  </label>
                  <select
                    value={formData.currency}
                    onChange={(e) => handleInputChange('currency', e.target.value)}
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  >
                    <option value="TRY">Türk Lirası (TRY)</option>
                    <option value="USD">Amerikan Doları (USD)</option>
                    <option value="EUR">Euro (EUR)</option>
                  </select>
                </div>
              </div>

              {formData.bankAccounts?.map((account, index) => (
                <div key={account.id || index} className="space-y-3 mb-4">
                  <h4 className="text-md font-semibold text-gray-800">Banka Hesabı {index + 1}</h4>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Banka Adı
                      </label>
                      <input
                        type="text"
                        value={account.bankName}
                        onChange={(e) =>
                          handleInputChange(`bankAccounts.${index}.bankName`, e.target.value)
                        }
                        className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                        placeholder="Banka adı"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Hesap Numarası
                      </label>
                      <input
                        type="text"
                        value={account.accountNumber}
                        onChange={(e) =>
                          handleInputChange(`bankAccounts.${index}.accountNumber`, e.target.value)
                        }
                        className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                        placeholder="Hesap numarası"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">IBAN</label>
                      <input
                        type="text"
                        value={account.iban}
                        onChange={(e) =>
                          handleInputChange(`bankAccounts.${index}.iban`, e.target.value)
                        }
                        className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                        placeholder="TR00 0000 0000 0000 0000 0000 00"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        SWIFT Kodu
                      </label>
                      <input
                        type="text"
                        value={account.swiftCode}
                        onChange={(e) =>
                          handleInputChange(`bankAccounts.${index}.swiftCode`, e.target.value)
                        }
                        className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                        placeholder="SWIFT kodu"
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Performance Ratings */}
          <div className="bg-white shadow rounded-lg">
            <div className="px-4 py-3 border-b border-gray-200">
              <h3 className="text-base font-medium text-gray-900 flex items-center">
                <FaStar className="w-5 h-5 mr-2" />
                Performans Değerlendirmesi
              </h3>
            </div>

            <div className="px-4 py-3 space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Kalite Puanı (1-5)
                  </label>
                  <input
                    type="number"
                    step="0.1"
                    min="1"
                    max="5"
                    value={formData.performanceMetrics?.qualityRating}
                    onChange={(e) =>
                      handleInputChange('qualityRating', parseFloat(e.target.value) || 1)
                    }
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Teslimat Puanı (1-5)
                  </label>
                  <input
                    type="number"
                    step="0.1"
                    min="1"
                    max="5"
                    value={formData.performanceMetrics?.deliveryPerformance}
                    onChange={(e) =>
                      handleInputChange('deliveryRating', parseFloat(e.target.value) || 1)
                    }
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Fiyat Puanı (1-5)
                  </label>
                  <input
                    type="number"
                    step="0.1"
                    min="1"
                    max="5"
                    value={formData.performanceMetrics?.priceCompetitiveness}
                    onChange={(e) =>
                      handleInputChange('priceRating', parseFloat(e.target.value) || 1)
                    }
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Genel Puan (1-5)
                  </label>
                  <input
                    type="number"
                    step="0.1"
                    min="1"
                    max="5"
                    value={formData.performanceMetrics?.overallScore}
                    onChange={(e) =>
                      handleInputChange('overallRating', parseFloat(e.target.value) || 1)
                    }
                    className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  />
                </div>
              </div>

              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="isActive"
                  checked={formData.isActive}
                  onChange={(e) => handleInputChange('isActive', e.target.checked)}
                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
                <label htmlFor="isActive" className="ml-2 block text-sm text-gray-900">
                  Aktif
                </label>
              </div>
            </div>
          </div>

          {/* Form Actions */}
          <div className="flex items-center justify-end space-x-2 bg-white px-4 py-3 rounded-lg shadow">
            <button
              type="button"
              onClick={handleCancel}
              className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              <FaTimes className="w-4 h-4 mr-2" />
              İptal
            </button>
            <button
              type="submit"
              disabled={saving}
              className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {saving ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                  Kaydediliyor...
                </>
              ) : (
                <>
                  <FaSave className="w-4 h-4 mr-2" />
                  {isEdit ? 'Güncelle' : 'Kaydet'}
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </Container>
  )
}

export default SupplierForm