import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
import { useToast } from '@/hooks/use-toast';
import { useAuth } from '@/hooks/useAuth';
import { supabase } from '@/integrations/supabase/client';
import { Smartphone, Shield, Copy, Eye, EyeOff, Trash2, AlertCircle } from 'lucide-react';

interface TOTPFactor {
  id: string;
  friendly_name?: string;
  factor_type: string;
  status: string;
  created_at: string;
}

export function TOTPSetup() {
  const { user } = useAuth();
  const { toast } = useToast();
  const [factors, setFactors] = useState<TOTPFactor[]>([]);
  const [loading, setLoading] = useState(false);
  const [enrolling, setEnrolling] = useState(false);
  const [qrCode, setQrCode] = useState('');
  const [secret, setSecret] = useState('');
  const [factorId, setFactorId] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [showSecret, setShowSecret] = useState(false);

  useEffect(() => {
    fetchTOTPFactors();
  }, [user]);

  const fetchTOTPFactors = async () => {
    if (!user) return;

    try {
      const { data, error } = await supabase.auth.mfa.listFactors();
      if (error) throw error;
      
      const totpFactors = (data.totp || []).map(factor => ({
        id: factor.id,
        friendly_name: factor.friendly_name || 'Authenticator App',
        factor_type: factor.factor_type || 'totp',
        status: factor.status,
        created_at: factor.created_at
      }));
      setFactors(totpFactors);
    } catch (error: any) {
      console.error('Error fetching TOTP factors:', error);
    }
  };

  const startEnrollment = async () => {
    if (!user) return;

    setLoading(true);
    try {
      const { data, error } = await supabase.auth.mfa.enroll({
        factorType: 'totp',
        friendlyName: 'Authenticator App'
      });

      if (error) throw error;

      setQrCode(data.totp.qr_code);
      setSecret(data.totp.secret);
      setFactorId(data.id);
      setEnrolling(true);
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to start TOTP enrollment',
        variant: 'destructive'
      });
    } finally {
      setLoading(false);
    }
  };

  const verifyAndEnable = async () => {
    if (!factorId || !verificationCode.trim()) {
      toast({
        title: 'Error',
        description: 'Please enter the verification code',
        variant: 'destructive'
      });
      return;
    }

    setLoading(true);
    try {
      // Step 1: Create a challenge first
      const { data: challengeData, error: challengeError } = await supabase.auth.mfa.challenge({
        factorId
      });

      if (challengeError) throw challengeError;

      // Step 2: Verify using the challengeId from the challenge response
      const { error: verifyError } = await supabase.auth.mfa.verify({
        factorId,
        challengeId: challengeData.id,
        code: verificationCode.trim()
      });

      if (verifyError) throw verifyError;

      toast({
        title: 'TOTP Enabled',
        description: 'Two-factor authentication has been successfully enabled for your account.'
      });

      // Reset state and refresh factors
      setEnrolling(false);
      setQrCode('');
      setSecret('');
      setFactorId('');
      setVerificationCode('');
      fetchTOTPFactors();
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Invalid verification code. Please try again.',
        variant: 'destructive'
      });
    } finally {
      setLoading(false);
    }
  };

  const unenrollFactor = async (factorId: string) => {
    setLoading(true);
    try {
      const { error } = await supabase.auth.mfa.unenroll({
        factorId
      });

      if (error) throw error;

      toast({
        title: 'TOTP Disabled',
        description: 'Two-factor authentication has been disabled for your account.'
      });

      fetchTOTPFactors();
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to disable TOTP',
        variant: 'destructive'
      });
    } finally {
      setLoading(false);
    }
  };

  const copySecret = () => {
    navigator.clipboard.writeText(secret);
    toast({
      title: 'Copied',
      description: 'Secret key copied to clipboard'
    });
  };

  const cancelEnrollment = () => {
    setEnrolling(false);
    setQrCode('');
    setSecret('');
    setFactorId('');
    setVerificationCode('');
  };

  const activeFactor = factors.find(f => f.status === 'verified');

  if (enrolling) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Smartphone className="w-5 h-5" />
            Set Up Authenticator App
          </CardTitle>
          <CardDescription>
            Scan the QR code with your authenticator app, then enter the verification code below.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* QR Code */}
          <div className="flex justify-center">
            <div className="p-4 bg-white rounded-lg border">
              <img src={qrCode} alt="TOTP QR Code" className="w-48 h-48" />
            </div>
          </div>

          {/* Manual Entry */}
          <div className="space-y-2">
            <Label>Can't scan? Enter this key manually:</Label>
            <div className="flex items-center gap-2">
              <Input
                value={secret}
                readOnly
                type={showSecret ? 'text' : 'password'}
                className="font-mono text-sm"
              />
              <Button
                variant="outline"
                size="sm"
                onClick={() => setShowSecret(!showSecret)}
              >
                {showSecret ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
              </Button>
              <Button variant="outline" size="sm" onClick={copySecret}>
                <Copy className="w-4 h-4" />
              </Button>
            </div>
          </div>

          {/* Verification */}
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="verificationCode">Enter verification code from your app:</Label>
              <Input
                id="verificationCode"
                value={verificationCode}
                onChange={(e) => setVerificationCode(e.target.value)}
                placeholder="000000"
                maxLength={6}
                className="text-center text-lg tracking-widest font-mono"
              />
            </div>

            <div className="flex gap-2 justify-end">
              <Button variant="outline" onClick={cancelEnrollment}>
                Cancel
              </Button>
              <Button onClick={verifyAndEnable} disabled={loading || !verificationCode.trim()}>
                {loading ? 'Verifying...' : 'Enable TOTP'}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardDescription>
          Add an extra layer of security to your account with two-factor authentication.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {activeFactor ? (
          <div className="space-y-4">
            <Alert>
              <Shield className="w-4 h-4" />
              <AlertDescription>
                Two-factor authentication is enabled for your account. You'll be prompted for a verification code when signing in.
              </AlertDescription>
            </Alert>

            <div className="flex items-center justify-between p-4 border rounded-lg">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-green-50 dark:bg-green-950 rounded-full flex items-center justify-center">
                  <Smartphone className="w-4 h-4 text-green-600 dark:text-green-400" />
                </div>
                <div>
                  <p className="font-medium">{activeFactor.friendly_name || 'Authenticator App'}</p>
                  <p className="text-sm text-muted-foreground">
                    Enabled {new Date(activeFactor.created_at).toLocaleDateString()}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Badge variant="secondary" className="bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-300">
                  Active
                </Badge>
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button variant="outline" size="sm">
                      <Trash2 className="w-4 h-4 mr-2" />
                      Disable
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle className="flex items-center gap-2">
                        <AlertCircle className="w-5 h-5 text-destructive" />
                        Disable Two-Factor Authentication
                      </AlertDialogTitle>
                      <AlertDialogDescription>
                        Are you sure you want to disable two-factor authentication? This will make your account less secure.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                      <AlertDialogAction
                        onClick={() => unenrollFactor(activeFactor.id)}
                        className="bg-destructive hover:bg-destructive/90"
                      >
                        Disable TOTP
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            </div>
          </div>
        ) : (
          <div className="flex items-center justify-between p-4 border rounded-lg">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
                <Smartphone className="w-4 h-4 text-muted-foreground" />
              </div>
              <div>
                <p className="font-medium">Authenticator App</p>
                <p className="text-sm text-muted-foreground">
                  Use an authenticator app to generate verification codes
                </p>
              </div>
            </div>
            <Button onClick={startEnrollment} disabled={loading}>
              {loading ? 'Setting up...' : 'Set Up'}
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}