// API / SDK reference view
(function() {
  const { useState } = React;

  const ENDPOINTS = [
    { method: 'GET',  path: '/v1/accounts',            desc: 'list all accounts across sources' },
    { method: 'GET',  path: '/v1/accounts/{id}',       desc: 'retrieve single account' },
    { method: 'GET',  path: '/v1/transactions',        desc: 'query ledger · filter by date/cat/source' },
    { method: 'POST', path: '/v1/transactions/{id}/tag', desc: 'apply category · idempotent' },
    { method: 'POST', path: '/v1/transfers',           desc: 'move money · bankx treasury rails' },
    { method: 'POST', path: '/v1/rules',               desc: 'create automation · bxdsl body' },
    { method: 'POST', path: '/v1/imports',             desc: 'ingest CSV/OFX/PDF/XLSX · multipart' },
    { method: 'GET',  path: '/v1/pnl',                 desc: 'P&L for period · jsonl or csv' },
    { method: 'GET',  path: '/v1/tax/schedule-c',      desc: 'pre-filled Schedule C data' },
    { method: 'POST', path: '/v1/mcp/tools/{name}',    desc: 'invoke MCP tool · bypasses client' },
  ];

  const SAMPLE = {
    curl: `curl https://api.bankx.dev/v1/transactions \\
  -H "Authorization: Bearer $BX_TOKEN" \\
  -d "filter[category]=uncategorized" \\
  -d "filter[amount][gt]=1000" \\
  -d "limit=50" -G`,
    node: `import { Bankx } from "@bankx/sdk";

const bx = new Bankx(process.env.BX_TOKEN);

const uncat = await bx.transactions.list({
  filter: { category: "uncategorized", amount: { gt: 1000 } },
  limit: 50,
});

for (const tx of uncat.data) {
  const { category, confidence } = await bx.ai.classify(tx);
  if (confidence > 0.9) await bx.transactions.tag(tx.id, { category });
}`,
    python: `from bankx import Bankx

bx = Bankx()  # reads BX_TOKEN from env

for tx in bx.transactions.list(
    filter={"category": "uncategorized", "amount__gt": 1000},
):
    guess = bx.ai.classify(tx)
    if guess.confidence > 0.9:
        bx.transactions.tag(tx.id, category=guess.category)`,
    go: `package main

import "github.com/bankx/bankx-go"

func main() {
  bx := bankx.New()
  it := bx.Transactions.List(&bankx.TxQuery{
    Category: "uncategorized",
    AmountGt: 1000,
  })
  for it.Next() {
    tx := it.Value()
    if g := bx.AI.Classify(tx); g.Confidence > 0.9 {
      bx.Transactions.Tag(tx.ID, g.Category)
    }
  }
}`
  };

  const RESP = `{
  "object": "list",
  "has_more": true,
  "data": [
    {
      "id": "tx_1R8z3k...",
      "ts": "2026-04-20T09:42:11Z",
      "merchant": "AWS — us-east-1",
      "raw_descriptor": "AMAZON WEB SERVICES AWS.AMAZON.CO",
      "amount": { "value": -1248011, "currency": "usd" },
      "account": "acc_main",
      "source": "bankx_treasury",
      "category": "infra",
      "confidence": 0.99,
      "smart_rename": { "from": "AMAZON WEB SERVICES", "to": "AWS — us-east-1" },
      "rule_fired": "r_1",
      "ledger": {
        "debit":  { "account": "5100", "name": "Cloud Infra" },
        "credit": { "account": "1002", "name": "Chase Ink"    }
      },
      "attachments": [
        { "type": "receipt", "url": "bx://recp/r_aws_042026.pdf" }
      ]
    }
  ]
}`;

  function Api() {
    const [lang, setLang] = useState('node');
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <div className="crumb">developer<span className="sep">›</span>api<span className="sep">›</span>v1</div>
            <h1 className="display">API <span style={{ color: 'var(--fg-3)', fontStyle: 'italic', fontSize: 22 }}>· banks are boring, docs shouldn't be</span></h1>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 6, letterSpacing: '0.1em' }}>
              base · https://api.bankx.dev/v1 · auth · bearer · ratelimit · 1000 rpm · uptime · 99.98%
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">OpenAPI 3.1</button>
            <button className="btn">Postman</button>
            <button className="btn primary">Get sandbox key</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr 1fr', gap: 'var(--gap)' }}>
          <div className="panel">
            <div className="panel-head"><span className="panel-title">Endpoints · 10 shown</span></div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, padding: '4px 0' }}>
              {ENDPOINTS.map((e, i) => (
                <div key={i} style={{ padding: '6px var(--pad-x)', borderBottom: '1px solid var(--line)', display: 'flex', gap: 8, alignItems: 'center' }}>
                  <span style={{
                    fontSize: 9, padding: '1px 4px',
                    color: e.method === 'GET' ? 'var(--cat-cyan)' : 'var(--cat-lime)',
                    border: `1px solid ${e.method === 'GET' ? 'var(--cat-cyan)' : 'var(--cat-lime)'}`,
                    letterSpacing: '0.08em', minWidth: 34, textAlign: 'center',
                  }}>{e.method}</span>
                  <div style={{ flex: 1, overflow: 'hidden' }}>
                    <div style={{ color: 'var(--fg-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.path}</div>
                    <div style={{ color: 'var(--fg-3)', fontSize: 10 }}>{e.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="panel">
            <div className="panel-head">
              <span className="panel-title">Request · categorize uncategorized</span>
              <div style={{ display: 'flex', gap: 4 }}>
                {['curl','node','python','go'].map(l => (
                  <button key={l} className="btn" style={{
                    color: lang === l ? 'var(--accent)' : 'var(--fg-2)',
                    borderColor: lang === l ? 'var(--accent)' : 'var(--line-2)',
                    background: lang === l ? 'var(--accent-bg)' : 'var(--bg-2)',
                  }} onClick={() => setLang(l)}>{l}</button>
                ))}
              </div>
            </div>
            <pre style={{ margin: 0, padding: 'var(--pad-x)', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-0)', overflowX: 'auto', lineHeight: 1.6, background: 'var(--bg-0)' }}>
{SAMPLE[lang]}
            </pre>
          </div>

          <div className="panel">
            <div className="panel-head">
              <span className="panel-title">Response · 200 OK</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>application/json · 14 ms</span>
            </div>
            <pre style={{ margin: 0, padding: 'var(--pad-x)', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-1)', overflowX: 'auto', lineHeight: 1.6, background: 'var(--bg-0)' }}>
{RESP}
            </pre>
          </div>
        </div>

        <div style={{ height: 'var(--gap)' }} />

        <div className="g-3">
          <div className="panel">
            <div className="panel-head"><span className="panel-title">Webhooks</span></div>
            <div style={{ padding: 'var(--pad-x)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-1)', lineHeight: 1.9 }}>
              <div><span style={{ color: 'var(--cat-lime)' }}>txn.created</span></div>
              <div><span style={{ color: 'var(--cat-lime)' }}>txn.categorized</span> · w/ confidence</div>
              <div><span style={{ color: 'var(--cat-cyan)' }}>rule.fired</span></div>
              <div><span style={{ color: 'var(--cat-amber)' }}>anomaly.detected</span></div>
              <div><span style={{ color: 'var(--cat-violet)' }}>books.closed</span> · month end</div>
              <div><span style={{ color: 'var(--cat-blue)' }}>tax.deadline.approaching</span></div>
            </div>
          </div>
          <div className="panel">
            <div className="panel-head"><span className="panel-title">Auth · OAuth2 + PAT</span></div>
            <pre style={{ margin: 0, padding: 'var(--pad-x)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-1)', lineHeight: 1.6 }}>
{`// scoped tokens
bx_live_sk_...    // full, server-only
bx_live_pk_...    // read-only, safe for client
bx_test_sk_...    // sandbox, free, resets daily

// scopes
read:ledger
write:transfer
admin:rules`}
            </pre>
          </div>
          <div className="panel">
            <div className="panel-head"><span className="panel-title">Status · p95 latency</span></div>
            <div style={{ padding: 'var(--pad-x)' }}>
              {[
                ['api.bankx.dev',  '14ms', 'var(--pos)'],
                ['ingest',         '29ms', 'var(--pos)'],
                ['classify',       '140ms','var(--pos)'],
                ['transfers',      '310ms','var(--pos)'],
                ['mcp',            '22ms', 'var(--pos)'],
                ['webhooks',        '41ms','var(--pos)'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '4px 0', borderBottom: '1px solid var(--line)' }}>
                  <span><span className="dot" style={{ color: r[2], marginRight: 6 }} />{r[0]}</span>
                  <span style={{ color: 'var(--fg-0)' }}>{r[1]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Also define MCP view
  function Mcp() {
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <div className="crumb">developer<span className="sep">›</span>mcp</div>
            <h1 className="display">MCP <span style={{ color: 'var(--fg-3)', fontStyle: 'italic', fontSize: 22 }}>· your LLM, your books</span></h1>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 6, letterSpacing: '0.1em' }}>
              local stdio · remote sse · 14 tools · 6 resources · 4 prompts · oauth-scoped
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">Copy config</button>
            <button className="btn primary">Install for Claude</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'var(--gap)' }}>
          <div className="panel">
            <div className="panel-head"><span className="panel-title">Conversation · live</span><span className="chip live"><span className="dot pulse"/>claude-4</span></div>
            <div style={{ padding: 'var(--pad-x)', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-0)', lineHeight: 1.7 }}>
              <div style={{ color: 'var(--fg-3)' }}>▸ user</div>
              <div style={{ marginBottom: 12 }}>close April books, make sure the tax reserve is 30% of net revenue, flag anything weird.</div>

              <div style={{ color: 'var(--accent)' }}>▸ claude (using bankx mcp)</div>
              <div style={{ color: 'var(--fg-1)', marginBottom: 6 }}>I'll run through this step by step.</div>

              <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-2)', padding: 8, marginBottom: 6, fontSize: 11 }}>
                <div style={{ color: 'var(--cat-violet)' }}>→ bx.pnl.compute(period="2026-04")</div>
                <div style={{ color: 'var(--fg-2)' }}>  ← revenue: $241,880 · expenses: $84,980 · net: $53,480</div>
              </div>
              <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-2)', padding: 8, marginBottom: 6, fontSize: 11 }}>
                <div style={{ color: 'var(--cat-violet)' }}>→ bx.anomalies.detect(period="2026-04")</div>
                <div style={{ color: 'var(--fg-2)' }}>  ← 3 found: AWS +42%, Ace Hotel (new), Datadog 3×</div>
              </div>
              <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-2)', padding: 8, marginBottom: 6, fontSize: 11 }}>
                <div style={{ color: 'var(--cat-violet)' }}>→ bx.transfer(from="ops", to="tax", amount="30% of 241880")</div>
                <div style={{ color: 'var(--fg-2)' }}>  ← ok · $72,564 · pi_3NxK9d · 127ms</div>
              </div>
              <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-2)', padding: 8, marginBottom: 12, fontSize: 11 }}>
                <div style={{ color: 'var(--cat-violet)' }}>→ bx.books.close(period="2026-04")</div>
                <div style={{ color: 'var(--fg-2)' }}>  ← closed · snapshot bx://snap/2026-04 · read-only</div>
              </div>

              <div style={{ color: 'var(--fg-1)' }}>
                Done. April closed at +$53,480 net. Transferred $72,564 to tax reserve. Three anomalies worth a look — AWS spike is legit (new data pipeline), Ace Hotel is a new vendor, and Datadog triple-billed (looks like the annual renewal landed on top of monthly — you should probably file a ticket).
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
            <div className="panel">
              <div className="panel-head"><span className="panel-title">Tools · 14</span></div>
              <div style={{ padding: '6px 0', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                {[
                  ['bx.txn.query',        'read', 'var(--cat-cyan)'],
                  ['bx.txn.tag',          'write','var(--cat-lime)'],
                  ['bx.txn.split',        'write','var(--cat-lime)'],
                  ['bx.budget.diff',      'read', 'var(--cat-cyan)'],
                  ['bx.rule.create',      'write','var(--cat-lime)'],
                  ['bx.rule.apply',       'write','var(--cat-lime)'],
                  ['bx.transfer',         'money','var(--cat-amber)'],
                  ['bx.pnl.compute',      'read', 'var(--cat-cyan)'],
                  ['bx.anomalies.detect', 'read', 'var(--cat-cyan)'],
                  ['bx.reconcile',        'write','var(--cat-lime)'],
                  ['bx.books.close',      'money','var(--cat-amber)'],
                  ['bx.tax.schedule-c',   'read', 'var(--cat-cyan)'],
                  ['bx.receipt.ocr',      'read', 'var(--cat-cyan)'],
                  ['bx.import.csv',       'write','var(--cat-lime)'],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px var(--pad-x)', borderBottom: '1px solid var(--line)' }}>
                    <span style={{ color: 'var(--fg-0)' }}>{r[0]}</span>
                    <span style={{ color: r[2], fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{r[1]}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="panel">
              <div className="panel-head"><span className="panel-title">Install</span></div>
              <pre style={{ margin: 0, padding: 'var(--pad-x)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-1)', lineHeight: 1.7, background: 'var(--bg-0)', whiteSpace: 'pre-wrap' }}>
{`# Claude Desktop
$ bx mcp install --target claude

# Cursor / Cody / Zed (stdio)
$ which bx  ·  add to ~/.cursor/mcp.json

# Remote (SSE, OAuth)
https://mcp.bankx.dev/sse`}
              </pre>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.ApiView = Api;
  window.McpView = Mcp;
})();