/**
 * @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';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';

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';
  /** Whether the feature is locked behind a tier gate */
  locked?: boolean;
}

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

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

  const tooltipTitle = locked ? 'Upgrade to Pro to scan receipts' : 'Scan Receipt';

  if (displayVariant === 'icon') {
    return (
      <Tooltip title={tooltipTitle}>
        <span>
          <IconButton
            onClick={onClick}
            disabled={disabled}
            color="primary"
            size={size}
            aria-label={locked ? 'Scan receipt (Pro feature)' : 'Scan receipt with camera'}
            sx={{
              minWidth: 44,
              minHeight: 44,
              backgroundColor: locked ? 'action.disabledBackground' : 'primary.light',
              color: locked ? 'text.secondary' : 'primary.contrastText',
              '&:hover': {
                backgroundColor: locked ? 'action.hover' : 'primary.main',
              },
              '&.Mui-disabled': {
                backgroundColor: 'action.disabledBackground',
              },
            }}
          >
            {locked ? <LockOutlinedIcon /> : <CameraAltIcon />}
          </IconButton>
        </span>
      </Tooltip>
    );
  }

  return (
    <Tooltip title={locked ? tooltipTitle : ''}>
      <span>
        <Button
          onClick={onClick}
          disabled={disabled}
          variant="outlined"
          color={locked ? 'inherit' : 'primary'}
          size={size}
          startIcon={locked ? <LockOutlinedIcon /> : <ReceiptIcon />}
          endIcon={locked ? undefined : <CameraAltIcon />}
          sx={{
            minHeight: 44,
            borderStyle: 'dashed',
            '&:hover': {
              borderStyle: 'solid',
            },
          }}
        >
          {locked ? 'Scan Receipt (Pro)' : 'Scan Receipt'}
        </Button>
      </span>
    </Tooltip>
  );
};

export default ReceiptCameraButton;
