import { Layers, LogOut } from "lucide-react";
import { Link, useLocation } from "@tanstack/react-router";
import { useQueryClient } from "@tanstack/react-query";

import { $api } from "@/client/lib/api";
import { meQueryKey, useMe } from "@/client/auth/use-me";
import { paths } from "@/client/lib/paths";
import { toast } from "@/client/lib/toast";

const navItems = [
  { to: paths.pats, label: "Tokens" },
  { to: paths.calendars, label: "Calendars" },
  { to: paths.addressbooks, label: "Contacts" },
  { to: paths.files, label: "Files" },
] as const;

export function Header() {
  const location = useLocation();
  const me = useMe();
  const queryClient = useQueryClient();
  const logout = $api.useMutation("post", "/api/v1/auth/logout", {
    onSuccess: () => {
      queryClient.setQueryData(meQueryKey, null);
      toast.info("Signed out.");
      window.location.assign(paths.login);
    },
  });

  const isAuthed = me.data != null;

  return (
    <header className="sticky top-0 z-50 border-b border-zinc-800/60 bg-zinc-900">
      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
        <Link to={paths.me} className="group flex items-center gap-3 transition-opacity hover:opacity-80">
          <span className="inline-grid h-9 w-9 place-items-center">
            <Layers
              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 sm:block">
            <strong className="block text-sm font-semibold text-zinc-100">dab</strong>
            <small className="block text-xs text-zinc-400">your DAV-native data home</small>
          </span>
        </Link>

        {isAuthed ? (
          <nav className="flex items-center gap-1 overflow-x-auto" aria-label="Primary">
            {navItems.map(({ to, label }) => {
              const active = location.pathname.startsWith(to);
              return (
                <Link
                  key={to}
                  to={to}
                  aria-current={active ? "page" : undefined}
                  className={`rounded-lg px-3 py-1.5 text-sm transition-colors ${
                    active
                      ? "bg-accent-500/10 text-accent-300"
                      : "text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-100"
                  }`}
                >
                  {label}
                </Link>
              );
            })}
            <button
              type="button"
              onClick={() => logout.mutate({})}
              disabled={logout.isPending}
              aria-label="Sign out"
              className="ml-2 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-zinc-400 transition-colors hover:bg-zinc-800/70 hover:text-zinc-100 disabled:opacity-60"
            >
              <LogOut className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />
            </button>
          </nav>
        ) : null}
      </div>
    </header>
  );
}