import { Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { signOut } from "~/fns/auth";
import { useAction } from "~/hooks/use-action";
import { useUnreadNotifications, useViewer } from "~/hooks/use-viewer";
import { Avatar } from "~/ui/Avatar";
import { Logo } from "~/ui/Logo";
import { buttonClass } from "~/ui/Button";
import { useDismiss } from "~/hooks/use-dismiss";
import { SearchForm } from "~/components/SearchForm";
import { Icon } from "~/ui/Icon";

const MEMBER_NAV = [{ to: "/explore", label: "Explore" }] as const;

const VISITOR_NAV = [
  { to: "/features", label: "Features" },
  { to: "/self-host", label: "Self-host" },
  { to: "/explore", label: "Explore" },
] as const;

function UserMenu({ name, isAdmin }: { name: string; isAdmin: boolean }) {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const menuRef = useDismiss<HTMLDivElement>(open, () => setOpen(false));
  const logout = useAction(signOut);
  const items = [
    { to: "/$owner", params: { owner: name }, label: "Your profile" },
    { to: "/settings", params: {}, label: "Settings" },
    { to: "/settings/tokens", params: {}, label: "Access tokens" },
    { to: "/settings/containers", params: {}, label: "Containers" },
    { to: "/orgs/new", params: {}, label: "New organization" },
    ...(isAdmin ? [{ to: "/admin", params: {}, label: "Site admin" } as const] : []),
  ];

  async function handleSignOut() {
    await logout.run({});
    await navigate({ to: "/" });
  }

  return (
    <div ref={menuRef} className="relative">
      <button
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        onClick={() => setOpen((value) => !value)}
        className="flex items-center rounded-md"
      >
        <Avatar name={name} size="md" />
        <span className="sr-only">Open user menu</span>
      </button>
      {open && (
        <div
          role="menu"
          className="animate-rise absolute right-0 z-30 mt-2 w-52 overflow-hidden rounded-md border border-gray-800 bg-gray-950 shadow-2xl shadow-black/60"
        >
          <div className="border-b border-gray-800 px-3 py-2 text-xs text-gray-500">
            Signed in as <span className="font-medium text-gray-200">{name}</span>
          </div>
          {items.map((item) => (
            <Link
              key={item.label}
              to={item.to}
              params={item.params}
              role="menuitem"
              onClick={() => setOpen(false)}
              className="block px-3 py-2 text-sm text-gray-300 hover:bg-gray-900 hover:text-white"
            >
              {item.label}
            </Link>
          ))}
          <button
            type="button"
            role="menuitem"
            onClick={handleSignOut}
            className="block w-full border-t border-gray-800 px-3 py-2 text-left text-sm text-gray-400 hover:bg-gray-900 hover:text-white"
          >
            Sign out
          </button>
        </div>
      )}
    </div>
  );
}

export function SiteHeader() {
  const viewer = useViewer();
  const unread = useUnreadNotifications();
  const nav = viewer ? MEMBER_NAV : VISITOR_NAV;

  return (
    <header data-ph-mask className="sticky top-0 z-20 border-b border-gray-800/80 bg-gray-950/85 backdrop-blur">
      <div className="mx-auto flex h-14 max-w-7xl items-center gap-5 px-4 md:px-6">
        <Link to="/" aria-label="gitfor home" className="transition-opacity hover:opacity-85">
          <Logo />
        </Link>
        <SearchForm className="hidden flex-1 md:block md:max-w-sm" />
        <nav className="flex items-center gap-4 text-sm">
          {nav.map((item) => (
            <Link key={item.to} to={item.to} className="text-gray-400 hover:text-white [&.active]:text-white">
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-3">
          <Link to="/search" aria-label="Search" className="text-gray-400 hover:text-white md:hidden">
            <Icon name="search" className="size-4" />
          </Link>
          {viewer ? (
            <>
              <Link to="/new" className={buttonClass("secondary", "sm")}>
                <span aria-hidden>+</span> New
              </Link>
              <Link
                to="/notifications"
                className="relative text-gray-400 hover:text-white"
                aria-label={`Notifications (${unread} unread)`}
              >
                <svg aria-hidden viewBox="0 0 16 16" className="size-4 fill-current">
                  <title>Notifications</title>
                  <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2Zm5-5V7a5 5 0 0 0-4-4.9V1a1 1 0 0 0-2 0v1.1A5 5 0 0 0 3 7v4l-1.5 1.5V13h13v-.5L13 11Z" />
                </svg>
                {unread > 0 && (
                  <span className="absolute -top-1 -right-1.5 size-2.5 rounded-full border-2 border-gray-950 bg-accent-500" />
                )}
              </Link>
              <UserMenu name={viewer.name} isAdmin={viewer.isAdmin} />
            </>
          ) : (
            <>
              <Link to="/login" className="text-sm text-gray-300 hover:text-white">
                Sign in
              </Link>
              <Link to="/signup" className={buttonClass("primary", "sm")}>
                Sign up
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  );
}