/**
 * @ai-summary Modal for reviewing and editing OCR-extracted maintenance receipt fields
 * @ai-context Mirrors ReceiptOcrReviewModal: confidence indicators, inline editing, category suggestion display
 */

import React, { useState } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Box,
  Typography,
  TextField,
  Grid,
  useTheme,
  useMediaQuery,
  IconButton,
  Collapse,
  Alert,
  Chip,
} from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import CameraAltIcon from '@mui/icons-material/CameraAlt';
import BuildIcon from '@mui/icons-material/Build';
import {
  ExtractedMaintenanceReceiptFields,
  ExtractedMaintenanceField,
  CategorySuggestion,
} from '../types/maintenance-receipt.types';
import { LOW_CONFIDENCE_THRESHOLD } from '../hooks/useMaintenanceReceiptOcr';
import { getCategoryDisplayName } from '../types/maintenance.types';
import { ReceiptPreview } from '../../fuel-logs/components/ReceiptPreview';

export interface MaintenanceReceiptReviewModalProps {
  open: boolean;
  extractedFields: ExtractedMaintenanceReceiptFields;
  receiptImageUrl: string | null;
  categorySuggestion: CategorySuggestion | null;
  onAccept: () => void;
  onRetake: () => void;
  onCancel: () => void;
  onFieldEdit: (fieldName: keyof ExtractedMaintenanceReceiptFields, value: string | number | null) => void;
}

/** Confidence indicator component (4-dot system) */
const ConfidenceIndicator: React.FC<{ confidence: number }> = ({ confidence }) => {
  const filledDots = Math.round(confidence * 4);
  const isLow = confidence < LOW_CONFIDENCE_THRESHOLD;

  return (
    <Box
      sx={{ display: 'flex', gap: 0.25, ml: 1 }}
      aria-label={`Confidence: ${Math.round(confidence * 100)}%`}
    >
      {[0, 1, 2, 3].map((i) => (
        <Box
          key={i}
          sx={{
            width: 6,
            height: 6,
            borderRadius: '50%',
            backgroundColor: i < filledDots
              ? (isLow ? 'warning.main' : 'success.main')
              : 'grey.300',
          }}
        />
      ))}
    </Box>
  );
};

/** Field row component with inline editing */
const FieldRow: React.FC<{
  label: string;
  field: ExtractedMaintenanceField;
  onEdit: (value: string | number | null) => void;
  type?: 'text' | 'number';
  formatDisplay?: (value: string | number | null) => string;
}> = ({ label, field, onEdit, type = 'text', formatDisplay }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editValue, setEditValue] = useState<string>(
    field.value !== null ? String(field.value) : ''
  );
  const isLowConfidence = field.confidence < LOW_CONFIDENCE_THRESHOLD && field.value !== null;

  const displayValue = formatDisplay
    ? formatDisplay(field.value)
    : field.value !== null
      ? String(field.value)
      : '-';

  const handleSave = () => {
    let parsedValue: string | number | null = editValue || null;
    if (type === 'number' && editValue) {
      const num = parseFloat(editValue);
      parsedValue = isNaN(num) ? null : num;
    }
    onEdit(parsedValue);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setEditValue(field.value !== null ? String(field.value) : '');
    setIsEditing(false);
  };

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        py: 1.5,
        px: 1,
        borderRadius: 1,
        backgroundColor: isLowConfidence ? 'warning.light' : 'transparent',
        '&:hover': {
          backgroundColor: isLowConfidence ? 'warning.light' : 'action.hover',
        },
      }}
    >
      <Typography
        variant="body2"
        sx={{ width: 100, flexShrink: 0, color: 'text.secondary', fontWeight: 500 }}
      >
        {label}
      </Typography>

      {isEditing ? (
        <Box sx={{ display: 'flex', alignItems: 'center', flex: 1, gap: 1 }}>
          <TextField
            size="small"
            value={editValue}
            onChange={(e) => setEditValue(e.target.value)}
            type={type === 'number' ? 'number' : 'text'}
            inputProps={{
              step: type === 'number' ? 0.01 : undefined,
            }}
            autoFocus
            sx={{ flex: 1 }}
            onKeyDown={(e) => {
              if (e.key === 'Enter') handleSave();
              if (e.key === 'Escape') handleCancel();
            }}
          />
          <IconButton size="small" onClick={handleSave} color="primary">
            <CheckIcon fontSize="small" />
          </IconButton>
          <IconButton size="small" onClick={handleCancel}>
            <CloseIcon fontSize="small" />
          </IconButton>
        </Box>
      ) : (
        <Box
          sx={{ display: 'flex', alignItems: 'center', flex: 1, cursor: 'pointer' }}
          onClick={() => setIsEditing(true)}
          role="button"
          tabIndex={0}
          aria-label={`Edit ${label}`}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              setIsEditing(true);
            }
          }}
        >
          <Typography
            variant="body1"
            sx={{
              flex: 1,
              fontWeight: field.value !== null ? 500 : 400,
              color: field.value !== null ? 'text.primary' : 'text.disabled',
            }}
          >
            {displayValue}
          </Typography>
          {field.value !== null && <ConfidenceIndicator confidence={field.confidence} />}
          <IconButton size="small" sx={{ ml: 1 }}>
            <EditIcon fontSize="small" />
          </IconButton>
        </Box>
      )}
    </Box>
  );
};

export const MaintenanceReceiptReviewModal: React.FC<MaintenanceReceiptReviewModalProps> = ({
  open,
  extractedFields,
  receiptImageUrl,
  categorySuggestion,
  onAccept,
  onRetake,
  onCancel,
  onFieldEdit,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [showAllFields, setShowAllFields] = useState(false);

  const hasLowConfidenceFields = Object.values(extractedFields).some(
    (field) => field.value !== null && field.confidence < LOW_CONFIDENCE_THRESHOLD
  );

  const formatCurrency = (value: string | number | null): string => {
    if (value === null) return '-';
    const num = typeof value === 'string' ? parseFloat(value) : value;
    return isNaN(num) ? String(value) : `$${num.toFixed(2)}`;
  };

  const formatDate = (value: string | number | null): string => {
    if (value === null) return '-';
    const dateStr = String(value);
    try {
      const date = new Date(dateStr + 'T00:00:00');
      if (!isNaN(date.getTime())) {
        return date.toLocaleDateString('en-US', {
          month: 'short',
          day: 'numeric',
          year: 'numeric',
        });
      }
    } catch {
      // Return as-is if parsing fails
    }
    return dateStr;
  };

  return (
    <Dialog
      open={open}
      onClose={onCancel}
      maxWidth="sm"
      fullWidth
      fullScreen={isMobile}
      PaperProps={{
        sx: { maxHeight: isMobile ? '100vh' : '90vh' },
      }}
    >
      <DialogTitle
        sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
      >
        <Typography variant="h6" component="span">
          Maintenance Receipt Extracted
        </Typography>
        <IconButton onClick={onCancel} size="small" aria-label="Close">
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent dividers>
        {hasLowConfidenceFields && (
          <Alert severity="warning" sx={{ mb: 2 }}>
            Some fields have low confidence. Please review and edit if needed.
          </Alert>
        )}

        <Grid container spacing={2}>
          {/* Receipt thumbnail */}
          {receiptImageUrl && (
            <Grid item xs={12} sm={4}>
              <Box
                sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}
              >
                <ReceiptPreview
                  imageUrl={receiptImageUrl}
                  maxWidth={isMobile ? 100 : 120}
                  maxHeight={isMobile ? 150 : 180}
                />
                <Typography variant="caption" color="text.secondary">
                  Tap to zoom
                </Typography>
              </Box>
            </Grid>
          )}

          {/* Extracted fields */}
          <Grid item xs={12} sm={receiptImageUrl ? 8 : 12}>
            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
              {/* Primary fields */}
              <FieldRow
                label="Service"
                field={extractedFields.serviceName}
                onEdit={(value) => onFieldEdit('serviceName', value)}
              />
              <FieldRow
                label="Date"
                field={extractedFields.serviceDate}
                onEdit={(value) => onFieldEdit('serviceDate', value)}
                formatDisplay={formatDate}
              />
              <FieldRow
                label="Total Cost"
                field={extractedFields.totalCost}
                onEdit={(value) => onFieldEdit('totalCost', value)}
                type="number"
                formatDisplay={formatCurrency}
              />
              <FieldRow
                label="Shop"
                field={extractedFields.shopName}
                onEdit={(value) => onFieldEdit('shopName', value)}
              />

              {/* Category suggestion */}
              {categorySuggestion && (
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    py: 1,
                    px: 1,
                    gap: 1,
                    backgroundColor: 'success.light',
                    borderRadius: 1,
                    my: 0.5,
                  }}
                >
                  <BuildIcon fontSize="small" color="success" />
                  <Box sx={{ flex: 1, minWidth: 0 }}>
                    <Typography variant="body2" fontWeight={500}>
                      {getCategoryDisplayName(categorySuggestion.category)}
                    </Typography>
                    <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mt: 0.5 }}>
                      {categorySuggestion.subtypes.map((subtype) => (
                        <Chip
                          key={subtype}
                          label={subtype}
                          size="small"
                          color="success"
                          variant="outlined"
                        />
                      ))}
                    </Box>
                  </Box>
                </Box>
              )}

              {/* Secondary fields (collapsible on mobile) */}
              <Collapse in={!isMobile || showAllFields}>
                <FieldRow
                  label="Odometer"
                  field={extractedFields.odometerReading}
                  onEdit={(value) => onFieldEdit('odometerReading', value)}
                  type="number"
                />
                <FieldRow
                  label="Labor"
                  field={extractedFields.laborCost}
                  onEdit={(value) => onFieldEdit('laborCost', value)}
                  type="number"
                  formatDisplay={formatCurrency}
                />
                <FieldRow
                  label="Parts"
                  field={extractedFields.partsCost}
                  onEdit={(value) => onFieldEdit('partsCost', value)}
                  type="number"
                  formatDisplay={formatCurrency}
                />
                <FieldRow
                  label="Vehicle"
                  field={extractedFields.vehicleInfo}
                  onEdit={(value) => onFieldEdit('vehicleInfo', value)}
                />
              </Collapse>

              {isMobile && (
                <Button
                  size="small"
                  onClick={() => setShowAllFields(!showAllFields)}
                  sx={{ mt: 1, alignSelf: 'flex-start' }}
                >
                  {showAllFields ? 'Show Less' : 'Show More Fields'}
                </Button>
              )}
            </Box>
          </Grid>
        </Grid>

        <Typography
          variant="body2"
          color="text.secondary"
          sx={{ mt: 2, textAlign: 'center' }}
        >
          Tap any field to edit before saving.
        </Typography>
      </DialogContent>

      <DialogActions
        sx={{
          flexDirection: isMobile ? 'column' : 'row',
          gap: 1,
          p: 2,
        }}
      >
        <Button
          onClick={onRetake}
          startIcon={<CameraAltIcon />}
          sx={{ order: isMobile ? 2 : 1, minHeight: 44 }}
        >
          Retake Photo
        </Button>
        <Box sx={{ flex: 1, display: isMobile ? 'none' : 'block' }} />
        <Button
          onClick={onCancel}
          sx={{ order: isMobile ? 3 : 2, minHeight: 44 }}
        >
          Cancel
        </Button>
        <Button
          variant="contained"
          onClick={onAccept}
          startIcon={<CheckIcon />}
          sx={{ order: isMobile ? 1 : 3, width: isMobile ? '100%' : 'auto', minHeight: 44 }}
        >
          Accept
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default MaintenanceReceiptReviewModal;
