'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { apiFetch } from '@/lib/api'
import { useDashboardI18n } from '@/components/I18nProvider'
import { BilingualField, BilingualInput, bilingualPrimary, emptyBilingual } from '@/components/ui/BilingualInput'

type Customer = {
  id: string
  firstName: string
  lastName: string
  email: string
  phone?: string | null
  driverLicense?: string | null
  dateOfBirth?: string | null
  nationality?: string | null
  address?: Record<string, unknown> | null
  licenseExpiry?: string | null
  licenseIssuedAt?: string | null
  licenseCountry?: string | null
  licenseNumber?: string | null
  licenseCategory?: string | null
  licenseImageUrl?: string | null
}
type Vehicle = { id: string; make: string; model: string; licensePlate: string; status: string }
type AdditionalDriverForm = {
  firstName: BilingualField
  lastName: BilingualField
  email: string
  phone: string
  driverLicense: string
  licenseExpiry: string
  licenseIssuedAt: string
  dateOfBirth: string
  nationality: BilingualField
}

type CreatedReservation = { id: string }

export default function NewReservationPage() {
  const { language } = useDashboardI18n()
  const router = useRouter()

  const [customers, setCustomers] = useState<Customer[]>([])
  const [vehicles, setVehicles] = useState<Vehicle[]>([])
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const [customerId, setCustomerId] = useState('')
  const [customerSearch, setCustomerSearch] = useState('')
  const [vehicleId, setVehicleId] = useState('')
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const [pickupLocation, setPickupLocation] = useState('')
  const [returnLocation, setReturnLocation] = useState('')
  const [depositAmount, setDepositAmount] = useState('0')
  const [paymentMode, setPaymentMode] = useState('CASH')
  const [notes, setNotes] = useState('')
  const [showAddCustomer, setShowAddCustomer] = useState(false)
  const [savingCustomer, setSavingCustomer] = useState(false)
  const [includeAdditionalDriver, setIncludeAdditionalDriver] = useState(false)
  const [newCustomerFirstName, setNewCustomerFirstName] = useState<BilingualField>(emptyBilingual())
  const [newCustomerLastName, setNewCustomerLastName] = useState<BilingualField>(emptyBilingual())
  const [newCustomerEmail, setNewCustomerEmail] = useState('')
  const [newCustomerPhone, setNewCustomerPhone] = useState('')
  const [driverLicense, setDriverLicense] = useState('')
  const [customerDateOfBirth, setCustomerDateOfBirth] = useState('')
  const [customerNationality, setCustomerNationality] = useState('')
  const [customerFullAddress, setCustomerFullAddress] = useState('')
  const [customerIdentityDocumentNumber, setCustomerIdentityDocumentNumber] = useState('')
  const [customerInternationalLicenseNumber, setCustomerInternationalLicenseNumber] = useState('')
  const [licenseExpiry, setLicenseExpiry] = useState('')
  const [licenseIssuedAt, setLicenseIssuedAt] = useState('')
  const [licenseCountry, setLicenseCountry] = useState('')
  const [licenseCategory, setLicenseCategory] = useState('')
  const [licenseImageUrl, setLicenseImageUrl] = useState<string | null>(null)
  const [licenseImageFile, setLicenseImageFile] = useState<File | null>(null)
  const [licenseImagePreviewUrl, setLicenseImagePreviewUrl] = useState<string | null>(null)
  const [additionalDriver, setAdditionalDriver] = useState<AdditionalDriverForm>({
    firstName: emptyBilingual(),
    lastName: emptyBilingual(),
    email: '',
    phone: '',
    driverLicense: '',
    licenseExpiry: '',
    licenseIssuedAt: '',
    dateOfBirth: '',
    nationality: emptyBilingual(),
  })

  const copy = {
    en: {
      title: 'Local Booking',
      subtitle: 'Create a reservation directly from workspace without a previous online reservation.',
      customer: 'Customer',
      searchCustomer: 'Search previous customer',
      vehicle: 'Vehicle',
      startDate: 'Start date & time',
      endDate: 'End date & time',
      pickup: 'Pickup location',
      return: 'Return location',
      deposit: 'Deposit amount (MAD)',
      paymentMode: 'Payment mode',
      renterIdentity: 'Renter identity',
      driverLicenseInfo: 'Driver license information',
      driverLicense: 'Driver license number',
      licenseExpiry: 'License expiry',
      licenseIssuedAt: 'License issued at',
      licenseCountry: 'License country',
      licenseCategory: 'License category',
      fullAddress: 'Full address',
      identityDocumentNumber: 'CIN / Passport number',
      internationalLicenseNumber: 'International permit number',
      licenseImage: 'Driver license image',
      licenseImageHint: 'Upload a photo or scan of the primary driver license.',
      licenseImageSelected: 'Selected file',
      licenseImageCurrent: 'Current image',
      noLicenseImage: 'No license image uploaded yet.',
      addAdditionalDriver: 'Add additional driver',
      additionalDriverInfo: 'Additional driver',
      dateOfBirth: 'Date of birth',
      nationality: 'Nationality',
      notes: 'Notes',
      notesPlaceholder: 'Optional notes…',
      create: 'Create booking',
      creating: 'Creating…',
      cancel: 'Cancel',
      loadFailed: 'Failed to load customers/vehicles.',
      invalidDates: 'End date must be after start date.',
      required: 'Please fill all required fields.',
      selectCustomer: 'Select customer…',
      addCustomer: 'Add customer',
      addCustomerTitle: 'Add new customer',
      firstName: 'First name',
      lastName: 'Last name',
      email: 'Email',
      phone: 'Phone',
      saveCustomer: 'Save customer',
      savingCustomer: 'Saving customer…',
      selectVehicle: 'Select vehicle…',
      noVehicles: 'No available vehicles.',
      paymentModes: {
        CASH: 'Cash',
        CARD: 'Card',
        BANK_TRANSFER: 'Bank transfer',
        AMANPAY: 'AmanPay',
        PAYPAL: 'PayPal',
      } as Record<string, string>,
    },
    fr: {
      title: 'Réservation locale',
      subtitle: 'Créez une réservation directement depuis l’espace, sans réservation en ligne préalable.',
      customer: 'Client',
      searchCustomer: 'Rechercher un client existant',
      vehicle: 'Véhicule',
      startDate: 'Date et heure de départ',
      endDate: 'Date et heure de retour',
      pickup: 'Lieu de départ',
      return: 'Lieu de retour',
      deposit: 'Montant du dépôt (MAD)',
      paymentMode: 'Mode de paiement',
      renterIdentity: 'Identité du locataire',
      driverLicenseInfo: 'Informations du permis',
      driverLicense: 'Numéro du permis',
      licenseExpiry: 'Expiration du permis',
      licenseIssuedAt: 'Permis délivré le',
      licenseCountry: 'Pays du permis',
      licenseCategory: 'Catégorie du permis',
      fullAddress: 'Adresse complète',
      identityDocumentNumber: 'N° CIN / passeport',
      internationalLicenseNumber: 'N° de permis international',
      licenseImage: 'Image du permis',
      licenseImageHint: 'Téléversez une photo ou un scan du permis du conducteur principal.',
      licenseImageSelected: 'Fichier sélectionné',
      licenseImageCurrent: 'Image actuelle',
      noLicenseImage: 'Aucune image de permis téléversée.',
      addAdditionalDriver: 'Ajouter un conducteur supplémentaire',
      additionalDriverInfo: 'Conducteur supplémentaire',
      dateOfBirth: 'Date de naissance',
      nationality: 'Nationalité',
      notes: 'Notes',
      notesPlaceholder: 'Notes optionnelles…',
      create: 'Créer la réservation',
      creating: 'Création…',
      cancel: 'Annuler',
      loadFailed: 'Échec du chargement des clients/véhicules.',
      invalidDates: 'La date de fin doit être après la date de début.',
      required: 'Veuillez remplir tous les champs requis.',
      selectCustomer: 'Sélectionner un client…',
      addCustomer: 'Ajouter un client',
      addCustomerTitle: 'Ajouter un nouveau client',
      firstName: 'Prénom',
      lastName: 'Nom',
      email: 'Email',
      phone: 'Téléphone',
      saveCustomer: 'Enregistrer le client',
      savingCustomer: 'Enregistrement du client…',
      selectVehicle: 'Sélectionner un véhicule…',
      noVehicles: 'Aucun véhicule disponible.',
      paymentModes: {
        CASH: 'Espèces',
        CARD: 'Carte',
        BANK_TRANSFER: 'Virement',
        AMANPAY: 'AmanPay',
        PAYPAL: 'PayPal',
      } as Record<string, string>,
    },
    ar: {
      title: 'حجز محلي',
      subtitle: 'أنشئ حجزًا مباشرة من مساحة العمل بدون حجز إلكتروني مسبق.',
      customer: 'العميل',
      searchCustomer: 'ابحث عن عميل سابق',
      vehicle: 'المركبة',
      startDate: 'تاريخ ووقت البداية',
      endDate: 'تاريخ ووقت النهاية',
      pickup: 'موقع الاستلام',
      return: 'موقع التسليم',
      deposit: 'مبلغ العربون (MAD)',
      paymentMode: 'طريقة الدفع',
      renterIdentity: 'بيانات المستأجر',
      driverLicenseInfo: 'معلومات رخصة القيادة',
      driverLicense: 'رقم رخصة القيادة',
      licenseExpiry: 'تاريخ انتهاء الرخصة',
      licenseIssuedAt: 'تاريخ إصدار الرخصة',
      licenseCountry: 'بلد الرخصة',
      licenseCategory: 'فئة الرخصة',
      fullAddress: 'العنوان الكامل',
      identityDocumentNumber: 'رقم البطاقة الوطنية / جواز السفر',
      internationalLicenseNumber: 'رقم الرخصة الدولية',
      licenseImage: 'صورة رخصة القيادة',
      licenseImageHint: 'ارفع صورة أو مسحًا لرخصة السائق الأساسي.',
      licenseImageSelected: 'الملف المحدد',
      licenseImageCurrent: 'الصورة الحالية',
      noLicenseImage: 'لم يتم رفع صورة الرخصة بعد.',
      addAdditionalDriver: 'إضافة سائق إضافي',
      additionalDriverInfo: 'السائق الإضافي',
      dateOfBirth: 'تاريخ الميلاد',
      nationality: 'الجنسية',
      notes: 'ملاحظات',
      notesPlaceholder: 'ملاحظات اختيارية…',
      create: 'إنشاء الحجز',
      creating: 'جارٍ الإنشاء…',
      cancel: 'إلغاء',
      loadFailed: 'فشل تحميل العملاء/المركبات.',
      invalidDates: 'يجب أن يكون تاريخ النهاية بعد تاريخ البداية.',
      required: 'يرجى تعبئة جميع الحقول المطلوبة.',
      selectCustomer: 'اختر عميلًا…',
      addCustomer: 'إضافة عميل',
      addCustomerTitle: 'إضافة عميل جديد',
      firstName: 'الاسم الأول',
      lastName: 'اسم العائلة',
      email: 'البريد الإلكتروني',
      phone: 'الهاتف',
      saveCustomer: 'حفظ العميل',
      savingCustomer: 'جارٍ حفظ العميل…',
      selectVehicle: 'اختر مركبة…',
      noVehicles: 'لا توجد مركبات متاحة.',
      paymentModes: {
        CASH: 'نقدا',
        CARD: 'بطاقة',
        BANK_TRANSFER: 'تحويل بنكي',
        AMANPAY: 'AmanPay',
        PAYPAL: 'PayPal',
      } as Record<string, string>,
    },
  }[language]

  useEffect(() => {
    Promise.all([
      apiFetch<Customer[]>('/customers?pageSize=100'),
      apiFetch<Vehicle[]>('/vehicles?pageSize=100'),
    ])
      .then(([c, v]) => {
        setCustomers(c ?? [])
        setVehicles(v ?? [])
      })
      .catch((err) => setError(err.message ?? copy.loadFailed))
      .finally(() => setLoading(false))
  }, [])

  const filteredCustomers = (() => {
    const q = customerSearch.trim().toLowerCase()
    if (!q) return customers
    return customers.filter((c) =>
      `${c.firstName} ${c.lastName}`.toLowerCase().includes(q) ||
      c.email.toLowerCase().includes(q),
    )
  })()

  const availableVehicles = vehicles.filter((v) => v.status === 'AVAILABLE')

  const canSubmit = !!customerId && !!vehicleId && !!startDate && !!endDate

  function readCustomerAddressValue(customer: Customer | undefined, key: string) {
    const address = customer?.address
    if (!address || typeof address !== 'object' || Array.isArray(address)) return ''
    const value = address[key]
    return typeof value === 'string' ? value : ''
  }

  useEffect(() => {
    const selected = customers.find((customer) => customer.id === customerId)
    if (!selected) return
    setDriverLicense(selected.driverLicense ?? selected.licenseNumber ?? '')
    setCustomerDateOfBirth(selected.dateOfBirth ? selected.dateOfBirth.slice(0, 10) : '')
    setCustomerNationality(selected.nationality ?? '')
    setCustomerFullAddress(readCustomerAddressValue(selected, 'fullAddress'))
    setCustomerIdentityDocumentNumber(readCustomerAddressValue(selected, 'identityDocumentNumber'))
    setCustomerInternationalLicenseNumber(readCustomerAddressValue(selected, 'internationalLicenseNumber'))
    setLicenseExpiry(selected.licenseExpiry ? selected.licenseExpiry.slice(0, 10) : '')
    setLicenseIssuedAt(selected.licenseIssuedAt ? selected.licenseIssuedAt.slice(0, 10) : '')
    setLicenseCountry(selected.licenseCountry ?? '')
    setLicenseCategory(selected.licenseCategory ?? '')
    setLicenseImageUrl(selected.licenseImageUrl ?? null)
    setLicenseImageFile(null)
  }, [customerId, customers])

  useEffect(() => {
    if (!licenseImageFile) {
      setLicenseImagePreviewUrl(null)
      return
    }

    const objectUrl = URL.createObjectURL(licenseImageFile)
    setLicenseImagePreviewUrl(objectUrl)
    return () => URL.revokeObjectURL(objectUrl)
  }, [licenseImageFile])

  async function uploadLicenseImage(customerIdToUpdate: string) {
    if (!licenseImageFile) return null

    const formData = new FormData()
    formData.append('file', licenseImageFile)

    const updated = await apiFetch<Customer>(`/customers/${customerIdToUpdate}/license-image`, {
      method: 'POST',
      body: formData,
    })

    setCustomers((prev) => prev.map((customer) => customer.id === updated.id ? { ...customer, ...updated } : customer))
    setLicenseImageUrl(updated.licenseImageUrl ?? null)
    setLicenseImageFile(null)
    return updated.licenseImageUrl ?? null
  }

  async function addCustomer() {
    setError(null)
    if (!bilingualPrimary(newCustomerFirstName).trim() || !bilingualPrimary(newCustomerLastName).trim() || !newCustomerEmail.trim() || !newCustomerPhone.trim()) {
      setError(copy.required)
      return
    }
    if (
      !driverLicense.trim() ||
      !customerDateOfBirth ||
      !customerNationality.trim() ||
      !customerFullAddress.trim() ||
      !customerIdentityDocumentNumber.trim() ||
      !licenseExpiry ||
      !licenseIssuedAt ||
      !licenseCountry.trim() ||
      !licenseCategory.trim()
    ) {
      setError(copy.required)
      return
    }
    setSavingCustomer(true)
    try {
      const created = await apiFetch<Customer>('/customers', {
        method: 'POST',
        body: JSON.stringify({
          firstName: bilingualPrimary(newCustomerFirstName).trim(),
          firstNameAr: newCustomerFirstName.ar.trim() || undefined,
          lastName: bilingualPrimary(newCustomerLastName).trim(),
          lastNameAr: newCustomerLastName.ar.trim() || undefined,
          email: newCustomerEmail.trim(),
          phone: newCustomerPhone.trim(),
          driverLicense: driverLicense.trim(),
          dateOfBirth: new Date(customerDateOfBirth).toISOString(),
          nationality: customerNationality.trim(),
          address: {
            fullAddress: customerFullAddress.trim(),
            identityDocumentNumber: customerIdentityDocumentNumber.trim(),
            internationalLicenseNumber: customerInternationalLicenseNumber.trim() || undefined,
          },
          licenseExpiry: new Date(licenseExpiry).toISOString(),
          licenseIssuedAt: new Date(licenseIssuedAt).toISOString(),
          licenseCountry: licenseCountry.trim(),
          licenseNumber: driverLicense.trim(),
          licenseCategory: licenseCategory.trim(),
        }),
      })
      setCustomers((prev) => [created, ...prev])
      setCustomerId(created.id)
      setCustomerSearch(`${bilingualPrimary(newCustomerFirstName)} ${bilingualPrimary(newCustomerLastName)}`)
      setShowAddCustomer(false)
      setNewCustomerFirstName(emptyBilingual())
      setNewCustomerLastName(emptyBilingual())
      setNewCustomerEmail('')
      setNewCustomerPhone('')
      setLicenseImageUrl(created.licenseImageUrl ?? null)

      if (licenseImageFile) {
        await uploadLicenseImage(created.id)
      }
    } catch (err: any) {
      setError(err.message)
    } finally {
      setSavingCustomer(false)
    }
  }

  async function submit() {
    setError(null)
    if (!canSubmit) {
      setError(copy.required)
      return
    }
    const start = new Date(startDate)
    const end = new Date(endDate)
    if (end <= start) {
      setError(copy.invalidDates)
      return
    }
    if (
      !driverLicense.trim() ||
      !customerDateOfBirth ||
      !customerNationality.trim() ||
      !customerFullAddress.trim() ||
      !customerIdentityDocumentNumber.trim() ||
      !licenseExpiry ||
      !licenseIssuedAt ||
      !licenseCountry.trim() ||
      !licenseCategory.trim()
    ) {
      setError(copy.required)
      return
    }
    if (includeAdditionalDriver && (!bilingualPrimary(additionalDriver.firstName).trim() || !bilingualPrimary(additionalDriver.lastName).trim() || !additionalDriver.driverLicense.trim())) {
      setError(copy.required)
      return
    }

    setSaving(true)
    try {
      await apiFetch(`/customers/${customerId}`, {
        method: 'PATCH',
        body: JSON.stringify({
          driverLicense: driverLicense.trim(),
          dateOfBirth: new Date(customerDateOfBirth).toISOString(),
          nationality: customerNationality.trim(),
          address: {
            fullAddress: customerFullAddress.trim(),
            identityDocumentNumber: customerIdentityDocumentNumber.trim(),
            internationalLicenseNumber: customerInternationalLicenseNumber.trim() || undefined,
          },
          licenseExpiry: new Date(licenseExpiry).toISOString(),
          licenseIssuedAt: new Date(licenseIssuedAt).toISOString(),
          licenseCountry: licenseCountry.trim(),
          licenseNumber: driverLicense.trim(),
          licenseCategory: licenseCategory.trim(),
        }),
      })

      if (licenseImageFile) {
        await uploadLicenseImage(customerId)
      }

      const created = await apiFetch<CreatedReservation>('/reservations', {
        method: 'POST',
        body: JSON.stringify({
          customerId,
          vehicleId,
          startDate: start.toISOString(),
          endDate: end.toISOString(),
          pickupLocation: pickupLocation || undefined,
          returnLocation: returnLocation || undefined,
          depositAmount: Number.isFinite(Number(depositAmount)) ? Math.max(0, Math.round(Number(depositAmount))) : 0,
          paymentMode,
          additionalDrivers: includeAdditionalDriver ? [{
            firstName: bilingualPrimary(additionalDriver.firstName).trim(),
            firstNameAr: additionalDriver.firstName.ar.trim() || undefined,
            lastName: bilingualPrimary(additionalDriver.lastName).trim(),
            lastNameAr: additionalDriver.lastName.ar.trim() || undefined,
            email: additionalDriver.email.trim() || undefined,
            phone: additionalDriver.phone.trim() || undefined,
            driverLicense: additionalDriver.driverLicense.trim(),
            licenseExpiry: additionalDriver.licenseExpiry ? new Date(additionalDriver.licenseExpiry).toISOString() : undefined,
            licenseIssuedAt: additionalDriver.licenseIssuedAt ? new Date(additionalDriver.licenseIssuedAt).toISOString() : undefined,
            dateOfBirth: additionalDriver.dateOfBirth ? new Date(additionalDriver.dateOfBirth).toISOString() : undefined,
            nationality: bilingualPrimary(additionalDriver.nationality).trim() || undefined,
            nationalityAr: additionalDriver.nationality.ar.trim() || undefined,
          }] : [],
          notes: notes || undefined,
        }),
      })
      router.push(`/reservations/${created.id}`)
    } catch (err: any) {
      setError(err.message)
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="space-y-6 max-w-3xl">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
          <p className="text-sm text-slate-500 mt-1">{copy.subtitle}</p>
        </div>
      </div>

      {error ? <div className="card p-4 text-sm text-red-700">{error}</div> : null}

      <div className="card p-6 space-y-4">
        {loading ? (
          <p className="text-sm text-slate-500">Loading…</p>
        ) : (
          <>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <label className="space-y-1">
                <span className="text-sm font-medium text-slate-700">{copy.customer} <span className="text-red-600">*</span></span>
                <input
                  value={customerSearch}
                  onChange={(e) => setCustomerSearch(e.target.value)}
                  placeholder={copy.searchCustomer}
                  className="input-field mb-2"
                />
                <select value={customerId} onChange={(e) => setCustomerId(e.target.value)} className="input-field">
                  <option value="">{copy.selectCustomer}</option>
                  {filteredCustomers.map((c) => (
                    <option key={c.id} value={c.id}>{c.firstName} {c.lastName} · {c.email}</option>
                  ))}
                </select>
                <button
                  type="button"
                  className="text-xs font-semibold text-blue-700 hover:underline mt-1"
                  onClick={() => setShowAddCustomer((v) => !v)}
                >
                  {copy.addCustomer}
                </button>

                {showAddCustomer ? (
                  <div className="mt-2 rounded-lg border border-slate-200 p-3 space-y-2 bg-slate-50">
                    <p className="text-xs font-semibold text-slate-700">{copy.addCustomerTitle}</p>
                    <BilingualInput label={copy.firstName} required value={newCustomerFirstName} onChange={setNewCustomerFirstName} />
                    <BilingualInput label={copy.lastName} required value={newCustomerLastName} onChange={setNewCustomerLastName} />
                    <div className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.email} <span className="text-red-600">*</span></span>
                      <input value={newCustomerEmail} onChange={(e) => setNewCustomerEmail(e.target.value)} className="input-field" />
                    </div>
                    <div className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.phone} <span className="text-red-600">*</span></span>
                      <input required value={newCustomerPhone} onChange={(e) => setNewCustomerPhone(e.target.value)} className="input-field" />
                    </div>
                    <div className="flex justify-end">
                      <button type="button" className="btn-secondary" onClick={addCustomer} disabled={savingCustomer}>
                        {savingCustomer ? copy.savingCustomer : copy.saveCustomer}
                      </button>
                    </div>
                  </div>
                ) : null}
              </label>

              <label className="space-y-1">
                <span className="text-sm font-medium text-slate-700">{copy.vehicle} <span className="text-red-600">*</span></span>
                <select value={vehicleId} onChange={(e) => setVehicleId(e.target.value)} className="input-field">
                  <option value="">{copy.selectVehicle}</option>
                  {availableVehicles.map((v) => (
                    <option key={v.id} value={v.id}>{v.make} {v.model} · {v.licensePlate}</option>
                  ))}
                </select>
                {vehicles.length === 0 ? (
                  <span className="text-xs text-orange-700">{copy.noVehicles}</span>
                ) : availableVehicles.length === 0 ? (
                  <span className="text-xs text-orange-700">
                    {language === 'fr'
                      ? 'Des véhicules existent dans la flotte, mais aucun n’est marqué Disponible.'
                      : language === 'ar'
                        ? 'توجد مركبات في الأسطول، لكن لا توجد مركبة بحالة متاحة.'
                        : 'Vehicles exist in fleet, but none are marked Available.'}
                  </span>
                ) : null}
              </label>
            </div>

            <div className="rounded-xl border border-slate-200 p-4 space-y-4">
              <p className="text-sm font-semibold text-slate-900">{copy.renterIdentity}</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.dateOfBirth} <span className="text-red-600">*</span></span>
                  <input type="date" value={customerDateOfBirth} onChange={(e) => setCustomerDateOfBirth(e.target.value)} className="input-field" />
                </label>
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.nationality} <span className="text-red-600">*</span></span>
                  <input value={customerNationality} onChange={(e) => setCustomerNationality(e.target.value)} className="input-field" />
                </label>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.identityDocumentNumber} <span className="text-red-600">*</span></span>
                  <input value={customerIdentityDocumentNumber} onChange={(e) => setCustomerIdentityDocumentNumber(e.target.value)} className="input-field" />
                </label>
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.internationalLicenseNumber}</span>
                  <input value={customerInternationalLicenseNumber} onChange={(e) => setCustomerInternationalLicenseNumber(e.target.value)} className="input-field" />
                </label>
              </div>
              <label className="space-y-1 block">
                <span className="text-sm font-medium text-slate-700">{copy.fullAddress} <span className="text-red-600">*</span></span>
                <textarea value={customerFullAddress} onChange={(e) => setCustomerFullAddress(e.target.value)} className="input-field min-h-[88px]" />
              </label>
            </div>

            <div className="rounded-xl border border-slate-200 p-4 space-y-4">
              <p className="text-sm font-semibold text-slate-900">{copy.driverLicenseInfo}</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.driverLicense} <span className="text-red-600">*</span></span>
                  <input value={driverLicense} onChange={(e) => setDriverLicense(e.target.value)} className="input-field" />
                </label>
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.licenseCountry} <span className="text-red-600">*</span></span>
                  <input value={licenseCountry} onChange={(e) => setLicenseCountry(e.target.value)} className="input-field" />
                </label>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.licenseIssuedAt} <span className="text-red-600">*</span></span>
                  <input type="date" value={licenseIssuedAt} onChange={(e) => setLicenseIssuedAt(e.target.value)} className="input-field" />
                </label>
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.licenseExpiry} <span className="text-red-600">*</span></span>
                  <input type="date" value={licenseExpiry} onChange={(e) => setLicenseExpiry(e.target.value)} className="input-field" />
                </label>
                <label className="space-y-1">
                  <span className="text-sm font-medium text-slate-700">{copy.licenseCategory} <span className="text-red-600">*</span></span>
                  <input value={licenseCategory} onChange={(e) => setLicenseCategory(e.target.value)} className="input-field" />
                </label>
              </div>
              <div className="space-y-2">
                <label className="space-y-1 block">
                  <span className="text-sm font-medium text-slate-700">{copy.licenseImage}</span>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => setLicenseImageFile(e.target.files?.[0] ?? null)}
                    className="input-field"
                  />
                </label>
                <p className="text-xs text-slate-500">{copy.licenseImageHint}</p>
                {licenseImageFile ? (
                  <p className="text-xs font-medium text-slate-700">{copy.licenseImageSelected}: {licenseImageFile.name}</p>
                ) : licenseImageUrl ? (
                  <p className="text-xs font-medium text-slate-700">{copy.licenseImageCurrent}</p>
                ) : (
                  <p className="text-xs text-slate-500">{copy.noLicenseImage}</p>
                )}
                {licenseImagePreviewUrl || licenseImageUrl ? (
                  <img
                    src={licenseImagePreviewUrl ?? licenseImageUrl ?? ''}
                    alt="Driver license preview"
                    className="h-40 w-full max-w-sm rounded-xl border border-slate-200 object-cover"
                  />
                ) : null}
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <label className="space-y-1">
                <span className="text-sm font-medium text-slate-700">{copy.startDate} <span className="text-red-600">*</span></span>
                <input type="datetime-local" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="input-field" />
              </label>
              <label className="space-y-1">
                <span className="text-sm font-medium text-slate-700">{copy.endDate} <span className="text-red-600">*</span></span>
                <input type="datetime-local" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="input-field" />
              </label>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <label className="space-y-1">
                <span className="text-sm font-medium text-slate-700">{copy.pickup}</span>
                <input value={pickupLocation} onChange={(e) => setPickupLocation(e.target.value)} className="input-field" />
              </label>
              <label className="space-y-1">
                <span className="text-sm font-medium text-slate-700">{copy.return}</span>
                <input value={returnLocation} onChange={(e) => setReturnLocation(e.target.value)} className="input-field" />
              </label>
            </div>

            <label className="space-y-1 block">
              <span className="text-sm font-medium text-slate-700">{copy.deposit}</span>
              <input type="number" min={0} value={depositAmount} onChange={(e) => setDepositAmount(e.target.value)} className="input-field" />
            </label>

            <label className="space-y-1 block">
              <span className="text-sm font-medium text-slate-700">{copy.paymentMode}</span>
              <select value={paymentMode} onChange={(e) => setPaymentMode(e.target.value)} className="input-field">
                {(['CASH', 'CARD', 'BANK_TRANSFER', 'AMANPAY', 'PAYPAL'] as const).map((mode) => (
                  <option key={mode} value={mode}>{copy.paymentModes[mode]}</option>
                ))}
              </select>
            </label>

            <div className="rounded-xl border border-slate-200 p-4 space-y-4">
              <label className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={includeAdditionalDriver}
                  onChange={(e) => setIncludeAdditionalDriver(e.target.checked)}
                  className="h-4 w-4 rounded border-slate-300 text-blue-600"
                />
                <span className="text-sm font-medium text-slate-900">{copy.addAdditionalDriver}</span>
              </label>

              {includeAdditionalDriver ? (
                <div className="space-y-4">
                  <p className="text-sm font-semibold text-slate-900">{copy.additionalDriverInfo}</p>
                  <BilingualInput label={copy.firstName} required value={additionalDriver.firstName} onChange={(v) => setAdditionalDriver((cur) => ({ ...cur, firstName: v }))} />
                  <BilingualInput label={copy.lastName} required value={additionalDriver.lastName} onChange={(v) => setAdditionalDriver((cur) => ({ ...cur, lastName: v }))} />

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <label className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.email}</span>
                      <input
                        value={additionalDriver.email}
                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, email: e.target.value }))}
                        className="input-field"
                      />
                    </label>
                    <label className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.phone}</span>
                      <input
                        value={additionalDriver.phone}
                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, phone: e.target.value }))}
                        className="input-field"
                      />
                    </label>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <label className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.driverLicense} <span className="text-red-600">*</span></span>
                      <input
                        value={additionalDriver.driverLicense}
                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, driverLicense: e.target.value }))}
                        className="input-field"
                      />
                    </label>
                    <div className="space-y-1">
                      <BilingualInput label={copy.nationality} value={additionalDriver.nationality} onChange={(v) => setAdditionalDriver((cur) => ({ ...cur, nationality: v }))} />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <label className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.dateOfBirth}</span>
                      <input
                        type="date"
                        value={additionalDriver.dateOfBirth}
                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, dateOfBirth: e.target.value }))}
                        className="input-field"
                      />
                    </label>
                    <label className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.licenseIssuedAt}</span>
                      <input
                        type="date"
                        value={additionalDriver.licenseIssuedAt}
                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, licenseIssuedAt: e.target.value }))}
                        className="input-field"
                      />
                    </label>
                    <label className="space-y-1">
                      <span className="text-sm font-medium text-slate-700">{copy.licenseExpiry}</span>
                      <input
                        type="date"
                        value={additionalDriver.licenseExpiry}
                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, licenseExpiry: e.target.value }))}
                        className="input-field"
                      />
                    </label>
                  </div>
                </div>
              ) : null}
            </div>

            <label className="space-y-1 block">
              <span className="text-sm font-medium text-slate-700">{copy.notes}</span>
              <textarea value={notes} onChange={(e) => setNotes(e.target.value)} className="input-field min-h-[96px]" placeholder={copy.notesPlaceholder} />
            </label>

            <div className="pt-2 flex items-center justify-end gap-3">
              <button type="button" className="btn-secondary" onClick={() => router.push('/reservations')}>
                {copy.cancel}
              </button>
              <button type="button" className="btn-primary" onClick={submit} disabled={saving || !canSubmit}>
                {saving ? copy.creating : copy.create}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  )
}
