import React from 'react';
import { Button } from '../../../shared-minimal/components/Button';
import { UpgradeRequiredDialog } from '../../../shared-minimal/components/UpgradeRequiredDialog';
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 { Checkbox, FormControlLabel, LinearProgress } from '@mui/material';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import dayjs from 'dayjs';
import { useCreateDocument, useUpdateDocument, useAddSharedVehicle, useRemoveVehicleFromDocument } from '../hooks/useDocuments';
import { documentsApi } from '../api/documents.api';
import type { DocumentType, DocumentRecord } from '../types/documents.types';
import { useVehicles } from '../../vehicles/hooks/useVehicles';
import type { Vehicle } from '../../vehicles/types/vehicles.types';
import { useTierAccess } from '../../../core/hooks/useTierAccess';
import { useManualExtraction } from '../hooks/useManualExtraction';
import { MaintenanceScheduleReviewScreen } from '../../maintenance/components/MaintenanceScheduleReviewScreen';

interface DocumentFormProps {
  mode?: 'create' | 'edit';
  initialValues?: Partial<DocumentRecord>;
  documentId?: string;
  onSuccess?: () => void;
  onCancel?: () => void;
}

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

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

  // Registration fields
  const [licensePlate, setLicensePlate] = React.useState<string>(
    initialValues?.details?.licensePlate || ''
  );
  const [registrationExpirationDate, setRegistrationExpirationDate] = React.useState<string>(
    initialValues?.expirationDate || ''
  );
  const [registrationCost, setRegistrationCost] = React.useState<string>(
    initialValues?.details?.cost ? String(initialValues.details.cost) : ''
  );

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

  // Shared vehicles for edit mode
  const [selectedSharedVehicles, setSelectedSharedVehicles] = React.useState<string[]>(
    initialValues?.sharedVehicleIds || []
  );

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

  const { data: vehicles } = useVehicles();
  const create = useCreateDocument();
  const update = useUpdateDocument(documentId || '');
  const addSharedVehicle = useAddSharedVehicle();
  const removeSharedVehicle = useRemoveVehicleFromDocument();
  const { hasAccess } = useTierAccess();
  const canScanMaintenance = hasAccess('document.scanMaintenanceSchedule');
  const extraction = useManualExtraction();
  const [reviewDialogOpen, setReviewDialogOpen] = React.useState(false);

  // Open review dialog when extraction completes
  React.useEffect(() => {
    if (extraction.status === 'completed' && extraction.result) {
      setReviewDialogOpen(true);
    }
  }, [extraction.status, extraction.result]);

  const isExtracting = extraction.status === 'pending' || extraction.status === 'processing';

  const handleReviewClose = () => {
    setReviewDialogOpen(false);
    extraction.reset();
    resetForm();
    onSuccess?.();
  };

  const handleSchedulesCreated = (_count: number) => {
    setReviewDialogOpen(false);
    extraction.reset();
    resetForm();
    onSuccess?.();
  };

  const resetForm = () => {
    setTitle('');
    setNotes('');
    setInsuranceCompany('');
    setPolicyNumber('');
    setEffectiveDate('');
    setExpirationDate('');
    setBodilyInjuryPerson('');
    setBodilyInjuryIncident('');
    setPropertyDamage('');
    setPremium('');
    setLicensePlate('');
    setRegistrationExpirationDate('');
    setRegistrationCost('');
    setScanForMaintenance(false);
    setSelectedSharedVehicles([]);
    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 (!documentType) {
      setError('Please select a document type.');
      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

      if (mode === 'edit' && documentId) {
        // Update existing document
        await update.mutateAsync({
          title: title.trim(),
          notes: notes.trim() || null,
          details: Object.keys(details).length > 0 ? details : undefined,
          issuedDate: issued_date || null,
          expirationDate: expiration_date || null,
          scanForMaintenance: documentType === 'manual' ? scanForMaintenance : undefined,
        });

        // Handle shared vehicles only for insurance documents
        if (documentType === 'insurance') {
          const currentSharedVehicleIds = initialValues?.sharedVehicleIds || [];

          // Add new shared vehicles
          const vehiclesToAdd = selectedSharedVehicles.filter(
            id => !currentSharedVehicleIds.includes(id)
          );
          for (const vehicleId of vehiclesToAdd) {
            await addSharedVehicle.mutateAsync({ docId: documentId, vehicleId });
          }

          // Remove unselected shared vehicles
          const vehiclesToRemove = currentSharedVehicleIds.filter(
            id => !selectedSharedVehicles.includes(id)
          );
          for (const vehicleId of vehiclesToRemove) {
            await removeSharedVehicle.mutateAsync({ docId: documentId, vehicleId });
          }
        }

        // Handle file upload if a new file was selected
        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(documentId, 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;
          }
        }

        onSuccess?.();
      } else {
        // Create new document
        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;
          }

          // Trigger manual extraction if scan checkbox was checked
          if (scanForMaintenance && documentType === 'manual' && file.type === 'application/pdf') {
            try {
              await extraction.submit(file, vehicleID);
              // Don't call onSuccess yet - wait for extraction and review
              return;
            } catch (extractionErr: any) {
              setError(extractionErr?.message || 'Failed to start maintenance extraction');
              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 ${mode === 'edit' ? 'update' : '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) + '...';
  };

  // Filter out the primary vehicle from shared vehicle options
  const sharedVehicleOptions = (vehicles || []).filter(v => v.id !== vehicleID);

  const handleSharedVehicleToggle = (vehicleId: string) => {
    setSelectedSharedVehicles(prev =>
      prev.includes(vehicleId)
        ? prev.filter(id => id !== vehicleId)
        : [...prev, vehicleId]
    );
  };

  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
            disabled={mode === 'edit'}
          >
            <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)}
            disabled={mode === 'edit'}
            required
          >
            <option value="" disabled>Select a document type...</option>
            <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>

            {mode === 'edit' && sharedVehicleOptions.length > 0 && (
              <div className="flex flex-col md:col-span-2">
                <label className="text-sm font-medium text-slate-700 dark:text-avus mb-2">
                  Share with other vehicles
                </label>
                <div className="space-y-1 p-3 border border-slate-300 dark:border-silverstone rounded-lg bg-slate-50 dark:bg-scuro/50 max-h-40 overflow-y-auto">
                  {sharedVehicleOptions.map((v) => (
                    <FormControlLabel
                      key={v.id}
                      control={
                        <Checkbox
                          checked={selectedSharedVehicles.includes(v.id)}
                          onChange={() => handleSharedVehicleToggle(v.id)}
                          color="primary"
                          sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
                        />
                      }
                      label={vehicleLabel(v)}
                      sx={{
                        width: '100%',
                        minHeight: 44,
                        mx: 0,
                        px: 1,
                        borderRadius: 1,
                        '&:hover': {
                          bgcolor: 'action.hover',
                        },
                        '& .MuiFormControlLabel-label': {
                          fontSize: '0.875rem',
                          color: 'text.primary',
                        },
                      }}
                    />
                  ))}
                </div>
              </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">
            <FormControlLabel
              control={
                <Checkbox
                  checked={canScanMaintenance ? scanForMaintenance : false}
                  onChange={(e) => canScanMaintenance && setScanForMaintenance(e.target.checked)}
                  disabled={!canScanMaintenance}
                  color="primary"
                  sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
                />
              }
              label="Scan for Maintenance Schedule"
              sx={{
                opacity: canScanMaintenance ? 1 : 0.6,
                cursor: canScanMaintenance ? 'pointer' : 'not-allowed',
                '& .MuiFormControlLabel-label': {
                  fontSize: '0.875rem',
                  fontWeight: 500,
                  color: 'text.primary',
                },
              }}
            />
            {!canScanMaintenance && (
              <button
                type="button"
                onClick={() => setUpgradeDialogOpen(true)}
                className="ml-1 p-1 text-slate-500 hover:text-primary-600 dark:text-titanio dark:hover:text-abudhabi transition-colors"
                title="Upgrade to Pro to unlock this feature"
              >
                <LockOutlinedIcon fontSize="small" />
              </button>
            )}
            {canScanMaintenance && scanForMaintenance && (
              <span className="ml-1 text-xs text-slate-500 dark:text-titanio">PDF will be scanned after upload</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">
            {mode === 'edit' ? 'Upload new image/PDF (optional)' : 'Upload image/PDF'}
          </label>
          <div className="flex items-center h-11 min-h-[44px] rounded-lg border px-3 bg-white border-slate-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-500 dark:bg-scuro dark:border-silverstone dark:focus-within:ring-abudhabi dark:focus-within:border-abudhabi">
            <input
              className="flex-1 text-gray-900 dark:text-avus 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 file:cursor-pointer cursor-pointer"
              type="file"
              accept="image/jpeg,image/png,application/pdf"
              onChange={(e) => setFile(e.target.files?.[0] || null)}
            />
          </div>
          {uploadProgress > 0 && uploadProgress < 100 && (
            <div className="text-sm text-slate-600 dark:text-titanio mt-1">Uploading... {uploadProgress}%</div>
          )}
        </div>

        {isExtracting && (
          <div className="md:col-span-2 mt-2">
            <div className="flex items-center gap-3 p-3 rounded-lg border border-primary-200 bg-primary-50 dark:border-abudhabi/30 dark:bg-scuro">
              <div className="flex-1">
                <div className="text-sm font-medium text-slate-700 dark:text-avus mb-1">
                  Scanning manual for maintenance schedules...
                </div>
                <LinearProgress
                  variant={extraction.progress > 0 ? 'determinate' : 'indeterminate'}
                  value={extraction.progress}
                  sx={{ borderRadius: 1 }}
                />
                <div className="text-xs text-slate-500 dark:text-titanio mt-1">
                  {extraction.progress >= 100 ? '100% - Complete' :
                   extraction.progress >= 95 ? `${extraction.progress}% - Mapping maintenance schedules...` :
                   extraction.progress >= 50 ? `${extraction.progress}% - Processing maintenance data...` :
                   extraction.progress >= 10 ? `${extraction.progress}% - Preparing document...` :
                   extraction.progress > 0 ? `${extraction.progress}% complete` :
                   'Starting extraction...'}
                </div>
              </div>
            </div>
          </div>
        )}

        {extraction.status === 'failed' && extraction.error && (
          <div className="md:col-span-2 mt-2">
            <div className="text-red-600 dark:text-red-400 text-sm p-3 rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20">
              Extraction failed: {extraction.error}
            </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]" disabled={isExtracting}>
          {isExtracting ? 'Scanning...' : mode === 'edit' ? 'Save Changes' : 'Create Document'}
        </Button>
        <Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]" disabled={isExtracting}>Cancel</Button>
      </div>

      <UpgradeRequiredDialog
        featureKey="document.scanMaintenanceSchedule"
        open={upgradeDialogOpen}
        onClose={() => setUpgradeDialogOpen(false)}
      />

      {extraction.result && (
        <MaintenanceScheduleReviewScreen
          open={reviewDialogOpen}
          items={extraction.result.maintenanceSchedules}
          vehicleId={vehicleID}
          onClose={handleReviewClose}
          onCreated={handleSchedulesCreated}
        />
      )}
    </form>
    </LocalizationProvider>
  );
};

export default DocumentForm;