import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Progress } from '@/components/ui/progress';
import { Mail, Info, CheckCircle2, Circle, Loader2 } from 'lucide-react';
import { supabase } from '@/integrations/supabase/client';
import { handleError, handleSuccess } from '@/lib/errorHandler';
import { useEmailChangeStatus } from '@/hooks/security/useEmailChangeStatus';

interface EmailChangeStatusProps {
  currentEmail: string;
  pendingEmail: string;
  onCancel: () => void;
}

export function EmailChangeStatus({ 
  currentEmail, 
  pendingEmail, 
  onCancel 
}: EmailChangeStatusProps) {
  const [resending, setResending] = useState(false);
  const { data: emailStatus, isLoading } = useEmailChangeStatus();

  const verificationStatus = {
    oldEmailVerified: emailStatus?.current_email_verified || false,
    newEmailVerified: emailStatus?.new_email_verified || false
  };

  const handleResendVerification = async () => {
    setResending(true);
    try {
      const { error } = await supabase.auth.updateUser({ 
        email: pendingEmail 
      });
      
      if (error) throw error;
      
      handleSuccess(
        'Verification emails resent',
        'Check your inbox for the verification links.'
      );
    } catch (error: unknown) {
      handleError(error, { action: 'Resend verification emails' });
    } finally {
      setResending(false);
    }
  };

  const verificationProgress = 
    (verificationStatus.oldEmailVerified ? 50 : 0) +
    (verificationStatus.newEmailVerified ? 50 : 0);

  if (isLoading) {
    return (
      <Card className="border-blue-500/30">
        <CardContent className="flex items-center justify-center py-8">
          <Loader2 className="w-6 h-6 animate-spin" />
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="border-blue-500/30">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Mail className="w-5 h-5 text-blue-500" />
          Email Change in Progress
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Alert>
          <Info className="w-4 h-4" />
          <AlertDescription>
            To complete your email change, both emails must be verified.
          </AlertDescription>
        </Alert>

        {/* Progress indicator */}
        <div className="space-y-3">
          <div className="flex items-center gap-3">
            {verificationStatus.oldEmailVerified ? (
              <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />
            ) : (
              <Circle className="w-5 h-5 text-muted-foreground flex-shrink-0" />
            )}
            <div className="flex-1 min-w-0">
              <p className="font-medium">Current Email</p>
              <p className="text-sm text-muted-foreground truncate">{currentEmail}</p>
            </div>
            {verificationStatus.oldEmailVerified && (
              <Badge variant="secondary" className="bg-green-500/10 text-green-500">
                Verified
              </Badge>
            )}
          </div>

          <Separator />

          <div className="flex items-center gap-3">
            {verificationStatus.newEmailVerified ? (
              <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />
            ) : (
              <Circle className="w-5 h-5 text-muted-foreground flex-shrink-0" />
            )}
            <div className="flex-1 min-w-0">
              <p className="font-medium">New Email</p>
              <p className="text-sm text-muted-foreground truncate">{pendingEmail}</p>
            </div>
            {verificationStatus.newEmailVerified && (
              <Badge variant="secondary" className="bg-green-500/10 text-green-500">
                Verified
              </Badge>
            )}
          </div>
        </div>

        {/* Action buttons */}
        <div className="flex flex-col sm:flex-row gap-2">
          <Button
            variant="outline"
            onClick={handleResendVerification}
            disabled={resending}
            className="flex-1"
          >
            {resending ? (
              <>
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                Resending...
              </>
            ) : (
              'Resend Verification Emails'
            )}
          </Button>
          <Button
            variant="ghost"
            onClick={onCancel}
            className="text-destructive hover:text-destructive hover:bg-destructive/10"
          >
            Cancel Change
          </Button>
        </div>

        {/* Progress bar */}
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Progress</span>
            <span className="font-medium">{verificationProgress}%</span>
          </div>
          <Progress value={verificationProgress} className="h-2" />
        </div>
      </CardContent>
    </Card>
  );
}