motovaultpro/frontend/src/shared-minimal/components/VehicleLimitDialog.tsx

/**
 * @ai-summary Dialog shown when users reach their vehicle limit
 * @ai-context Displays tier comparison and upgrade prompt for vehicle limits
 */

import React from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Box,
  Chip,
  useMediaQuery,
  useTheme,
  IconButton,
} from '@mui/material';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import CloseIcon from '@mui/icons-material/Close';
import type { SubscriptionTier } from '../../features/settings/types/profile.types';

interface VehicleLimitDialogProps {
  open: boolean;
  onClose: () => void;
  currentCount: number;
  limit: number;
  currentTier: SubscriptionTier;
}

const tierDisplayNames: Record<SubscriptionTier, string> = {
  free: 'Free',
  pro: 'Pro',
  enterprise: 'Enterprise',
};

const tierColors: Record<SubscriptionTier, 'default' | 'primary' | 'secondary'> = {
  free: 'default',
  pro: 'primary',
  enterprise: 'secondary',
};

const getUpgradePrompt = (tier: SubscriptionTier): string => {
  if (tier === 'free') {
    return 'Free tier is limited to 2 vehicles. Upgrade to Pro for up to 5 vehicles, or Enterprise for unlimited.';
  } else if (tier === 'pro') {
    return 'Pro tier is limited to 5 vehicles. Upgrade to Enterprise for unlimited vehicles.';
  }
  return 'Upgrade to access additional vehicles.';
};

const getRequiredTier = (tier: SubscriptionTier): SubscriptionTier => {
  if (tier === 'free') return 'pro';
  if (tier === 'pro') return 'enterprise';
  return 'pro';
};

export const VehicleLimitDialog: React.FC<VehicleLimitDialogProps> = ({
  open,
  onClose,
  currentCount,
  limit,
  currentTier,
}) => {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
  const requiredTier = getRequiredTier(currentTier);
  const upgradePrompt = getUpgradePrompt(currentTier);

  const handleUpgradeClick = () => {
    // Navigate to upgrade page when Stripe integration is added
    // For now, just close the dialog
    onClose();
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullScreen={isSmall}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: {
          maxHeight: isSmall ? '100%' : '90vh',
          m: isSmall ? 0 : 2,
        },
      }}
    >
      {isSmall && (
        <IconButton
          aria-label="close"
          onClick={onClose}
          sx={{
            position: 'absolute',
            right: 8,
            top: 8,
            color: (theme) => theme.palette.grey[500],
          }}
        >
          <CloseIcon />
        </IconButton>
      )}

      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <LockOutlinedIcon color="action" />
        Vehicle Limit Reached
      </DialogTitle>

      <DialogContent>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          {/* Current status */}
          <Box>
            <Typography variant="h6" gutterBottom>
              Additional Vehicles
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {upgradePrompt}
            </Typography>
          </Box>

          {/* Current count indicator */}
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              py: 2,
              px: 3,
              bgcolor: 'warning.light',
              borderRadius: 1,
              color: 'warning.contrastText',
            }}
          >
            <Typography variant="body1" fontWeight="medium">
              You have {currentCount} of {limit} vehicles
            </Typography>
          </Box>

          {/* Tier comparison */}
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 2,
              py: 2,
              px: 3,
              bgcolor: 'action.hover',
              borderRadius: 1,
            }}
          >
            <Box sx={{ textAlign: 'center' }}>
              <Typography variant="caption" color="text.secondary" display="block">
                Your Plan
              </Typography>
              <Chip
                label={tierDisplayNames[currentTier]}
                color={tierColors[currentTier]}
                size="small"
                sx={{ mt: 0.5 }}
              />
            </Box>

            <Typography variant="h5" color="text.secondary">
              →
            </Typography>

            <Box sx={{ textAlign: 'center' }}>
              <Typography variant="caption" color="text.secondary" display="block">
                Upgrade to
              </Typography>
              <Chip
                label={tierDisplayNames[requiredTier]}
                color={tierColors[requiredTier]}
                size="small"
                sx={{ mt: 0.5 }}
              />
            </Box>
          </Box>

          {/* Benefits preview */}
          <Typography variant="body2" color="text.secondary">
            Upgrade to unlock {requiredTier === 'enterprise' ? 'unlimited vehicles' : 'more vehicles'} and other premium capabilities.
          </Typography>
        </Box>
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 3, pt: 1, flexDirection: isSmall ? 'column' : 'row', gap: 1 }}>
        <Button
          onClick={onClose}
          variant="outlined"
          fullWidth={isSmall}
          sx={{ order: isSmall ? 2 : 1 }}
        >
          Maybe Later
        </Button>
        <Button
          onClick={handleUpgradeClick}
          variant="contained"
          color="primary"
          fullWidth={isSmall}
          sx={{ order: isSmall ? 1 : 2 }}
        >
          Upgrade (Coming Soon)
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default VehicleLimitDialog;