import React from 'react';
import { Button } from '../../../shared-minimal/components/Button';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';
import { useCreateDocument } from '../hooks/useDocuments';
import { documentsApi } from '../api/documents.api';
import type { DocumentType } from '../types/documents.types';
import { useVehicles } from '../../vehicles/hooks/useVehicles';
import type { Vehicle } from '../../vehicles/types/vehicles.types';

interface DocumentFormProps {
  onSuccess?: () => void;
  onCancel?: () => void;
}

export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel }) => {
  const [documentType, setDocumentType] = React.useState<DocumentType>('insurance');
  const [vehicleID, setVehicleID] = React.useState<string>('');
  const [title, setTitle] = React.useState<string>('');
  const [notes, setNotes] = React.useState<string>('');

  // Insurance fields
  const [insuranceCompany, setInsuranceCompany] = React.useState<string>('');
  const [policyNumber, setPolicyNumber] = React.useState<string>('');
  const [effectiveDate, setEffectiveDate] = React.useState<string>('');
  const [expirationDate, setExpirationDate] = React.useState<string>('');
  const [bodilyInjuryPerson, setBodilyInjuryPerson] = React.useState<string>('');
  const [bodilyInjuryIncident, setBodilyInjuryIncident] = React.useState<string>('');
  const [propertyDamage, setPropertyDamage] = React.useState<string>('');
  const [premium, setPremium] = React.useState<string>('');

  // Registration fields
  const [licensePlate, setLicensePlate] = React.useState<string>('');
  const [registrationExpirationDate, setRegistrationExpirationDate] = React.useState<string>('');
  const [registrationCost, setRegistrationCost] = React.useState<string>('');

  // Manual fields
  const [scanForMaintenance, setScanForMaintenance] = React.useState<boolean>(false);

  const [file, setFile] = React.useState<File | null>(null);
  const [uploadProgress, setUploadProgress] = React.useState<number>(0);
  const [error, setError] = React.useState<string | null>(null);

  const { data: vehicles } = useVehicles();
  const create = useCreateDocument();

  const resetForm = () => {
    setTitle('');
    setNotes('');
    setInsuranceCompany('');
    setPolicyNumber('');
    setEffectiveDate('');
    setExpirationDate('');
    setBodilyInjuryPerson('');
    setBodilyInjuryIncident('');
    setPropertyDamage('');
    setPremium('');
    setLicensePlate('');
    setRegistrationExpirationDate('');
    setRegistrationCost('');
    setScanForMaintenance(false);
    setFile(null);
    setUploadProgress(0);
    setError(null);
  };

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

    if (!vehicleID) {
      setError('Please select a vehicle.');
      return;
    }
    if (!title.trim()) {
      setError('Please enter a title.');
      return;
    }

    try {
      const details: Record<string, any> = {};
      let issued_date: string | undefined;
      let expiration_date: string | undefined;

      if (documentType === 'insurance') {
        details.insuranceCompany = insuranceCompany || undefined;
        details.policyNumber = policyNumber || undefined;
        details.bodilyInjuryPerson = bodilyInjuryPerson || undefined;
        details.bodilyInjuryIncident = bodilyInjuryIncident || undefined;
        details.propertyDamage = propertyDamage || undefined;
        details.premium = premium ? parseFloat(premium) : undefined;
        issued_date = effectiveDate || undefined;
        expiration_date = expirationDate || undefined;
      } else if (documentType === 'registration') {
        details.licensePlate = licensePlate || undefined;
        details.cost = registrationCost ? parseFloat(registrationCost) : undefined;
        expiration_date = registrationExpirationDate || undefined;
      }
      // Manual type: no details or dates, just scanForMaintenance flag

      const created = await create.mutateAsync({
        vehicleId: vehicleID,
        documentType: documentType,
        title: title.trim(),
        notes: notes.trim() || undefined,
        details: Object.keys(details).length > 0 ? details : undefined,
        issuedDate: issued_date,
        expirationDate: expiration_date,
        scanForMaintenance: documentType === 'manual' ? scanForMaintenance : undefined,
      });

      if (file) {
        const allowed = new Set(['application/pdf', 'image/jpeg', 'image/png']);
        if (!file.type || !allowed.has(file.type)) {
          setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
          return;
        }
        try {
          await documentsApi.uploadWithProgress(created.id, file, (pct) => setUploadProgress(pct));
        } catch (uploadErr: any) {
          const status = uploadErr?.response?.status;
          if (status === 415) {
            setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
            return;
          }
          setError(uploadErr?.message || 'Failed to upload file');
          return;
        }
      }

      resetForm();
      onSuccess?.();
    } catch (err: any) {
      const status = err?.response?.status;
      if (status === 415) {
        setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
      } else {
        setError(err?.message || 'Failed to create document');
      }
    } finally {
      setUploadProgress(0);
    }
  };

  const vehicleLabel = (v: Vehicle) => {
    if (v.nickname && v.nickname.trim().length > 0) return v.nickname.trim();
    const parts = [v.year, v.make, v.model, v.trimLevel].filter(Boolean);
    const primary = parts.join(' ').trim();
    if (primary.length > 0) return primary;
    if (v.vin && v.vin.length > 0) return v.vin;
    return v.id.slice(0, 8) + '...';
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
    <form onSubmit={handleSubmit} className="w-full">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
        <div className="flex flex-col">
          <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Vehicle</label>
          <select
            className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
            value={vehicleID}
            onChange={(e) => setVehicleID(e.target.value)}
            required
          >
            <option value="">Select vehicle...</option>
            {(vehicles || []).map((v: Vehicle) => (
              <option key={v.id} value={v.id}>{vehicleLabel(v)}</option>
            ))}
          </select>
        </div>

        <div className="flex flex-col">
          <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Document Type</label>
          <select
            className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
            value={documentType}
            onChange={(e) => setDocumentType(e.target.value as DocumentType)}
          >
            <option value="insurance">Insurance</option>
            <option value="registration">Registration</option>
            <option value="manual">Manual</option>
          </select>
        </div>

        <div className="flex flex-col md:col-span-2">
          <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Title</label>
          <input
            className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
            type="text"
            value={title}
            placeholder={
              documentType === 'insurance' ? 'e.g., Progressive Policy 2025' :
              documentType === 'registration' ? 'e.g., Registration 2025' :
              'e.g., Honda CBR600RR Service Manual'
            }
            onChange={(e) => setTitle(e.target.value)}
            required
          />
        </div>

        {documentType === 'insurance' && (
          <>
            <div className="flex flex-col">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Insurance company</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="text"
                value={insuranceCompany}
                onChange={(e) => setInsuranceCompany(e.target.value)}
              />
            </div>
            <div className="flex flex-col">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Policy number</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="text"
                value={policyNumber}
                onChange={(e) => setPolicyNumber(e.target.value)}
              />
            </div>

            <div className="flex flex-col">
              <DatePicker
                label="Effective Date"
                value={effectiveDate ? dayjs(effectiveDate) : null}
                onChange={(newValue) => setEffectiveDate(newValue?.format('YYYY-MM-DD') || '')}
                format="MM/DD/YYYY"
                slotProps={{
                  textField: {
                    fullWidth: true,
                    sx: {
                      '& .MuiOutlinedInput-root': {
                        minHeight: 44,
                      },
                    },
                  },
                }}
              />
            </div>
            <div className="flex flex-col">
              <DatePicker
                label="Expiration Date"
                value={expirationDate ? dayjs(expirationDate) : null}
                onChange={(newValue) => setExpirationDate(newValue?.format('YYYY-MM-DD') || '')}
                format="MM/DD/YYYY"
                slotProps={{
                  textField: {
                    fullWidth: true,
                    sx: {
                      '& .MuiOutlinedInput-root': {
                        minHeight: 44,
                      },
                    },
                  },
                }}
              />
            </div>

            <div className="flex flex-col">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Bodily Injury (Person)</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="text"
                placeholder="$25,000"
                value={bodilyInjuryPerson}
                onChange={(e) => setBodilyInjuryPerson(e.target.value)}
              />
            </div>
            <div className="flex flex-col">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Bodily Injury (Incident)</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="text"
                placeholder="$50,000"
                value={bodilyInjuryIncident}
                onChange={(e) => setBodilyInjuryIncident(e.target.value)}
              />
            </div>

            <div className="flex flex-col">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Property Damage</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="text"
                placeholder="$25,000"
                value={propertyDamage}
                onChange={(e) => setPropertyDamage(e.target.value)}
              />
            </div>
            <div className="flex flex-col">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Premium</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="number"
                step="0.01"
                placeholder="0.00"
                value={premium}
                onChange={(e) => setPremium(e.target.value)}
              />
            </div>
          </>
        )}

        {documentType === 'registration' && (
          <>
            <div className="flex flex-col">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">License Plate</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="text"
                value={licensePlate}
                onChange={(e) => setLicensePlate(e.target.value)}
              />
            </div>
            <div className="flex flex-col">
              <DatePicker
                label="Expiration Date"
                value={registrationExpirationDate ? dayjs(registrationExpirationDate) : null}
                onChange={(newValue) => setRegistrationExpirationDate(newValue?.format('YYYY-MM-DD') || '')}
                format="MM/DD/YYYY"
                slotProps={{
                  textField: {
                    fullWidth: true,
                    sx: {
                      '& .MuiOutlinedInput-root': {
                        minHeight: 44,
                      },
                    },
                  },
                }}
              />
            </div>
            <div className="flex flex-col md:col-span-2">
              <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Cost</label>
              <input
                className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="number"
                step="0.01"
                placeholder="0.00"
                value={registrationCost}
                onChange={(e) => setRegistrationCost(e.target.value)}
              />
            </div>
          </>
        )}

        {documentType === 'manual' && (
          <div className="flex items-center md:col-span-2">
            <label className="flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={scanForMaintenance}
                onChange={(e) => setScanForMaintenance(e.target.checked)}
                className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi"
              />
              <span className="ml-2 text-sm font-medium text-slate-700 dark:text-avus">
                Scan for Maintenance Schedule
              </span>
            </label>
            <span className="ml-2 text-xs text-slate-500 dark:text-titanio">(Coming soon)</span>
          </div>
        )}

        <div className="flex flex-col md:col-span-2">
          <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Notes</label>
          <textarea
            className="min-h-[88px] rounded-lg border px-3 py-2 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
          />
        </div>

        <div className="flex flex-col md:col-span-2">
          <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Upload image/PDF</label>
          <input
            className="h-11 min-h-[44px] rounded-lg border px-3 flex items-center bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-500/10 file:text-primary-600 dark:file:bg-abudhabi/20 dark:file:text-abudhabi"
            type="file"
            accept="image/jpeg,image/png,application/pdf"
            onChange={(e) => setFile(e.target.files?.[0] || null)}
          />
          {uploadProgress > 0 && uploadProgress < 100 && (
            <div className="text-sm text-slate-600 dark:text-titanio mt-1">Uploading... {uploadProgress}%</div>
          )}
        </div>
      </div>

      {error && (
        <div className="text-red-600 dark:text-red-400 text-sm mt-3">{error}</div>
      )}

      <div className="flex flex-col sm:flex-row gap-2 mt-4">
        <Button type="submit" className="min-h-[44px]">Create Document</Button>
        <Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]">Cancel</Button>
      </div>
    </form>
    </LocalizationProvider>
  );
};

export default DocumentForm;