import React, { useState } from 'react';
import { useAuthStore } from '../store/useAuthStore';

export function LoginForm() {
    const { login, verify2FA, isLoading, error, requires2FA, reset2FAState, clearError } = useAuthStore();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [remember, setRemember] = useState(false);
    const [totpCode, setTotpCode] = useState('');
    const [recoveryCode, setRecoveryCode] = useState('');
    const [useRecovery, setUseRecovery] = useState(false);
    const [validationError, setValidationError] = useState<string | null>(null);

    const handleCredentialsSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setValidationError(null);
        clearError();

        if (!email || !password) {
            setValidationError('Please fill in all fields.');
            return;
        }

        try {
            await login({ email, password, remember });
        } catch {
            // Error is handled in the Zustand store
        }
    };

    const handle2FASubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setValidationError(null);
        clearError();

        if (useRecovery) {
            if (!recoveryCode) {
                setValidationError('Please enter a recovery code.');
                return;
            }
            try {
                await verify2FA({ recovery_code: recoveryCode });
            } catch {
                // handled in store
            }
            return;
        }

        if (!totpCode || totpCode.length !== 6) {
            setValidationError('Please enter a valid 6-digit code.');
            return;
        }

        try {
            await verify2FA({ code: totpCode });
        } catch {
            // handled in store
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-slate-950 px-4 relative overflow-hidden">
            <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-rose-500/10 rounded-full blur-[100px] -z-10 animate-pulse"></div>
            <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-[100px] -z-10 animate-pulse delay-1000"></div>

            <div className="w-full max-w-md bg-slate-900/60 border border-slate-800/80 rounded-3xl p-8 shadow-2xl backdrop-blur-xl relative">
                <div className="text-center mb-8">
                    <div className="w-14 h-14 bg-rose-500/10 border border-rose-500/30 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-inner">
                        <span className="text-rose-500 text-2xl font-black">M</span>
                    </div>
                    <h2 className="text-2xl font-bold text-white tracking-tight">
                        {requires2FA ? 'Two-Factor Authentication' : 'Welcome back'}
                    </h2>
                    <p className="text-sm text-slate-400 mt-1">
                        {requires2FA
                            ? 'Enter the code from your authenticator app'
                            : 'Sign in to control your website assets'}
                    </p>
                </div>

                {!requires2FA ? (
                    <form onSubmit={handleCredentialsSubmit} className="space-y-6">
                        {(error || validationError) && (
                            <div className="p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-medium">
                                {validationError || error}
                            </div>
                        )}

                        <div className="space-y-1.5">
                            <label htmlFor="email" className="text-xs font-semibold text-slate-300 uppercase tracking-wider block">
                                Email Address
                            </label>
                            <input
                                id="email"
                                type="email"
                                placeholder="admin@monsterguard.com"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                disabled={isLoading}
                                className="w-full px-4 py-3 rounded-xl bg-slate-950/60 border border-slate-800 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/30 transition-all disabled:opacity-50"
                            />
                        </div>

                        <div className="space-y-1.5">
                            <label htmlFor="password" className="text-xs font-semibold text-slate-300 uppercase tracking-wider block">
                                Password
                            </label>
                            <input
                                id="password"
                                type="password"
                                placeholder="••••••••"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                disabled={isLoading}
                                className="w-full px-4 py-3 rounded-xl bg-slate-950/60 border border-slate-800 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/30 transition-all disabled:opacity-50"
                            />
                        </div>

                        <label className="flex items-center gap-2 text-sm text-slate-400 cursor-pointer">
                            <input
                                type="checkbox"
                                checked={remember}
                                onChange={(e) => setRemember(e.target.checked)}
                                disabled={isLoading}
                                className="rounded border-slate-700 bg-slate-950 text-rose-500 focus:ring-rose-500/30"
                            />
                            Remember this device
                        </label>

                        <button
                            type="submit"
                            disabled={isLoading}
                            className="w-full py-3 bg-gradient-to-r from-rose-500 to-rose-600 text-white rounded-xl font-semibold shadow-lg hover:from-rose-600 hover:to-rose-700 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center gap-2"
                        >
                            {isLoading ? 'Signing in...' : 'Sign In'}
                        </button>
                    </form>
                ) : (
                    <form onSubmit={handle2FASubmit} className="space-y-6">
                        {(error || validationError) && (
                            <div className="p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-medium">
                                {validationError || error}
                            </div>
                        )}

                        {!useRecovery ? (
                            <div className="space-y-1.5">
                                <label htmlFor="totp" className="text-xs font-semibold text-slate-300 uppercase tracking-wider block">
                                    Authentication Code
                                </label>
                                <input
                                    id="totp"
                                    type="text"
                                    inputMode="numeric"
                                    pattern="[0-9]*"
                                    maxLength={6}
                                    placeholder="000000"
                                    value={totpCode}
                                    onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
                                    disabled={isLoading}
                                    autoFocus
                                    className="w-full px-4 py-3 rounded-xl bg-slate-950/60 border border-slate-800 text-slate-100 text-center text-2xl tracking-[0.5em] font-mono focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/30 transition-all disabled:opacity-50"
                                />
                            </div>
                        ) : (
                            <div className="space-y-1.5">
                                <label htmlFor="recovery" className="text-xs font-semibold text-slate-300 uppercase tracking-wider block">
                                    Recovery Code
                                </label>
                                <input
                                    id="recovery"
                                    type="text"
                                    placeholder="XXXX-XXXX"
                                    value={recoveryCode}
                                    onChange={(e) => setRecoveryCode(e.target.value.toUpperCase())}
                                    disabled={isLoading}
                                    autoFocus
                                    className="w-full px-4 py-3 rounded-xl bg-slate-950/60 border border-slate-800 text-slate-100 font-mono focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/30 transition-all disabled:opacity-50"
                                />
                            </div>
                        )}

                        <button
                            type="button"
                            onClick={() => {
                                setUseRecovery(!useRecovery);
                                setValidationError(null);
                                clearError();
                            }}
                            className="text-xs text-slate-400 hover:text-rose-400 transition-colors"
                        >
                            {useRecovery ? 'Use authenticator code instead' : 'Use a recovery code instead'}
                        </button>

                        <div className="flex gap-3">
                            <button
                                type="button"
                                onClick={reset2FAState}
                                disabled={isLoading}
                                className="flex-1 py-3 border border-slate-700 text-slate-300 rounded-xl font-semibold hover:bg-slate-800/50 transition-all disabled:opacity-50"
                            >
                                Back
                            </button>
                            <button
                                type="submit"
                                disabled={isLoading}
                                className="flex-1 py-3 bg-gradient-to-r from-rose-500 to-rose-600 text-white rounded-xl font-semibold shadow-lg hover:from-rose-600 hover:to-rose-700 transition-all disabled:opacity-50"
                            >
                                {isLoading ? 'Verifying...' : 'Verify'}
                            </button>
                        </div>
                    </form>
                )}
            </div>
        </div>
    );
}