import { ArrowRight, LogOut, ShieldCheck } from "lucide-react";
import { useState } from "react";
import { Link, NavLink, useLocation, useNavigate } from "react-router";

import { authClient, isAdminSession, useSession } from "@/client/lib/auth-client";
import { signInPath } from "@/client/lib/navigation";
import { Skeleton } from "@/client/components/ui/skeleton";

const navLinkClass = ({ isActive }: { isActive: boolean }): string =>
  [
    // Stay reachable on small screens by letting the nav row scroll
    // horizontally instead of disappearing behind a hamburger menu —
    // tessera's nav is short enough to stay visible.
    "shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
    isActive ? "bg-accent-500/10 text-accent-400" : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200",
  ].join(" ");

const HeaderBrand = ({ href }: { href: string }) => (
  <Link
    to={href}
    className="group flex shrink-0 items-center gap-3 transition-opacity hover:opacity-80"
    aria-label="tessera"
  >
    <span className="inline-grid h-9 w-9 place-items-center">
      <ShieldCheck
        className="h-6 w-6 text-accent-400 transition-transform duration-200 group-hover:-rotate-6"
        strokeWidth={2}
        aria-hidden="true"
      />
    </span>
    <span className="hidden leading-tight sm:block">
      <strong className="block text-sm font-semibold text-zinc-100">tessera</strong>
      <small className="block text-xs text-zinc-400">An identification mark.</small>
    </span>
  </Link>
);

const SignInPill = () => {
  const { pathname, search } = useLocation();
  if (pathname === "/sign-in") return null;
  const here = `${pathname}${search}`;
  return (
    <Link
      to={signInPath(here)}
      className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-800/60 bg-zinc-900/70 px-2.5 py-1.5 text-xs font-medium text-accent-400 transition-colors hover:border-accent-500/40 hover:bg-zinc-800/60 hover:text-accent-300"
    >
      Sign in
      <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
    </Link>
  );
};

interface SignedInUserProps {
  name: string;
  email: string;
  refetch: () => void;
}

const SignedInUser = ({ name, email, refetch }: SignedInUserProps) => {
  const navigate = useNavigate();
  const [signingOut, setSigningOut] = useState(false);
  const [failed, setFailed] = useState(false);
  const handleSignOut = async () => {
    if (signingOut) return;
    setSigningOut(true);
    setFailed(false);
    try {
      await authClient.signOut();
      // Better Auth's signOut clears the cookie server-side but doesn't push
      // the cleared state into the nanostore. Refetch so the header (and any
      // other useSession consumer) sees the user is gone before we navigate.
      await refetch();
      navigate("/");
    } catch {
      // Server may have cleared the session even if our response path tripped.
      // Refetch first so the header reflects server truth — if the session is
      // actually gone, this component unmounts before the failed label paints.
      try {
        await refetch();
      } catch {
        // ignore: the failed label still surfaces the sign-out failure even
        // if refetch itself errors.
      }
      setFailed(true);
    } finally {
      setSigningOut(false);
    }
  };
  const display = name.trim() || email;
  const buttonClass = failed
    ? "inline-flex items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-500/10 px-2.5 py-1.5 text-xs text-red-300 transition-colors hover:border-red-500/50 hover:bg-red-500/20 hover:text-red-200 disabled:cursor-not-allowed disabled:opacity-60"
    : "inline-flex items-center gap-1.5 rounded-lg border border-zinc-800/60 bg-zinc-900/70 px-2.5 py-1.5 text-xs text-zinc-300 transition-colors hover:border-zinc-700/60 hover:bg-zinc-800/60 hover:text-zinc-100 disabled:cursor-not-allowed disabled:opacity-60";
  const label = signingOut ? "Signing out..." : failed ? "Retry sign-out" : "Sign out";
  return (
    <div className="flex shrink-0 items-center gap-2">
      <span className="hidden max-w-[200px] truncate text-xs text-zinc-500 lg:block" title={email}>
        {display}
      </span>
      <button
        type="button"
        onClick={handleSignOut}
        disabled={signingOut}
        aria-busy={signingOut || undefined}
        className={buttonClass}
        aria-label={failed ? "Sign-out failed. Press to retry." : "Sign out"}
        title={failed ? "Sign-out failed. Press to retry." : undefined}
      >
        <LogOut className="h-3.5 w-3.5" aria-hidden="true" />
        <span className="hidden sm:inline">{label}</span>
      </button>
    </div>
  );
};

interface HeaderProps {
  variant: "public" | "app" | "loading";
}

export const Header = ({ variant }: HeaderProps) => {
  const session = useSession();
  const isAdmin = isAdminSession(session);
  const isAuthenticated = Boolean(session.data);
  // Brand always points home — `/` is the launcher when signed in and
  // the marketing page when not. Routing signed-in users to /account
  // would strand them with no path back to the launcher except the URL
  // bar.
  const brandHref = "/";

  if (variant === "loading") {
    return (
      <header className="sticky top-0 z-50 w-full border-b border-zinc-800/60 bg-zinc-900/95" aria-busy="true">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
          <HeaderBrand href={brandHref} />
          <Skeleton className="h-8 w-20 rounded-lg" />
        </div>
      </header>
    );
  }

  if (variant === "public") {
    return (
      <header className="sticky top-0 z-50 w-full border-b border-zinc-800/60 bg-zinc-900/95">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
          <HeaderBrand href={brandHref} />
          {isAuthenticated && session.data ? (
            <SignedInUser name={session.data.user.name} email={session.data.user.email} refetch={session.refetch} />
          ) : (
            <SignInPill />
          )}
        </div>
      </header>
    );
  }

  return (
    <header className="sticky top-0 z-50 w-full border-b border-zinc-800/60 bg-zinc-900/95">
      <div className="mx-auto flex max-w-7xl items-center gap-4 px-4 py-3 sm:px-6">
        <HeaderBrand href={brandHref} />

        {isAuthenticated ? (
          <nav
            aria-label="Main navigation"
            className="-mx-2 flex flex-1 items-center gap-1 overflow-x-auto px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
          >
            <NavLink to="/account" className={navLinkClass}>
              Account
            </NavLink>
            {isAdmin ? (
              <>
                <span aria-hidden="true" className="mx-1 h-4 w-px shrink-0 bg-zinc-800" />
                <NavLink to="/admin/invites" className={navLinkClass}>
                  Invites
                </NavLink>
                <NavLink to="/admin/clients" className={navLinkClass}>
                  Clients
                </NavLink>
                <NavLink to="/admin/launcher-apps" className={navLinkClass}>
                  Launcher
                </NavLink>
                <NavLink to="/admin/users" className={navLinkClass}>
                  Users
                </NavLink>
              </>
            ) : null}
          </nav>
        ) : (
          <span className="flex-1" />
        )}

        {isAuthenticated && session.data ? (
          <SignedInUser name={session.data.user.name} email={session.data.user.email} refetch={session.refetch} />
        ) : null}
      </div>
    </header>
  );
};