"use client";

import { useTranslations } from "next-intl";
import { useTransition } from "react";
import { Button } from "@/components/ui/button";
import { stopImpersonatingAction } from "@/lib/admin/actions";

/**
 * Persistent, unmistakable banner shown across the whole (app) shell while a
 * super-admin is impersonating another user (session.session.impersonatedBy is
 * set). The Stop button calls stopImpersonatingAction (server action), which
 * restores the admin's own session and redirects back to /support/users.
 */
export function ImpersonationBanner({ userLabel }: { userLabel: string }) {
  const t = useTranslations("Impersonation");
  const [pending, startTransition] = useTransition();

  return (
    <output
      aria-live="polite"
      className="sticky top-0 z-50 flex w-full flex-wrap items-center justify-center gap-3 border-amber-600 border-b bg-amber-400 px-4 py-2 text-amber-950 text-sm shadow-sm"
    >
      <span className="font-medium">{t("banner", { user: userLabel })}</span>
      <Button
        size="sm"
        variant="outline"
        className="h-7 border-amber-700/40 bg-amber-100 text-amber-950 hover:bg-amber-200 hover:text-amber-950"
        disabled={pending}
        onClick={() => startTransition(() => stopImpersonatingAction())}
      >
        {t("stop")}
      </Button>
    </output>
  );
}