import type { SharedProps } from '@/types/inertia';
import { router, usePage } from '@inertiajs/react';
import { ShieldAlert } from 'lucide-react';

/**
 * Sticky banner shown when an admin is impersonating another user. Renders
 * nothing when no impersonation is active, so it's safe to mount on every
 * page without further gating. The "Stop" button posts to a route that lives
 * outside the admin gate — the impersonated user (who isn't an admin) still
 * needs to be able to leave the session.
 */
export default function ImpersonationBanner() {
    const { impersonation } = usePage<SharedProps>().props;

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

    const stop = () => {
        router.post('/admin/stop-impersonating');
    };

    return (
        <div
            role="alert"
            data-testid="impersonation-banner"
            className="flex items-center justify-between gap-4 border-b border-destructive/40 bg-destructive/10 px-4 py-2 text-[12px] text-destructive"
        >
            <span className="flex items-center gap-2">
                <ShieldAlert className="h-3.5 w-3.5" strokeWidth={2.5} />
                <span className="font-medium">
                    Impersonating {impersonation.target_email ?? 'unknown user'}
                </span>
                {impersonation.admin_email && (
                    <span className="text-destructive/70">
                        · admin {impersonation.admin_email}
                    </span>
                )}
            </span>
            <button
                type="button"
                onClick={stop}
                data-testid="impersonation-banner-stop"
                className="rounded-md border border-destructive/40 bg-destructive/5 px-2.5 py-1 text-[11px] font-medium text-destructive hover:bg-destructive/15"
            >
                Stop
            </button>
        </div>
    );
}
