"use client";

import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
import { navItems } from "@/lib/navigation";
import { useAmbient } from "@/components/ambient/ambient-context";
import { ConnectionStatus } from "./status-dot";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

function useActiveLabel() {
  const pathname = usePathname();
  const item = [...navItems]
    .sort((a, b) => b.matchPrefix.length - a.matchPrefix.length)
    .find((i) => pathname.startsWith(i.matchPrefix));
  return item?.label ?? "Console";
}

export function TopBar() {
  const label = useActiveLabel();
  const { state } = useAmbient();
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  const signalTone =
    state.tone === "vermilion"
      ? "text-vermilion"
      : state.tone === "amber"
        ? "text-amber"
        : "text-signal";

  return (
    <header className="sticky top-0 z-40 flex items-center gap-4 px-5 py-3.5">
      <div className="flex min-w-0 items-baseline gap-3">
        <span className="eyebrow">GMW</span>
        <h1 className="display truncate text-[1.5rem] text-ink">{label}</h1>
      </div>

      <div className="ml-auto flex items-center gap-3">
        <span className={cn("pill", signalTone)}>
          <span
            className={cn(
              "size-1.5 rounded-full bg-current animate-breathe",
            )}
          />
          {state.label ?? "nominal"}
        </span>
        <ConnectionStatus />
        <button
          type="button"
          aria-label="Open command palette"
          onClick={() => window.dispatchEvent(new Event("command-palette:open"))}
          className="hidden items-center gap-1.5 rounded-[11px] border border-hairline bg-white/5 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-signal/40 sm:flex"
        >
          <span className="mono text-[0.65rem]">⌘K</span>
        </button>
        <button
          type="button"
          aria-label="Toggle theme"
          onClick={() => setTheme(theme === "light" ? "dark" : "light")}
          className="flex size-9 items-center justify-center rounded-[11px] border border-hairline bg-white/5 text-ink-soft transition-colors hover:text-ink hover:border-signal/40"
        >
          {mounted && theme === "light" ? (
            <Moon className="size-4" />
          ) : (
            <Sun className="size-4" />
          )}
        </button>
      </div>
    </header>
  );
}