import { router, usePage } from '@inertiajs/react';
import { Eye } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';

type ImpersonationProps = {
    active: boolean;
    readonly: boolean;
    impersonator: { id: number; name: string; email: string } | null;
    user: { id: number; name: string; email: string } | null;
};

export function ImpersonationBanner() {
    const impersonation = usePage().props.impersonation as ImpersonationProps | undefined;

    if (!impersonation?.active || !impersonation.user) {
        return null;
    }

    const stopImpersonation = () => {
        router.post('/impersonacion/finalizar');
    };

    return (
        <Alert className="border-amber-500/40 bg-amber-500/10">
            <Eye className="size-4 text-amber-700 dark:text-amber-400" aria-hidden />
            <AlertTitle className="text-amber-950 dark:text-amber-100">
                Modo lectura — viendo como {impersonation.user.name}
            </AlertTitle>
            <AlertDescription className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <span className="text-sm leading-relaxed text-amber-950/80 dark:text-amber-100/80">
                    Sesión de administrador ({impersonation.impersonator?.email ?? '—'}). Puede
                    navegar el portal del inversionista, pero no realizar cambios ni operaciones.
                </span>
                <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    className="shrink-0 border-amber-600/40 bg-background/80"
                    onClick={stopImpersonation}
                >
                    Salir de impersonación
                </Button>
            </AlertDescription>
        </Alert>
    );
}