"use client";

import { toastApiError } from "@/lib/toast-api-error";
import { useState } from "react";
import { ShieldAlert, UserRound } from "lucide-react";
import type { ImpersonationType } from "@/lib/auth/logout-client";
import { exitCustomerImpersonation } from "@/lib/auth/logout-client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

type ImpersonationBannerProps = {
  tenant: string;
  impersonated?: boolean;
  impersonationType?: ImpersonationType | null;
  impersonationOwnerName?: string | null;
};

export function ImpersonationBanner({
  tenant,
  impersonated = false,
  impersonationType = "admin",
  impersonationOwnerName,
}: ImpersonationBannerProps) {
  const [exiting, setExiting] = useState(false);

  if (!impersonated) {
    return null;
  }

  const type: ImpersonationType = impersonationType === "corporate" ? "corporate" : "admin";
  const message =
    type === "corporate"
      ? impersonationOwnerName
        ? `You are viewing this portal as a sub-user. Owner account: ${impersonationOwnerName}.`
        : "You are viewing this portal as a sub-user."
      : "You are viewing this customer portal as an impersonated user.";

  async function handleExit() {
    setExiting(true);
    try {
      await exitCustomerImpersonation(tenant, type);
    } catch (error) {
      setExiting(false);
      toastApiError(error, "Could not end impersonation.");
    }
  }

  return (
    <div className="border-b bg-muted/40 px-4 py-2.5 lg:px-6">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          <div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-400">
            {type === "corporate" ? (
              <UserRound className="size-4" />
            ) : (
              <ShieldAlert className="size-4" />
            )}
          </div>
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <p className="text-sm font-medium text-foreground">
                {type === "corporate" ? "Sub-user view" : "Impersonation mode"}
              </p>
              <Badge
                variant="outline"
                className="rounded-full border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400"
              >
                Active session
              </Badge>
            </div>
            <p className="truncate text-xs text-muted-foreground sm:text-sm">{message}</p>
          </div>
        </div>

        <Button
          size="sm"
          variant="outline"
          className="shrink-0 sm:ml-4"
          disabled={exiting}
          onClick={() => void handleExit()}
        >
          {exiting
            ? "Exiting…"
            : type === "corporate"
              ? "Return to my account"
              : "Exit impersonation"}
        </Button>
      </div>
    </div>
  );
}