import { Link, usePage } from '@inertiajs/react';
import { ShieldAlert, X } from 'lucide-react';
import { useState } from 'react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { edit as editSecurity } from '@/routes/security';
import type { Auth } from '@/types';

const ADMIN_ROLES = ['super-admin', 'admin'];
const DISMISS_KEY = 'two-factor-banner-dismissed';

export function TwoFactorAdminBanner() {
    const { auth } = usePage<{ auth: Auth }>().props;
    const [dismissed, setDismissed] = useState(
        () => sessionStorage.getItem(DISMISS_KEY) === '1',
    );

    const user = auth.user;
    const isAdmin = user?.roles?.some((role) => ADMIN_ROLES.includes(role));

    if (!user || !isAdmin || user.two_factor_enabled || dismissed) {
        return null;
    }

    function dismiss() {
        sessionStorage.setItem(DISMISS_KEY, '1');
        setDismissed(true);
    }

    return (
        <Alert className="border-amber-500/40 bg-amber-500/10 pr-10">
            <ShieldAlert className="text-amber-700 dark:text-amber-400" />
            <AlertTitle>Sécurisez votre compte administrateur</AlertTitle>
            <AlertDescription className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <span>
                    L’authentification à deux facteurs est recommandée pour
                    les comptes administrateur et n’est pas encore activée
                    sur le vôtre.
                </span>
                <Button size="sm" className="shrink-0" asChild>
                    <Link href={editSecurity()}>Activer la 2FA</Link>
                </Button>
            </AlertDescription>
            <Button
                size="icon"
                variant="ghost"
                className="absolute top-2 right-2 size-7"
                onClick={dismiss}
                aria-label="Masquer"
            >
                <X className="size-4" />
            </Button>
        </Alert>
    );
}