import React, { useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm, router } from '@inertiajs/react';
import { swal } from '@/lib/swal';
import Swal from 'sweetalert2';

interface Props {
    enabled: boolean;
    qr_code: string;
    secret: string;
    recovery_codes: string[];
}

export default function TwoFactorSetup({ enabled, qr_code, secret, recovery_codes }: Props) {
    const [copiedSecret, setCopiedSecret] = useState(false);
    const [showCodes, setShowCodes] = useState(false);

    const { data, setData, post, processing, errors, reset } = useForm({ code: '' });
    const disableForm = useForm({ password: '' });

    const handleEnable = (e: React.SyntheticEvent) => {
        e.preventDefault();
        post(route('two-factor.enable'), {
            preserveScroll: true,
            onSuccess: () => { reset(); swal.success('Enabled', '2FA is now active on your account.'); },
        });
    };

    const handleDisable = async () => {
        const { value: password } = await Swal.fire({
            title: 'Disable 2FA',
            text: 'Enter your password to confirm disabling Two-Factor Authentication.',
            input: 'password',
            inputPlaceholder: 'Your current password',
            showCancelButton: true,
            confirmButtonText: 'Disable',
            confirmButtonColor: '#dc2626',
        });

        if (password) {
            router.post(route('two-factor.disable'), { password }, {
                preserveScroll: true,
                onSuccess: () => swal.success('Disabled', '2FA has been disabled.'),
            });
        }
    };

    const handleRegenerate = async () => {
        const result = await swal.confirm('Regenerate Codes?', 'Old recovery codes will be invalidated immediately.', 'Regenerate');
        if (result.isConfirmed) {
            router.post(route('two-factor.recovery-codes'), {}, {
                preserveScroll: true,
                onSuccess: () => { setShowCodes(true); swal.success('Regenerated', 'New recovery codes have been generated.'); },
            });
        }
    };

    const copySecret = () => {
        navigator.clipboard.writeText(secret);
        setCopiedSecret(true);
        setTimeout(() => setCopiedSecret(false), 2000);
    };

    return (
        <AuthenticatedLayout>
            <Head title="Two-Factor Authentication" />

            {/* Header */}
            <div className="flex items-center justify-between mb-8 anim-down">
                <div>
                    <h1 className="text-xl font-bold text-[#3D4E4B] dark:text-white tracking-tight leading-none">Two-Factor Authentication</h1>
                    <p className="text-sm font-semibold text-gray-400 tracking-tight mt-2">Protect your account with an additional verification step</p>
                </div>
                <div className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold ${enabled ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-amber-50 text-amber-700 border border-amber-200'}`}>
                    <span className={`w-2 h-2 rounded-full ${enabled ? 'bg-emerald-500' : 'bg-amber-400'}`}></span>
                    {enabled ? '2FA Active' : '2FA Not Enabled'}
                </div>
            </div>

            <div className="max-w-3xl space-y-6">
                {/* Info Panel */}
                <div className="p-5 bg-amber-50 border border-amber-200 rounded-2xl flex items-start gap-3 anim-down">
                    <svg className="w-5 h-5 text-amber-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
                    </svg>
                    <div>
                        <p className="text-xs font-bold text-amber-800 mb-1">What is Two-Factor Authentication?</p>
                        <p className="text-[11px] text-amber-700 font-medium leading-relaxed">
                            2FA adds an extra layer of security by requiring a one-time code from your authenticator app in addition to your password when signing in.
                        </p>
                    </div>
                </div>

                {/* Setup Card */}
                {!enabled ? (
                    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up">
                        <div className="px-6 py-4 border-b border-gray-50 bg-gray-50/30">
                            <h2 className="text-sm font-bold text-[#3D4E4B]">Setup Authenticator App</h2>
                            <p className="text-xs text-gray-400 font-semibold mt-1">Scan the QR code with Google Authenticator, Authy, or any TOTP app</p>
                        </div>
                        <div className="p-8">
                            <div className="flex flex-col md:flex-row gap-10 items-center md:items-start">
                                {/* QR Code */}
                                <div className="shrink-0">
                                    <div className="p-4 bg-white border-2 border-gray-100 rounded-2xl inline-block shadow-sm">
                                        <img src={qr_code} alt="2FA QR Code" className="w-48 h-48" />
                                    </div>
                                </div>

                                {/* Instructions + Verify */}
                                <div className="flex-1 space-y-6">
                                    <div className="space-y-4">
                                        {[
                                            'Install an authenticator app (Google Authenticator, Authy, 1Password)',
                                            'Scan the QR code or enter the manual key below',
                                            'Enter the 6-digit code from your app to verify and activate',
                                        ].map((step, i) => (
                                            <div key={i} className="flex items-start gap-3">
                                                <div className="w-6 h-6 rounded-full bg-[#3D4E4B] text-white text-[10px] font-black flex items-center justify-center shrink-0 mt-0.5">{i + 1}</div>
                                                <p className="text-xs font-medium text-gray-500 leading-relaxed pt-0.5">{step}</p>
                                            </div>
                                        ))}
                                    </div>

                                    {/* Manual Key */}
                                    <div>
                                        <label className="block text-xs font-semibold text-gray-400 mb-1.5">Manual Key</label>
                                        <div className="flex items-center gap-2">
                                            <code className="flex-1 text-xs font-mono bg-gray-50 border border-gray-100 rounded-xl px-4 py-3 text-[#3D4E4B] tracking-wider">
                                                {secret}
                                            </code>
                                            <button onClick={copySecret}
                                                className="shrink-0 h-11 px-4 border border-gray-200 rounded-xl text-xs font-bold text-gray-500 hover:bg-gray-50 transition-all">
                                                {copiedSecret ? '✓ Copied' : 'Copy'}
                                            </button>
                                        </div>
                                    </div>

                                    {/* Verify form */}
                                    <form onSubmit={handleEnable} className="space-y-3">
                                        <div>
                                            <label className="block text-xs font-semibold text-gray-400 mb-1.5">Verification Code *</label>
                                            <input
                                                type="text"
                                                inputMode="numeric"
                                                maxLength={6}
                                                value={data.code}
                                                onChange={e => setData('code', e.target.value)}
                                                className="input-field w-full text-center tracking-[0.5em] font-bold text-lg"
                                                placeholder="000000"
                                            />
                                            {errors.code && <p className="text-xs text-red-500 font-semibold mt-1">{errors.code}</p>}
                                        </div>
                                        <button type="submit" disabled={processing || data.code.length < 6}
                                            className="w-full h-11 bg-[#3D4E4B] text-white text-xs font-bold rounded-xl hover:bg-[#2D3A38] transition-all disabled:opacity-60">
                                            {processing ? 'Verifying...' : 'Enable Two-Factor Authentication'}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                ) : (
                    /* Enabled state */
                    <div className="space-y-4">
                        {/* Status card */}
                        <div className="bg-white rounded-2xl border border-emerald-100 shadow-sm p-6 flex items-center gap-4 anim-up">
                            <div className="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center shrink-0">
                                <svg className="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                </svg>
                            </div>
                            <div className="flex-1">
                                <div className="text-sm font-bold text-[#3D4E4B]">Two-Factor Authentication is Active</div>
                                <div className="text-xs text-gray-400 font-medium mt-0.5">Your account is secured with TOTP authentication.</div>
                            </div>
                            <button onClick={handleDisable}
                                className="h-9 px-5 text-xs font-bold text-red-500 border border-red-200 rounded-xl hover:bg-red-50 transition-all">
                                Disable 2FA
                            </button>
                        </div>

                        {/* Recovery Codes */}
                        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up" style={{ animationDelay: '0.05s' }}>
                            <div className="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center justify-between">
                                <div>
                                    <h2 className="text-sm font-bold text-[#3D4E4B]">Recovery Codes</h2>
                                    <p className="text-xs text-gray-400 font-semibold mt-1">Store these codes safely — use them if you lose access to your authenticator</p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <button onClick={() => setShowCodes(!showCodes)}
                                        className="h-8 px-4 text-xs font-bold text-[#3D4E4B] border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
                                        {showCodes ? 'Hide' : 'Show'}
                                    </button>
                                    <button onClick={handleRegenerate}
                                        className="h-8 px-4 text-xs font-bold text-[#D4A017] border border-amber-200 rounded-lg hover:bg-amber-50 transition-all">
                                        Regenerate
                                    </button>
                                </div>
                            </div>
                            {showCodes && recovery_codes.length > 0 && (
                                <div className="p-6">
                                    <div className="grid grid-cols-2 gap-2">
                                        {recovery_codes.map((code, i) => (
                                            <code key={i} className="px-4 py-2.5 bg-gray-50 border border-gray-100 rounded-xl text-xs font-mono text-[#3D4E4B] tracking-wider text-center">
                                                {code}
                                            </code>
                                        ))}
                                    </div>
                                    <p className="text-[11px] text-amber-600 font-semibold mt-4">
                                        ⚠ Each code can only be used once. Regenerate if compromised.
                                    </p>
                                </div>
                            )}
                        </div>
                    </div>
                )}

            </div>
        </AuthenticatedLayout>
    );
}
