import { DropdownMenu } from "@cloudflare/kumo/components/dropdown";
import { ListIcon } from "@phosphor-icons/react";
import { Link, useNavigate } from "@tanstack/react-router";
import { signOut } from "~/fns/auth";
import { resetAnalytics } from "~/lib/analytics";
import { useAction } from "~/hooks/use-action";
import { useEmailUnverified, useSupporter, useUnreadNotifications, useViewer } from "~/hooks/use-viewer";
import { ProBadge } from "~/components/billing/ProBadge";
import { Avatar } from "~/ui/Avatar";
import { Logo } from "~/ui/Logo";
import { buttonClass } from "~/ui/Button";
import { SearchForm } from "~/components/SearchForm";
import { Icon } from "~/ui/Icon";
import { cn } from "~/utils/cn";

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

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

function UserMenu({ name, isAdmin }: { name: string; isAdmin: boolean }) {
  const navigate = useNavigate();
  const supporter = useSupporter();
  const logout = useAction(signOut);
  const items = [
    { to: "/$owner", params: { owner: name }, label: "Your profile" },
    { to: "/settings", params: {}, label: "Settings" },
    { to: "/settings/billing", params: {}, label: "Billing" },
    { 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({});
    resetAnalytics();
    await navigate({ to: "/" });
  }

  return (
    <DropdownMenu>
      <DropdownMenu.Trigger
        render={<button type="button" className="flex items-center rounded-md" />}
        aria-label="Open user menu"
      >
        <Avatar name={name} size="md" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Content align="end" className="w-52">
        <DropdownMenu.Group>
          <DropdownMenu.Label>
            Signed in as <span className="font-medium text-kumo-default">{name}</span>
          </DropdownMenu.Label>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        {items.map((item) => (
          <DropdownMenu.LinkItem closeOnClick key={item.label} render={<Link to={item.to} params={item.params} />}>
            {item.label}
            {item.label === "Billing" && supporter ? <ProBadge className="ml-auto" /> : null}
          </DropdownMenu.LinkItem>
        ))}
        <DropdownMenu.Separator />
        <DropdownMenu.Item onClick={handleSignOut}>Sign out</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

function NavMenu({ items }: { items: ReadonlyArray<{ to: string; label: string }> }) {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger
        render={<button type="button" className="flex items-center text-kumo-subtle hover:text-kumo-strong" />}
        aria-label="Open navigation"
      >
        <ListIcon className="size-5" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Content align="start" className="w-48">
        {items.map((item) => (
          <DropdownMenu.LinkItem closeOnClick key={item.to} render={<Link to={item.to} />}>
            {item.label}
          </DropdownMenu.LinkItem>
        ))}
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

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

  return (
    <header data-ph-mask className="sticky top-0 z-20 border-b border-kumo-hairline bg-kumo-canvas/85 backdrop-blur">
      <div className="mx-auto flex h-14 max-w-7xl items-center gap-3 px-4 sm:gap-5 md:px-6">
        {nav.length > 1 && (
          <div className="md:hidden">
            <NavMenu items={nav} />
          </div>
        )}
        <Link to="/" aria-label="gitfor home" className="shrink-0 transition-opacity hover:opacity-85">
          <Logo />
        </Link>
        <SearchForm className="hidden flex-1 md:block md:max-w-sm" />
        <nav className={cn("items-center gap-4 text-sm whitespace-nowrap", nav.length > 1 ? "hidden md:flex" : "flex")}>
          {nav.map((item) => (
            <Link key={item.to} to={item.to} className="text-kumo-subtle hover:text-kumo-strong [&.active]:text-white">
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex shrink-0 items-center gap-3 whitespace-nowrap">
          <Link to="/search" aria-label="Search" className="text-kumo-subtle hover:text-kumo-strong md:hidden">
            <Icon name="search" className="size-4" />
          </Link>
          {viewer ? (
            <>
              {!unverified && (
                <Link to="/new" className={buttonClass("secondary", "sm")}>
                  <span aria-hidden>+</span> New
                </Link>
              )}
              <Link
                to="/notifications"
                className="relative text-kumo-subtle hover:text-kumo-strong"
                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-kumo-default hover:text-kumo-strong">
                Sign in
              </Link>
              <Link to="/signup" className={buttonClass("primary", "sm")}>
                Sign up
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  );
}