// ---- Root app ----

const App = () => {
  const [active, setActive] = React.useState("overview");
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [liveSales, setLiveSales] = React.useState(null);
  const [loggedIn, setLoggedIn] = React.useState(() => !!localStorage.getItem("agentSession"));

  React.useEffect(() => {
    const sync = () => setLoggedIn(!!localStorage.getItem("agentSession"));
    window.addEventListener("storage", sync);
    return () => window.removeEventListener("storage", sync);
  }, []);

  React.useEffect(() => {
    const fetchSales = () =>
      sb.from("agent_ape_sales").select("date, amount")
        .then(({ data }) => setLiveSales(data || []));
    fetchSales();
    const timer = window.setInterval(fetchSales, 30000);
    return () => window.clearInterval(timer);
  }, []);

  React.useEffect(() => {
    const sections = NAV.map(n => document.getElementById(n.id)).filter(Boolean);
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting) setActive(en.target.id);
      });
    }, { rootMargin: "-30% 0px -60% 0px", threshold: 0 });
    sections.forEach(s => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
    }
    setMenuOpen(false);
  };

  return (
    <div className="app">
      {menuOpen && <div className="mobile-overlay" onClick={() => setMenuOpen(false)} />}

      <aside className={`sidebar ${menuOpen ? "open" : ""}`}>
        <div className="brand">
          <img src="photos/logo.png" className="brand-logo" alt="83G Logo" />
        </div>

        <nav className="nav">
          <div className="nav-label">Sections</div>
          {NAV.map(n => (
            <button
              key={n.id}
              className={`nav-item ${active===n.id?"active":""}`}
              onClick={() => n.href ? (setMenuOpen(false), window.location.href = n.href) : scrollTo(n.id)}
            >
              <span className="nav-num">{n.num}</span>
              <span>{n.id === "login" && loggedIn ? "โปรไฟล์" : n.label}</span>
            </button>
          ))}
        </nav>

        <div className="sidebar-foot">
          <div><strong>15 Unit · 110 ตัวแทน</strong></div>
          <div>เป้า 30,000,000 APE</div>
          <div style={{marginTop:8, fontSize:10, opacity:0.7}}>R · T · M · S Framework</div>
        </div>
      </aside>

      <main className="main">
        <div className="topbar">
          <button className={`menu-btn ${menuOpen ? "open" : ""}`} onClick={() => setMenuOpen(o => !o)} aria-label="เมนู">
            <span /><span /><span />
          </button>
          <div className="crumbs">
            <strong>แผนผู้บริหาร 83G</strong> &nbsp;›&nbsp; ปี 2026 &nbsp;›&nbsp; {NAV.find(n=>n.id===active)?.label}
          </div>
          <div className="topbar-meta">
            <span><span className="dot"></span>Live draft</span>
            <span>v0.1 · {new Date().toLocaleDateString('th-TH', {day:'numeric', month:'short', year:'numeric'})}</span>
          </div>
        </div>

        <OverviewSection liveSales={liveSales} />
        <ApeGoalSection liveSales={liveSales} />
        <RtmsSection />
        <TrainingSection />
        <RoadmapSection />
        <footer className="app-footer">Application by สำนักงานกรุงไทยแอกซ่า 83G</footer>
      </main>
    </div>
  );
};

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