"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import { GearIcon, MenuIcon, SnowflakeIcon } from "@/components/icons";
import { SettingsDialog } from "@/components/SettingsDialog";
import { ThemeToggle } from "@/components/ThemeToggle";
import { sidebarOpen } from "@/lib/nav";
import { OPEN_SETTINGS_EVENT } from "@/lib/ui-events";
import { cn } from "@/lib/utils";

/**
 * Minimal, sticky frosted top bar: brand on the left, quiet actions on the
 * right. The phone layout keeps the brand compact and relies on the tab bar
 * for navigation.
 */
export function AppHeader({ className, compact = false }: { className?: string; compact?: boolean }) {
  const [settingsOpen, setSettingsOpen] = useState(false);

  useEffect(() => {
    const onOpen = () => setSettingsOpen(true);
    window.addEventListener(OPEN_SETTINGS_EVENT, onOpen);
    return () => window.removeEventListener(OPEN_SETTINGS_EVENT, onOpen);
  }, []);

  // Restore the desktop sidebar width preference once, on the client.
  useEffect(() => {
    void import("@/components/Sidebar").then((module) => module.sidebarCollapse.hydrate());
  }, []);

  return (
    <>
      <header
        className={cn(
          "glass sticky top-0 z-40 -mx-4 mb-6 px-4 lg:hidden sm:-mx-6 sm:px-6",
          className,
        )}
      >
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-3">
          <button
            type="button"
            onClick={() => sidebarOpen.toggle()}
            aria-label="Open menu"
            className="mr-1 grid size-9 shrink-0 place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
          >
            <MenuIcon className="size-5" />
          </button>
          <Link href="/" className="group flex items-center gap-2.5 rounded-xl px-1 py-1" aria-label="Freezmo home">
            <span
              aria-hidden
              className="grid size-8 place-items-center rounded-[0.6rem] bg-[var(--text)] text-[var(--page)] transition-transform group-hover:scale-[1.04]"
            >
              <SnowflakeIcon className="size-[18px]" />
            </span>
            <span className="flex items-baseline gap-2">
              <span className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">
                Freezmo
              </span>
              {!compact ? (
                <span className="hidden text-[13px] text-[var(--text-subtle)] sm:inline">
                  study feed
                </span>
              ) : null}
            </span>
          </Link>

          <div className="flex items-center gap-1">
            <button
              type="button"
              onClick={() => setSettingsOpen(true)}
              aria-label="Open settings and Ollama status"
              title="Settings"
              className="inline-flex size-9 items-center justify-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
            >
              <GearIcon className="size-[18px]" />
            </button>
            <ThemeToggle />
          </div>
        </div>
      </header>
      <SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
    </>
  );
}