/* TriPhase landing — main app, i18n-driven */
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "heroVariant": "v1",
  "language": "vi"
}/*EDITMODE-END*/;

function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    const observeAll = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach(el => io.observe(el));
    };
    observeAll();
    // Re-observe when DOM mutates (e.g. lazy-loaded chart section)
    const mo = new MutationObserver(observeAll);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);
}

/* ---------- Nav with explicit lang toggle ---------- */
const Nav = ({ tweaks, setTweaks, t }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner container">
        <a className="brand" href="#top">
          <span className="brand-dot" />
          <span>TriPhase</span>
        </a>
        <div className="nav-links">
          <a href="#bots">{t.nav.bots}</a>
          <a href="#demo">{t.nav.demo}</a>
          <a href="#faq">{t.nav.faq}</a>
          <a href="#risk">{t.nav.risk}</a>
        </div>
        <div className="nav-cta">
          <div className="lang-toggle" role="group" aria-label="language">
            <button
              className={tweaks.language === "vi" ? "active" : ""}
              onClick={() => setTweaks({ language: "vi" })}
            >VI</button>
            <span className="lang-sep">/</span>
            <button
              className={tweaks.language === "en" ? "active" : ""}
              onClick={() => setTweaks({ language: "en" })}
            >EN</button>
          </div>
          <button
            className="theme-toggle"
            onClick={() => setTweaks({ theme: tweaks.theme === "dark" ? "light" : "dark" })}
            aria-label="toggle theme"
          >{tweaks.theme === "dark" ? "◐" : "◑"}</button>
          <a className="btn primary" href="#access">
            {t.nav.cta} <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
};

/* ---------- Hero v1 ---------- */
const HeroV1 = ({ t }) => {
  const titleParts = t.hero1.title;
  return (
    <section className="hero hero-v1">
      <div className="hero-bg-grid" />
      <div className="hero-orb" />
      <div className="container hero-inner">
        <div className="eyebrow hero-eyebrow">
          <span className="status-dot" /> {t.hero1.eyebrow}
        </div>
        <h1 className="h-display hero-title">
          {titleParts.map((line, i) => (
            <span key={i} className="line">
              {Array.isArray(line)
                ? <>{line[0]}<span className="serif-it accent-fg">{line[1]}</span>{line[2]}</>
                : line}
            </span>
          ))}
        </h1>
        <p className="lead hero-lead">{t.hero1.lead}</p>
        <div className="hero-cta">
          <a className="btn primary" href="#access">{t.hero1.ctaPrimary} <span className="arrow">→</span></a>
          <a className="btn" href="#demo">{t.hero1.ctaSecond}</a>
        </div>
        <div className="hero-meta">
          {t.hero1.tags.map((tag, i) => (
            <div key={i} className="hero-meta-item">
              <span className="meta-tag mono">{tag.v}</span>
              <span className="meta-lab">{tag.k}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Hero v2 ---------- */
const HeroV2 = ({ t }) => {
  const [phase, setPhase] = useState(0);
  const phases = t.botsData.map(b => b.name.toUpperCase());
  useEffect(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 3), 2200);
    return () => clearInterval(id);
  }, []);
  const titleB = t.hero2.titleB;
  return (
    <section className="hero hero-v2">
      <div className="hero-bg-grid" />
      <div className="container hero-inner">
        <div className="eyebrow hero-eyebrow">
          <span className="status-dot" /> {t.hero2.eyebrow}
        </div>
        <div className="hero-v2-headrow">
          <h1 className="h-display hero-title hero-v2-title">
            {t.hero2.titleA}<br/>
            {titleB[0]}<span className="serif-it accent-fg">{titleB[1]}</span>{titleB[2]}
          </h1>
          <div className="hero-v2-stack">
            <div className="phase-ticker">
              <span className="ticker-lab mono">{t.hero2.tickerLab}</span>
              <div className="ticker-display">
                {phases.map((p, i) => (
                  <span key={p} className={`ticker-item mono ${phase === i ? "active" : ""}`}>{p}</span>
                ))}
              </div>
              <div className="ticker-bar">
                <span style={{ width: `${((phase + 1) / 3) * 100}%` }} />
              </div>
            </div>
          </div>
        </div>
        <p className="lead hero-lead">{t.hero2.lead}</p>
        <div className="hero-cta">
          <a className="btn primary" href="#access">{t.hero2.ctaPrimary} <span className="arrow">→</span></a>
          <a className="btn" href="#demo">{t.hero2.ctaSecond}</a>
        </div>
        <div className="hero-v2-chips">
          {t.botsData.map((b, i) => {
            const Chip = window.CHIPS[b.id];
            return (
              <div key={b.id} className={`hero-chip-thumb ${phase === i ? "lit" : ""}`}>
                <Chip accent={window.ACCENTS[b.id]} />
                <span className="hero-chip-lab mono">{b.code} · {b.name.toUpperCase()}</span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ---------- Marquee ---------- */
const Marquee = ({ t }) => (
  <div className="marquee">
    <div className="marquee-track">
      {Array.from({ length: 2 }).map((_, k) => (
        <div className="marquee-set" key={k}>
          {t.marquee.map((s, i) => (
            <React.Fragment key={i}>
              <span>{s}</span><span className="dot">●</span>
            </React.Fragment>
          ))}
        </div>
      ))}
    </div>
  </div>
);

/* ---------- Bots showcase ---------- */
const BotsShowcase = ({ t }) => {
  const wrapRef = useRef(null);
  const [active, setActive] = useState(0);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = wrapRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = el.offsetHeight - window.innerHeight;
      const scrolled = -rect.top;
      const p = Math.max(0, Math.min(1, scrolled / total));
      setProgress(p);
      const idx = Math.min(2, Math.floor(p * 3 + 0.0001));
      setActive(idx);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const titleParts = t.bots.title;
  const activeBot = t.botsData[active];

  return (
    <section id="bots" className="bots-section" ref={wrapRef}>
      <div className="bots-sticky">
        <div className="container bots-stage">
          <div className="bots-rail">
            <div className="rail-head">
              <span className="eyebrow">{t.bots.eyebrow}</span>
              <h2 className="h-section rail-title">
                {titleParts[0]}<br/><span className="serif-it accent-fg">{titleParts[1]}</span>.
              </h2>
              <p className="lead rail-lead">{t.bots.lead}</p>
            </div>

            <div className="rail-list">
              {t.botsData.map((b, i) => (
                <div key={b.id} className={`rail-item ${active === i ? "active" : ""}`}>
                  <div className="rail-bullet">
                    <span className="rail-num mono">0{i + 1}</span>
                    <span className="rail-line"><span style={{ width: active >= i ? "100%" : "0%" }} /></span>
                  </div>
                  <div className="rail-body">
                    <div className="rail-name">
                      <span className="rail-name-en">{b.name}</span>
                      <span className="rail-name-vi serif-it">{b.nameLocal}</span>
                    </div>
                    <p className="rail-tagline mono">{b.tagline}</p>
                    <p className="rail-desc">{b.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="bots-display">
            <div className="display-frame">
              {t.botsData.map((b, i) => {
                const Chip = window.CHIPS[b.id];
                return (
                  <div key={b.id} className={`chip-stage ${active === i ? "active" : ""}`}>
                    <Chip accent={window.ACCENTS[b.id]} />
                  </div>
                );
              })}
              <div className="display-readouts mono">
                <div className="readout-row">
                  <span className="readout-k">{t.bots.readouts.id}</span>
                  <span className="readout-v">{activeBot.code}</span>
                </div>
                <div className="readout-row">
                  <span className="readout-k">{t.bots.readouts.regime}</span>
                  <span className="readout-v">{activeBot.name.toUpperCase()}</span>
                </div>
                <div className="readout-row">
                  <span className="readout-k">{t.bots.readouts.status}</span>
                  <span className="readout-v"><span className="readout-dot" /> {t.bots.readouts.active}</span>
                </div>
                <div className="readout-row">
                  <span className="readout-k">{t.bots.readouts.uptime}</span>
                  <span className="readout-v">{t.bots.readouts.uptimeVal}</span>
                </div>
              </div>
            </div>

            <div className="display-progress">
              {[0, 1, 2].map(i => (
                <span key={i} className={`progress-cell ${active >= i ? "filled" : ""}`}>
                  <span style={{
                    width: active === i
                      ? `${Math.max(0, Math.min(1, progress * 3 - i)) * 100}%`
                      : active > i ? "100%" : "0%"
                  }} />
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Demo / dashboard ----------
 * The interactive 3-phase chart lives in interactive-chart.jsx and registers
 * itself as window.InteractiveChart.
 */
const DemoSection = ({ t }) => {
  const IC = window.InteractiveChart;
  if (!IC) {
    return (
      <section id="demo" style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
        <div className="container" style={{ color: "var(--fg-mute)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em" }}>
          LOADING CHART…
        </div>
      </section>
    );
  }
  return <IC t={t} />;
};

/* ---------- FAQ ---------- */
const FAQ = ({ t }) => {
  const [open, setOpen] = useState(0);
  const titleParts = t.faq.title;
  return (
    <section id="faq" className="faq-section">
      <div className="container faq-grid">
        <div className="faq-head reveal">
          <span className="eyebrow">{t.faq.eyebrow}</span>
          <h2 className="h-section">{titleParts[0]}<br/><span className="serif-it accent-fg">{titleParts[1]}</span>.</h2>
          <p className="lead">{t.faq.lead}</p>
        </div>
        <div className="faq-list">
          {t.faq.items.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="faq-num mono">0{i + 1}</span>
                <span className="faq-text">{item.q}</span>
                <span className="faq-toggle">{open === i ? "−" : "+"}</span>
              </div>
              <div className="faq-a"><div className="faq-a-inner">{item.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Risk ---------- */
const Risk = ({ t }) => (
  <section id="risk" className="risk-section">
    <div className="container risk-inner reveal">
      <div className="risk-mark mono">!</div>
      <div className="risk-body">
        <span className="eyebrow">{t.risk.eyebrow}</span>
        <p className="risk-text">{t.risk.body}</p>
        {t.risk.bodyEn ? <p className="risk-text-en">{t.risk.bodyEn}</p> : null}
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const Footer = ({ t }) => {
  const titleParts = t.footer.title;
  return (
    <footer id="access" className="footer">
      <div className="container">
        <div className="footer-cta reveal">
          <h2 className="h-display footer-title">
            {titleParts[0]}<br/>
            {titleParts[1]}<span className="serif-it accent-fg">{titleParts[2]}</span>
          </h2>
          <form className="access-form" onSubmit={e => { e.preventDefault(); }}>
            <input type="email" placeholder={t.footer.placeholder} />
            <button type="submit" className="btn primary">{t.footer.cta} <span className="arrow">→</span></button>
          </form>
          <span className="access-note mono">{t.footer.note}</span>
        </div>
        <div className="footer-grid">
          <div className="footer-col">
            <span className="brand"><span className="brand-dot" /> TriPhase</span>
            <p className="footer-sub">{t.footer.sub}</p>
          </div>
          {t.footer.cols.map((col, i) => (
            <div key={i} className="footer-col">
              <span className="footer-h mono">{col.h}</span>
              {col.links.map((l, j) => <a key={j}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-base">
          <span className="mono">{t.footer.base[0]}</span>
          <span className="mono">{t.footer.base[1]}</span>
        </div>
      </div>
    </footer>
  );
};

/* ---------- Tweaks panel ---------- */
const TriPhaseTweaks = ({ tweaks, setTweaks }) => {
  const { TweaksPanel, TweakSection, TweakRadio } = window;
  if (!TweaksPanel) return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Language">
        <TweakRadio
          label="Language"
          value={tweaks.language}
          options={[{ value: "vi", label: "Tiếng Việt" }, { value: "en", label: "English" }]}
          onChange={v => setTweaks({ language: v })}
        />
      </TweakSection>
      <TweakSection title="Theme">
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
          onChange={v => setTweaks({ theme: v })}
        />
      </TweakSection>
      <TweakSection title="Hero variant">
        <TweakRadio
          label="Layout"
          value={tweaks.heroVariant}
          options={[
            { value: "v1", label: "V1 · Editorial" },
            { value: "v2", label: "V2 · Phase ticker" }
          ]}
          onChange={v => setTweaks({ heroVariant: v })}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

/* ---------- Root ---------- */
const App = () => {
  const { useTweaks } = window;
  const [tweaks, setTweakRaw] = useTweaks(TWEAK_DEFAULTS);
  const setTweaks = React.useCallback((objOrKey, val) => {
    if (objOrKey && typeof objOrKey === "object") {
      Object.entries(objOrKey).forEach(([k, v]) => setTweakRaw(k, v));
    } else {
      setTweakRaw(objOrKey, val);
    }
  }, [setTweakRaw]);

  useEffect(() => {
    document.documentElement.classList.toggle("light", tweaks.theme === "light");
    document.documentElement.lang = tweaks.language === "en" ? "en" : "vi";
  }, [tweaks.theme, tweaks.language]);

  useReveal();

  const t = window.I18N[tweaks.language] || window.I18N.vi;

  return (
    <div id="top">
      <Nav tweaks={tweaks} setTweaks={setTweaks} t={t} />
      {tweaks.heroVariant === "v2" ? <HeroV2 t={t} /> : <HeroV1 t={t} />}
      <Marquee t={t} />
      <BotsShowcase t={t} />
      <DemoSection t={t} />
      <FAQ t={t} />
      <Risk t={t} />
      <Footer t={t} />
      <TriPhaseTweaks tweaks={tweaks} setTweaks={setTweaks} />
    </div>
  );
};

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