/* NutriDMS, User Manual renderer
   Reads MANUAL_SECTIONS from manual-data.jsx, renders TOC + sections with
   search, deep-links, and SVG illustrations for each console page. */

const { useState: useMState, useEffect: useMEffect, useRef: useMRef, useMemo: useMMemo } = React;

/* ─── Illustration components, small "screenshots" using real UI atoms ─── */
function Illustration({ id }) {
  const map = {
    chrome:       <IllChrome/>,
    overview:     <IllOverview/>,
    usage:        <IllUsage/>,
    keys:         <IllKeys/>,
    "health-tools": <IllHealthTools/>,
    logs:         <IllLogs/>,
    billing:      <IllBilling/>,
    team:         <IllTeam/>,
    webhooks:     <IllWebhooks/>,
    settings:     <IllSettings/>,
  };
  return map[id] || null;
}

function IllBox({ children, label, anchor }) {
  return (
    <div className={`mn-ill ${anchor ? "anchored" : ""}`} id={anchor}>
      <div className="mn-ill-bar">
        <span className="mn-ill-dot r"/><span className="mn-ill-dot y"/><span className="mn-ill-dot g"/>
        <span className="mn-ill-url">api-dashboard.html · {label}</span>
      </div>
      <div className="mn-ill-stage">{children}</div>
    </div>
  );
}

function IllChrome() {
  return (
    <IllBox label="Console layout">
      <div className="mn-mock chrome">
        <div className="mn-mock-side">
          <div className="mn-mock-logo">nutri<strong>dms</strong></div>
          <div className="mn-mock-ws"><span className="mn-mock-ws-i">AP</span><div><strong>Acme, Production</strong><span>Pro · US-East</span></div></div>
          {[
            { ic: "▦", t: "Overview", on: true },
            { ic: "⟂", t: "Usage" },
            { ic: "🔑", t: "API Keys" },
            { ic: "⊟", t: "Logs" },
            { ic: "$",  t: "Billing" },
            { ic: "👥", t: "Team & Roles" },
            { ic: "🪝", t: "Webhooks" },
          ].map((it, i) => (
            <div key={i} className={`mn-mock-nav ${it.on ? "on" : ""}`}>
              <span>{it.ic}</span> {it.t}
            </div>
          ))}
        </div>
        <div className="mn-mock-main">
          <div className="mn-mock-top">
            <span>Acme Foods / <strong>Overview</strong></span>
            <span className="mn-mock-envtog">
              <em className="sbx"/>Sandbox
              <em className="prd"/>Production
            </span>
            <span className="mn-mock-utils">EN ◐ 🔔 📖</span>
          </div>
          <div className="mn-mock-content">
            <span className="mn-mock-h">Welcome back, Sarah</span>
            <div className="mn-mock-stats">
              <div/><div/><div/><div/>
            </div>
            <div className="mn-mock-chart"/>
          </div>
        </div>
      </div>
    </IllBox>
  );
}

function IllOverview() {
  return (
    <IllBox label="Overview">
      <div className="mn-mock overview">
        <div className="mn-mock-banner warn">⚠ 55% of monthly quota used · 11 days left</div>
        <div className="mn-mock-stats lg">
          <div><span>Plan</span><strong>Growth API</strong></div>
          <div><span>Usage</span><strong>82,450<em>/ 150k</em></strong><div className="mn-mock-bar"><i style={{width: "55%"}}/></div></div>
          <div><span>Remaining</span><strong>67,550</strong></div>
          <div><span>Bill</span><strong>$399<em>/mo</em></strong></div>
        </div>
        <div className="mn-mock-prodgates">
          <div className="ok">✓ Verified email</div>
          <div className="ok">✓ Card on file</div>
          <div className="ok">✓ Agreements</div>
          <div className="ok">✓ Use-case verified</div>
        </div>
        <div className="mn-mock-chart big"/>
      </div>
    </IllBox>
  );
}

function IllUsage() {
  return (
    <IllBox label="Usage">
      <div className="mn-mock usage">
        <div className="mn-mock-pills">
          <span>Today</span><span>7d</span><span className="on">30d</span><span>Cycle</span><span>Custom</span>
        </div>
        <div className="mn-mock-stats">
          <div><span>Total</span><strong>82.5k</strong></div>
          <div><span>Successful</span><strong>81.0k</strong></div>
          <div><span>Failed</span><strong>1,450</strong></div>
          <div><span>Avg latency</span><strong>248<em>ms</em></strong></div>
        </div>
        <div className="mn-mock-chart big"/>
        <div className="mn-mock-table">
          <div className="mn-mock-row"><span>/v1/ingredients/lookup</span><span>28,491</span><span>35%</span></div>
          <div className="mn-mock-row"><span>/v1/recipes/analyze</span><span>19,320</span><span>23%</span></div>
          <div className="mn-mock-row"><span>/v1/allergens/detect</span><span>12,860</span><span>16%</span></div>
        </div>
      </div>
    </IllBox>
  );
}

function IllKeys() {
  return (
    <IllBox label="API Keys">
      <div className="mn-mock keys">
        <div className="mn-mock-envgrid">
          <div className="mn-env sbx">
            <div className="h"><span className="dot sbx"/><strong>Sandbox</strong><em>Connected</em></div>
            <div className="url">sandbox.api.nutridms.com</div>
            <div className="stats"><span>1 key</span><span>482 today</span><span>142ms</span></div>
          </div>
          <div className="mn-env prd on">
            <div className="h"><span className="dot prd"/><strong>Production</strong><em>Connected</em></div>
            <div className="url">api.nutridms.com</div>
            <div className="stats"><span>2 keys</span><span>18.4k today</span><span>218ms</span></div>
          </div>
        </div>
        <div className="mn-mock-table keys">
          <div className="mn-mock-row"><span className="mob">📱 Mobile</span><span>SmartMeal iOS</span><span>42,891</span><span className="ok">Active</span></div>
          <div className="mn-mock-row"><span className="srv">🖧 Server</span><span>Toast POS</span><span>28,140</span><span className="ok">Active</span></div>
          <div className="mn-mock-row"><span className="srv">🖧 Server</span><span>Internal QA</span><span>11,419</span><span className="ok">Active</span></div>
        </div>
      </div>
    </IllBox>
  );
}

function IllHealthTools() {
  return (
    <IllBox label="Custom Health Tools">
      <div className="mn-mock htools">
        <div className="mn-mock-h2">Build it once. Call it like any endpoint.</div>
        <div className="mn-mock-flow">
          <div><span>1</span> Stack rules</div>
          <div><span>2</span> Test in sandbox</div>
          <div><span>3</span> Publish</div>
          <div><span>4</span> Call from app</div>
        </div>
        <div className="mn-mock-rules">
          <div className="r"><span className="n">1</span><span>WHEN sodium_mg <strong>&lt; 600</strong> THEN warn</span></div>
          <div className="r"><span className="n">2</span><span>WHEN added_sugar_g <strong>&lt; 25</strong> THEN warn</span></div>
          <div className="r"><span className="n">3</span><span>WHEN allergens contains <strong>soy / sesame</strong> THEN block</span></div>
        </div>
        <div className="mn-mock-endpoint">POST /v1/tools/custom/<strong>diabetic-safe</strong>/run</div>
      </div>
    </IllBox>
  );
}

function IllLogs() {
  return (
    <IllBox label="Logs">
      <div className="mn-mock logs">
        <div className="mn-mock-row toolbar">
          <span className="on">All (10)</span><span>Successful</span><span>Errors</span>
          <span className="sep"/>
          <span>GET ▾</span><span>Latency ▾</span>
          <span className="grow">🔍 endpoint, status, IP…</span>
          <span className="action live">● Tailing live · stop</span>
        </div>
        {[
          { m: "GET",  ep: "/v1/ingredients/lookup",  st: 200, lat: "142ms",  ok: true,  live: true },
          { m: "POST", ep: "/v1/recipes/analyze",     st: 200, lat: "386ms",  ok: true },
          { m: "POST", ep: "/v1/laura/health-score",  st: 200, lat: "1240ms", ok: true },
          { m: "GET",  ep: "/v1/allergens/detect",    st: 429, lat: "22ms",   warn: true },
          { m: "POST", ep: "/v1/laura/analyze-meal",  st: 500, lat: "8210ms", err: true },
        ].map((l, i) => (
          <div key={i} className={`mn-mock-row log ${l.live ? "live" : ""}`}>
            <span className={`mn-mock-method ${l.m === "GET" ? "get" : "post"}`}>{l.m}</span>
            <span className="ep">{l.ep}</span>
            <span className={`mn-mock-status ${l.ok ? "ok" : l.warn ? "warn" : "err"}`}>{l.st}</span>
            <span className="lat">{l.lat}</span>
          </div>
        ))}
      </div>
    </IllBox>
  );
}

function IllBilling() {
  return (
    <IllBox label="Billing">
      <div className="mn-mock billing">
        <div className="mn-mock-plan">
          <div><span>Current plan</span><strong>Growth API · $399/mo</strong></div>
          <div className="mn-mock-bar"><i style={{width: "55%"}}/></div>
          <div className="mn-mock-bill"><span>Next bill</span><strong>$432.60</strong></div>
        </div>
        <div className="mn-mock-card">
          <span>💳</span>
          <div><strong>•••• 4242</strong><em>Visa · Sarah Chen · 09/28</em></div>
        </div>
        <div className="mn-mock-table">
          <div className="mn-mock-row"><span>INV-2026-05</span><span>May 2026</span><span>$412.40</span><span className="ok">Paid</span></div>
          <div className="mn-mock-row"><span>INV-2026-04</span><span>Apr 2026</span><span>$399.00</span><span className="ok">Paid</span></div>
        </div>
      </div>
    </IllBox>
  );
}

function IllTeam() {
  return (
    <IllBox label="Team & Roles">
      <div className="mn-mock team">
        <div className="mn-mock-row member"><span className="avt sc">SC</span><span>Sarah Chen</span><span className="role owner">Owner</span><span className="ok">Active</span></div>
        <div className="mn-mock-row member"><span className="avt mp">MP</span><span>Marcus Patel</span><span className="role admin">Admin</span><span className="ok">Active</span></div>
        <div className="mn-mock-row member"><span className="avt eh">EH</span><span>Elena Hayes</span><span className="role dev">Developer</span><span className="ok">Active</span></div>
        <div className="mn-mock-row member"><span className="avt ps">PS</span><span>Priya Singh</span><span className="role bill">Billing Mgr</span><span className="ok">Active</span></div>
        <div className="mn-mock-row member"><span className="avt da">DA</span><span>Dr. Aisha Khan</span><span className="role comp">Compliance</span><span className="ok">Active</span></div>
        <div className="mn-mock-row member"><span className="avt nb">NB</span><span>Naomi Brooks</span><span className="role dev">Developer</span><span className="warn">Pending</span></div>
      </div>
    </IllBox>
  );
}

function IllWebhooks() {
  return (
    <IllBox label="Webhooks">
      <div className="mn-mock webhooks">
        <div className="mn-mock-events">
          {["ingredient.verified","recipe.analyzed","allergen.detected","health_rule.failed","usage.limit_warning","invoice.created","api_key.rotated"].map(e => (
            <div key={e} className="mn-mock-evt">{e}</div>
          ))}
        </div>
        <div className="mn-mock-table">
          <div className="mn-mock-row wh"><span>🪝</span><span>Compliance → Slack</span><span className="ok">Healthy · 99.8%</span></div>
          <div className="mn-mock-row wh"><span>🪝</span><span>Recipe → CMS</span><span className="ok">Healthy · 99.6%</span></div>
          <div className="mn-mock-row wh"><span>🪝</span><span>Quota → Sentry</span><span className="warn">Degraded · 88.9%</span></div>
        </div>
      </div>
    </IllBox>
  );
}

function IllSettings() {
  return (
    <IllBox label="Settings">
      <div className="mn-mock settings">
        <div className="mn-mock-set"><div><strong>Organization</strong><span>Display name on invoices & emails</span></div><span className="inp">Acme Foods</span></div>
        <div className="mn-mock-set"><div><strong>Default env</strong><span>Sandbox / Production</span></div><span className="inp">Production ▾</span></div>
        <div className="mn-mock-set"><div><strong>Usage alerts</strong><span>50% / 80% / overage</span></div><div className="tg"><span className="t on"/><span className="t on"/><span className="t on"/></div></div>
        <div className="mn-mock-set"><div><strong>Security</strong><span>90-day rotation, MFA</span></div><div className="tg"><span className="t on"/><span className="t on"/></div></div>
      </div>
    </IllBox>
  );
}

/* ─── Section renderer ─── */
function Section({ s }) {
  return (
    <section className="mn-sec" id={s.id} data-section-id={s.id}>
      <div className="mn-sec-h">
        <div className="mn-sec-ic"><Icon name={s.icon} size={20} stroke={2.2}/></div>
        <div>
          <h2>{s.title}</h2>
          {s.intro && <p dangerouslySetInnerHTML={{__html: s.intro}}/>}
        </div>
        {s.deepLink && <a href={s.deepLink.href} className="btn primary sm mn-sec-link">{s.deepLink.label} <Icon name="arrow-up-right" size={12} stroke={2.4}/></a>}
      </div>

      {s.bullets && (
        <div className="mn-bullets">
          {s.bullets.map((b, i) => (
            <div key={i} className="mn-bullet">
              <div className="ic"><Icon name={b.ic} size={15} stroke={2.4}/></div>
              <div><strong>{b.t}</strong><span>{b.s}</span></div>
            </div>
          ))}
        </div>
      )}

      {s.illustration && <Illustration id={s.illustration}/>}

      {s.controls && (
        <div className="mn-controls">
          <h3>Every control on this page</h3>
          <div className="mn-controls-grid">
            {s.controls.map((c, i) => (
              <div key={i} className="mn-control">
                <div className="ic"><Icon name={c.ic} size={14} stroke={2.4}/></div>
                <div>
                  <div className="t">{c.t}</div>
                  <div className="s" dangerouslySetInnerHTML={{__html: c.s}}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {s.workflows && s.workflows.map((w, i) => (
        <div key={i} className="mn-workflow">
          <h3><Icon name="route" size={14} stroke={2.4}/> {w.t}</h3>
          <ol>
            {w.steps.map((st, j) => <li key={j} dangerouslySetInnerHTML={{__html: st}}/>)}
          </ol>
        </div>
      ))}

      {s.tips && (
        <div className="mn-tips">
          {s.tips.map((t, i) => (
            <div key={i} className="mn-tip">
              <Icon name="lightbulb" size={13} stroke={2.4}/>
              <span dangerouslySetInnerHTML={{__html: t}}/>
            </div>
          ))}
        </div>
      )}

      {s.glossary && (
        <div className="mn-glossary">
          {s.glossary.map((g, i) => (
            <div key={i} className="mn-glossary-row">
              <div className="t">{g.t}</div>
              <div className="s" dangerouslySetInnerHTML={{__html: g.s}}/>
            </div>
          ))}
        </div>
      )}

      {s.errors && (
        <div className="mn-errors">
          {s.errors.map((e, i) => (
            <div key={i} className="mn-error">
              <span className={`mn-error-code ${e.code[0] === "4" ? "warn" : "err"}`}>{e.code}</span>
              <div>
                <code>{e.err}</code>
                <span dangerouslySetInnerHTML={{__html: e.s}}/>
              </div>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

/* ─── Main ─── */
function Manual() {
  const [query, setQuery] = useMState("");
  const [active, setActive] = useMState("intro");
  const [open, setOpen] = useMState(false); // mobile TOC drawer
  const refs = useMRef({});

  // Flatten for search
  const flat = useMMemo(() => MANUAL_SECTIONS.flatMap(g => g.items), []);

  // Filter on query, show only matching sections
  const filtered = useMMemo(() => {
    if (!query.trim()) return MANUAL_SECTIONS;
    const q = query.toLowerCase();
    return MANUAL_SECTIONS.map(g => ({
      ...g,
      items: g.items.filter(s => {
        if (s.title.toLowerCase().includes(q)) return true;
        if (s.intro && s.intro.toLowerCase().includes(q)) return true;
        if (s.controls && s.controls.some(c => c.t.toLowerCase().includes(q) || c.s.toLowerCase().includes(q))) return true;
        return false;
      }),
    })).filter(g => g.items.length > 0);
  }, [query]);

  // Scrollspy
  useMEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const id = e.target.getAttribute("data-section-id");
          if (id) setActive(id);
        }
      });
    }, { rootMargin: "-30% 0px -60% 0px" });
    document.querySelectorAll("[data-section-id]").forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, [filtered]);

  // Scroll on hash change
  useMEffect(() => {
    const h = window.location.hash.slice(1);
    if (h) {
      const el = document.getElementById(h);
      if (el) setTimeout(()=>el.scrollIntoView({ behavior: "smooth", block: "start" }), 100);
    }
  }, []);

  const jump = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    window.history.replaceState(null, "", `#${id}`);
  };

  return (
    <div className="mn-shell">
      <header className="mn-top">
        <a href="api-dashboard.html" className="mn-top-back">
          <Icon name="arrow-left" size={14} stroke={2.4}/>
          <span>Dashboard</span>
        </a>
        <div className="mn-top-brand">
          <NutriHoriz height={26}/>
          <span className="mn-top-divider"/>
          <span className="mn-top-title">User Manual</span>
        </div>
        <div className="mn-top-search">
          <Icon name="search" size={14} stroke={2.4}/>
          <input value={query} onChange={(e)=>setQuery(e.target.value)} placeholder="Search the manual, page, button, term…" autoFocus/>
          {query && <button onClick={()=>setQuery("")}><Icon name="x" size={13} stroke={2.4}/></button>}
        </div>
        <button className="mn-top-toc" onClick={()=>setOpen(o => !o)} aria-label="Open contents">
          <Icon name={open ? "x" : "menu"} size={16} stroke={2.4}/>
        </button>
      </header>

      <div className="mn-main">
        <nav className={`mn-toc ${open ? "open" : ""}`}>
          <div className="mn-toc-inner">
            {filtered.length === 0 && (
              <div className="mn-toc-empty">No matches. <a href="#" onClick={(e)=>{e.preventDefault(); setQuery("");}}>Clear search</a></div>
            )}
            {filtered.map(g => (
              <div key={g.group} className="mn-toc-group">
                <div className="mn-toc-group-h">{g.group}</div>
                {g.items.map(s => (
                  <a key={s.id} href={`#${s.id}`} onClick={(e)=>{e.preventDefault(); jump(s.id);}}
                     className={`mn-toc-item ${active === s.id ? "on" : ""}`}>
                    <Icon name={s.icon} size={13} stroke={2.4}/>
                    <span>{s.title}</span>
                    {s.controls && <span className="ct">{s.controls.length}</span>}
                  </a>
                ))}
              </div>
            ))}

            <div className="mn-toc-foot">
              <a href="api-dashboard.html" className="btn primary sm full">
                <Icon name="external-link" size={12} stroke={2.4}/> Open dashboard
              </a>
              <a href="api-sandbox.html" className="btn secondary sm full">
                <Icon name="play" size={12} stroke={2.4}/> Open sandbox
              </a>
              <div className="mn-toc-support">
                <Icon name="life-buoy" size={12} stroke={2.4}/>
                <div>Stuck? Email <a href="mailto:support@nutridms.com">support@nutridms.com</a>, average reply 2h on Growth, 30m on Business.</div>
              </div>
            </div>
          </div>
        </nav>

        <article className="mn-content">
          {filtered.length === 0 ? (
            <div className="mn-empty">
              <Icon name="search-x" size={32} stroke={1.8}/>
              <h2>No matches for "{query}"</h2>
              <p>Try a different term, or <a href="#" onClick={(e)=>{e.preventDefault(); setQuery("");}}>clear the search</a>.</p>
            </div>
          ) : filtered.map(g => g.items.map(s => <Section key={s.id} s={s}/>))}
        </article>
      </div>
    </div>
  );
}

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