/**
 * @ai-summary Button component to trigger receipt camera capture
 * @ai-context Styled button for mobile and desktop that opens CameraCapture
 */

import React from 'react';
import { Button, IconButton, Tooltip, useTheme, useMediaQuery } from '@mui/material';
import CameraAltIcon from '@mui/icons-material/CameraAlt';
import ReceiptIcon from '@mui/icons-material/Receipt';

export interface ReceiptCameraButtonProps {
  /** Called when user clicks to start capture */
  onClick: () => void;
  /** Whether the button is disabled */
  disabled?: boolean;
  /** Display variant */
  variant?: 'icon' | 'button' | 'auto';
  /** Size of the button */
  size?: 'small' | 'medium' | 'large';
}

export const ReceiptCameraButton: React.FC<ReceiptCameraButtonProps> = ({
  onClick,
  disabled = false,
  variant = 'auto',
  size = 'medium',
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  // Determine display variant
  const displayVariant = variant === 'auto' ? (isMobile ? 'icon' : 'button') : variant;

  if (displayVariant === 'icon') {
    return (
      <Tooltip title="Scan Receipt">
        <span>
          <IconButton
            onClick={onClick}
            disabled={disabled}
            color="primary"
            size={size}
            aria-label="Scan receipt with camera"
            sx={{
              backgroundColor: 'primary.light',
              color: 'primary.contrastText',
              '&:hover': {
                backgroundColor: 'primary.main',
              },
              '&.Mui-disabled': {
                backgroundColor: 'action.disabledBackground',
              },
            }}
          >
            <CameraAltIcon />
          </IconButton>
        </span>
      </Tooltip>
    );
  }

  return (
    <Button
      onClick={onClick}
      disabled={disabled}
      variant="outlined"
      color="primary"
      size={size}
      startIcon={<ReceiptIcon />}
      endIcon={<CameraAltIcon />}
      sx={{
        borderStyle: 'dashed',
        '&:hover': {
          borderStyle: 'solid',
        },
      }}
    >
      Scan Receipt
    </Button>
  );
};

export default ReceiptCameraButton;
