import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { supabase } from '@/lib/supabaseClient';
import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
import { useToast } from '@/hooks/use-toast';
import { AlertTriangle, Loader2 } from 'lucide-react';
import { useState } from 'react';
import { getErrorMessage } from '@/lib/errorHandler';

interface DeletionStatusBannerProps {
  scheduledDate: string;
  status: 'pending' | 'confirmed';
  onCancelled: () => void;
}

export function DeletionStatusBanner({ scheduledDate, status, onCancelled }: DeletionStatusBannerProps) {
  const [loading, setLoading] = useState(false);
  const { toast } = useToast();

  const calculateDaysRemaining = () => {
    const scheduled = new Date(scheduledDate);
    const now = new Date();
    const diffTime = scheduled.getTime() - now.getTime();
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return Math.max(0, diffDays);
  };

  const handleCancelDeletion = async () => {
    setLoading(true);
    try {
      const { error, requestId } = await invokeWithTracking(
        'cancel-account-deletion',
        { cancellation_reason: 'User cancelled from settings' },
        (await supabase.auth.getUser()).data.user?.id
      );

      if (error) throw error;

      toast({
        title: 'Deletion Cancelled',
        description: 'Your account has been reactivated.',
      });

      onCancelled();
    } catch (error: unknown) {
      const errorMsg = getErrorMessage(error);
      toast({
        variant: 'destructive',
        title: 'Error',
        description: errorMsg,
      });
    } finally {
      setLoading(false);
    }
  };

  const daysRemaining = calculateDaysRemaining();
  const formattedDate = new Date(scheduledDate).toLocaleDateString('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });

  return (
    <Alert variant="destructive" className="mb-6">
      <AlertTriangle className="w-4 h-4" />
      <AlertTitle>
        {status === 'pending' ? 'Deletion Requested' : 'Account Deactivated - Deletion Scheduled'}
      </AlertTitle>
      <AlertDescription className="space-y-2">
        {status === 'pending' ? (
          <>
            <p>
              You have requested account deletion. Please check your email for a confirmation code. 
              You must enter the code within 24 hours to proceed.
            </p>
            <p className="text-sm text-muted-foreground">
              After confirming with the code, your account will be deactivated and scheduled for deletion on{' '}
              <strong>{formattedDate}</strong>.
            </p>
          </>
        ) : (
          <>
            <p>
              Your account is <strong>deactivated</strong> and scheduled for permanent deletion on{' '}
              <strong>{formattedDate}</strong>.
            </p>
            <p className="text-sm">
              {daysRemaining > 0 ? (
                <>
                  <strong>{daysRemaining}</strong> day{daysRemaining !== 1 ? 's' : ''} remaining to cancel.
                </>
              ) : (
                'Your account will be deleted within 24 hours.'
              )}
            </p>
          </>
        )}
        <div className="flex gap-2 mt-3">
          <Button
            variant="outline"
            size="sm"
            onClick={handleCancelDeletion}
            disabled={loading}
          >
            {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
            Cancel Deletion
          </Button>
        </div>
      </AlertDescription>
    </Alert>
  );
}