/* Honey Scripts — App shell */

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA, useCallback: useCallbackA, useRef: useRefA } = React;

// Jump to a heading id (accounts for the sticky topbar). We jump instantly and
// re-correct a couple of times so lazy media (videos/images) that shift the
// layout after mount can't leave us at the wrong spot. Native smooth-scroll and
// per-frame tweens are unreliable inside the embedded preview, so we keep it
// instant — the standard behaviour for command-palette jumps.
function hsJumpTo(anchor) {
  const el = document.getElementById(anchor);
  if (!el) return false;
  window.scrollTo(0, Math.max(0, el.getBoundingClientRect().top + window.scrollY - 80));
  return true;
}
function hsScrollToAnchor(anchor) {
  let tries = 0;
  const findAndJump = () => {
    if (hsJumpTo(anchor)) {
      // Re-correct after layout settles (lazy media can shift positions).
      setTimeout(() => hsJumpTo(anchor), 130);
      setTimeout(() => hsJumpTo(anchor), 360);
      return;
    }
    if (tries++ < 25) requestAnimationFrame(findAndJump);
  };
  requestAnimationFrame(findAndJump);
}

// Tiny i18n + theme + language contexts shared via window helpers (set before App mounts)
function makeUseLang(getter) { return () => getter(); }

const HS_STORE = "https://store.honey-scripts.com";
const HS_DISCORD = "https://discord.honey-scripts.com/";

function HsPromo() {
  const [open, setOpen] = useStateA(true);
  if (!open) return null;
  return (
    <div className="hs-promo" id="hsPromo">
      <button type="button" className="hs-promo-close" aria-label="Close" onClick={() => setOpen(false)}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
        Close
      </button>
      <div className="hs-promo-card">
        <span className="hs-promo-badge">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m15 9-6 6"/><path d="M9 9h.01M15 15h.01"/></svg>
          Discount
        </span>
        <div className="hs-promo-off">20% <span>OFF</span></div>
        <p className="hs-promo-sub">Join our Discord and grab your discount code</p>
        <a className="hs-promo-btn" href={HS_DISCORD} target="_blank" rel="noopener noreferrer">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
          Join our Discord
        </a>
      </div>
    </div>
  );
}

function SiteFooter({ onNavigate }) {
  const year = new Date().getFullYear();
  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="foot-logo">
              <img src="assets/bee-logo.png" alt="Honey Scripts"/>
              <span className="foot-logo-text">
                <span className="l1">Honey</span>
                <span className="l2">Scripts</span>
              </span>
            </div>
            <p>Reliable, secure, and lightning-fast scripts built for your roleplay server.</p>
          </div>

          <nav className="foot-col">
            <h4>Subpages</h4>
            <a href={HS_STORE} target="_blank" rel="noreferrer noopener">Home</a>
            <a href={HS_STORE} target="_blank" rel="noreferrer noopener">Products</a>
            <a href="#/introduction" onClick={(e) => { e.preventDefault(); onNavigate && onNavigate("introduction"); }}>Documentation</a>
            <a href={HS_DISCORD} target="_blank" rel="noreferrer noopener">Support</a>
          </nav>

          <nav className="foot-col">
            <h4>Legal</h4>
            <a href={HS_STORE + "/terms"} target="_blank" rel="noreferrer noopener">Terms</a>
            <a href={HS_STORE + "/terms/privacy"} target="_blank" rel="noreferrer noopener">Privacy</a>
            <a href={HS_STORE + "/terms/impressum"} target="_blank" rel="noreferrer noopener">Impressum</a>
          </nav>

          <nav className="foot-col">
            <h4>Social</h4>
            <a href={HS_DISCORD} target="_blank" rel="noreferrer noopener">Discord</a>
            <a href="https://www.youtube.com/@honeyscriptsfivem" target="_blank" rel="noreferrer noopener">YouTube</a>
            <a href="https://www.tiktok.com/@honeyscriptsfivem" target="_blank" rel="noreferrer noopener">TikTok</a>
          </nav>
        </div>

        <div className="foot-bottom">
          <div className="foot-bottom-text">
            <p className="copyright">&copy; {year} Honey Scripts. All Rights Reserved.</p>
            <p className="foot-fine">Not affiliated with or endorsed by Rockstar Games, Take-Two Interactive or Cfx.re (FiveM). All trademarks belong to their respective owners.</p>
          </div>
          <ul className="foot-pay">
            <li><img src="https://template-assets.tebex.io/images/we-accept/visa.png" alt="Visa"/></li>
            <li><img src="https://template-assets.tebex.io/images/we-accept/mastercard.png" alt="Mastercard"/></li>
            <li><img src="https://template-assets.tebex.io/images/we-accept/amex.png" alt="American Express"/></li>
            <li><img src="https://template-assets.tebex.io/images/we-accept/google.png" alt="Google Pay"/></li>
            <li><img src="https://template-assets.tebex.io/images/we-accept/apple.svg" alt="Apple Pay"/></li>
          </ul>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [lang, setLangState] = useStateA(() => localStorage.getItem("hs.lang") || "en");
  const [theme, setThemeState] = useStateA(() => localStorage.getItem("hs.theme") || "dark");
  const [pageId, setPageId] = useStateA(() => {
    const fromHash = window.location.hash.replace(/^#\/?/, "").split("/")[0];
    const valid = SIDEBAR.flatMap(g => g.items.flatMap(i => [...(i.landingPage ? [i.landingPage] : []), ...i.pages.map(p => p.id)]));
    return valid.includes(fromHash) ? fromHash : "welcome";
  });
  const [mobileNav, setMobileNav] = useStateA(false);
  const pendingAnchor = useRefA(null);

  // Expose lang + t globally for child components.
  // (No hooks here — these run during every child render, must be plain getters.)
  window.__lang = lang;
  window.useLang = () => lang;
  window.useT = () => ((key) => (I18N[lang] && I18N[lang][key]) || I18N.en[key] || key);

  // Persistence
  useEffectA(() => { localStorage.setItem("hs.lang", lang); }, [lang]);
  useEffectA(() => {
    localStorage.setItem("hs.theme", theme);
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  // Scroll to top (or to a pending anchor) and update hash on page change.
  useEffectA(() => {
    if (pendingAnchor.current) {
      hsScrollToAnchor(pendingAnchor.current);
      pendingAnchor.current = null;
    } else {
      window.scrollTo(0, 0);
    }
    history.replaceState(null, "", "#/" + pageId);
  }, [pageId]);

  // ESC closes mobile nav
  useEffectA(() => {
    const k = (e) => { if (e.key === "Escape") setMobileNav(false); };
    document.addEventListener("keydown", k);
    return () => document.removeEventListener("keydown", k);
  }, []);

  const onNavigate = useCallbackA((id, anchor) => {
    // Same page + anchor: the page-change effect won't fire, so scroll now.
    if (id === pageId && anchor) { hsScrollToAnchor(anchor); return; }
    pendingAnchor.current = anchor || null;
    setPageId(id);
  }, [pageId]);

  return (
    <div className="app-shell">
      <Topbar
        lang={lang}
        setLang={setLangState}
        theme={theme}
        setTheme={setThemeState}
        onNavigate={onNavigate}
        onOpenMobileNav={() => setMobileNav(true)}
      />

      {mobileNav && (
        <>
          <div className="drawer-backdrop" onClick={() => setMobileNav(false)}/>
          <div className="drawer">
            <Sidebar activePage={pageId} onNavigate={onNavigate} onCloseMobile={() => setMobileNav(false)}/>
            <div className="drawer-cta">
              <a className="btn" href="https://discord.honey-scripts.com/" target="_blank" rel="noreferrer noopener">
                <Icon.Discord/> Discord
              </a>
              <a className="btn btn-primary" href="https://store.honey-scripts.com" target="_blank" rel="noreferrer noopener">
                <Icon.Cart/> Tebex
              </a>
            </div>
          </div>
        </>
      )}

      <div className="layout">
        <div className="sidebar-rail">
          <Sidebar activePage={pageId} onNavigate={onNavigate}/>
        </div>
        <main style={{ minWidth: 0 }}>
          {pageId === "welcome"
            ? <WelcomePage onNavigate={onNavigate}/>
            : <PageView pageId={pageId} onNavigate={onNavigate}/>}
        </main>
        <div className="toc-rail">
          {pageId === "welcome"
            ? <TOC pageId="welcome" headings={window.welcomeTOC(lang)} fastNav/>
            : <TOC pageId={pageId}/>}
        </div>
      </div>

      <SiteFooter onNavigate={onNavigate}/>
      <HsPromo/>
    </div>
  );
}

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