"use client";

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

import { SettingsDialog } from "@/components/SettingsDialog";
import { TabBar } from "@/components/TabBar";
import { ThemeToggle } from "@/components/ThemeToggle";
import { IS_DEV_INSTANCE } from "@/lib/dev-mode";
import { useI18n } from "@/lib/i18n";
import { OPEN_SETTINGS_EVENT } from "@/lib/ui-events";
import { cn } from "@/lib/utils";

/**
 * Minimal, sticky frosted top bar: brand on the left, theme chip on the
 * right. Phones navigate with the bottom tab bar (also mounted here, so every
 * screen that has a header gets it); the desktop rail carries navigation.
 */
export function AppHeader({ className, compact = false }: { className?: string; compact?: boolean }) {
  const { t } = useI18n();
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [settingsFocus, setSettingsFocus] = useState<{ field: "key"; nonce: number } | null>(null);

  useEffect(() => {
    const onOpen = (event: Event) => {
      setSettingsOpen(true);
      const focus = (event as CustomEvent<{ focus?: string }>).detail?.focus;
      if (focus === "key") setSettingsFocus({ field: "key", nonce: Date.now() });
    };
    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(
          // No negative margins here: the header is a direct child of <main>,
          // which has no horizontal padding — the -mx-4 made it 16px wider
          // than the viewport and caused a horizontal scroll on phones.
          "glass app-header sticky top-0 z-40 mb-6 px-4 lg:hidden sm:px-6",
          className,
        )}
      >
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-3">
          <Link
            href="/"
            className="group flex min-w-0 items-center gap-2.5 rounded-xl px-1 py-1"
            aria-label={t("header.home")}
          >
            {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
            <img
              src="/icons/icon-192.png"
              alt=""
              aria-hidden
              className="size-8 shrink-0 rounded-[0.6rem] transition-transform group-hover:scale-[1.04]"
            />
            <span className="flex min-w-0 items-baseline gap-2">
              <span className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">Freezmo</span>
              {IS_DEV_INSTANCE ? (
                <span className="rounded-md border border-amber-400/60 bg-amber-400/15 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700 dark:text-amber-300">
                  DEV
                </span>
              ) : null}
              {!compact ? (
                <span className="hidden truncate text-[13px] text-[var(--text-subtle)] sm:inline">
                  {t("header.tagline")}
                </span>
              ) : null}
            </span>
          </Link>

          <div className="flex shrink-0 items-center gap-1">
            <ThemeToggle />
          </div>
        </div>
      </header>
      <TabBar />
      <SettingsDialog
        open={settingsOpen}
        onClose={() => setSettingsOpen(false)}
        focusField={settingsFocus}
      />
    </>
  );
}