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/Primitives";
import { buttonClass } from "./ui/Button";
import { inputClass } from "./ui/Field";
import { cn } from "~/utils/cn";

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

function UserMenu({ name }: { name: string }) {
  const navigate = useNavigate();
  const [open, setOpen] = useState(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: "/orgs/new", params: {}, label: "New organization" },
  ] as const;

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

  return (
    <div 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 navigate = useNavigate();

  return (
    <header 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="/" className="group flex items-center gap-2">
          <span
            aria-hidden
            className="grid size-7 place-items-center rounded-md bg-accent-500 font-mono text-sm font-bold text-gray-950 transition-transform group-hover:-rotate-6"
          >
            s
          </span>
          <span className="font-mono text-sm font-semibold tracking-tight text-white">stig</span>
        </Link>
        <form
          className="hidden flex-1 md:block md:max-w-sm"
          onSubmit={(event) => {
            event.preventDefault();
            const q = new FormData(event.currentTarget).get("q");
            navigate({ to: "/search", search: { q: typeof q === "string" ? q : "" } });
          }}
        >
          <label htmlFor="global-search" className="sr-only">
            Search
          </label>
          <input
            id="global-search"
            name="q"
            placeholder="Search repositories and issues…"
            className={cn(inputClass, "h-8 text-xs")}
          />
        </form>
        <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">
          {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} />
            </>
          ) : (
            <>
              <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>
  );
}