/* Header, top accessibility bar, navigation, language switcher, accessibility panel */

const { useState, useEffect, useRef } = React;

function PPHeader({ route, setRoute, lang, setLang, t, openAccPanel }) {
  const navItems = [
    ["home", "/"],
    ["about", "/o-poradni"],
    ["services", "/oferta"],
    ["team", "/zespol"],
    ["news", "/aktualnosci"],
    ["resources", "/strefa-rodzica"],
    ["downloads", "/do-pobrania"],
    ["contact", "/kontakt"],
  ];
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <header className="pp-header" role="banner">
      <a href="#main" className="pp-skip">{lang === "uk" ? "Перейти до основного контенту" : lang === "en" ? "Skip to main content" : "Przejdź do treści głównej"}</a>

      {/* Top utility bar */}
      <div className="pp-topbar">
        <div className="pp-container pp-topbar-row">
          <div className="pp-topbar-left">
            <span className="pp-topbar-tag">
              <span className="pp-topbar-dot"></span>
              {t.topbar.open}
            </span>
            <span style={{ opacity: 0.7 }}>{t.topbar.address}</span>
          </div>
          <div className="pp-topbar-right">
            <button
              className="pp-topbar-btn"
              onClick={openAccPanel}
              aria-label={t.topbar.acc}
              title={t.topbar.acc}
            >
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <circle cx="12" cy="4" r="2" />
                <path d="M5 8 H19 M12 8 V14 M9 22 L12 14 L15 22" />
              </svg>
              {t.topbar.acc}
            </button>
            <div role="group" aria-label={t.topbar.lang} style={{ display: "flex", gap: 4 }}>
              {["pl", "en", "uk"].map((l) => (
                <button
                  key={l}
                  className="pp-topbar-btn"
                  aria-pressed={lang === l}
                  onClick={() => setLang(l)}
                  style={{ minWidth: 36, justifyContent: "center", padding: "4px 10px" }}
                >
                  {l.toUpperCase()}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Main nav row */}
      <div className="pp-container pp-nav-row">
        <a
          href="#/"
          className="pp-logo"
          onClick={(e) => {
            e.preventDefault();
            setRoute("/");
          }}
        >
          <span className="pp-logo-mark">
            <PPLogoMark />
          </span>
          <span>
            <span className="pp-logo-name">Poradnia<br />w Lubrańcu</span>
            <span className="pp-logo-sub">Psych. · Pedag. · od 1989</span>
          </span>
        </a>

        <nav className="pp-nav" aria-label="Main">
          {navItems.map(([key, path]) => (
            <a
              key={key}
              href={`#${path}`}
              aria-current={route === path ? "page" : undefined}
              onClick={(e) => {
                e.preventDefault();
                setRoute(path);
                window.scrollTo({ top: 0, behavior: "smooth" });
              }}
            >
              {t.nav[key]}
            </a>
          ))}
        </nav>

        <div className="pp-nav-cta">
          <button
            className="pp-mobile-toggle"
            onClick={() => setMobileOpen((v) => !v)}
            aria-expanded={mobileOpen}
            aria-label="Menu"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <line x1="3" y1="6" x2="21" y2="6" />
              <line x1="3" y1="12" x2="21" y2="12" />
              <line x1="3" y1="18" x2="21" y2="18" />
            </svg>
          </button>
          <a
            href="tel:+48542862573"
            className="pp-btn pp-btn-ghost"
            style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.04em" }}
            aria-label={t.common.callUs}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
            </svg>
            54 286 25 73
          </a>
          <a
            href="#/kontakt"
            className="pp-btn pp-btn-primary"
            onClick={(e) => { e.preventDefault(); setRoute("/kontakt"); window.scrollTo({top:0,behavior:"smooth"}); }}
          >
            {t.common.bookVisit}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <path d="M7 17 L17 7 M7 7 H17 V17" />
            </svg>
          </a>
        </div>
      </div>

      {/* Mobile menu drawer */}
      {mobileOpen && (
        <div style={{ borderTop: "1px solid var(--rule)", background: "var(--bg-elev)" }}>
          <div className="pp-container" style={{ padding: "12px 20px 16px" }}>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 4 }}>
              {navItems.map(([key, path]) => (
                <li key={key}>
                  <a
                    href={`#${path}`}
                    onClick={(e) => {
                      e.preventDefault();
                      setRoute(path);
                      setMobileOpen(false);
                      window.scrollTo({ top: 0 });
                    }}
                    style={{
                      display: "block",
                      padding: "12px 14px",
                      textDecoration: "none",
                      borderRadius: "var(--r-sm)",
                      background: route === path ? "var(--bg-card)" : "transparent",
                      fontSize: 16,
                    }}
                  >
                    {t.nav[key]}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </header>
  );
}

// ---- Accessibility Panel ----
function PPAccPanel({ open, onClose, theme, setTheme, fontSize, setFontSize, simple, setSimple, t, lang }) {
  const themes = [
    { v: "light", lbl: lang === "uk" ? "Світла" : lang === "en" ? "Light" : "Jasny" },
    { v: "dark", lbl: lang === "uk" ? "Темна" : lang === "en" ? "Dark" : "Ciemny" },
    { v: "hc", lbl: lang === "uk" ? "Контраст" : lang === "en" ? "Contrast" : "Kontrast" },
  ];
  const sizes = [
    { v: "md", lbl: "A" },
    { v: "lg", lbl: "AA" },
    { v: "xl", lbl: "AAA" },
  ];
  if (!open) return null;

  const labels = {
    pl: { panel: "Dostępność", theme: "Motyw", text: "Rozmiar tekstu", simple: "Wersja uproszczona", simpleHint: "Bez dekoracyjnych grafik, prostszy język" },
    en: { panel: "Accessibility", theme: "Theme", text: "Text size", simple: "Simple version", simpleHint: "No decorative graphics, plainer language" },
    uk: { panel: "Доступність", theme: "Тема", text: "Розмір тексту", simple: "Спрощена версія", simpleHint: "Без декоративних графік, проста мова" },
  }[lang] || {};

  return (
    <div className="pp-acc-panel" role="dialog" aria-label={labels.panel}>
      <h3>
        {labels.panel}
        <button className="pp-acc-close" onClick={onClose} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <line x1="6" y1="6" x2="18" y2="18" />
            <line x1="18" y1="6" x2="6" y2="18" />
          </svg>
        </button>
      </h3>

      <div className="pp-acc-row">
        <span>{labels.theme}</span>
        <div className="pp-acc-segs">
          {themes.map((th) => (
            <button
              key={th.v}
              className="pp-acc-seg"
              aria-pressed={theme === th.v}
              onClick={() => setTheme(th.v)}
            >
              {th.lbl}
            </button>
          ))}
        </div>
      </div>

      <div className="pp-acc-row">
        <span>{labels.text}</span>
        <div className="pp-acc-segs">
          {sizes.map((s) => (
            <button
              key={s.v}
              className="pp-acc-seg"
              aria-pressed={fontSize === s.v}
              onClick={() => setFontSize(s.v)}
              style={{ fontSize: s.v === "md" ? 12 : s.v === "lg" ? 14 : 16 }}
            >
              {s.lbl}
            </button>
          ))}
        </div>
      </div>

      <div className="pp-acc-toggle-row">
        <div>
          <div>{labels.simple}</div>
          <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 2 }}>{labels.simpleHint}</div>
        </div>
        <button
          role="switch"
          aria-checked={simple}
          onClick={() => setSimple(!simple)}
          style={{
            width: 44, height: 24,
            borderRadius: 100,
            background: simple ? "var(--accent)" : "var(--rule)",
            border: "none", cursor: "pointer",
            position: "relative",
            transition: "background var(--t-fast)",
          }}
        >
          <span style={{
            position: "absolute",
            top: 3,
            left: simple ? 23 : 3,
            width: 18, height: 18,
            background: "var(--bg-elev)",
            borderRadius: "50%",
            transition: "left var(--t-fast)",
          }} />
        </button>
      </div>

      <a
        href="#/dostepnosc"
        onClick={(e) => { e.preventDefault(); window.location.hash = "#/dostepnosc"; onClose(); }}
        style={{
          display: "block",
          marginTop: 14,
          paddingTop: 14,
          borderTop: "1px solid var(--rule-soft)",
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          textDecoration: "none",
          color: "var(--ink-soft)",
        }}
      >
        → {t.nav.accessibility}
      </a>
    </div>
  );
}

function PPAccFab({ onClick, lang }) {
  return (
    <button
      className="pp-acc-fab"
      onClick={onClick}
      aria-label={lang === "uk" ? "Доступність" : lang === "en" ? "Accessibility" : "Dostępność"}
      title={lang === "uk" ? "Доступність" : lang === "en" ? "Accessibility" : "Dostępność"}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <circle cx="12" cy="4" r="2" />
        <path d="M5 9 H19 M12 9 V15 M9 22 L12 15 L15 22" />
      </svg>
    </button>
  );
}

Object.assign(window, { PPHeader, PPAccPanel, PPAccFab });