import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Shield, ShieldCheck, ShieldAlert, Loader2 } from 'lucide-react';
import { twoFactorService } from '@/services/2fa-service';
import { TwoFactorSetup } from '@/components/settings/security/TwoFactorSetup';

export const TwoFactorSettings: React.FC = () => {
    const [enabled, setEnabled] = useState<boolean | null>(null);
    const [loading, setLoading] = useState(true);
    const [showSetup, setShowSetup] = useState(false);

    const fetchStatus = async () => {
        setLoading(true);
        try {
            const status = await twoFactorService.getStatus();
            setEnabled(status.enabled);
        } catch (e) {
            console.error('Failed to fetch 2FA status', e);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchStatus();
    }, []);

    if (showSetup) {
        return (
            <Card className="border-primary/20 bg-primary/5">
                <CardContent className="pt-6">
                    <TwoFactorSetup
                        onBack={() => setShowSetup(false)}
                        onComplete={() => {
                            setShowSetup(false);
                            fetchStatus();
                        }}
                    />
                </CardContent>
            </Card>
        );
    }

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <Shield className="h-5 w-5" />
                    Two-Factor Authentication (2FA)
                </CardTitle>
                <CardDescription>
                    Add an extra layer of security to your account
                </CardDescription>
            </CardHeader>
            <CardContent>
                {loading ? (
                    <div className="flex items-center gap-2 text-muted-foreground text-sm">
                        <Loader2 className="h-4 w-4 animate-spin" /> Checking 2FA status...
                    </div>
                ) : enabled ? (
                    <div className="space-y-4">
                        <div className="flex items-center gap-3 p-4 bg-lime-500/10 border border-lime-500/20 rounded-lg">
                            <ShieldCheck className="h-8 w-8 text-lime-500" />
                            <div>
                                <h4 className="font-bold text-white">2FA is enabled</h4>
                                <p className="text-xs text-muted-foreground">Your account is protected by an additional security layer.</p>
                            </div>
                        </div>
                        <Button variant="outline" className="text-destructive hover:bg-destructive/10 hover:text-destructive border-destructive/20" onClick={() => {
                            // In a real app, we'd prompt for password before disabling
                            if (confirm('Are you sure you want to disable 2FA? This will make your account less secure.')) {
                                // Call twoFactorService.disable() if needed
                                setEnabled(false);
                            }
                        }}>
                            Disable 2FA
                        </Button>
                    </div>
                ) : (
                    <div className="space-y-4">
                        <div className="flex items-center gap-3 p-4 bg-orange-500/5 border border-orange-500/10 rounded-lg">
                            <ShieldAlert className="h-8 w-8 text-orange-500" />
                            <div>
                                <h4 className="font-bold text-white">2FA is not enabled</h4>
                                <p className="text-xs text-muted-foreground">We highly recommend enabling 2FA to protect your music and assets.</p>
                            </div>
                        </div>
                        <Button onClick={() => setShowSetup(true)}>
                            Setup 2FA
                        </Button>
                    </div>
                )}
            </CardContent>
        </Card>
    );
};
