import { Link, useRouterState } from "@tanstack/react-router";
import { Menu, X } from "lucide-react";
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
import { LANGS, t, type Copy, type Lang } from "@/lib/archive/i18n";
import { useArchiveStore } from "@/lib/archive/store";

const I18nContext = createContext<{ lang: Lang; setLang: (lang: Lang) => void; copy: Copy } | null>(null);

export function useI18n() {
  return useContext(I18nContext) ?? { lang: "en" as const, setLang: () => undefined, copy: t("en") };
}

const PRIMARY = [
  { to: "/library", label: "Library" },
  { to: "/research", label: "Research" },
  { to: "/collections", label: "Collections" },
  { to: "/scholars", label: "Scholars" },
  { to: "/history", label: "History" },
] as const;

const MORE = [
  { to: "/search", label: "Search" },
  { to: "/books", label: "Books" },
  { to: "/audio", label: "Audio" },
  { to: "/tafsir", label: "Tafsir" },
  { to: "/lectures", label: "Lectures" },
  { to: "/translations", label: "Translations" },
  { to: "/lineage", label: "Lineage" },
  { to: "/submit", label: "Submit" },
  { to: "/curator", label: "Curator" },
  { to: "/about", label: "About" },
] as const;

function NavLink({ to, label, path }: { to: string; label: string; path: string }) {
  const active = path === to || (to !== "/" && path.startsWith(to));
  return (
    <Link
      to={to}
      className={`inline-flex min-h-11 items-center text-sm ${active ? "text-ink" : "text-muted hover:text-ink"}`}
    >
      <span className={active ? "border-b border-brass pb-0.5" : ""}>{label}</span>
    </Link>
  );
}

export function Shell({ children }: { children: ReactNode }) {
  const [lang, setLangState] = useState<Lang>("en");
  const [open, setOpen] = useState(false);
  const path = useRouterState({ select: (state) => state.location.pathname });
  const hydrate = useArchiveStore((state) => state.hydrate);

  useEffect(() => {
    hydrate();
    const saved = localStorage.getItem("faidha-lang");
    if (saved === "en" || saved === "fr" || saved === "ha" || saved === "ar") setLangState(saved);
  }, [hydrate]);

  useEffect(() => {
    setOpen(false);
  }, [path]);

  const setLang = (next: Lang) => {
    setLangState(next);
    localStorage.setItem("faidha-lang", next);
  };

  return (
    <I18nContext.Provider value={{ lang, setLang, copy: t(lang) }}>
      <a href="#content" className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:bg-paper focus:px-3 focus:py-2">
        Skip to content
      </a>
      <div className="min-h-screen">
        <header className="border-b border-ink/15">
          <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-5 py-4">
            <Link to="/" className="min-h-11 min-w-0">
              <span className="block text-xs tracking-[0.22em] text-brass uppercase">Faidha</span>
              <span className="block truncate text-lg leading-tight">Digital Archive</span>
            </Link>
            <div className="flex items-center gap-1">
              <div className="hidden items-center gap-1 sm:flex" aria-label="Language">
                {LANGS.map((item) => (
                  <button
                    key={item.id}
                    type="button"
                    onClick={() => setLang(item.id)}
                    className={`min-h-11 min-w-11 px-2 text-xs tracking-widest ${lang === item.id ? "text-ink" : "text-muted"}`}
                    aria-pressed={lang === item.id}
                  >
                    {item.label}
                  </button>
                ))}
              </div>
              <button
                type="button"
                className="inline-flex min-h-11 min-w-11 items-center justify-center md:hidden"
                aria-expanded={open}
                aria-label={open ? "Close menu" : "Open menu"}
                onClick={() => setOpen((value) => !value)}
              >
                {open ? <X strokeWidth={1.5} /> : <Menu strokeWidth={1.5} />}
              </button>
            </div>
          </div>
          <nav className="mx-auto hidden max-w-5xl items-center justify-between gap-6 px-5 pb-3 md:flex" aria-label="Primary">
            <div className="flex flex-wrap gap-x-5">
              {PRIMARY.map((item) => (
                <NavLink key={item.to} {...item} path={path} />
              ))}
            </div>
            <div className="flex flex-wrap gap-x-4">
              {MORE.slice(0, 6).map((item) => (
                <NavLink key={item.to} {...item} path={path} />
              ))}
            </div>
          </nav>
          {open ? (
            <nav className="border-t border-ink/10 px-5 py-2 md:hidden" aria-label="Mobile">
              {[...PRIMARY, ...MORE].map((item) => (
                <div key={item.to}>
                  <NavLink {...item} path={path} />
                </div>
              ))}
              <div className="flex gap-1 py-2">
                {LANGS.map((item) => (
                  <button
                    key={item.id}
                    type="button"
                    onClick={() => setLang(item.id)}
                    className={`min-h-11 min-w-11 text-xs tracking-widest ${lang === item.id ? "text-ink" : "text-muted"}`}
                  >
                    {item.label}
                  </button>
                ))}
              </div>
            </nav>
          ) : null}
        </header>
        <main id="content" className="mx-auto max-w-5xl px-5 py-10">
          {children}
        </main>
        <footer className="border-t border-ink/15">
          <div className="mx-auto flex max-w-5xl flex-col gap-3 px-5 py-8 text-sm text-muted sm:flex-row sm:items-end sm:justify-between">
            <p className="max-w-xl">The desk does not invent quotations, dates, or chains of transmission. A file is not knowledge until it is extracted, indexed, and verified.</p>
            <div className="flex gap-4">
              <Link to="/about" className="min-h-11 inline-flex items-center hover:text-ink">About</Link>
              <Link to="/lineage" className="min-h-11 inline-flex items-center hover:text-ink">Lineage</Link>
              <Link to="/curator" className="min-h-11 inline-flex items-center hover:text-ink">Curator</Link>
              <Link to="/submit" className="min-h-11 inline-flex items-center hover:text-ink">Submit</Link>
            </div>
          </div>
        </footer>
      </div>
    </I18nContext.Provider>
  );
}