/* global React, CodeBlock */

const NAV_SECTIONS = [
  {
    title: "Get started",
    items: [
      { id: "introduction",  label: "Introduction" },
      { id: "installation",  label: "Installation" },
      { id: "quickstart",    label: "Quickstart" },
      { id: "authentication",label: "Authentication" },
    ],
  },
  {
    title: "Capabilities",
    items: [
      { id: "search", label: "synapse.search()" },
      { id: "crawl",  label: "synapse.crawl()" },
    ],
  },
  {
    title: "Reference",
    items: [
      { id: "routing-modes", label: "Routing modes" },
      { id: "errors",        label: "Errors" },
      { id: "rate-limits",   label: "Rate limits" },
      { id: "audit-log",     label: "Audit log" },
    ],
  },
];

const TOC_ITEMS = [
  { id: "introduction",   label: "Introduction" },
  { id: "installation",   label: "Installation" },
  { id: "quickstart",     label: "Quickstart" },
  { id: "authentication", label: "Authentication" },
  { id: "search",         label: "synapse.search()" },
  { id: "crawl",          label: "synapse.crawl()" },
];

function DocsSidebar() {
  return (
    <aside className="docs-side" aria-label="Documentation navigation">
      <div className="docs-search">
        <input type="search" placeholder="Search docs…" aria-label="Search docs" />
      </div>
      {NAV_SECTIONS.map(s => (
        <div key={s.title}>
          <h5>{s.title}</h5>
          <ul>
            {s.items.map(it => (
              <li key={it.id}>
                <a href={`#${it.id}`}>{it.label}</a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </aside>
  );
}

function DocsTOC() {
  return (
    <aside className="docs-toc" aria-label="On this page">
      <h6>On this page</h6>
      <ul>
        {TOC_ITEMS.map(it => (
          <li key={it.id}>
            <a href={`#${it.id}`}>{it.label}</a>
          </li>
        ))}
      </ul>
    </aside>
  );
}

const INSTALL_CODE = `npm install @synapse-foundry/sdk`;

const QUICKSTART_CODE = `import { synapse } from '@synapse-foundry/sdk';

synapse.configure({
  apiKey: process.env.SYNAPSE_API_KEY,
  routingMode: 'balanced',
});

const results = await synapse.search('Q4 PBM market trends', { limit: 10 });
console.log(results);`;

const AUTH_CODE = `// Set once per process
synapse.configure({ apiKey: process.env.SYNAPSE_API_KEY });

// Or pass per-call
await synapse.search('...', { apiKey: 'sk_live_...' });`;

const SEARCH_CODE = `const results = await synapse.search('GLP-1 cardiovascular outcomes', {
  limit: 10,
  freshness: 'recent',
  routingMode: 'quality',
});

// Each result includes the provider it routed to
results.forEach(r => {
  console.log(r.title, r.url, r.score, '←', r.source);
});`;

const CRAWL_CODE = `const page = await synapse.crawl('https://www.cms.gov/medicare/...', {
  format: 'markdown',
  jsRender: true,
});

console.log(page.content);
console.log('routed to:', page.source, 'in', page.latencyMs, 'ms');`;

function DocsMain() {
  return (
    <main className="docs-main">
      <div className="docs-crumbs">
        <a href="/">Home</a>
        <span>/</span>
        <a href="/docs/">Docs</a>
        <span>/</span>
        <span>Introduction</span>
      </div>

      <h1>Synapse SDK</h1>
      <p className="lede">
        The unified, benchmarked, routable agent service layer. One install gives any agent
        access to best-in-class providers for search and crawl, with published quality
        benchmarks per provider and an audit-ready safety perimeter.
      </p>

      <section id="introduction">
        <h2>Introduction</h2>
        <p>
          Synapse SDK sits between your agent and a curated catalog of agent service providers.
          Every call is routed to the best provider for the query under your chosen optimization
          axis (cost, latency, quality, or balanced), logged as a labeled trajectory, and signed
          into an immutable audit trail.
        </p>
      </section>

      <section id="installation">
        <h2>Installation</h2>
        <p>Requires Node 18+. Works on Node, Bun, Cloudflare Workers, and Vercel Edge.</p>
        <CodeBlock file="terminal" code={INSTALL_CODE} />
      </section>

      <section id="quickstart">
        <h2>Quickstart</h2>
        <p>Configure once with your API key, then call any capability.</p>
        <CodeBlock file="quickstart.ts" code={QUICKSTART_CODE} />
      </section>

      <section id="authentication">
        <h2>Authentication</h2>
        <p>
          A single Synapse API key authenticates every capability. We handle the underlying
          per-provider keys and rotation. Bring-your-own keys are supported on Pro and Enterprise.
        </p>
        <CodeBlock file="auth.ts" code={AUTH_CODE} />
      </section>

      <section id="search">
        <h2>synapse.search()</h2>
        <p>
          Web and domain search routed across Exa, Tavily, Brave, and Linkup. Rankings come from
          a quality benchmark refreshed weekly against held-out queries per vertical.
        </p>
        <CodeBlock file="search.ts" code={SEARCH_CODE} />
      </section>

      <section id="crawl">
        <h2>synapse.crawl()</h2>
        <p>
          HTML to structured content, routed across Firecrawl, Apify, and Browserbase. Handles
          JS rendering, auth walls, and rate limits without you ever touching a headless browser.
        </p>
        <CodeBlock file="crawl.ts" code={CRAWL_CODE} />
      </section>

      <div className="docs-footer">
        <span>Need something not in here? Email <a href="mailto:engineering@synapsefoundry.ai">engineering@synapsefoundry.ai</a>.</span>
      </div>
    </main>
  );
}

Object.assign(window, { DocsSidebar, DocsMain, DocsTOC });