/* app.jsx — EcoID main shell */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [section, setSection] = useStateA("hero");
  const [mode, setMode] = useStateA("publik"); // publik | policy
  const [annotOpen, setAnnotOpen] = useStateA(false);
  const [flagCount, setFlagCount] = useStateA(23);
  const [tweaks, setTweak] = useTweaks({
    accent: "#C0392B",
    showPullquotes: true,
    headlineWeight: 800,
    compactKpi: false,
  });

  useEffectA(() => {
    document.body.dataset.mode = mode;
  }, [mode]);

  // Apply tweak: accent color
  useEffectA(() => {
    document.documentElement.style.setProperty('--eco-red', tweaks.accent);
  }, [tweaks.accent]);

  // Scrollspy
  useEffectA(() => {
    const sections = ["hero", "overview", "fiskal", "mbg", "subsidi", "simulator"];
    const onScroll = () => {
      const scrollY = window.scrollY + 120;
      let active = sections[0];
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= scrollY) active = id;
      }
      setSection(active);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  const openAnnot = (id) => {
    setAnnotOpen(true);
  };

  const tabs = [
    { id: "hero", label: "Beranda", num: "01" },
    { id: "overview", label: "Overview", num: "02" },
    { id: "fiskal", label: "Fiskal & APBN", num: "03" },
    { id: "mbg", label: "MBG", num: "04" },
    { id: "subsidi", label: "Subsidi", num: "05" },
    { id: "simulator", label: "Simulator", num: "06" },
  ];

  return (
    <>
      {/* Top bar */}
      <header className="topbar">
        <div className="topbar-inner">
          <div className="brand">
            <div className="brand-mark">E</div>
            <div>
              <div className="brand-name">EcoID</div>
              <div className="brand-sub">Analisis Jujur Ekonomi Indonesia 2026</div>
            </div>
          </div>

          <nav className="navtabs">
            {tabs.map(t => (
              <button key={t.id} className={`navtab ${section === t.id ? 'active' : ''}`} onClick={() => scrollTo(t.id)}>
                <span className="num">{t.num}</span>
                {t.label}
              </button>
            ))}
          </nav>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button
              onClick={() => setAnnotOpen(true)}
              style={{
                background: 'transparent', border: '1px solid var(--border)',
                padding: '6px 10px', fontSize: 11, color: 'var(--fg-2)',
                display: 'flex', alignItems: 'center', gap: 6, fontWeight: 600,
                letterSpacing: '0.04em',
              }}
              title="Lihat semua catatan pakar"
            >
              <svg width="12" height="14" viewBox="0 0 11 13" fill="none">
                <path d="M1 1V12M1 1H10L8 4L10 7H1" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
              </svg>
              <span style={{ color: 'var(--eco-red)' }}>{flagCount}</span> flag
            </button>

            <div className="mode-toggle">
              <button className={mode === "bayi" ? "on" : ""} onClick={() => setMode("bayi")} title="Penjelasan sederhana dengan ilustrasi sehari-hari">
                <span className="dot" style={{ background: mode === "bayi" ? "var(--eco-paper)" : "var(--fg-4)" }}/>
                👶 Bayi
              </button>
              <button className={mode === "publik" ? "on" : ""} onClick={() => setMode("publik")}>
                <span className="dot" style={{ background: mode === "publik" ? "var(--eco-paper)" : "var(--fg-4)" }}/>
                Publik
              </button>
              <button className={mode === "policy" ? "on" : ""} onClick={() => setMode("policy")}>
                <span className="dot" style={{ background: mode === "policy" ? "var(--eco-paper)" : "var(--fg-4)" }}/>
                Policy
              </button>
            </div>
          </div>
        </div>
      </header>

      <main>
        <HeroSection mode={mode} openAnnot={openAnnot}/>
        <OverviewSection mode={mode} openAnnot={openAnnot}/>
        <FiskalSection mode={mode} openAnnot={openAnnot}/>
        <MBGSection mode={mode} openAnnot={openAnnot}/>
        <SubsidiSection mode={mode} openAnnot={openAnnot}/>
        <SimulatorSection mode={mode} openAnnot={openAnnot}/>
      </main>

      <AnnotationSidebar
        open={annotOpen}
        onClose={() => setAnnotOpen(false)}
        annotations={ECOID.experts}
        mode={mode}
      />

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Aksen merah"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#C0392B', '#9D2D22', '#D03020', '#F04000', '#1A1A1A']}
          />
        </TweakSection>
        <TweakSection label="Tampilan">
          <TweakToggle label="Tampilkan pullquote editorial" value={tweaks.showPullquotes} onChange={(v) => setTweak('showPullquotes', v)}/>
          <TweakToggle label="KPI compact mode" value={tweaks.compactKpi} onChange={(v) => setTweak('compactKpi', v)}/>
        </TweakSection>
        <TweakSection label="Mode konten">
          <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 8 }}>
            Toggle Publik/Policy ada di nav atas. Policy mode menampilkan formula matematika & footnote akademik.
          </div>
          <TweakRadio
            label="Default mode"
            value={mode}
            onChange={(v) => setMode(v)}
            options={[
              { value: 'bayi', label: 'Bayi' },
              { value: 'publik', label: 'Publik' },
              { value: 'policy', label: 'Policy' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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