import { Link, useRouter, useRouterState } from "@tanstack/react-router";
import type { MouseEvent } from "react";
import { Gift, Globe, GraduationCap, Shield, Users } from "lucide-react";
import { CFL_ADMIN_HUB_URL, GRANT_SCOUT_ORIGIN } from "@/lib/constants";
import { ROLE_LABEL, type AppRole } from "@/lib/identity";
import { stampUserNav, useHydrated, useRoleStore } from "@/lib/role-store";
import { cn } from "@/lib/utils";

const TABS: { role: AppRole; icon: typeof GraduationCap; hint: string }[] = [
  { role: "public", icon: Globe, hint: "Public member" },
  { role: "donor", icon: Gift, hint: "Donor desk" },
  { role: "student", icon: GraduationCap, hint: "Athlete desk" },
  { role: "instructor", icon: Users, hint: "Coach desk" },
  { role: "staff", icon: Shield, hint: "Super Admin" },
];

export function RolePreviewBar() {
  const role = useRoleStore((s) => s.role);
  const operatorRole = useRoleStore((s) => s.operatorRole);
  const signedIn = useRoleStore((s) => s.signedIn);
  const setPreview = useRoleStore((s) => s.setPreview);
  const hydrated = useHydrated();
  const router = useRouter();
  const pathname = useRouterState({ select: (s) => s.location.pathname });

  function go(next: AppRole, ev: MouseEvent<HTMLButtonElement>) {
    if (!ev.isTrusted) return;
    if (next === role) return;
    stampUserNav();
    setPreview(next);
    if (next === "public") {
      if (!pathname.startsWith("/public")) {
        void router.navigate({ to: "/public", replace: true });
      }
      return;
    }
    if (pathname.startsWith("/public") || pathname.startsWith("/login")) {
      void router.navigate({ to: "/", replace: true });
    }
  }

  return (
    <div className="preview-bar fixed inset-x-0 top-0 z-50 text-sidebar-foreground">
      <div className="flex h-11 items-center gap-2 px-3 sm:px-5">
        <p className="hidden shrink-0 text-[10px] font-medium tracking-[0.18em] text-primary uppercase sm:block">
          Preview as
        </p>
        {operatorRole === "staff" && role !== "staff" ? (
          <span className="hidden shrink-0 rounded-md bg-primary px-2 py-1 text-[10px] font-semibold text-primary-foreground sm:inline">
            Super Admin can edit
          </span>
        ) : null}
        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
          {TABS.map((tab) => {
            const Icon = tab.icon;
            const active = hydrated && role === tab.role;
            return (
              <button
                key={tab.role}
                type="button"
                onClick={(ev) => go(tab.role, ev)}
                className={cn(
                  "inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs font-semibold transition-colors sm:px-3",
                  active
                    ? "bg-primary text-primary-foreground"
                    : "text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground",
                )}
              >
                <Icon className="size-3.5" />
                <span>{tab.role === "staff" ? "Super Admin" : ROLE_LABEL[tab.role]}</span>
                <span className="hidden text-[10px] font-medium opacity-70 lg:inline">{tab.hint}</span>
              </button>
            );
          })}
        </div>
        <a
          href={GRANT_SCOUT_ORIGIN}
          className="inline-flex min-h-8 shrink-0 items-center rounded-md border border-primary/40 px-2.5 text-[11px] font-semibold text-primary sm:px-3"
        >
          <span className="sm:hidden">Scout</span>
          <span className="hidden sm:inline">Grant Scout</span>
        </a>
        <a
          href={CFL_ADMIN_HUB_URL}
          className="inline-flex min-h-8 shrink-0 items-center rounded-md border border-primary/40 px-2.5 text-[11px] font-semibold text-primary sm:px-3"
        >
          <span className="sm:hidden">Hub</span>
          <span className="hidden sm:inline">Admin Hub</span>
        </a>
        <Link
          to="/login"
          className="shrink-0 text-[11px] font-medium tracking-wide text-sidebar-muted hover:text-primary"
        >
          {signedIn ? "Switch account" : "Sign in"}
        </Link>
      </div>
    </div>
  );
}