// Atlubni Docs — Main app + router
const { useState: uSS, useEffect: uEE, useRef: uRR, useMemo: uMM } = React;

const PAGE_MAP = {
  "": "intro", "intro": "intro",
  "quickstart": "quickstart", "auth": "auth", "rate-limits": "rate-limits", "errors": "errors",
  "geocoding": "geocoding", "routing": "routing", "matching": "matching", "places": "places", "bulk": "bulk",
  "changelog": "changelog", "status": "status",
};

const DocsApp = () => {
  // Persisted state
  const [theme, setTheme] = uSS(() => localStorage.getItem("atl_docs_theme") || "dark");
  const [lang, setLang] = uSS(() => localStorage.getItem("atl_docs_lang") || "en");
  const [density, setDensity] = uSS(() => localStorage.getItem("atl_docs_density") || "comfortable");
  const [fontScale, setFontScale] = uSS(() => parseFloat(localStorage.getItem("atl_docs_fs") || "1"));

  uEE(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("atl_docs_theme", theme); }, [theme]);
  uEE(() => {
    const dir = lang === "ar" ? "rtl" : "ltr";
    document.documentElement.setAttribute("lang", lang);
    document.documentElement.setAttribute("dir", dir);
    localStorage.setItem("atl_docs_lang", lang);
  }, [lang]);
  uEE(() => { document.documentElement.setAttribute("data-density", density); localStorage.setItem("atl_docs_density", density); }, [density]);
  uEE(() => { document.documentElement.style.fontSize = `${fontScale * 14}px`; localStorage.setItem("atl_docs_fs", String(fontScale)); }, [fontScale]);

  // Routing via hash
  const parseHash = () => {
    const h = (location.hash || "#/intro").replace(/^#\//, "");
    const [page, anchor] = h.split("#");
    return { page: PAGE_MAP[page] !== undefined ? PAGE_MAP[page] : page, anchor };
  };
  const [route, setRoute] = uSS(parseHash);
  uEE(() => {
    const onHash = () => { setRoute(parseHash()); window.scrollTo({ top: 0, behavior: "auto" }); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const goTo = (id, anchor) => { location.hash = `#/${id}${anchor ? "#" + anchor : ""}`; };

  // Sidebar mobile
  const [sbOpen, setSbOpen] = uSS(false);

  // Command palette
  const [cpOpen, setCpOpen] = uSS(false);
  uEE(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setCpOpen(o => !o); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Try-it drawer
  const [tryEp, setTryEp] = uSS(null);

  // i18n
  const i18n = window.__DOCS_I18N[lang];
  const t = { ...i18n.chrome, lang };
  const sb = i18n.sidebar;

  // Active page meta
  const pageMeta = window.__DOCS_PAGES[route.page];

  // Footer prev/next
  const ord = window.__DOCS_ORDER;
  const idx = ord.indexOf(route.page);
  const prev = idx > 0 ? ord[idx - 1] : null;
  const next = idx >= 0 && idx < ord.length - 1 ? ord[idx + 1] : null;

  // TOC: extract from rendered content
  const contentRef = uRR(null);
  const [toc, setToc] = uSS([]);
  const [activeAnchor, setActiveAnchor] = uSS("");
  uEE(() => {
    if (!contentRef.current) return;
    const heads = contentRef.current.querySelectorAll("h2[id], h3[id]");
    const list = Array.from(heads).map(h => ({ id: h.id, text: h.textContent.replace(/#$/, "").trim(), level: h.tagName === "H3" ? 3 : 2 }));
    setToc(list.length >= 3 ? list : []);
    if (list.length) {
      const obs = new IntersectionObserver((entries) => {
        const visible = entries.filter(e => e.isIntersecting).sort((a,b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible[0]) setActiveAnchor(visible[0].target.id);
      }, { rootMargin: "-80px 0px -70% 0px" });
      heads.forEach(h => obs.observe(h));
      return () => obs.disconnect();
    }
  }, [route.page, lang]);

  // Feedback
  const [fb, setFb] = uSS(null);

  // Render page
  const renderPage = () => {
    const props = { lang, t, go: goTo, openCP: () => setCpOpen(true), openTryIt: (ep) => setTryEp(ep) };
    switch (route.page) {
      case "intro": return <PageIndex {...props}/>;
      case "quickstart": return <PageQuickstart {...props}/>;
      case "auth": return <PageAuth {...props}/>;
      case "rate-limits": return <PageRateLimits {...props}/>;
      case "errors": return <PageErrors {...props}/>;
      case "geocoding": return <PageGeocoding {...props}/>;
      case "routing": return <PageRouting {...props}/>;
      case "matching": return <PageMatching {...props}/>;
      case "places": return <PagePlaces {...props}/>;
      case "bulk": return <PageBulk {...props}/>;
      case "changelog": return <PageChangelog {...props}/>;
      case "status": return <PageStatus {...props}/>;
      case "g-dispatch": return <PageGuideDispatch {...props}/>;
      default: return <PageStub lang={lang} title={route.page} desc={lang === "ar" ? "هذه الصفحة قيد الإعداد." : "This page is being prepared."}/>;
    }
  };

  const isIndex = route.page === "intro" && !route.anchor;

  // Page title for non-index pages
  const pageTitle = route.page !== "intro" && pageMeta ? pageMeta.title[lang] : null;
  const pageGroup = route.page !== "intro" && pageMeta ? pageMeta.group : null;

  return (
    <>
      <a href="#main" className="skip-link">{lang === "ar" ? "تخطّي إلى المحتوى" : "Skip to content"}</a>

      {/* TOP BAR */}
      <header className="topbar">
        <button className="tb-icon-btn tb-menu" onClick={() => setSbOpen(o => !o)} aria-label={t.menu}><DocIcon name="menu" size={16}/></button>
        <a href="#/intro" className="tb-logo" onClick={(e) => { e.preventDefault(); goTo("intro"); }}>
          <Logo/>
          Atlubni
          <span className="docs-tag">{t.docs}</span>
        </a>
        <div className="tb-search-spacer"/>
        <button className="tb-search" onClick={() => setCpOpen(true)}>
          <DocIcon name="search" size={14}/>
          <span style={{ flex: 1, textAlign: lang === "ar" ? "right" : "left" }}>{t.searchPh}</span>
          <span className="kbd">{t.cmdK}</span>
        </button>
        <div className="tb-search-spacer"/>
        <div className="tb-right">
          <span className="tb-version">{t.version} <DocIcon name="chevron-down" size={10}/></span>
          <button className="tb-icon-btn gh" aria-label="GitHub"><DocIcon name="github" size={14}/></button>
          <div className="lang-toggle">
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "ar" ? "active" : ""} onClick={() => setLang("ar")}>AR</button>
          </div>
          <button className="tb-icon-btn" aria-label="theme" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
            <DocIcon name={theme === "dark" ? "sun" : "moon"} size={14}/>
          </button>
          <a className="btn btn-ghost tb-signin" href="#">{t.signin}</a>
          <a className="btn btn-primary" href="#">{t.cta}</a>
        </div>
      </header>

      <div className="shell">
        {/* SIDEBAR */}
        <aside className={`sidebar ${sbOpen ? "open" : ""}`} aria-label="Docs nav">
          {sb.map(grp => (
            <div className="sb-group" key={grp.title}>
              <div className="sb-group-title">{grp.title}</div>
              {grp.items.map(it => (
                <a key={it.id} className={`sb-link ${route.page === it.id ? "active" : ""}`}
                   href={`#/${it.id}`} onClick={(e) => { e.preventDefault(); goTo(it.id); setSbOpen(false); }}>
                  {it.label}
                  {it.badge && <span className={`badge ${it.badgeKind || ""}`}>{it.badge}</span>}
                </a>
              ))}
            </div>
          ))}
        </aside>

        {/* CONTENT */}
        <main className="content-wrap" id="main" ref={contentRef}>
          {isIndex ? renderPage() : (
            <div className="content fade-in">
              {pageGroup && (
                <nav className="breadcrumb">
                  <a href="#/intro" onClick={(e)=>{e.preventDefault();goTo("intro");}}>{t.docs}</a>
                  <span className="sep">/</span>
                  <span>{pageGroup}</span>
                  <span className="sep">/</span>
                  <span style={{ color: "var(--ink-2)" }}>{pageTitle}</span>
                </nav>
              )}
              {pageTitle && (
                <>
                  <h1 className="page-h1">
                    {pageTitle}
                    {pageMeta?.badge === "BETA" && <span className="badge-pill beta">BETA</span>}
                  </h1>
                  <p className="page-sub">{pageSubtitle(route.page, lang)}</p>
                  <div className="page-meta">
                    <span>{t.lastUpd} 2026-04-21</span>
                    <a href="#"><DocIcon name="edit" size={12}/> {t.editGh}</a>
                  </div>
                </>
              )}
              {renderPage()}

              {/* Footer nav */}
              {(prev || next) && (
                <div className="footer-nav">
                  {prev ? (
                    <a className="fn-card prev" href={`#/${prev}`} onClick={(e)=>{e.preventDefault();goTo(prev);}}>
                      <span className="lbl">← {t.prev}</span>
                      <span className="ttl">{window.__DOCS_PAGES[prev]?.title[lang] || prev}</span>
                    </a>
                  ) : <span/>}
                  {next ? (
                    <a className="fn-card next" href={`#/${next}`} onClick={(e)=>{e.preventDefault();goTo(next);}}>
                      <span className="lbl">{t.next} →</span>
                      <span className="ttl">{window.__DOCS_PAGES[next]?.title[lang] || next}</span>
                    </a>
                  ) : <span/>}
                </div>
              )}

              {/* Feedback */}
              <div className="feedback">
                <span className="lbl">{t.helpful}</span>
                <button className="fb" onClick={() => setFb("yes")} disabled={fb}><DocIcon name="thumbs-up" size={14}/> {t.yes}</button>
                <button className="fb" onClick={() => setFb("no")} disabled={fb}><DocIcon name="thumbs-down" size={14}/> {t.no}</button>
                {fb && <span className="thanks">✓ {t.thanks}</span>}
              </div>

              <div className="edit-strip">
                <a href="#"><DocIcon name="github" size={12}/> {t.editGh}</a>
                <span>{t.lastUpd} 2026-04-21</span>
              </div>
            </div>
          )}
        </main>

        {/* TOC */}
        {toc.length > 0 && !isIndex && (
          <aside className="toc">
            <div className="toc-title">{t.onThisPage}</div>
            <ul>
              {toc.map(h => (
                <li key={h.id}>
                  <a href={`#${h.id}`} className={`${activeAnchor === h.id ? "active" : ""} ${h.level === 3 ? "h3" : ""}`}>{h.text}</a>
                </li>
              ))}
            </ul>
          </aside>
        )}
      </div>

      <CommandPalette open={cpOpen} onClose={() => setCpOpen(false)} t={t} lang={lang} onGo={(p, a) => goTo(p, a)} />
      <TryItDrawer open={!!tryEp} onClose={() => setTryEp(null)} endpoint={tryEp} t={t} lang={lang} />
      <DocsTweaks theme={theme} setTheme={setTheme} lang={lang} setLang={setLang} density={density} setDensity={setDensity} fontScale={fontScale} setFontScale={setFontScale}/>
    </>
  );
};

const Logo = () => (
  <img src="/assets/img/logo.png" alt="Atlubni" width="32" height="32" style={{ display: "block" }} />
);

const pageSubtitle = (page, lang) => {
  const m = {
    quickstart: { en: "From signup to first response in five minutes.", ar: "من التسجيل إلى أوّل استجابة في خمس دقائق." },
    auth: { en: "How to authenticate every request.", ar: "كيف تُصادق كل طلب." },
    "rate-limits": { en: "Quotas, headers, and what to do on 429.", ar: "الحصص، الترويسات، وماذا تفعل عند 429." },
    errors: { en: "Every error code, what it means, and how to fix it.", ar: "كل رمز خطأ، معناه، وكيفية إصلاحه." },
    geocoding: { en: "Convert text to coordinates and back.", ar: "حوّل النصّ إلى إحداثيّات والعكس." },
    routing: { en: "Routes, distances, and matrices.", ar: "طرق، مسافات، ومصفوفات." },
    matching: { en: "Find drivers and snap GPS to roads.", ar: "ابحث عن سائقين وحاذِ نقاط GPS مع الطرق." },
    places: { en: "Search 1.4M places by name, category, or prefix.", ar: "ابحث في ١٫٤ مليون مكان بالاسم أو الفئة أو البادئة." },
    bulk: { en: "Process millions of rows asynchronously.", ar: "عالج ملايين الصفوف بشكل غير متزامن." },
    changelog: { en: "What changed, when.", ar: "ما الذي تغيّر، ومتى." },
    status: { en: "Real-time service health and incident history.", ar: "صحّة الخدمة لحظيّة وسجلّ الحوادث." },
    "g-dispatch": { en: "Wire geocoding, matching, and routing into a working dispatcher.", ar: "اربط الترميز والمطابقة والتوجيه في موزّع يعمل." },
  };
  return m[page]?.[lang] || "";
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<DocsApp/>);