/* global React, Ic, fluxActions, useFlux, timeAgo, toast, Field, Modal, Copyable, CodeBlock, DangerButton, CATEGORIES */
const { useState: useKS, useMemo: useKM } = React;

// ─────────────────────────────────────────────────────────────
// API Keys
// ─────────────────────────────────────────────────────────────
function ApiKeys() {
  const s = useFlux();
  const [creating, setCreating] = useKS(false);
  const [name, setName] = useKS("");
  const [justMade, setJustMade] = useKS(null);
  const [reveal, setReveal] = useKS({});

  const create = async () => {
    const k = await fluxActions.createKey(name.trim() || "new-scraper");
    if (!k) return;
    setJustMade(k); setCreating(false); setName("");
    setReveal((r) => ({ ...r, [k.id]: true }));
    toast("API key created", "success");
  };
  const mask = (key) => key.slice(0, 16) + "•".repeat(18) + key.slice(-4);

  return (
    <div className="view-pad fade-in" style={{ maxWidth: 1040 }}>
      <div className="sec-head">
        <h2>API keys</h2>
        <span className="desc">Secrets your scrapers use to authenticate POST requests</span>
        <span className="spacer" />
        <button className="btn primary" onClick={() => setCreating(true)}><Ic.plus className="ico" />New key</button>
      </div>

      <div className="card" style={{ padding: 16, marginBottom: 18, display: "flex", gap: 14, alignItems: "flex-start" }}>
        <Ic.shield style={{ width: 18, height: 18, color: "var(--indigo)", flexShrink: 0, marginTop: 1 }} />
        <div style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.6 }}>
          Every key works two ways — send it as <span className="kbd">X-API-Key: &lt;key&gt;</span> or as <span className="kbd">Authorization: Bearer &lt;key&gt;</span>. Treat keys like passwords. Revoke instantly if a scraper is compromised; revoked keys are rejected with <span className="mono-sm">401</span>.
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="tbl">
          <thead><tr><th>Name</th><th>Key</th><th>Requests</th><th>Last used</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {s.apiKeys.map((k) => (
              <tr key={k.id}>
                <td><span className="mono-sm" style={{ color: "var(--text)" }}>{k.name}</span></td>
                <td>
                  <span className="keyval">
                    {reveal[k.id] ? k.key : mask(k.key)}
                    <button className="btn ghost sm" style={{ padding: 3 }} onClick={() => setReveal((r) => ({ ...r, [k.id]: !r[k.id] }))} title={reveal[k.id] ? "Hide" : "Reveal"}>
                      {reveal[k.id] ? <Ic.x style={{ width: 12, height: 12 }} /> : <Ic.search style={{ width: 12, height: 12 }} />}
                    </button>
                    <Copyable text={k.key} iconOnly className="btn ghost sm" />
                  </span>
                </td>
                <td className="mono">{(k.requests || 0).toLocaleString()}</td>
                <td className="muted">{k.last_used ? timeAgo(k.last_used) : "never"}</td>
                <td>{k.revoked ? <span className="pill red dot">REVOKED</span> : <span className="pill green dot">ACTIVE</span>}</td>
                <td style={{ textAlign: "right" }}>
                  {k.revoked
                    ? <DangerButton className="btn ghost sm" confirmLabel="Delete?" onConfirm={() => { fluxActions.deleteKey(k.id); toast("Key deleted", "success"); }}>Delete</DangerButton>
                    : <DangerButton className="btn ghost sm" confirmLabel="Revoke?" onConfirm={() => { fluxActions.revokeKey(k.id); toast("Key revoked", "success"); }}>Revoke</DangerButton>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {creating && (
        <Modal title="Create API key" icon={Ic.shield} onClose={() => setCreating(false)}
          footer={<><button className="btn" onClick={() => setCreating(false)}>Cancel</button><button className="btn primary" onClick={create}><Ic.plus className="ico" />Generate key</button></>}>
          <Field label="Key name" hint="usually the scraper / source name">
            <input className="input" autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="tgt-au-scraper" onKeyDown={(e) => e.key === "Enter" && create()} />
          </Field>
          <div style={{ marginTop: 14, fontSize: 12, color: "var(--text-3)", lineHeight: 1.6 }}>
            The full key is shown once on creation. Copy it into your scraper's environment now.
          </div>
        </Modal>
      )}

      {justMade && (
        <Modal title="Key created" icon={Ic.check} onClose={() => setJustMade(null)}
          footer={<button className="btn primary" onClick={() => setJustMade(null)}>Done</button>}>
          <div style={{ fontSize: 13, color: "var(--text-2)", marginBottom: 12 }}>Copy this now — for security it won't be shown in full again in production.</div>
          <div className="keyval" style={{ width: "100%", justifyContent: "space-between" }}>
            <span style={{ color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis" }}>{justMade.key}</span>
            <Copyable text={justMade.key} className="btn primary sm" />
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// API Docs + live console
// ─────────────────────────────────────────────────────────────
const SAMPLE_PAYLOAD = {
  title: "adidas Samba OG · Cloud White",
  retailer: "Hype DC",
  category: "Sneakers",
  url: "https://hypedc.com/p/samba-og-cloud-white",
  image: "https://hypedc.com/img/samba-og.jpg",
  price_original: 220,
  price_sale: 154,
  currency: "AUD",
  code: "SAMBA30",
  description: "30% off the classic Samba OG, all sizes."
};

function ApiDocs() {
  const s = useFlux();
  const base = s.settings.apiBase || "https://your-app.example.com";
  const activeKeys = s.apiKeys.filter((k) => !k.revoked);
  const [keyId, setKeyId] = useKS(activeKeys[0] ? activeKeys[0].id : "");
  const [body, setBody] = useKS(JSON.stringify(SAMPLE_PAYLOAD, null, 2));
  const [resp, setResp] = useKS(null);
  const [busy, setBusy] = useKS(false);

  const selKey = s.apiKeys.find((k) => k.id === keyId);
  const keyVal = selKey ? selKey.key : "YOUR_API_KEY";

  const curl = `curl -X POST ${base}/api/v1/discounts \\
  -H "Authorization: Bearer ${keyVal}" \\
  -H "Content-Type: application/json" \\
  -d '${JSON.stringify(SAMPLE_PAYLOAD)}'`;

  const send = async () => {
    let parsed;
    try { parsed = JSON.parse(body); }
    catch (e) { setResp({ status: 400, body: { error: "invalid_json", message: String(e.message) } }); toast("Body is not valid JSON", "error"); return; }
    setBusy(true);
    const r = await fluxActions.ingest(parsed, keyVal);
    setResp(r);
    setBusy(false);
    if (r.ok) toast(r.body.created ? "201 · Discount created" : "200 · Discount updated (deduped)", "success");
    else toast(`${r.status} · ${r.body.error}`, "error");
  };

  return (
    <div className="view-pad fade-in" style={{ maxWidth: 1100 }}>
      <div className="sec-head"><h2>API &amp; console</h2><span className="desc">Push discounts in · test it live against your real database</span></div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, alignItems: "start" }}>
        {/* docs column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
          <div className="card" style={{ padding: 18 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <span className="method post">POST</span>
              <span className="mono" style={{ fontSize: 13, color: "var(--text)" }}>/api/v1/discounts</span>
            </div>
            <p style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.6, margin: "0 0 14px" }}>
              Create or update a discount. Authenticated requests dedupe by <span className="kbd">url</span>: a repeat post updates the existing record in place and only re-fires webhooks when the sale price drops.
            </p>
            <div className="field-label">Authentication — either header</div>
            <CodeBlock code={`X-API-Key: ${keyVal}\n# ── or ──\nAuthorization: Bearer ${keyVal}`} />
          </div>

          <div className="card" style={{ padding: 18 }}>
            <div className="field-label" style={{ marginBottom: 10 }}>cURL</div>
            <CodeBlock code={curl} />
          </div>

          <div className="card" style={{ padding: 18 }}>
            <div className="field-label" style={{ marginBottom: 10 }}>Request body</div>
            <table className="tbl" style={{ fontSize: 12 }}>
              <thead><tr><th>Field</th><th>Type</th><th>Notes</th></tr></thead>
              <tbody>
                {[
                  ["title", "string", "required"],
                  ["url", "string", "required · dedupe key"],
                  ["price_sale", "number", "required"],
                  ["price_original", "number", "optional"],
                  ["retailer", "string", "optional"],
                  ["category", "string", CATEGORIES.join(", ")],
                  ["currency", "string", "default AUD"],
                  ["code", "string", "optional promo code"],
                  ["image", "string", "optional URL"],
                  ["description", "string", "optional"],
                  ["expires_at", "ISO date", "optional"],
                ].map((r) => (
                  <tr key={r[0]}><td className="mono-sm" style={{ color: "var(--text)" }}>{r[0]}</td><td className="mono-sm muted">{r[1]}</td><td className="muted" style={{ fontSize: 11.5 }}>{r[2]}</td></tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="card" style={{ padding: 18 }}>
            <div className="field-label" style={{ marginBottom: 10 }}>Other endpoints</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                ["get", "/api/v1/discounts", "List & filter discounts"],
                ["get", "/api/v1/discounts/:id", "Fetch one discount"],
                ["get", "/healthz", "Liveness check (no auth)"],
              ].map((r) => (
                <div key={r[1]} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span className={`method ${r[0]}`}>{r[0].toUpperCase()}</span>
                  <span className="mono-sm" style={{ color: "var(--text)" }}>{r[1]}</span>
                  <span className="muted" style={{ fontSize: 11.5, marginLeft: "auto" }}>{r[2]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* live console column */}
        <div className="card" style={{ padding: 18, position: "sticky", top: 18, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
            <Ic.cmd style={{ width: 16, height: 16, color: "var(--indigo)" }} />
            <div style={{ fontSize: 13, fontWeight: 600 }}>Live console</div>
            <span className="pill teal dot" style={{ marginLeft: "auto" }}>WRITES TO DB</span>
          </div>

          <Field label="API key" style={{ marginBottom: 12 }}>
            <select className="input" value={keyId} onChange={(e) => setKeyId(e.target.value)}>
              {activeKeys.length === 0 && <option value="">No active keys — create one</option>}
              {activeKeys.map((k) => <option key={k.id} value={k.id}>{k.name}</option>)}
            </select>
          </Field>

          <Field label="JSON payload" style={{ marginBottom: 12 }}>
            <textarea className="input mono" style={{ minHeight: 220, fontSize: 12, lineHeight: 1.6 }} value={body} onChange={(e) => setBody(e.target.value)} spellCheck={false} />
          </Field>

          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn primary" disabled={busy || !keyId} onClick={send} style={{ flex: 1, justifyContent: "center", opacity: busy || !keyId ? 0.6 : 1 }}>
              {busy ? "Sending…" : <><Ic.zap className="ico" />Send request</>}
            </button>
            <button className="btn" onClick={() => setBody(JSON.stringify(SAMPLE_PAYLOAD, null, 2))} title="Reset sample">Reset</button>
          </div>

          {resp && (
            <div style={{ marginTop: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <span className="field-label" style={{ margin: 0 }}>Response</span>
                <span className={`pill ${resp.ok ? "green" : "red"} dot`}>{resp.status}</span>
                {resp.ok && resp.body.webhooks_fired > 0 && <span className="pill indigo">{resp.body.webhooks_fired} webhook{resp.body.webhooks_fired > 1 ? "s" : ""} fired</span>}
              </div>
              <CodeBlock code={JSON.stringify(resp.body, null, 2)} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ApiKeys, ApiDocs });