motovaultpro/frontend/src/features/vehicles/components/VinOcrReviewModal.tsx

/**
 * @ai-summary Modal to review VIN OCR results with editable cascade dropdowns
 * @ai-context Shows extracted VIN with OCR confidence, editable vehicle dropdowns, accept/retake options
 */

import React, { useState, useEffect } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Box,
  Typography,
  Alert,
  useTheme,
  useMediaQuery,
  Drawer,
  LinearProgress,
} from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import WarningIcon from '@mui/icons-material/Warning';
import ErrorIcon from '@mui/icons-material/Error';
import CameraAltIcon from '@mui/icons-material/CameraAlt';
import { VinCaptureResult } from '../hooks/useVinOcr';
import { VinReviewSelections } from '../types/vehicles.types';
import { vehiclesApi } from '../api/vehicles.api';

interface VinOcrReviewModalProps {
  open: boolean;
  result: VinCaptureResult | null;
  onAccept: (selections: VinReviewSelections) => void;
  onRetake: () => void;
  onClose: () => void;
}

/** Get confidence level from OCR percentage */
function getConfidenceLevel(confidence: number): 'high' | 'medium' | 'low' {
  if (confidence >= 0.9) return 'high';
  if (confidence >= 0.7) return 'medium';
  return 'low';
}

/** VIN OCR confidence indicator with percentage */
const ConfidenceIndicator: React.FC<{ level: 'high' | 'medium' | 'low'; percentage: number }> = ({
  level,
  percentage,
}) => {
  const configs = {
    high: { color: 'success.main', icon: CheckCircleIcon, label: 'High' },
    medium: { color: 'warning.main', icon: WarningIcon, label: 'Medium' },
    low: { color: 'error.light', icon: ErrorIcon, label: 'Low' },
  };

  const config = configs[level];
  const Icon = config.icon;

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
      <Icon sx={{ fontSize: 16, color: config.color }} />
      <Typography variant="caption" sx={{ color: config.color }}>
        {config.label} ({Math.round(percentage * 100)}%)
      </Typography>
    </Box>
  );
};

/** Shared select classes matching VehicleForm styling */
const selectClasses =
  'w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-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';

/** Main modal content with cascade dropdowns */
const ReviewContent: React.FC<{
  result: VinCaptureResult;
  onAccept: (selections: VinReviewSelections) => void;
  onRetake: () => void;
}> = ({ result, onAccept, onRetake }) => {
  const { ocrResult, decodedVehicle, decodeError } = result;
  const vinConfidenceLevel = getConfidenceLevel(ocrResult.confidence);

  // Dropdown option arrays
  const [years, setYears] = useState<number[]>([]);
  const [makes, setMakes] = useState<string[]>([]);
  const [models, setModels] = useState<string[]>([]);
  const [trims, setTrims] = useState<string[]>([]);
  const [engines, setEngines] = useState<string[]>([]);
  const [transmissions, setTransmissions] = useState<string[]>([]);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false);

  // Selected values
  const [selectedYear, setSelectedYear] = useState<number | undefined>(undefined);
  const [selectedMake, setSelectedMake] = useState('');
  const [selectedModel, setSelectedModel] = useState('');
  const [selectedTrim, setSelectedTrim] = useState('');
  const [selectedEngine, setSelectedEngine] = useState('');
  const [selectedTransmission, setSelectedTransmission] = useState('');

  // Source reference values for unmatched fields
  const [sourceRefs, setSourceRefs] = useState<Record<string, string | null>>({});

  // Initialize dropdown options and pre-select decoded values
  useEffect(() => {
    const initialize = async () => {
      setLoadingDropdowns(true);

      try {
        const yearsData = await vehiclesApi.getYears();
        setYears(yearsData);

        if (!decodedVehicle) return;

        // Store source reference values for unmatched fields
        setSourceRefs({
          make: decodedVehicle.make.confidence === 'none' ? decodedVehicle.make.sourceValue : null,
          model: decodedVehicle.model.confidence === 'none' ? decodedVehicle.model.sourceValue : null,
          trim: decodedVehicle.trimLevel.confidence === 'none' ? decodedVehicle.trimLevel.sourceValue : null,
          engine: decodedVehicle.engine.confidence === 'none' ? decodedVehicle.engine.sourceValue : null,
          transmission: decodedVehicle.transmission.confidence === 'none' ? decodedVehicle.transmission.sourceValue : null,
        });

        const yearValue = decodedVehicle.year.value;
        if (!yearValue) return;

        setSelectedYear(yearValue);
        const makesData = await vehiclesApi.getMakes(yearValue);
        setMakes(makesData);

        const makeValue = decodedVehicle.make.value;
        if (!makeValue) return;

        setSelectedMake(makeValue);
        const modelsData = await vehiclesApi.getModels(yearValue, makeValue);
        setModels(modelsData);

        const modelValue = decodedVehicle.model.value;
        if (!modelValue) return;

        setSelectedModel(modelValue);
        const trimsData = await vehiclesApi.getTrims(yearValue, makeValue, modelValue);
        setTrims(trimsData);

        const trimValue = decodedVehicle.trimLevel.value;
        if (!trimValue) return;

        setSelectedTrim(trimValue);
        const [enginesData, transmissionsData] = await Promise.all([
          vehiclesApi.getEngines(yearValue, makeValue, modelValue, trimValue),
          vehiclesApi.getTransmissions(yearValue, makeValue, modelValue, trimValue),
        ]);
        setEngines(enginesData);
        setTransmissions(transmissionsData);

        if (decodedVehicle.engine.value) setSelectedEngine(decodedVehicle.engine.value);
        if (decodedVehicle.transmission.value) setSelectedTransmission(decodedVehicle.transmission.value);
      } catch (error) {
        console.error('Failed to initialize review modal dropdowns:', error);
      } finally {
        setLoadingDropdowns(false);
      }
    };

    initialize();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Cascade handlers
  const handleYearChange = async (year: number | undefined) => {
    setSelectedYear(year);
    setSelectedMake('');
    setSelectedModel('');
    setSelectedTrim('');
    setSelectedEngine('');
    setSelectedTransmission('');
    setModels([]);
    setTrims([]);
    setEngines([]);
    setTransmissions([]);

    if (year) {
      setLoadingDropdowns(true);
      try {
        const makesData = await vehiclesApi.getMakes(year);
        setMakes(makesData);
      } catch {
        setMakes([]);
      } finally {
        setLoadingDropdowns(false);
      }
    } else {
      setMakes([]);
    }
  };

  const handleMakeChange = async (make: string) => {
    setSelectedMake(make);
    setSelectedModel('');
    setSelectedTrim('');
    setSelectedEngine('');
    setSelectedTransmission('');
    setTrims([]);
    setEngines([]);
    setTransmissions([]);

    if (make && selectedYear) {
      setLoadingDropdowns(true);
      try {
        const modelsData = await vehiclesApi.getModels(selectedYear, make);
        setModels(modelsData);
      } catch {
        setModels([]);
      } finally {
        setLoadingDropdowns(false);
      }
    } else {
      setModels([]);
    }
  };

  const handleModelChange = async (model: string) => {
    setSelectedModel(model);
    setSelectedTrim('');
    setSelectedEngine('');
    setSelectedTransmission('');
    setEngines([]);
    setTransmissions([]);

    if (model && selectedYear && selectedMake) {
      setLoadingDropdowns(true);
      try {
        const trimsData = await vehiclesApi.getTrims(selectedYear, selectedMake, model);
        setTrims(trimsData);
      } catch {
        setTrims([]);
      } finally {
        setLoadingDropdowns(false);
      }
    } else {
      setTrims([]);
    }
  };

  const handleTrimChange = async (trim: string) => {
    setSelectedTrim(trim);
    setSelectedEngine('');
    setSelectedTransmission('');

    if (trim && selectedYear && selectedMake && selectedModel) {
      setLoadingDropdowns(true);
      try {
        const [enginesData, transmissionsData] = await Promise.all([
          vehiclesApi.getEngines(selectedYear, selectedMake, selectedModel, trim),
          vehiclesApi.getTransmissions(selectedYear, selectedMake, selectedModel, trim),
        ]);
        setEngines(enginesData);
        setTransmissions(transmissionsData);
      } catch {
        setEngines([]);
        setTransmissions([]);
      } finally {
        setLoadingDropdowns(false);
      }
    } else {
      setEngines([]);
      setTransmissions([]);
    }
  };

  const handleAccept = () => {
    onAccept({
      vin: ocrResult.vin,
      year: selectedYear,
      make: selectedMake || undefined,
      model: selectedModel || undefined,
      trimLevel: selectedTrim || undefined,
      engine: selectedEngine || undefined,
      transmission: selectedTransmission || undefined,
    });
  };

  /** Show source reference when field had no dropdown match */
  const sourceHint = (field: string) => {
    const ref = sourceRefs[field];
    if (!ref) return null;
    // Only show hint when no value is currently selected
    const selected: Record<string, string> = {
      make: selectedMake,
      model: selectedModel,
      trim: selectedTrim,
      engine: selectedEngine,
      transmission: selectedTransmission,
    };
    if (selected[field]) return null;
    return (
      <p className="mt-1 text-xs text-gray-500 dark:text-titanio">
        Decoded value: {ref}
      </p>
    );
  };

  return (
    <>
      {/* VIN Section - OCR confidence only */}
      <Box sx={{ mb: 3 }}>
        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
          Detected VIN
        </Typography>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            p: 2,
            backgroundColor: 'action.hover',
            borderRadius: 1,
            border: 1,
            borderColor:
              vinConfidenceLevel === 'high'
                ? 'success.main'
                : vinConfidenceLevel === 'medium'
                  ? 'warning.main'
                  : 'error.light',
          }}
        >
          <Typography
            variant="h6"
            fontFamily="monospace"
            letterSpacing={1}
            sx={{ wordBreak: 'break-all' }}
          >
            {ocrResult.vin}
          </Typography>
          <ConfidenceIndicator level={vinConfidenceLevel} percentage={ocrResult.confidence} />
        </Box>
        {vinConfidenceLevel !== 'high' && (
          <Typography variant="caption" color="warning.main" sx={{ mt: 1, display: 'block' }}>
            {vinConfidenceLevel === 'low'
              ? 'Low confidence detection - please verify the VIN is correct'
              : 'Medium confidence - please verify the VIN is correct'}
          </Typography>
        )}
      </Box>

      {/* Decode Error */}
      {decodeError && (
        <Alert severity="warning" sx={{ mb: 2 }}>
          {decodeError}
        </Alert>
      )}

      {/* Loading indicator */}
      {loadingDropdowns && <LinearProgress sx={{ mb: 2 }} />}

      {/* Vehicle Details - Editable Cascade Dropdowns */}
      <Box sx={{ mb: 2 }}>
        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
          Vehicle Details
        </Typography>
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
          Review and adjust the vehicle details below.
        </Typography>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {/* Year */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
              Year
            </label>
            <select
              value={selectedYear || ''}
              onChange={(e) =>
                handleYearChange(e.target.value ? parseInt(e.target.value) : undefined)
              }
              className={selectClasses}
              style={{ fontSize: '16px' }}
            >
              <option value="">Select Year</option>
              {years.map((year) => (
                <option key={year} value={year}>
                  {year}
                </option>
              ))}
            </select>
          </div>

          {/* Make */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
              Make
            </label>
            <select
              value={selectedMake}
              onChange={(e) => handleMakeChange(e.target.value)}
              className={selectClasses}
              style={{ fontSize: '16px' }}
              disabled={loadingDropdowns || !selectedYear || makes.length === 0}
            >
              <option value="">
                {loadingDropdowns
                  ? 'Loading...'
                  : !selectedYear
                    ? 'Select year first'
                    : makes.length === 0
                      ? 'No makes available'
                      : 'Select Make'}
              </option>
              {makes.map((make) => (
                <option key={make} value={make}>
                  {make}
                </option>
              ))}
            </select>
            {sourceHint('make')}
          </div>

          {/* Model */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
              Model
            </label>
            <select
              value={selectedModel}
              onChange={(e) => handleModelChange(e.target.value)}
              className={selectClasses}
              style={{ fontSize: '16px' }}
              disabled={loadingDropdowns || !selectedMake || models.length === 0}
            >
              <option value="">
                {loadingDropdowns
                  ? 'Loading...'
                  : !selectedMake
                    ? 'Select make first'
                    : models.length === 0
                      ? 'No models available'
                      : 'Select Model'}
              </option>
              {models.map((model) => (
                <option key={model} value={model}>
                  {model}
                </option>
              ))}
            </select>
            {sourceHint('model')}
          </div>

          {/* Trim */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
              Trim
            </label>
            <select
              value={selectedTrim}
              onChange={(e) => handleTrimChange(e.target.value)}
              className={selectClasses}
              style={{ fontSize: '16px' }}
              disabled={loadingDropdowns || !selectedModel || trims.length === 0}
            >
              <option value="">
                {loadingDropdowns
                  ? 'Loading...'
                  : !selectedModel
                    ? 'Select model first'
                    : trims.length === 0
                      ? 'No trims available'
                      : 'Select Trim'}
              </option>
              {trims.map((trim) => (
                <option key={trim} value={trim}>
                  {trim}
                </option>
              ))}
            </select>
            {sourceHint('trim')}
          </div>

          {/* Engine */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
              Engine
            </label>
            <select
              value={selectedEngine}
              onChange={(e) => setSelectedEngine(e.target.value)}
              className={selectClasses}
              style={{ fontSize: '16px' }}
              disabled={loadingDropdowns || !selectedTrim || engines.length === 0}
            >
              <option value="">
                {loadingDropdowns
                  ? 'Loading...'
                  : !selectedTrim
                    ? 'Select trim first'
                    : engines.length === 0
                      ? 'N/A (Electric)'
                      : 'Select Engine'}
              </option>
              {engines.map((engine) => (
                <option key={engine} value={engine}>
                  {engine}
                </option>
              ))}
            </select>
            {sourceHint('engine')}
          </div>

          {/* Transmission */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
              Transmission
            </label>
            <select
              value={selectedTransmission}
              onChange={(e) => setSelectedTransmission(e.target.value)}
              className={selectClasses}
              style={{ fontSize: '16px' }}
              disabled={loadingDropdowns || !selectedTrim || transmissions.length === 0}
            >
              <option value="">
                {loadingDropdowns
                  ? 'Loading...'
                  : !selectedTrim
                    ? 'Select trim first'
                    : transmissions.length === 0
                      ? 'No transmissions available'
                      : 'Select Transmission'}
              </option>
              {transmissions.map((transmission) => (
                <option key={transmission} value={transmission}>
                  {transmission}
                </option>
              ))}
            </select>
            {sourceHint('transmission')}
          </div>
        </div>
      </Box>

      {/* No decoded data - VIN only mode */}
      {!decodedVehicle && !decodeError && (
        <Alert severity="info" sx={{ mb: 2 }}>
          VIN extracted successfully. Select vehicle details above or enter them after accepting.
        </Alert>
      )}

      {/* Action Buttons */}
      <Box
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', sm: 'row' },
          gap: 2,
          mt: 3,
        }}
      >
        <Button
          variant="outlined"
          startIcon={<CameraAltIcon />}
          onClick={onRetake}
          fullWidth
          sx={{ minHeight: 44 }}
        >
          Retake Photo
        </Button>
        <Button
          variant="contained"
          startIcon={<CheckCircleIcon />}
          onClick={handleAccept}
          fullWidth
          disabled={loadingDropdowns}
          sx={{ minHeight: 44 }}
        >
          Accept
        </Button>
      </Box>
    </>
  );
};

export const VinOcrReviewModal: React.FC<VinOcrReviewModalProps> = ({
  open,
  result,
  onAccept,
  onRetake,
  onClose,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  if (!result) return null;

  // Use bottom sheet on mobile, dialog on desktop
  if (isMobile) {
    return (
      <Drawer
        anchor="bottom"
        open={open}
        onClose={onClose}
        PaperProps={{
          sx: {
            borderTopLeftRadius: 16,
            borderTopRightRadius: 16,
            maxHeight: '90vh',
          },
        }}
      >
        <Box sx={{ p: 2, overflowY: 'auto' }}>
          {/* Drag handle */}
          <Box
            sx={{
              width: 32,
              height: 4,
              backgroundColor: 'divider',
              borderRadius: 2,
              mx: 'auto',
              mb: 2,
            }}
          />
          <Typography variant="h6" gutterBottom>
            VIN Detected
          </Typography>
          <ReviewContent result={result} onAccept={onAccept} onRetake={onRetake} />
        </Box>
      </Drawer>
    );
  }

  // Desktop dialog
  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: { borderRadius: 2 },
      }}
    >
      <DialogTitle>VIN Detected</DialogTitle>
      <DialogContent>
        <ReviewContent result={result} onAccept={onAccept} onRetake={onRetake} />
      </DialogContent>
      <DialogActions sx={{ display: 'none' }}>
        {/* Actions are in ReviewContent */}
      </DialogActions>
    </Dialog>
  );
};