/* ============================================================
   Shared components - Header, Footer, Seal, Placeholder, etc.
   Plain React (no JSX-runtime); exported to window for other files.
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

const SEAL_SRC = "assets/hnd-pecat.png";

/* ---------- routing helpers ---------- */
function navHref(key) { return "#/" + (key || ""); }
function navTo(key) {
  window.location.hash = navHref(key);
}

/* ---------- Seal (logo) ---------- */
function Seal({ className, style }) {
  return <img src={SEAL_SRC} alt="Pečat Hrvatskog numizmatičkog društva" className={className} style={style} />;
}

/* ---------- Placeholder image slot ---------- */
function Placeholder({ label, shape, className, style }) {
  const cls = "ph" + (shape === "coin" ? " ph-coin" : "") + (className ? " " + className : "");
  return (
    <div className={cls} style={style} role="img" aria-label={"Mjesto za sliku: " + (label || "")}>
      <span className="ph-label">{label || "Slika"}</span>
    </div>
  );
}

/* ---------- Reveal on scroll ---------- */
function Reveal({ children, delay, as, className, style }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (!window.matchMedia("(prefers-reduced-motion: no-preference)").matches) { el.classList.add("in"); return; }
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) { el.classList.add("in"); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as || "div";
  const cls = "reveal" + (delay ? " d" + delay : "") + (className ? " " + className : "");
  return <Tag ref={ref} className={cls} style={style}>{children}</Tag>;
}

/* ---------- Breadcrumb ---------- */
function Breadcrumb({ trail }) {
  return (
    <nav className="breadcrumb" aria-label="Putanja">
      <a href={navHref("")}>Početna</a>
      {trail.map((t, i) => (
        <React.Fragment key={i}>
          <span className="sep" aria-hidden="true">›</span>
          {i === trail.length - 1
            ? <span className="cur" aria-current="page">{t.label}</span>
            : <a href={navHref(t.key)}>{t.label}</a>}
        </React.Fragment>
      ))}
    </nav>
  );
}

/* ---------- Language switcher ---------- */
function LangSwitch({ lang, setLang, dark }) {
  const langs = ["HR", "EN", "DE"];
  return (
    <div className="lang-switch" role="group" aria-label="Odabir jezika">
      {langs.map((l, i) => (
        <React.Fragment key={l}>
          {i > 0 && <span className="lang-sep" aria-hidden="true">·</span>}
          <button
            className={"lang-btn" + (lang === l ? " active" : "")}
            aria-pressed={lang === l}
            onClick={() => setLang(l)}
          >{l}</button>
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---------- TopBar ---------- */
function TopBar({ lang, setLang }) {
  return (
    <div className="topbar">
      <div className="wrap">
        <div className="topbar-left">
          <span className="topbar-tag">Osnovano u Zagrebu, 1928. - Član Međunarodnog numizmatičkog vijeća (INC)</span>
        </div>
        <div className="topbar-right">
          <LangSwitch lang={lang} setLang={setLang} />
          <button className="topbar-search" onClick={() => navTo("trazi")} aria-label="Pretraži stranicu">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
            Pretraži
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Desktop dropdown contents ---------- */
function DropdownPanel({ item }) {
  return (
    <div className="dropdown" role="menu">
      {item.children.map((c) => (
        c.group ? (
          <div key={c.key}>
            <a href={navHref(c.key)} role="menuitem">{c.label}</a>
            <div className="sub">
              {c.children.map((g) => <a key={g.key} href={navHref(g.key)} role="menuitem">{g.label}</a>)}
            </div>
          </div>
        ) : (
          <a key={c.key} href={navHref(c.key)} role="menuitem">{c.label}</a>
        )
      ))}
    </div>
  );
}

/* ---------- Masthead (sticky header + desktop nav) ---------- */
function Masthead({ current, lang, setLang, onOpenDrawer }) {
  const [openKey, setOpenKey] = useState(null);
  const [scrolled, setScrolled] = useState(false);
  const navRef = useRef(null);
  const NAV = window.HND.NAV;

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const onDoc = (e) => { if (navRef.current && !navRef.current.contains(e.target)) setOpenKey(null); };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, []);

  // close dropdown when route changes
  useEffect(() => { setOpenKey(null); }, [current]);

  const topKey = (current ? current.split("/")[0] : "") || "pocetna";

  return (
    <header className={"masthead" + (scrolled ? " scrolled" : "")}>
      <div className="wrap">
        <div className="masthead-inner">
          <a className="brand" href={navHref("")} aria-label="Hrvatsko numizmatičko društvo - početna">
            <Seal className="brand-seal" />
            <span className="brand-text">
              <span className="brand-name">Hrvatsko numizmatičko društvo</span>
              <span className="brand-sub">Zagreb · od 1928.</span>
            </span>
          </a>

          <nav className="mainnav" ref={navRef} aria-label="Glavna navigacija">
            {NAV.map((item) => {
              const hasKids = item.children && item.children.length;
              const isActive = topKey === item.key.split("/")[0];
              const isOpen = openKey === item.key;
              return (
                <div key={item.key} className={"navitem" + (isActive ? " active" : "") + (isOpen ? " open" : "")}
                  onMouseEnter={() => hasKids && setOpenKey(item.key)}
                  onMouseLeave={() => hasKids && setOpenKey(null)}
                >
                  {hasKids ? (
                    <button className="navlink" aria-haspopup="true" aria-expanded={isOpen}
                      onClick={() => setOpenKey(isOpen ? null : item.key)}>
                      {item.short || item.label}<span className="caret" aria-hidden="true"></span>
                    </button>
                  ) : (
                    <a className="navlink" href={navHref(item.key)}>{item.short || item.label}</a>
                  )}
                  {hasKids && <DropdownPanel item={item} />}
                </div>
              );
            })}
          </nav>

          <button className="nav-toggle" onClick={onOpenDrawer} aria-label="Otvori izbornik">
            <span className="bars" aria-hidden="true"><span></span><span></span><span></span></span>
            Izbornik
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---------- Mobile drawer ---------- */
function Drawer({ open, onClose, current, lang, setLang }) {
  const [openGroups, setOpenGroups] = useState({});
  const NAV = window.HND.NAV;
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  useEffect(() => { if (open) onClose(); /* close on nav */ // eslint-disable-next-line
  }, [current]);

  const toggle = (k) => setOpenGroups((s) => ({ ...s, [k]: !s[k] }));

  return (
    <>
      <div className={"drawer-scrim" + (open ? " open" : "")} onClick={onClose}></div>
      <aside className={"drawer" + (open ? " open" : "")} aria-hidden={!open} aria-label="Izbornik">
        <div className="drawer-head">
          <span className="brand-name">Izbornik</span>
          <button className="drawer-close" onClick={onClose} aria-label="Zatvori izbornik">×</button>
        </div>
        <div className="drawer-body">
          {NAV.map((item) => {
            const hasKids = item.children && item.children.length;
            if (!hasKids) {
              return (
                <div className="drawer-group" key={item.key}>
                  <a className="drawer-row" href={navHref(item.key)}>{item.label}</a>
                </div>
              );
            }
            const isOpen = !!openGroups[item.key];
            return (
              <div className={"drawer-group" + (isOpen ? " open" : "")} key={item.key}>
                <button className="drawer-row" onClick={() => toggle(item.key)} aria-expanded={isOpen}>
                  {item.label}<span className="caret" aria-hidden="true"></span>
                </button>
                <div className="drawer-sub">
                  {item.children.map((c) => (
                    c.group ? (
                      <React.Fragment key={c.key}>
                        <a href={navHref(c.key)} className={current === c.key ? "active" : ""}>{c.label}</a>
                        {c.children.map((g) => (
                          <a key={g.key} className={"deep" + (current === g.key ? " active" : "")} href={navHref(g.key)}>{g.label}</a>
                        ))}
                      </React.Fragment>
                    ) : (
                      <a key={c.key} href={navHref(c.key)} className={current === c.key ? "active" : ""}>{c.label}</a>
                    )
                  ))}
                </div>
              </div>
            );
          })}
          <div className="drawer-lang">
            {["HR", "EN", "DE"].map((l) => (
              <button key={l} className={"lang-btn" + (lang === l ? " active" : "")} onClick={() => setLang(l)}>{l}</button>
            ))}
          </div>
        </div>
      </aside>
    </>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const C = window.HND.CONTACT;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <div className="footer-brand">
              <Seal className="seal" />
              <div>
                <div className="fb-name">Hrvatsko<br/>numizmatičko društvo</div>
                <p>Strukovna udruga osnovana 1928. godine u Zagrebu, posvećena numizmatici i srodnim disciplinama.</p>
              </div>
            </div>
            <div className="footer-ministry">
              <img className="footer-ministry-logo" src="assets/grb-hrvatske.svg"
                alt="Grb Republike Hrvatske" />
              <small>Rad Društva sufinancira Ministarstvo kulture i medija Republike Hrvatske.</small>
            </div>
          </div>
          <div className="footer-col">
            <h4>Sadržaj</h4>
            <ul>
              <li><a href={navHref("nove-knjige")}>Nove knjige</a></li>
              <li><a href={navHref("prinove")}>Prinove u biblioteci</a></li>
              <li><a href={navHref("publikacije/obol")}>OBOL / Bilten</a></li>
              <li><a href={navHref("publikacije/numizmaticke-vijesti")}>Numizmatičke vijesti</a></li>
              <li><a href={navHref("hnd-izdanja/medalje")}>HND izdanja</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Društvo</h4>
            <ul>
              <li><a href={navHref("povijest/povijest")}>Povijest</a></li>
              <li><a href={navHref("informacije/clanstvo")}>Članstvo</a></li>
              <li><a href={navHref("informacije/ustroj")}>Ustroj HND</a></li>
              <li><a href={navHref("informacije/kontakt")}>Kontakt</a></li>
              <li><a href={navHref("incc-2025")}>INCC 2025</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Kontakt</h4>
            <ul>
              <li>{C.address}</li>
              <li><a href={"mailto:" + C.email}>{C.email}</a></li>
              <li>Sastanci: {C.hours}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Hrvatsko numizmatičko društvo</span>
          <div className="links">
            <a href={navHref("zastita-privatnosti")}>Zaštita privatnosti</a>
            <a href={navHref("impressum")}>Impressum</a>
            <a href={navHref("sitemap")}>Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  navHref, navTo, Seal, Placeholder, Reveal, Breadcrumb,
  LangSwitch, TopBar, Masthead, Drawer, Footer,
});