/* global React, Icon, Badge, Tag, Avatar, Button, Field, Toggle, Tabs, Segmented, Card, Metric, Modal, Pager,
   LineChart, BarChart, AreaChart, DonutCard, Gauge, Heatmap, Sparkline, ProgressBar, toast */

var { useState: useState_ag, useEffect: useEffect_ag } = React;

// ============================================================
// Agency tab — API & Integrations
// ============================================================
function AgencyApiTab({ a }) {
  const [tab, setTab] = useState_ag("keys");
  return (
    <div>
      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="API calls (30d)" value="148,420" delta="+12% MoM" deltaDir="up" hint="P95 latency 280 ms" />
        <Metric label="Sales via API" value="€312,400" delta="68% of total" deltaDir="up" hint="vs €146,800 via web" />
        <Metric label="Active integrations" value="3 keys" hint="2 live · 1 sandbox" />
        <Metric label="Webhooks" value="6 of 6 healthy" delta="100% delivery rate" deltaDir="up" />
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "keys",      label: "API keys",     count: 3 },
        { id: "webhooks",  label: "Webhooks",     count: 6 },
        { id: "sales",     label: "Sales by key" },
        { id: "calls",     label: "Recent calls", count: 248 },
        { id: "security",  label: "Security & IP" },
        { id: "docs",      label: "Docs & SDKs" },
      ]} />

      {tab === "keys"     && <ApiKeysList agency={a} />}
      {tab === "webhooks" && <WebhooksList />}
      {tab === "sales"    && <ApiSalesView />}
      {tab === "calls"    && <ApiCallsView />}
      {tab === "security" && <ApiSecurityView />}
      {tab === "docs"     && <ApiDocsView agency={a} />}
    </div>
  );
}

function ApiKeysList({ agency }) {
  const [reveal, setReveal] = useState_ag({});
  const [revoke, setRevoke] = useState_ag(null);
  const [rotate, setRotate] = useState_ag(null);
  const [createOpen, setCreateOpen] = useState_ag(false);

  const KEYS = [
    {
      id: "key_3OQz1B41a", label: "Production · Web", env: "live", status: "Active",
      secret: "sk_live_3OQz5gT4xJ1pH8d2KbS9LmN0wQp8X3vY7zR1aB6c",
      lastUsed: "2 min ago", calls30d: 92_400, created: "2024-08-04", createdBy: "Bailey Chen",
      scopes: ["hotels:read", "hotels:write", "cars:read", "cars:write", "transfer:write", "vip:read", "payments:read"],
    },
    {
      id: "key_3OQy2H92m", label: "Production · Agency portal v3", env: "live", status: "Active",
      secret: "sk_live_3OQy7hP2qK4nM9d3VbR5XmJ8wL1aB6cF7zT9oN0p",
      lastUsed: "12 min ago", calls30d: 48_900, created: "2025-02-18", createdBy: "Maria Lopez",
      scopes: ["hotels:read", "hotels:write", "cars:read", "transfer:read", "vip:read", "ptour:read", "payments:read", "refunds:write"],
    },
    {
      id: "key_3OQx9K81n", label: "Sandbox", env: "test", status: "Active",
      secret: "sk_test_3OQx8jW3lF2pH5n7BcS1XmJ4wL9aB0cF6zT8oN2q",
      lastUsed: "Yesterday", calls30d: 7_100, created: "2024-08-04", createdBy: "Bailey Chen",
      scopes: ["hotels:*", "cars:*", "transfer:*", "vip:*", "ptour:*", "payments:*", "refunds:*", "fx:*"],
    },
  ];

  return (
    <>
      <div className="row" style={{ marginBottom: 14 }}>
        <span className="muted tiny">Keep secret keys safe — never expose them client-side. Use environment variables.</span>
        <span className="spacer" />
        <Button kind="secondary" size="sm" icon={<Icon.Doc />}>API logs</Button>
        <Button kind="primary" size="sm" icon={<Icon.Plus />} onClick={() => setCreateOpen(true)}>Create new key</Button>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {KEYS.map((k) => (
          <div key={k.id} className="card">
            <div className="card__head">
              <div>
                <div className="row" style={{ gap: 8 }}>
                  <span className="bold">{k.label}</span>
                  {k.env === "live" ? <Badge tone="indigo">LIVE</Badge> : <Badge tone="warning">TEST</Badge>}
                  {k.status === "Active" ? <Badge tone="success">Active</Badge> : <Badge tone="danger">Revoked</Badge>}
                </div>
                <div className="tiny muted" style={{ marginTop: 2 }}>
                  <span className="mono">{k.id}</span> · Created {k.created} by {k.createdBy} · {k.calls30d.toLocaleString()} calls in 30 d · Last used {k.lastUsed}
                </div>
              </div>
              <div className="card__actions">
                <Button kind="ghost" size="sm" icon={<Icon.Copy />}
                  onClick={() => { navigator.clipboard?.writeText(k.secret); toast({ title: "Secret copied", tone: "success" }); }}>Copy</Button>
                <Button kind="secondary" size="sm" icon={<Icon.Refresh />} onClick={() => setRotate(k)}>Rotate</Button>
                <Button kind="danger" size="sm" icon={<Icon.X />} onClick={() => setRevoke(k)}>Revoke</Button>
              </div>
            </div>
            <div className="card__body">
              <div className="row" style={{ gap: 8 }}>
                <code style={{
                  flex: 1, padding: "10px 12px",
                  background: "var(--bg-subtle)", border: "1px solid var(--border-hairline)",
                  borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 12.5,
                  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                }}>
                  {reveal[k.id] ? k.secret : k.secret.slice(0, 12) + " " + "•".repeat(28) + " " + k.secret.slice(-4)}
                </code>
                <Button kind="secondary" size="sm" icon={reveal[k.id] ? <Icon.EyeOff /> : <Icon.Eye />}
                  onClick={() => setReveal((r) => ({ ...r, [k.id]: !r[k.id] }))}>
                  {reveal[k.id] ? "Hide" : "Reveal"}
                </Button>
              </div>

              <div style={{ height: 14 }} />
              <div className="muted tiny" style={{ marginBottom: 6 }}>Scopes</div>
              <div className="row" style={{ gap: 4, flexWrap: "wrap" }}>
                {k.scopes.map((s) => <Tag key={s} kind={s.startsWith("hotel") ? "hotel" : s.startsWith("car") ? "rental" : s.startsWith("transfer") ? "transfer" : s.startsWith("vip") ? "vip" : s.startsWith("ptour") ? "ptour" : "neutral"}>{s}</Tag>)}
              </div>
            </div>
          </div>
        ))}
      </div>

      <CreateApiKeyModal open={createOpen} onClose={() => setCreateOpen(false)} agency={agency} />
      <RotateKeyModal k={rotate} onClose={() => setRotate(null)} />
      <RevokeKeyModal k={revoke} onClose={() => setRevoke(null)} />
    </>
  );
}

function CreateApiKeyModal({ open, onClose, agency }) {
  const [env, setEnv] = useState_ag("live");
  const [generated, setGenerated] = useState_ag(null);
  if (!open) return null;
  return (
    <Modal open onClose={onClose} title="Create API key" size="lg"
      footer={generated
        ? <Button kind="primary" onClick={() => { onClose(); setGenerated(null); }}>Done</Button>
        : <><Button kind="secondary" onClick={onClose}>Cancel</Button>
            <Button kind="primary" icon={<Icon.Check />} onClick={() => setGenerated("sk_" + env + "_" + Math.random().toString(36).slice(2, 12) + "T8XmJ4wL9aB0cF6zT8oN2q")}>Generate key</Button></>}>
      {!generated && (
        <>
          <div className="grid grid--2" style={{ gap: 14 }}>
            <Field label="Label" hint="Helps you identify where this key is used."><input className="input" defaultValue="Production · Web v2" /></Field>
            <Field label="Environment">
              <select className="select" value={env} onChange={(e) => setEnv(e.target.value)}>
                <option value="live">Live (production)</option>
                <option value="test">Test (sandbox)</option>
              </select>
            </Field>
            <Field label="Expiration"><select className="select" defaultValue="never"><option value="never">Never</option><option>30 days</option><option>90 days</option><option>1 year</option></select></Field>
            <Field label="Rate limit (req/s)"><input className="input" type="number" defaultValue="50" /></Field>
          </div>

          <div style={{ height: 14 }} />
          <div className="bold" style={{ fontSize: 13, marginBottom: 8 }}>Scopes — what can this key do?</div>
          <div className="tbl-wrap" style={{ border: "1px solid var(--border)", borderRadius: 8, maxHeight: 300, overflowY: "auto" }}>
            <table className="tbl" style={{ fontSize: 12.5 }}>
              <thead><tr><th>Service</th><th className="center">Read</th><th className="center">Write</th><th className="center">Delete</th></tr></thead>
              <tbody>
                {[
                  ["Hotels", true,  true,  false, "hotel"],
                  ["Rental Cars", true, true, false, "rental"],
                  ["Transfer", true, true, false, "transfer"],
                  ["VIP Lounge", true, false, false, "vip"],
                  ["VIP Airport", true, false, false, "vipas"],
                  ["Private Tours", true, true, false, "ptour"],
                  ["Flights", true, false, false, "flight"],
                  ["Payments", true, false, false, "neutral"],
                  ["Refunds", true, false, false, "neutral"],
                  ["FX rates", true, false, false, "neutral"],
                  ["Webhooks", true, true, false, "neutral"],
                ].map(([name, r, w, d, k]) => (
                  <tr key={name}>
                    <td><Tag kind={k}>{name}</Tag></td>
                    <td className="center"><input className="checkbox" type="checkbox" defaultChecked={r} /></td>
                    <td className="center"><input className="checkbox" type="checkbox" defaultChecked={w} /></td>
                    <td className="center"><input className="checkbox" type="checkbox" defaultChecked={d} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{ height: 14 }} />
          <Field label="IP allowlist (optional)" hint="Comma-separated. Leave empty to allow any IP.">
            <input className="input" placeholder="82.18.40.21, 91.220.18.0/24" />
          </Field>
        </>
      )}
      {generated && (
        <>
          <div className="row" style={{ gap: 10, background: "var(--warning-bg)", padding: "10px 12px", borderRadius: 8, color: "var(--warning)" }}>
            <Icon.Warning stroke="currentColor" />
            <div style={{ fontSize: 13 }}><b>Copy this key now.</b> For security, we will not show it again. Store it in a password manager or environment variable.</div>
          </div>
          <div style={{ height: 14 }} />
          <code style={{
            display: "block", padding: "12px 14px",
            background: "var(--bg-subtle)", border: "1px solid var(--border-hairline)",
            borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 13, wordBreak: "break-all",
          }}>{generated}</code>
          <div style={{ height: 12 }} />
          <Button kind="secondary" icon={<Icon.Copy />} onClick={() => { navigator.clipboard?.writeText(generated); toast({ title: "Key copied to clipboard", tone: "success" }); }}>Copy key</Button>
        </>
      )}
    </Modal>
  );
}

function RotateKeyModal({ k, onClose }) {
  if (!k) return null;
  return (
    <Modal open onClose={onClose} title={`Rotate ${k.label}`}
      footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button>
              <Button kind="primary" icon={<Icon.Refresh />} onClick={() => { onClose(); toast({ title: "Key rotated", body: "Old secret valid for 24 h overlap.", tone: "success" }); }}>Rotate key</Button></>}>
      <div className="row" style={{ gap: 10, marginBottom: 14, background: "var(--info-bg)", padding: "10px 12px", borderRadius: 8, color: "var(--info)" }}>
        <Icon.Info stroke="currentColor" />
        <div style={{ fontSize: 13 }}>A new secret will be generated. The old key will keep working for <b>24 hours</b> so you have time to update integrations.</div>
      </div>
      <Field label="Reason for rotation">
        <select className="select"><option>Scheduled rotation (best practice)</option><option>Suspected compromise</option><option>Team member offboarded</option><option>Other</option></select>
      </Field>
    </Modal>
  );
}

function RevokeKeyModal({ k, onClose }) {
  if (!k) return null;
  return (
    <Modal open onClose={onClose} title={`Revoke ${k.label}`}
      footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button>
              <Button kind="danger" icon={<Icon.X />} onClick={() => { onClose(); toast({ title: "Key revoked", body: `${k.label} can no longer make requests.`, tone: "danger" }); }}>Revoke immediately</Button></>}>
      <div className="row" style={{ gap: 10, marginBottom: 14, background: "var(--danger-bg)", padding: "10px 12px", borderRadius: 8, color: "var(--danger)" }}>
        <Icon.Warning stroke="currentColor" />
        <div style={{ fontSize: 13 }}>This key will <b>stop working immediately</b>. Any system using it will fail until you update them with a new key.</div>
      </div>
      <Field label="Type the key ID to confirm">
        <input className="input" placeholder={k.id} />
      </Field>
    </Modal>
  );
}

// ----- Webhooks -----
function WebhooksList() {
  const HOOKS = [
    { url: "https://api.optitron.com/trekko/booking-events",    events: ["booking.created", "booking.cancelled", "booking.rebooked"], status: "Healthy", lastDelivery: "2 min ago",   success: 99.8 },
    { url: "https://api.optitron.com/trekko/payment-events",    events: ["payment.succeeded", "payment.refunded"], status: "Healthy", lastDelivery: "8 min ago",   success: 100 },
    { url: "https://hooks.optitron.com/finance/inbox",          events: ["invoice.issued", "invoice.paid"], status: "Healthy", lastDelivery: "1 hr ago",    success: 99.2 },
    { url: "https://hooks.optitron.com/ops/inbox",              events: ["booking.confirmed", "booking.modified"], status: "Healthy", lastDelivery: "12 min ago", success: 98.4 },
    { url: "https://api.optitron.com/trekko/fx-events",         events: ["fx.rate_changed"], status: "Degraded", lastDelivery: "1 hr ago", success: 84.1 },
    { url: "https://slack.com/api/incoming/T2A8B/optitron",     events: ["anomaly.detected"], status: "Healthy", lastDelivery: "3 hr ago", success: 100 },
  ];
  return (
    <>
      <div className="row" style={{ marginBottom: 14 }}>
        <span className="muted tiny">Trekko sends a POST request to each endpoint when a subscribed event happens. Failed deliveries are retried with exponential backoff for 72 h.</span>
        <span className="spacer" />
        <Button kind="primary" size="sm" icon={<Icon.Plus />} onClick={() => {
          var url = window.prompt("Webhook URL (https://...)?");
          if (!url) return;
          var ev = window.prompt("Events to subscribe (comma-separated: booking.created,hotel.cancelled,...)?", "booking.created");
          if (!ev) return;
          window.TrekkoAPI.addWebhook(url, ev.split(",").map(function(s){return s.trim();}).filter(Boolean), "")
            .then(function () { toast({ title: "Webhook queued", body: url, tone: "success" }); })
            .catch(function (e) { toast({ title: "Add webhook failed", body: String(e && e.message || e), tone: "danger" }); });
        }}>Add endpoint</Button>
      </div>

      <div className="tbl-wrap" style={{ border: "1px solid var(--border)", borderRadius: 8 }}>
        <table className="tbl">
          <thead><tr><th>Endpoint</th><th>Events</th><th>Last delivery</th><th className="num">Success</th><th>Status</th><th className="col-actions"></th></tr></thead>
          <tbody>
            {HOOKS.map((h, i) => (
              <tr key={i}>
                <td><span className="mono" style={{ fontSize: 12 }}>{h.url}</span></td>
                <td><div className="row" style={{ gap: 4, flexWrap: "wrap" }}>{h.events.slice(0, 3).map((e) => <Tag key={e}>{e}</Tag>)}{h.events.length > 3 && <Tag>+{h.events.length - 3}</Tag>}</div></td>
                <td className="mono muted">{h.lastDelivery}</td>
                <td className="num mono">{h.success}%</td>
                <td>{h.status === "Healthy" ? <Badge tone="success">Healthy</Badge> : <Badge tone="warning">Degraded</Badge>}</td>
                <td className="col-actions">
                  <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.Refresh />} title="Send test event" onClick={() => {
                      window.TrekkoAPI.testWebhook(h.url)
                        .then(function () { toast({ title: "Test event queued", body: h.url, tone: "success" }); })
                        .catch(function (e) { toast({ title: "Test failed", body: String(e && e.message || e), tone: "danger" }); });
                    }} />
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.Edit />} onClick={() => {
                      var newUrl = window.prompt("New URL?", h.url);
                      if (newUrl == null) return;
                      window.TrekkoAPI.editWebhook(h.url, { url: newUrl })
                        .then(function () { toast({ title: "Webhook updated", body: newUrl, tone: "success" }); })
                        .catch(function (e) { toast({ title: "Edit failed", body: String(e && e.message || e), tone: "danger" }); });
                    }} />
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.Trash />} onClick={() => {
                      if (!window.confirm("Delete webhook " + h.url + "?")) return;
                      window.TrekkoAPI.deleteWebhook(h.url)
                        .then(function () { toast({ title: "Webhook deleted", body: h.url, tone: "success" }); })
                        .catch(function (e) { toast({ title: "Delete failed", body: String(e && e.message || e), tone: "danger" }); });
                    }} />
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// ----- Sales by API key (filterable) -----
function ApiSalesView() {
  const { useState, useEffect } = React;
  const [bookings, setBookings] = useState((window.MOCK && window.MOCK.BOOKINGS) || []);
  useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getBookings().then((rows) => { if (rows && rows.length) setBookings(rows); });
  }, []);
  const [service, setService] = useState_ag("");
  const [key, setKey] = useState_ag("");
  return (
    <>
      <div className="filter-bar">
        <select className="select" value={key} onChange={(e) => setKey(e.target.value)} style={{ minWidth: 240 }}>
          <option value="">All API keys</option>
          <option>Production · Web (key_3OQz1B41a)</option>
          <option>Production · Agency portal v3 (key_3OQy2H92m)</option>
          <option>Sandbox (key_3OQx9K81n)</option>
        </select>
        <select className="select" value={service} onChange={(e) => setService(e.target.value)}>
          <option value="">All services</option>
          <option>Hotels</option><option>Rental Cars</option><option>Transfer</option>
          <option>VIP Lounge</option><option>VIP Airport</option><option>Private Tour</option><option>Flight</option>
        </select>
        <select className="select"><option>Last 30 days</option><option>Last 90 days</option><option>YTD</option><option>All time</option></select>
        <span className="spacer" />
        <Button kind="secondary" size="sm" icon={<Icon.Download />}>Export</Button>
      </div>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="API revenue (30d)" value="€312,400" delta="+18% MoM" deltaDir="up" />
        <Metric label="API bookings (30d)" value="1,842" delta="+12%" deltaDir="up" hint="Avg €169 / booking" />
        <Metric label="Top service" value="Hotels" hint="€186k · 62% of API revenue" />
        <Metric label="Top key" value="Web (key_3OQz...41a)" hint="€212k · 92.4k calls" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr", gap: 18, marginBottom: 18 }}>
        <Card title="Revenue by API key · 12 weeks">
          <AreaChart
            height={240}
            data={[
              { label: "W19", web: 8.2, portal: 5.4, sb: 0.2 },
              { label: "W20", web: 9.1, portal: 6.1, sb: 0.3 },
              { label: "W21", web: 10.4,portal: 6.8, sb: 0.4 },
              { label: "W22", web: 11.2,portal: 7.4, sb: 0.3 },
              { label: "W23", web: 12.4,portal: 7.8, sb: 0.5 },
              { label: "W24", web: 13.8,portal: 8.4, sb: 0.5 },
              { label: "W25", web: 14.6,portal: 9.2, sb: 0.6 },
              { label: "W26", web: 15.4,portal: 9.8, sb: 0.4 },
              { label: "W27", web: 16.8,portal: 10.2,sb: 0.7 },
              { label: "W28", web: 18.4,portal: 11.0,sb: 0.6 },
              { label: "W29", web: 19.2,portal: 11.8,sb: 0.8 },
              { label: "W30", web: 22.0,portal: 12.4,sb: 0.9 },
            ]}
            valueFmt={(v) => "€" + v + "k"}
            series={[
              { key: "web",    name: "Production · Web",          color: "#635bff" },
              { key: "portal", name: "Production · Agency portal",color: "#00d4ff" },
              { key: "sb",     name: "Sandbox",                   color: "#a78bfa" },
            ]}
          />
        </Card>
        <Card title="Sales by service" sub="API-sourced only">
          <DonutCard
            data={[
              { label: "Hotels",        value: 186000, color: "#635bff" },
              { label: "Rental Cars",   value: 64000,  color: "#0e7c66" },
              { label: "Transfer",      value: 28000,  color: "#ff9f43" },
              { label: "VIP Lounge",    value: 14000,  color: "#a78bfa" },
              { label: "VIP Airport",   value: 12000,  color: "#92580c" },
              { label: "Private Tour",  value: 8400,   color: "#0c5fb2" },
            ]}
          />
        </Card>
      </div>

      <Card title="Sales detail · filterable by service and key" flush>
        <table className="tbl">
          <thead>
            <tr><th>Booking</th><th>Service</th><th>API key</th><th>Travel date</th><th className="num">Amount</th><th>Source</th><th>Status</th></tr>
          </thead>
          <tbody>
            {bookings.slice(0, 12).map((b, i) => (
              <tr key={b.id}>
                <td className="mono">{b.shortId}</td>
                <td><Tag kind={b.type.tag}>{b.type.label}</Tag></td>
                <td className="mono muted" style={{ fontSize: 12 }}>
                  {i % 3 === 0 ? "key_3OQz...41a" : i % 3 === 1 ? "key_3OQy...92m" : "key_3OQx...81n"}
                </td>
                <td className="mono">{b.travelDate}</td>
                <td className="num mono bold">€{b.amount.toLocaleString()}</td>
                <td>{i % 3 === 2 ? <Tag>Sandbox</Tag> : <Tag kind="hotel">API · Live</Tag>}</td>
                <td><window.StatusBadge status={b.status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </>
  );
}

// ----- Recent calls feed -----
function ApiCallsView() {
  return (
    <>
      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Requests (1h)" value="3,128" delta="P95 280 ms" deltaDir="up" />
        <Metric label="Error rate" value="0.21%" delta="−0.04 pt" deltaDir="down" hint="Below 0.5% target" />
        <Metric label="Throttled" value="14" hint="0.4% of requests" />
        <Metric label="Avg payload size" value="3.2 kb" hint="P95 18 kb" />
      </div>

      <Card title="Request volume · 24 h">
        <AreaChart
          height={200}
          data={Array.from({ length: 24 }).map((_, i) => ({ label: `${i}h`, ok: Math.round(80 + Math.sin(i) * 30 + Math.random() * 40), err: Math.round(Math.random() * 4) }))}
          series={[
            { key: "ok",  name: "Success", color: "#0e7c66" },
            { key: "err", name: "4xx/5xx", color: "#d4366a" },
          ]}
        />
      </Card>

      <div style={{ height: 14 }} />
      <Card title="Recent requests" flush>
        <table className="tbl">
          <thead><tr><th>Time</th><th>Method</th><th>Endpoint</th><th>API key</th><th>Status</th><th className="num">Latency</th><th>IP</th></tr></thead>
          <tbody>
            {[
              { t: "10:18:42", m: "POST",   e: "/v1/hotels/search",      k: "key_3OQz...41a", s: 200, lat: 312, ip: "82.18.40.21" },
              { t: "10:18:41", m: "POST",   e: "/v1/bookings",            k: "key_3OQz...41a", s: 201, lat: 482, ip: "82.18.40.21" },
              { t: "10:18:40", m: "GET",    e: "/v1/bookings/BK-12482",   k: "key_3OQy...92m", s: 200, lat: 92,  ip: "91.220.18.0" },
              { t: "10:18:38", m: "POST",   e: "/v1/transfer/quote",      k: "key_3OQz...41a", s: 200, lat: 218, ip: "82.18.40.21" },
              { t: "10:18:37", m: "POST",   e: "/v1/cars/search",         k: "key_3OQy...92m", s: 200, lat: 412, ip: "91.220.18.0" },
              { t: "10:18:36", m: "DELETE", e: "/v1/bookings/BK-12476",   k: "key_3OQz...41a", s: 200, lat: 188, ip: "82.18.40.21" },
              { t: "10:18:35", m: "GET",    e: "/v1/vip/lounges/MAD",     k: "key_3OQz...41a", s: 200, lat: 64,  ip: "82.18.40.21" },
              { t: "10:18:33", m: "POST",   e: "/v1/refunds",             k: "key_3OQy...92m", s: 422, lat: 142, ip: "91.220.18.0" },
              { t: "10:18:31", m: "POST",   e: "/v1/private-tours/search",k: "key_3OQx...81n", s: 200, lat: 482, ip: "82.18.40.21" },
              { t: "10:18:30", m: "GET",    e: "/v1/fx/rates",            k: "key_3OQz...41a", s: 200, lat: 18,  ip: "82.18.40.21" },
              { t: "10:18:28", m: "POST",   e: "/v1/hotels/search",       k: "key_3OQz...41a", s: 429, lat: 12,  ip: "91.220.18.40" },
              { t: "10:18:26", m: "GET",    e: "/v1/payments/intents",    k: "key_3OQy...92m", s: 200, lat: 88,  ip: "91.220.18.0" },
            ].map((r, i) => (
              <tr key={i}>
                <td className="mono muted">{r.t}</td>
                <td><span className="mono bold" style={{ color: r.m === "POST" ? "var(--indigo)" : r.m === "DELETE" ? "var(--danger)" : r.m === "GET" ? "var(--success)" : "var(--ink-1)" }}>{r.m}</span></td>
                <td><span className="mono" style={{ fontSize: 12.5 }}>{r.e}</span></td>
                <td className="mono muted" style={{ fontSize: 12 }}>{r.k}</td>
                <td>
                  {r.s < 300 ? <Badge tone="success">{r.s}</Badge> :
                   r.s < 400 ? <Badge tone="info">{r.s}</Badge> :
                   r.s < 500 ? <Badge tone="warning">{r.s}</Badge> :
                              <Badge tone="danger">{r.s}</Badge>}
                </td>
                <td className="num mono">{r.lat} ms</td>
                <td className="mono muted">{r.ip}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </>
  );
}

function ApiSecurityView() {
  return (
    <div className="grid grid--2" style={{ gap: 18 }}>
      <Card title="IP allowlist" sub="Only requests from these IPs are accepted"
        actions={<Button kind="primary" size="sm" icon={<Icon.Plus />}>Add IP</Button>}>
        <table className="tbl" style={{ fontSize: 12.5 }}>
          <thead><tr><th>IP / Range</th><th>Label</th><th>Added</th><th className="col-actions"></th></tr></thead>
          <tbody>
            <tr><td className="mono">82.18.40.21</td><td>Office · Madrid</td><td className="mono muted">2024-08-04</td><td className="col-actions"><Button kind="ghost" size="sm" iconOnly icon={<Icon.Trash />} /></td></tr>
            <tr><td className="mono">91.220.18.0/24</td><td>Agency portal datacenter</td><td className="mono muted">2025-02-18</td><td className="col-actions"><Button kind="ghost" size="sm" iconOnly icon={<Icon.Trash />} /></td></tr>
            <tr><td className="mono">78.92.40.18</td><td>Home office · Bailey</td><td className="mono muted">2025-09-12</td><td className="col-actions"><Button kind="ghost" size="sm" iconOnly icon={<Icon.Trash />} /></td></tr>
          </tbody>
        </table>
      </Card>

      <Card title="Rate limits" sub="Per API key, requests per second">
        <div className="grid" style={{ gap: 14 }}>
          <div>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
              <span className="bold">Production · Web</span>
              <span className="bold mono">42 / 50 rps <span className="tiny muted">(P95)</span></span>
            </div>
            <ProgressBar value={84} color="#635bff" />
          </div>
          <div>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
              <span className="bold">Production · Agency portal</span>
              <span className="bold mono">18 / 50 rps <span className="tiny muted">(P95)</span></span>
            </div>
            <ProgressBar value={36} color="#00d4ff" />
          </div>
          <div>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
              <span className="bold">Sandbox</span>
              <span className="bold mono">3 / 10 rps <span className="tiny muted">(P95)</span></span>
            </div>
            <ProgressBar value={30} color="#a78bfa" />
          </div>
        </div>
        <div style={{ height: 14 }} />
        <Button kind="secondary" block icon={<Icon.Plus />}>Request higher limits</Button>
      </Card>

      <div style={{ gridColumn: "1 / -1" }}>
        <Card title="OAuth & signing" sub="Webhook signature secret and mTLS">
          <div className="grid grid--2" style={{ gap: 14 }}>
            <div>
              <div className="muted tiny" style={{ marginBottom: 6 }}>Webhook signing secret</div>
              <div className="row" style={{ gap: 8 }}>
                <code style={{ flex: 1, padding: "8px 12px", background: "var(--bg-subtle)", borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 12.5 }}>whsec_••••••••••••••••K81r</code>
                <Button kind="ghost" size="sm" icon={<Icon.Copy />}>Copy</Button>
                <Button kind="secondary" size="sm" icon={<Icon.Refresh />}>Rotate</Button>
              </div>
            </div>
            <div>
              <div className="muted tiny" style={{ marginBottom: 6 }}>mTLS client certificate</div>
              <div className="row" style={{ gap: 8 }}>
                <code style={{ flex: 1, padding: "8px 12px", background: "var(--bg-subtle)", borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 12.5 }}>optitron-mtls-2025.pem</code>
                <Button kind="ghost" size="sm" icon={<Icon.Download />}>Download</Button>
                <Button kind="secondary" size="sm" icon={<Icon.Upload />}>Upload new</Button>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

function ApiDocsView({ agency }) {
  return (
    <div className="grid grid--2" style={{ gap: 18 }}>
      <Card title="API documentation">
        <div className="row" style={{ gap: 10 }}><Icon.Doc /><a href="#">REST API reference</a></div>
        <div className="row" style={{ gap: 10, marginTop: 6 }}><Icon.Doc /><a href="#">Webhook events catalogue</a></div>
        <div className="row" style={{ gap: 10, marginTop: 6 }}><Icon.Doc /><a href="#">Changelog & migration guides</a></div>
        <div className="row" style={{ gap: 10, marginTop: 6 }}><Icon.Doc /><a href="#">VIP services schema</a></div>
        <div className="row" style={{ gap: 10, marginTop: 6 }}><Icon.Doc /><a href="#">FX rates endpoint</a></div>
        <div className="divider" />
        <Field label="Sandbox base URL">
          <div className="row" style={{ gap: 8 }}>
            <code style={{ flex: 1, padding: "8px 12px", background: "var(--bg-subtle)", borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 12.5 }}>https://sandbox.api.trekko.com/v1</code>
            <Button kind="ghost" size="sm" icon={<Icon.Copy />} onClick={() => {
              var url = "https://sandbox.api.trekko.com/v1";
              if (navigator.clipboard) {
                navigator.clipboard.writeText(url).then(
                  function () { toast({ title: "Copied to clipboard", body: url, tone: "success" }); },
                  function () { toast({ title: "Copy failed", body: "Clipboard permission denied", tone: "danger" }); }
                );
              } else {
                toast({ title: "Clipboard not available", tone: "danger" });
              }
            }}>Copy</Button>
          </div>
        </Field>
      </Card>
      <Card title="SDKs">
        <div className="grid grid--2" style={{ gap: 8 }}>
          {[
            { name: "Node.js",   ver: "v3.4.1",  status: "GA"   },
            { name: "Python",    ver: "v2.8.0",  status: "GA"   },
            { name: "PHP",       ver: "v1.12.0", status: "GA"   },
            { name: ".NET",      ver: "v1.6.0",  status: "GA"   },
            { name: "Go",        ver: "v0.9.0",  status: "Beta" },
            { name: "Ruby",      ver: "v0.7.0",  status: "Beta" },
          ].map((s) => (
            <div key={s.name} className="row" style={{ padding: "10px 12px", background: "var(--bg-subtle)", borderRadius: 6 }}>
              <div style={{ flex: 1 }}>
                <div className="bold">{s.name}</div>
                <div className="tiny muted mono">{s.ver}</div>
              </div>
              {s.status === "GA" ? <Badge tone="success">GA</Badge> : <Badge tone="info">Beta</Badge>}
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// ============================================================
// Agency tab — Treasury / FX (Banco de Cambio)
// ============================================================
function AgencyTreasuryTab({ a }) {
  const WALLETS = [
    { ccy: "EUR", flag: "🇪🇺", balance: 14820.40,  held: 1240.00,  rate: 1.0000, primary: true },
    { ccy: "USD", flag: "🇺🇸", balance: 8420.18,   held: 482.00,   rate: 1.0820 },
    { ccy: "GBP", flag: "🇬🇧", balance: 3120.66,   held: 220.00,   rate: 0.8482 },
    { ccy: "CHF", flag: "🇨🇭", balance: 1820.00,   held: 0,        rate: 0.9620 },
    { ccy: "NOK", flag: "🇳🇴", balance: 18420.00,  held: 480.00,   rate: 11.4820 },
    { ccy: "AED", flag: "🇦🇪", balance: 4180.00,   held: 0,        rate: 3.9740 },
  ];
  return (
    <>
      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Combined balance (EUR)" value="€38,420" delta="+€4,820 MoM" deltaDir="up" hint="Across 6 currencies" />
        <Metric label="FX volume (30d)" value="€124,400" delta="+18% MoM" deltaDir="up" hint="Conversion fees €620" />
        <Metric label="Settlement currency" value="EUR" hint="Receive payouts in EUR" />
        <Metric label="Hedge protection" value="Forward 30d" hint="EUR/USD locked at 1.0820" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr", gap: 18, marginBottom: 18 }}>
        <Card title="Multi-currency wallets" actions={<Button kind="primary" size="sm" icon={<Icon.Plus />}>Add currency</Button>} flush>
          <table className="tbl">
            <thead><tr><th>Currency</th><th className="num">Balance</th><th className="num">Held</th><th className="num">Available</th><th className="num">FX rate vs EUR</th><th>Status</th><th className="col-actions"></th></tr></thead>
            <tbody>
              {WALLETS.map((w) => (
                <tr key={w.ccy}>
                  <td className="bold"><span style={{ fontSize: 16, marginRight: 6 }}>{w.flag}</span>{w.ccy}{w.primary && <Badge tone="indigo" plain> Primary</Badge>}</td>
                  <td className="num mono bold">{w.balance.toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                  <td className="num mono muted">{w.held.toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                  <td className="num mono">{(w.balance - w.held).toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                  <td className="num mono">{w.rate.toFixed(4)}</td>
                  <td><Badge tone="success">Active</Badge></td>
                  <td className="col-actions">
                    <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                      <Button kind="ghost" size="sm" icon={<Icon.Refresh />} title="Convert" />
                      <Button kind="ghost" size="sm" icon={<Icon.Send />} title="Withdraw" />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <Card title="FX rate trend · EUR/USD" sub="Last 30 days · live from Banco de Cambio">
          <AreaChart
            height={180}
            data={Array.from({ length: 30 }).map((_, i) => ({ label: `D${i}`, rate: +(1.07 + Math.sin(i * 0.4) * 0.015 + i * 0.001).toFixed(4) }))}
            valueFmt={(v) => v.toFixed(4)}
            series={[{ key: "rate", name: "EUR/USD", color: "#635bff" }]}
          />
          <div className="row" style={{ justifyContent: "space-between", marginTop: 10, padding: "8px 12px", background: "var(--bg-subtle)", borderRadius: 6 }}>
            <span className="muted tiny">Current rate</span>
            <span className="mono bold">1.0820 <span className="tiny" style={{ color: "var(--success)" }}>+0.42%</span></span>
          </div>
        </Card>
      </div>

      <Card title="Conversion fee tiers" sub="Negotiated per-agency rates" flush>
        <table className="tbl">
          <thead><tr><th>Pair</th><th className="num">Monthly volume</th><th className="num">Spread</th><th className="num">Fixed fee</th><th>Source</th></tr></thead>
          <tbody>
            <tr><td className="bold">EUR ⇄ USD</td><td className="num mono">€84,200</td><td className="num mono">0.18%</td><td className="num mono">€0.20</td><td className="muted">Banco de Cambio</td></tr>
            <tr><td className="bold">EUR ⇄ GBP</td><td className="num mono">€22,400</td><td className="num mono">0.22%</td><td className="num mono">€0.20</td><td className="muted">Banco de Cambio</td></tr>
            <tr><td className="bold">EUR ⇄ CHF</td><td className="num mono">€11,800</td><td className="num mono">0.28%</td><td className="num mono">€0.30</td><td className="muted">Banco de Cambio</td></tr>
            <tr><td className="bold">EUR ⇄ NOK</td><td className="num mono">€6,400</td><td className="num mono">0.38%</td><td className="num mono">€0.30</td><td className="muted">XE.com fallback</td></tr>
            <tr><td className="bold">EUR ⇄ AED</td><td className="num mono">€2,800</td><td className="num mono">0.42%</td><td className="num mono">€0.40</td><td className="muted">XE.com fallback</td></tr>
          </tbody>
        </table>
      </Card>

      <div style={{ height: 18 }} />

      <Card title="Recent conversions" flush>
        <table className="tbl">
          <thead><tr><th>When</th><th>From → To</th><th className="num">Amount</th><th className="num">Rate</th><th className="num">Result</th><th className="num">Fee</th><th>By</th></tr></thead>
          <tbody>
            <tr><td className="mono muted">Today 10:18</td><td className="bold">EUR → USD</td><td className="num mono">€2,000</td><td className="num mono">1.0820</td><td className="num mono">$2,164.00</td><td className="num mono muted">€3.80</td><td>System (booking BK-12482)</td></tr>
            <tr><td className="mono muted">Today 09:42</td><td className="bold">USD → EUR</td><td className="num mono">$1,800</td><td className="num mono">0.9242</td><td className="num mono">€1,663.56</td><td className="num mono muted">€3.20</td><td>Hannah Briggs</td></tr>
            <tr><td className="mono muted">Yesterday</td><td className="bold">EUR → GBP</td><td className="num mono">€820</td><td className="num mono">0.8482</td><td className="num mono">£695.52</td><td className="num mono muted">€1.81</td><td>Maria Lopez</td></tr>
            <tr><td className="mono muted">Yesterday</td><td className="bold">EUR → CHF</td><td className="num mono">€420</td><td className="num mono">0.9620</td><td className="num mono">CHF 404.04</td><td className="num mono muted">€1.18</td><td>System (booking BK-12471)</td></tr>
          </tbody>
        </table>
      </Card>
    </>
  );
}

Object.assign(window, { AgencyApiTab, AgencyTreasuryTab });