/**
 * @ai-summary Desktop banner showing pending account deletion with cancel option
 */

import React from 'react';
import { Alert, AlertTitle, Button, CircularProgress, Box, Typography } from '@mui/material';
import { useDeletionStatus, useCancelDeletion } from '../hooks/useDeletion';

export const PendingDeletionBanner: React.FC = () => {
  const { data: deletionStatus, isLoading } = useDeletionStatus();
  const cancelDeletionMutation = useCancelDeletion();

  // Don't show banner if not loading and not pending deletion
  if (isLoading || !deletionStatus?.isPendingDeletion) {
    return null;
  }

  const handleCancelDeletion = async () => {
    await cancelDeletionMutation.mutateAsync();
  };

  return (
    <Alert
      severity="warning"
      sx={{ mb: 3 }}
      action={
        <Button
          color="inherit"
          size="small"
          onClick={handleCancelDeletion}
          disabled={cancelDeletionMutation.isPending}
          startIcon={cancelDeletionMutation.isPending ? <CircularProgress size={16} /> : null}
        >
          {cancelDeletionMutation.isPending ? 'Cancelling...' : 'Cancel Deletion'}
        </Button>
      }
    >
      <AlertTitle>Account Deletion Pending</AlertTitle>
      <Box>
        <Typography variant="body2">
          Your account is scheduled for deletion in{' '}
          <strong>{deletionStatus.daysRemaining} {deletionStatus.daysRemaining === 1 ? 'day' : 'days'}</strong>.
        </Typography>
        {deletionStatus.deletionScheduledFor && (
          <Typography variant="body2" sx={{ mt: 0.5 }}>
            Scheduled for: {new Date(deletionStatus.deletionScheduledFor).toLocaleDateString()}
          </Typography>
        )}
      </Box>
    </Alert>
  );
};
