import { useCallback, useEffect, useState } from 'react';
import axios from '../../../bootstrap';
import { Shield, Smartphone, Key, RefreshCw, Trash2, Monitor, Loader2, AlertTriangle, CheckCircle2, ScrollText, Clock } from 'lucide-react';

interface SessionItem {
    id: string;
    ip_address: string | null;
    user_agent: string | null;
    last_activity: string;
    is_current: boolean;
}

interface AdminSecurityLogItem {
    id: number;
    event: string;
    severity: string;
    message: string;
    ip_address: string | null;
    user_agent: string | null;
    logged_at: string;
    user?: { id: number; name: string; email: string } | null;
}

function adminSeverityClass(severity: string): string {
    switch (severity) {
        case 'critical':
            return 'bg-rose-500/10 text-rose-400 border-rose-500/20';
        case 'warning':
            return 'bg-amber-500/10 text-amber-400 border-amber-500/20';
        case 'success':
            return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20';
        default:
            return 'bg-sky-500/10 text-sky-300 border-sky-500/20';
    }
}

export function SecuritySettingsView() {
    const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
    const [sessions, setSessions] = useState<SessionItem[]>([]);
    const [adminLogs, setAdminLogs] = useState<AdminSecurityLogItem[]>([]);
    const [adminLogsError, setAdminLogsError] = useState<string | null>(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [success, setSuccess] = useState<string | null>(null);
    const [actionLoading, setActionLoading] = useState(false);

    const [enrollmentSecret, setEnrollmentSecret] = useState<string | null>(null);
    const [qrCodeSvg, setQrCodeSvg] = useState<string | null>(null);
    const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
    const [confirmCode, setConfirmCode] = useState('');
    const [disablePassword, setDisablePassword] = useState('');
    const [disableCode, setDisableCode] = useState('');
    const [regenPassword, setRegenPassword] = useState('');
    const [regenCode, setRegenCode] = useState('');

    const fetchStatus = useCallback(async () => {
        setIsLoading(true);
        setError(null);
        setAdminLogsError(null);

        try {
            const [statusRes, sessionsRes] = await Promise.all([
                axios.get('/2fa/status'),
                axios.get('/sessions'),
            ]);
            setTwoFactorEnabled(statusRes.data.two_factor_enabled);
            setSessions(sessionsRes.data.sessions || []);
        } catch (err: any) {
            setError(err.response?.data?.message || 'Failed to load security settings.');
        } finally {
            setIsLoading(false);
        }

        try {
            const logsRes = await axios.get('/admin-security-logs');
            const payload = logsRes.data;

            if (!payload || payload.success !== true || !Array.isArray(payload.logs)) {
                setAdminLogs([]);
                setAdminLogsError(
                    payload?.message
                    || 'Administrator log API is unavailable. Upload AdminSecurityLogController.php, update routes/admin.php, then run: php artisan route:clear'
                );
                return;
            }

            setAdminLogs(payload.logs);

            if (payload.total > 0 && payload.logs.length === 0) {
                setAdminLogsError(
                    'Logs exist in the database but the API returned an empty list. Run php artisan route:clear and php artisan config:clear on the server.'
                );
            }
        } catch (err: any) {
            setAdminLogs([]);
            const status = err.response?.status;
            const message = err.response?.data?.message;

            if (status === 404) {
                setAdminLogsError(
                    'Administrator log API route not found. Upload AdminSecurityLogController.php and routes/admin.php, then run: php artisan route:clear'
                );
                return;
            }

            setAdminLogsError(
                message
                || 'Could not load administrator activity logs. Ensure the latest PHP files are deployed and run php artisan route:clear.'
            );
        }
    }, []);

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

    const handleEnable2FA = async () => {
        setActionLoading(true);
        setError(null);
        setSuccess(null);
        try {
            const response = await axios.post('/2fa/enable');
            setEnrollmentSecret(response.data.secret);
            setQrCodeSvg(response.data.qr_code_svg);
            setRecoveryCodes(response.data.recovery_codes || []);
            setSuccess(response.data.message);
        } catch (err: any) {
            setError(err.response?.data?.message || 'Failed to start 2FA enrollment.');
        } finally {
            setActionLoading(false);
        }
    };

    const handleConfirm2FA = async () => {
        if (confirmCode.length !== 6) {
            setError('Enter a valid 6-digit code.');
            return;
        }
        setActionLoading(true);
        setError(null);
        try {
            await axios.post('/2fa/confirm', { code: confirmCode });
            setSuccess('Two-factor authentication is now enabled.');
            setEnrollmentSecret(null);
            setQrCodeSvg(null);
            setRecoveryCodes([]);
            setConfirmCode('');
            setTwoFactorEnabled(true);
        } catch (err: any) {
            setError(err.response?.data?.errors?.code?.[0] || err.response?.data?.message || 'Invalid code.');
        } finally {
            setActionLoading(false);
        }
    };

    const handleDisable2FA = async () => {
        setActionLoading(true);
        setError(null);
        try {
            await axios.post('/2fa/disable', { password: disablePassword, code: disableCode });
            setSuccess('Two-factor authentication has been disabled.');
            setDisablePassword('');
            setDisableCode('');
            setTwoFactorEnabled(false);
        } catch (err: any) {
            setError(
                err.response?.data?.errors?.password?.[0] ||
                    err.response?.data?.errors?.code?.[0] ||
                    err.response?.data?.message ||
                    'Failed to disable 2FA.'
            );
        } finally {
            setActionLoading(false);
        }
    };

    const handleRegenerateCodes = async () => {
        setActionLoading(true);
        setError(null);
        try {
            const response = await axios.post('/2fa/recovery-codes', {
                password: regenPassword,
                code: regenCode,
            });
            setRecoveryCodes(response.data.recovery_codes || []);
            setSuccess('New recovery codes generated. Save them now — they will not be shown again.');
            setRegenPassword('');
            setRegenCode('');
        } catch (err: any) {
            setError(
                err.response?.data?.errors?.password?.[0] ||
                    err.response?.data?.errors?.code?.[0] ||
                    err.response?.data?.message ||
                    'Failed to regenerate recovery codes.'
            );
        } finally {
            setActionLoading(false);
        }
    };

    const handleRevokeSession = async (sessionId: string) => {
        try {
            await axios.delete(`/sessions/${sessionId}`);
            setSuccess('Session revoked.');
            fetchStatus();
        } catch (err: any) {
            setError(err.response?.data?.message || 'Failed to revoke session.');
        }
    };

    const handleRevokeAll = async () => {
        try {
            await axios.delete('/sessions');
            setSuccess('All other sessions revoked.');
            fetchStatus();
        } catch (err: any) {
            setError(err.response?.data?.message || 'Failed to revoke sessions.');
        }
    };

    if (isLoading) {
        return (
            <div className="flex items-center justify-center py-20">
                <Loader2 className="w-8 h-8 text-rose-500 animate-spin" />
            </div>
        );
    }

    return (
        <div className="space-y-8 max-w-4xl">
            <div>
                <h1 className="text-2xl font-bold text-white tracking-tight">Security Settings</h1>
                <p className="text-sm text-slate-400 mt-1">
                    Manage two-factor authentication, trusted devices, and review administrator activity.
                </p>
            </div>

            {error && (
                <div className="p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2">
                    <AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" />
                    {error}
                </div>
            )}

            {success && (
                <div className="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm flex items-start gap-2">
                    <CheckCircle2 className="w-4 h-4 mt-0.5 shrink-0" />
                    {success}
                </div>
            )}

            {/* Two-Factor Authentication */}
            <section className="bg-slate-900/50 border border-slate-800 rounded-2xl p-6 space-y-5">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-rose-500/10 border border-rose-500/20 rounded-xl flex items-center justify-center">
                        <Shield className="w-5 h-5 text-rose-400" />
                    </div>
                    <div>
                        <h2 className="text-lg font-semibold text-white">Two-Factor Authentication</h2>
                        <p className="text-xs text-slate-400">
                            {twoFactorEnabled ? 'Enabled — your account requires a TOTP code at login.' : 'Optional — not required until you enable it.'}
                        </p>
                    </div>
                    <span
                        className={`ml-auto text-[10px] font-bold uppercase px-2 py-1 rounded-md border ${
                            twoFactorEnabled
                                ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
                                : 'bg-slate-800 text-slate-400 border-slate-700'
                        }`}
                    >
                        {twoFactorEnabled ? 'Active' : 'Inactive'}
                    </span>
                </div>

                {!twoFactorEnabled && !enrollmentSecret && (
                    <button
                        onClick={handleEnable2FA}
                        disabled={actionLoading}
                        className="px-4 py-2 bg-rose-500 hover:bg-rose-600 text-white text-sm font-semibold rounded-xl transition-all disabled:opacity-50"
                    >
                        {actionLoading ? 'Starting...' : 'Enable 2FA'}
                    </button>
                )}

                {enrollmentSecret && qrCodeSvg && (
                    <div className="space-y-4 border-t border-slate-800 pt-5">
                        <p className="text-sm text-slate-300">
                            Scan this QR code with Google Authenticator, Authy, or any TOTP app:
                        </p>
                        <div
                            className="bg-white p-4 rounded-xl inline-block"
                            dangerouslySetInnerHTML={{ __html: qrCodeSvg }}
                        />
                        <p className="text-xs text-slate-500 font-mono">Manual key: {enrollmentSecret}</p>

                        {recoveryCodes.length > 0 && (
                            <div className="bg-amber-500/10 border border-amber-500/20 rounded-xl p-4">
                                <p className="text-xs font-semibold text-amber-400 uppercase mb-2 flex items-center gap-1">
                                    <Key className="w-3 h-3" /> Recovery Codes (save now — shown once)
                                </p>
                                <div className="grid grid-cols-2 gap-2 font-mono text-sm text-amber-200">
                                    {recoveryCodes.map((code) => (
                                        <span key={code}>{code}</span>
                                    ))}
                                </div>
                            </div>
                        )}

                        <div className="flex gap-3 items-end">
                            <div className="flex-1">
                                <label className="text-xs text-slate-400 uppercase font-semibold">Confirm with 6-digit code</label>
                                <input
                                    type="text"
                                    maxLength={6}
                                    value={confirmCode}
                                    onChange={(e) => setConfirmCode(e.target.value.replace(/\D/g, ''))}
                                    className="w-full mt-1 px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white font-mono text-center tracking-widest"
                                />
                            </div>
                            <button
                                onClick={handleConfirm2FA}
                                disabled={actionLoading}
                                className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl disabled:opacity-50"
                            >
                                Confirm Enrollment
                            </button>
                        </div>
                    </div>
                )}

                {twoFactorEnabled && (
                    <div className="space-y-4 border-t border-slate-800 pt-5">
                        <div className="grid gap-3 sm:grid-cols-2">
                            <input
                                type="password"
                                placeholder="Current password"
                                value={disablePassword}
                                onChange={(e) => setDisablePassword(e.target.value)}
                                className="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm"
                            />
                            <input
                                type="text"
                                placeholder="TOTP code"
                                maxLength={6}
                                value={disableCode}
                                onChange={(e) => setDisableCode(e.target.value.replace(/\D/g, ''))}
                                className="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm font-mono"
                            />
                        </div>
                        <button
                            onClick={handleDisable2FA}
                            disabled={actionLoading}
                            className="px-4 py-2 border border-rose-500/30 text-rose-400 hover:bg-rose-500/10 text-sm font-semibold rounded-xl disabled:opacity-50"
                        >
                            Disable 2FA
                        </button>

                        <div className="border-t border-slate-800 pt-4 space-y-3">
                            <p className="text-sm text-slate-300 flex items-center gap-2">
                                <RefreshCw className="w-4 h-4" /> Regenerate Recovery Codes
                            </p>
                            <div className="grid gap-3 sm:grid-cols-2">
                                <input
                                    type="password"
                                    placeholder="Current password"
                                    value={regenPassword}
                                    onChange={(e) => setRegenPassword(e.target.value)}
                                    className="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm"
                                />
                                <input
                                    type="text"
                                    placeholder="TOTP code"
                                    maxLength={6}
                                    value={regenCode}
                                    onChange={(e) => setRegenCode(e.target.value.replace(/\D/g, ''))}
                                    className="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm font-mono"
                                />
                            </div>
                            <button
                                onClick={handleRegenerateCodes}
                                disabled={actionLoading}
                                className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-sm font-semibold rounded-xl disabled:opacity-50"
                            >
                                Regenerate Codes
                            </button>

                            {recoveryCodes.length > 0 && (
                                <div className="bg-amber-500/10 border border-amber-500/20 rounded-xl p-4">
                                    <p className="text-xs font-semibold text-amber-400 uppercase mb-2">New Recovery Codes</p>
                                    <div className="grid grid-cols-2 gap-2 font-mono text-sm text-amber-200">
                                        {recoveryCodes.map((code) => (
                                            <span key={code}>{code}</span>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                )}
            </section>

            {/* Trusted Devices */}
            <section className="bg-slate-900/50 border border-slate-800 rounded-2xl p-6 space-y-5">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-indigo-500/10 border border-indigo-500/20 rounded-xl flex items-center justify-center">
                        <Smartphone className="w-5 h-5 text-indigo-400" />
                    </div>
                    <div>
                        <h2 className="text-lg font-semibold text-white">Trusted Devices</h2>
                        <p className="text-xs text-slate-400">Active sessions signed in to this account.</p>
                    </div>
                    {sessions.length > 1 && (
                        <button
                            onClick={handleRevokeAll}
                            className="ml-auto text-xs text-rose-400 hover:text-rose-300 font-semibold"
                        >
                            Revoke All Others
                        </button>
                    )}
                </div>

                <div className="space-y-2">
                    {sessions.length === 0 && (
                        <p className="text-sm text-slate-500">No active sessions found.</p>
                    )}
                    {sessions.map((session) => (
                        <div
                            key={session.id}
                            className={`flex items-center gap-4 p-4 rounded-xl border ${
                                session.is_current
                                    ? 'border-emerald-500/30 bg-emerald-500/5'
                                    : 'border-slate-800 bg-slate-950/50'
                            }`}
                        >
                            <Monitor className="w-5 h-5 text-slate-400 shrink-0" />
                            <div className="flex-1 min-w-0">
                                <p className="text-sm text-white truncate">
                                    {session.user_agent || 'Unknown device'}
                                    {session.is_current && (
                                        <span className="ml-2 text-[10px] font-bold uppercase text-emerald-400">Current</span>
                                    )}
                                </p>
                                <p className="text-xs text-slate-500">
                                    {session.ip_address || 'Unknown IP'} · Last active{' '}
                                    {new Date(session.last_activity).toLocaleString()}
                                </p>
                            </div>
                            {!session.is_current && (
                                <button
                                    onClick={() => handleRevokeSession(session.id)}
                                    className="p-2 text-slate-400 hover:text-rose-400 transition-colors"
                                    title="Revoke session"
                                >
                                    <Trash2 className="w-4 h-4" />
                                </button>
                            )}
                        </div>
                    ))}
                </div>
            </section>

            {/* Administrator Activity Log */}
            <section className="bg-slate-900/50 border border-slate-800 rounded-2xl p-6 space-y-5">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-slate-800 border border-slate-700 rounded-xl flex items-center justify-center">
                        <ScrollText className="w-5 h-5 text-slate-300" />
                    </div>
                    <div>
                        <h2 className="text-lg font-semibold text-white">Administrator Activity Log</h2>
                        <p className="text-xs text-slate-400">
                            Panel sign-ins, logouts, and security events for all administrators.
                        </p>
                    </div>
                </div>

                <div className="rounded-2xl border border-slate-800 overflow-hidden">
                    {adminLogsError && (
                        <div className="border-b border-amber-500/20 bg-amber-500/5 px-5 py-3 text-sm text-amber-300">
                            {adminLogsError}
                        </div>
                    )}
                    {adminLogs.length === 0 ? (
                        <p className="text-sm text-slate-500 p-6 text-center">
                            {adminLogsError
                                ? 'No log entries could be loaded.'
                                : 'No administrator activity recorded yet. Sign in again after deploying the latest build to start recording panel activity.'}
                        </p>
                    ) : (
                        <div className="divide-y divide-slate-800/80 max-h-[28rem] overflow-y-auto">
                            {adminLogs.map((log) => (
                                <div key={log.id} className="px-5 py-4 space-y-2 hover:bg-slate-950/40 transition-colors">
                                    <div className="flex flex-wrap items-center gap-2">
                                        <span className={`inline-flex rounded-md border px-2 py-0.5 text-[9px] font-bold uppercase ${adminSeverityClass(log.severity)}`}>
                                            {log.severity}
                                        </span>
                                        <span className="font-mono text-[10px] text-slate-500">{log.event}</span>
                                        {log.user?.email && (
                                            <span className="text-[10px] font-semibold text-rose-400">{log.user.email}</span>
                                        )}
                                    </div>
                                    <p className="text-sm text-slate-200">{log.message}</p>
                                    <div className="flex flex-wrap items-center gap-3 text-[11px] text-slate-500">
                                        {log.ip_address && <span>IP: {log.ip_address}</span>}
                                        <span className="inline-flex items-center gap-1">
                                            <Clock className="w-3 h-3" />
                                            {new Date(log.logged_at).toLocaleString()}
                                        </span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </section>
        </div>
    );
}