// Developer & APIs — API explorer, keys, SDKs, webhooks, usage.
const ENDPOINTS = [
  { m: "POST", path: "/v1/nlq", desc: "Natural-language query → dashboard",
    req: '{\n  "q": "revenue by state Q2 FY26",\n  "lang": "en",\n  "format": "dashboard"\n}',
    resp: '{\n  "sql": "SELECT state, SUM(order_value) ...",\n  "rows": 29,\n  "widgets": ["bar", "map", "table"],\n  "sources": ["state_revenue_daily"],\n  "latency_ms": 218\n}' },
  { m: "GET", path: "/v1/datasets", desc: "List governed datasets",
    req: '# query params\n?cert=Gold&pii=false&limit=20',
    resp: '{\n  "total": 142,\n  "data": [\n    { "name": "gem_transactions", "rows": 428600000,\n      "quality": 98, "cert": "Gold" }\n  ]\n}' },
  { m: "POST", path: "/v1/query", desc: "Run a semantic-layer query",
    req: '{\n  "metric": "GeM Procurement",\n  "dimensions": ["state"],\n  "filters": { "fiscal_qtr": "Q2-FY26" }\n}',
    resp: '{\n  "columns": ["state", "value"],\n  "rows": [["MH", 342.6], ["UP", 298.4]],\n  "cached": false\n}' },
  { m: "GET", path: "/v1/forecast", desc: "Predictive forecast for a metric",
    req: '?metric=demand&sku=GEM123&horizon=6m',
    resp: '{\n  "model": "prophet+lgbm",\n  "forecast": [1330, 1370, 1420, 1460],\n  "confidence": 0.92\n}' },
  { m: "POST", path: "/v1/dashboards", desc: "Create & publish a dashboard",
    req: '{\n  "name": "PSU Ops",\n  "widgets": [ ... ],\n  "publish": true\n}',
    resp: '{\n  "id": "dash_9f2a",\n  "url": "https://app/d/9f2a",\n  "status": "published"\n}' },
];

const SDKS = [
  { n: "Python", c: "#3776AB", ch: "py" }, { n: "Java", c: "#E76F00", ch: "Jv" },
  { n: ".NET", c: "#512BD4", ch: ".N" }, { n: "Go", c: "#00ADD8", ch: "Go" }, { n: "JavaScript", c: "#F7DF1E", ch: "JS" },
];

const API_KEYS = [
  { name: "Production — Server", key: "vbi_live_9f2a…c41d", scope: "read · query · forecast", used: "2 min ago", st: "active" },
  { name: "Mobile App", key: "vbi_live_7b1e…88af", scope: "read · nlq", used: "just now", st: "active" },
  { name: "Partner — NIC", key: "vbi_live_4c9d…12ab", scope: "read", used: "1 hr ago", st: "active" },
  { name: "Staging — CI", key: "vbi_test_2a8f…90de", scope: "full", used: "yesterday", st: "active" },
  { name: "Legacy ETL", key: "vbi_live_0d3c…77bb", scope: "read · write", used: "42 days ago", st: "revoked" },
];

const WEBHOOKS = [
  { evt: "alert.triggered", url: "https://ops.gov.in/hooks/alert", st: "healthy", d: "8.2K/mo" },
  { evt: "report.delivered", url: "https://teams.webhook/…", st: "healthy", d: "2.1K/mo" },
  { evt: "model.drift", url: "https://mlops/hooks/drift", st: "healthy", d: "42/mo" },
  { evt: "tender.new", url: "https://procure/hooks/tender", st: "degraded", d: "1.2K/mo" },
];

function APIExplorer() {
  const [i, setI] = useState(0);
  const e = ENDPOINTS[i];
  const mColor = (m) => ({ GET: "var(--ok)", POST: "var(--primary)", PUT: "var(--accent-2)", DELETE: "var(--danger)" }[m]);
  return (
    <div className="card">
      <div className="card-head"><div><h3>API Explorer</h3><div className="sub">REST · GraphQL · base <span className="mono">https://api.vyaparbi.gov.in</span></div></div><button className="btn sm"><Icon name="external" size={11}/>Full docs</button></div>
      <div style={{ display: 'flex', minHeight: 320 }}>
        <div style={{ width: 200, borderRight: '1px solid var(--border)', padding: 8, flexShrink: 0 }}>
          {ENDPOINTS.map((ep, idx) => (
            <div key={idx} onClick={() => setI(idx)} style={{ padding: '8px 10px', borderRadius: 7, marginBottom: 3, cursor: 'pointer', background: i === idx ? 'var(--panel-2)' : 'transparent', border: '1px solid ' + (i === idx ? 'var(--border)' : 'transparent') }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span className="mono" style={{ fontSize: 9, fontWeight: 700, color: mColor(ep.m), width: 30 }}>{ep.m}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink)', fontWeight: i === idx ? 600 : 400 }}>{ep.path}</span>
              </div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2, marginLeft: 36 }}>{ep.desc}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, padding: 14, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: mColor(e.m), padding: '3px 8px', borderRadius: 5, background: 'var(--panel-2)', border: '1px solid var(--border)' }}>{e.m}</span>
            <span className="mono" style={{ fontSize: 12.5, fontWeight: 600 }}>{e.path}</span>
            <span className="spacer"/>
            <button className="btn primary sm"><Icon name="play" size={11}/>Send</button>
          </div>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600, marginBottom: 5 }}>Request</div>
          <pre className="mono" style={{ margin: 0, padding: 12, background: 'var(--panel-3)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 11, color: 'var(--ink-2)', overflowX: 'auto', lineHeight: 1.5 }}>{e.req}</pre>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600, margin: '10px 0 5px', display: 'flex', alignItems: 'center', gap: 6 }}>Response <span className="tag ok" style={{ fontSize: 9 }}>200 OK</span></div>
          <pre className="mono" style={{ margin: 0, padding: 12, background: 'var(--panel-3)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 11, color: 'var(--ink-2)', overflowX: 'auto', lineHeight: 1.5 }}>{e.resp}</pre>
        </div>
      </div>
    </div>
  );
}

function DeveloperScreen() {
  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Developer &amp; APIs</div>
          <div className="screen-sub">REST · GraphQL · SDKs · webhooks · embed BI anywhere · <span className="mono">99.98%</span> uptime SLA</div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="book"/>API docs</button>
          <button className="btn"><Icon name="terminal"/>Playground</button>
          <button className="btn primary"><Icon name="key"/>Create key</button>
        </div>
      </div>

      <div className="grid g-4" style={{ marginBottom: 14 }}>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="code" size={12}/>API calls (24h)</div><div className="value">24.8<span className="unit">M</span></div><div className="delta up"><Icon name="trending" size={12}/>+12% vs avg</div></div>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="zap" size={12}/>p95 latency</div><div className="value">68<span className="unit">ms</span></div><div className="delta up" style={{ color: 'var(--ink-3)' }}>edge cached</div></div>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="key" size={12}/>Active keys</div><div className="value">42</div><div className="delta" style={{ color: 'var(--ink-3)' }}>4 partners · 12 apps</div></div>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="check" size={12}/>Uptime (30d)</div><div className="value" style={{ color: 'var(--ok)' }}>99.98<span className="unit">%</span></div><div className="delta up" style={{ color: 'var(--ink-3)' }}>SLA 99.9%</div></div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.7fr 1fr', marginBottom: 14 }}>
        <APIExplorer/>
        <div className="vstack">
          <div className="card">
            <div className="card-head" style={{ padding: '10px 12px' }}><h3 style={{ fontSize: 12 }}>Official SDKs</h3></div>
            <div className="card-body" style={{ padding: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {SDKS.map(s => (
                <div key={s.n} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', border: '1px solid var(--border)', borderRadius: 8, cursor: 'pointer', background: 'var(--panel-2)' }}>
                  <div style={{ width: 26, height: 26, borderRadius: 6, background: s.c, color: s.ch === 'JS' ? '#000' : '#fff', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 10, flexShrink: 0 }}>{s.ch}</div>
                  <div style={{ flex: 1 }}><div style={{ fontSize: 12, fontWeight: 600 }}>{s.n}</div><div className="mono" style={{ fontSize: 9.5, color: 'var(--ink-3)' }}>vyaparbi-sdk</div></div>
                  <Icon name="download" size={13} style={{ color: 'var(--ink-4)' }}/>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="card-head" style={{ padding: '10px 12px' }}><div><h3 style={{ fontSize: 12 }}>API Usage</h3><div className="sub">calls/hr · last 12h</div></div><span className="tag ok" style={{ fontSize: 10 }}><span className="live-dot"/>Live</span></div>
            <div className="card-body" style={{ padding: 12 }}>
              <BarChart data={[820,910,1040,1180,1290,1420,1380,1510,1620,1540,1680,1740]} labels={["","","","","","","","","","","",""]} h={120} color="var(--primary)" format={fmtNum}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-3)', marginTop: 4 }}><span>12h ago</span><span>now</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.3fr 1fr' }}>
        <div className="card">
          <div className="card-head"><div><h3>API Keys</h3><div className="sub">Scoped · rotatable · rate-limited per key</div></div><button className="btn sm"><Icon name="plus" size={11}/>New key</button></div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr><th>Name</th><th>Key</th><th>Scopes</th><th>Last used</th><th></th></tr></thead>
              <tbody>
                {API_KEYS.map((k, i) => (
                  <tr key={i} style={{ opacity: k.st === 'revoked' ? 0.55 : 1 }}>
                    <td style={{ fontWeight: 500 }}>{k.name}</td>
                    <td className="mono small" style={{ color: 'var(--ink-2)' }}>{k.key}</td>
                    <td className="small" style={{ color: 'var(--ink-3)' }}>{k.scope}</td>
                    <td className="small mono" style={{ color: 'var(--ink-3)' }}>{k.used}</td>
                    <td>{k.st === 'active' ? <button className="btn sm" style={{ height: 22, fontSize: 10 }}><Icon name="refresh" size={10}/>Rotate</button> : <span className="tag danger" style={{ fontSize: 10 }}>revoked</span>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div><h3>Webhooks</h3><div className="sub">Event → your endpoint · signed · retried</div></div><button className="btn sm"><Icon name="plus" size={11}/>Add</button></div>
          <div className="card-body" style={{ padding: 0 }}>
            {WEBHOOKS.map((w, i) => (
              <div key={i} style={{ padding: '11px 14px', borderTop: i ? '1px solid var(--border)' : 0, display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 30, height: 30, borderRadius: 7, background: 'var(--panel-2)', border: '1px solid var(--border)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="webhook" size={14} style={{ color: 'var(--primary)' }}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{w.evt}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.url}</div>
                </div>
                <div style={{ textAlign: 'right', flexShrink: 0 }}>
                  <span className={`tag ${w.st === 'healthy' ? 'ok' : 'warn'}`} style={{ fontSize: 10 }}>{w.st}</span>
                  <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>{w.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.DeveloperScreen = DeveloperScreen;