/**
 * @ai-summary Banner shown on dashboard when user has pending vehicle associations from emailed receipts
 */

import React from 'react';
import { Box } from '@mui/material';
import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { Button } from '../../../shared-minimal/components/Button';
import { usePendingAssociationCount } from '../hooks/usePendingAssociations';

interface PendingAssociationBannerProps {
  onViewPending: () => void;
}

export const PendingAssociationBanner: React.FC<PendingAssociationBannerProps> = ({ onViewPending }) => {
  const { data, isLoading } = usePendingAssociationCount();

  if (isLoading || !data || data.count === 0) {
    return null;
  }

  const count = data.count;
  const label = count === 1 ? '1 emailed receipt' : `${count} emailed receipts`;

  return (
    <GlassCard padding="md">
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 2,
          flexWrap: { xs: 'wrap', sm: 'nowrap' },
        }}
      >
        <Box
          sx={{
            flexShrink: 0,
            width: 44,
            height: 44,
            borderRadius: 3,
            bgcolor: 'warning.light',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <EmailRoundedIcon sx={{ color: 'warning.dark', fontSize: 24 }} />
        </Box>

        <div className="flex-1 min-w-0">
          <Box
            component="h4"
            sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.95rem', mb: 0.25 }}
          >
            Pending Receipts
          </Box>
          <p className="text-sm text-slate-500 dark:text-titanio">
            {label} need a vehicle assigned
          </p>
        </div>

        <Box sx={{ flexShrink: 0, width: { xs: '100%', sm: 'auto' } }}>
          <Button
            variant="primary"
            size="sm"
            onClick={onViewPending}
            style={{ minHeight: 44, width: '100%' }}
          >
            Review
          </Button>
        </Box>
      </Box>
    </GlassCard>
  );
};
