/**
 * @ai-summary Camera button for VIN capture that opens CameraCapture modal
 * @ai-context Renders camera icon button and full-screen camera overlay
 */

import React from 'react';
import { IconButton, Tooltip, Modal, Box, CircularProgress, Typography } from '@mui/material';
import CameraAltIcon from '@mui/icons-material/CameraAlt';
import { CameraCapture } from '../../../shared/components/CameraCapture/CameraCapture';

interface VinCameraButtonProps {
  disabled?: boolean;
  isCapturing: boolean;
  isProcessing: boolean;
  processingStep: 'idle' | 'extracting' | 'decoding';
  onStartCapture: () => void;
  onCancelCapture: () => void;
  onImageCapture: (file: File, croppedFile?: File) => void;
}

export const VinCameraButton: React.FC<VinCameraButtonProps> = ({
  disabled,
  isCapturing,
  isProcessing,
  processingStep,
  onStartCapture,
  onCancelCapture,
  onImageCapture,
}) => {
  const getProcessingMessage = () => {
    switch (processingStep) {
      case 'extracting':
        return 'Extracting VIN...';
      case 'decoding':
        return 'Decoding vehicle info...';
      default:
        return 'Processing...';
    }
  };

  return (
    <>
      <Tooltip title="Scan VIN with camera">
        <span>
          <IconButton
            onClick={onStartCapture}
            disabled={disabled || isProcessing}
            size="large"
            sx={{
              backgroundColor: 'primary.main',
              color: 'white',
              '&:hover': {
                backgroundColor: 'primary.dark',
              },
              '&.Mui-disabled': {
                backgroundColor: 'action.disabledBackground',
                color: 'action.disabled',
              },
              minWidth: 44,
              minHeight: 44,
            }}
            aria-label="Scan VIN with camera"
          >
            {isProcessing ? (
              <CircularProgress size={24} color="inherit" />
            ) : (
              <CameraAltIcon />
            )}
          </IconButton>
        </span>
      </Tooltip>

      {/* Full-screen camera modal */}
      <Modal
        open={isCapturing}
        onClose={onCancelCapture}
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Box
          sx={{
            width: '100%',
            height: '100%',
            backgroundColor: 'black',
            outline: 'none',
          }}
        >
          <CameraCapture
            onCapture={onImageCapture}
            onCancel={onCancelCapture}
            guidanceType="vin"
            allowCrop={true}
          />
        </Box>
      </Modal>

      {/* Processing overlay */}
      <Modal
        open={isProcessing}
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 2,
            p: 4,
            backgroundColor: 'background.paper',
            borderRadius: 2,
            boxShadow: 24,
            outline: 'none',
            minWidth: 200,
          }}
        >
          <CircularProgress size={48} />
          <Typography variant="body1" color="text.secondary">
            {getProcessingMessage()}
          </Typography>
        </Box>
      </Modal>
    </>
  );
};
