/**
 * @ai-summary Receipt thumbnail preview component with zoom capability
 * @ai-context Displays captured receipt image with tap-to-zoom on mobile
 */

import React, { useState } from 'react';
import {
  Box,
  Dialog,
  IconButton,
  useTheme,
  useMediaQuery,
} from '@mui/material';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import CloseIcon from '@mui/icons-material/Close';

export interface ReceiptPreviewProps {
  /** URL of the receipt image (blob URL) */
  imageUrl: string;
  /** Alt text for accessibility */
  alt?: string;
  /** Maximum width of thumbnail in pixels */
  maxWidth?: number;
  /** Maximum height of thumbnail in pixels */
  maxHeight?: number;
}

export const ReceiptPreview: React.FC<ReceiptPreviewProps> = ({
  imageUrl,
  alt = 'Receipt preview',
  maxWidth = 120,
  maxHeight = 180,
}) => {
  const [isZoomed, setIsZoomed] = useState(false);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const handleOpenZoom = () => {
    setIsZoomed(true);
  };

  const handleCloseZoom = () => {
    setIsZoomed(false);
  };

  return (
    <>
      {/* Thumbnail */}
      <Box
        sx={{
          position: 'relative',
          width: maxWidth,
          height: maxHeight,
          borderRadius: 1,
          overflow: 'hidden',
          border: '1px solid',
          borderColor: 'divider',
          cursor: 'pointer',
          flexShrink: 0,
          '&:hover': {
            '& .zoom-overlay': {
              opacity: 1,
            },
          },
        }}
        onClick={handleOpenZoom}
        role="button"
        tabIndex={0}
        aria-label="Click to zoom receipt image"
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleOpenZoom();
          }
        }}
      >
        <Box
          component="img"
          src={imageUrl}
          alt={alt}
          sx={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
          }}
        />

        {/* Zoom overlay */}
        <Box
          className="zoom-overlay"
          sx={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.4)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            opacity: isMobile ? 0 : 0,
            transition: 'opacity 0.2s',
          }}
        >
          <ZoomInIcon sx={{ color: 'white', fontSize: 32 }} />
        </Box>
      </Box>

      {/* Zoom dialog */}
      <Dialog
        open={isZoomed}
        onClose={handleCloseZoom}
        maxWidth="lg"
        fullScreen={isMobile}
        PaperProps={{
          sx: {
            backgroundColor: 'black',
            ...(isMobile ? {} : { maxHeight: '90vh' }),
          },
        }}
      >
        {/* Close button */}
        <IconButton
          onClick={handleCloseZoom}
          aria-label="Close zoom view"
          sx={{
            position: 'absolute',
            top: 8,
            right: 8,
            color: 'white',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            zIndex: 1,
            '&:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.7)',
            },
          }}
        >
          <CloseIcon />
        </IconButton>

        {/* Full-size image */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            height: isMobile ? '100vh' : 'auto',
            overflow: 'auto',
            p: 2,
          }}
        >
          <Box
            component="img"
            src={imageUrl}
            alt={alt}
            sx={{
              maxWidth: '100%',
              maxHeight: isMobile ? 'calc(100vh - 80px)' : '80vh',
              objectFit: 'contain',
            }}
          />
        </Box>
      </Dialog>
    </>
  );
};

export default ReceiptPreview;
