import { Link, router, usePage } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import type { PageProps } from '@/types';

export function ImpersonationBanner() {
  const { auth } = usePage<PageProps>().props;

  if (!auth.impersonating) return null;

  const targetName = auth.user?.name ?? 'a user';
  const targetEmail = auth.user?.email;
  const targetId = auth.user?.id;

  return (
    <div
      role="alert"
      className="bg-amber-500 dark:bg-amber-600 text-white dark:text-amber-50 py-2 px-4 flex justify-between items-center"
    >
      <span className="text-sm font-medium">
        You are impersonating {targetName}
        {targetEmail ? ` (${targetEmail})` : ''}.
        {targetId && (
          <>
            {' '}
            <Link href={`/admin/users/${targetId}`} className="underline hover:text-white/80">
              View profile
            </Link>
            {' · '}
          </>
        )}
        Return to your admin account to stop.
      </span>
      <Button
        variant="secondary"
        size="sm"
        className="h-7 text-xs"
        onClick={() => router.post('/admin/impersonate/stop')}
      >
        Stop Impersonating
      </Button>
    </div>
  );
}