// Developer — public API keys, webhooks, and a Zapier/Make-ready REST API.

function DeveloperPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const keys = data.apiKeys || [];
  const webhooks = data.webhooks || [];
  const origin = window.location.origin;
  const [hookUrl, setHookUrl] = React.useState("");
  const [revealed, setRevealed] = React.useState({});

  const copy = async (text) => { try { await navigator.clipboard.writeText(text); hub.toast("Copied"); } catch (e) { hub.toast(text); } };
  const addHook = async () => {
    if (!/^https?:\/\//i.test(hookUrl.trim())) { hub.toast("Enter a full https:// URL"); return; }
    await hub.actions.addWebhook({ url: hookUrl.trim() });
    setHookUrl("");
  };
  const mask = (k) => `${k.slice(0, 12)}${"•".repeat(12)}`;

  return (
    <div className="page developer-page">
      {/* API keys */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 15 }}>API keys</h3>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>Use these to schedule posts from your own tools, Zapier, or Make.</div>
          </div>
          <button className="btn btn-primary" onClick={() => hub.actions.createApiKey({ label: "API key" })}><Icon.Plus width="14" height="14" /> Generate key</button>
        </div>
        <div style={{ display: "grid", gap: 8, marginTop: 14 }}>
          {keys.map((k) => (
            <div key={k.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
              <Icon.Lock width="15" height="15" style={{ color: "var(--text-3)" }} />
              <code style={{ flex: 1, fontSize: 12.5, fontFamily: "var(--mono, monospace)" }}>{revealed[k.id] ? k.key : mask(k.key)}</code>
              <button className="btn btn-sm" onClick={() => setRevealed((r) => ({ ...r, [k.id]: !r[k.id] }))}>{revealed[k.id] ? "Hide" : "Reveal"}</button>
              <button className="btn btn-sm" onClick={() => copy(k.key)}><Icon.Copy width="13" height="13" /> Copy</button>
              <button className="btn btn-sm" onClick={() => hub.actions.deleteApiKey(k.id)} style={{ color: "var(--danger)" }}>Revoke</button>
            </div>
          ))}
          {!keys.length && <div className="muted" style={{ fontSize: 12.5 }}>No keys yet — generate one to start using the API.</div>}
        </div>
        <div style={{ marginTop: 14, padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
          <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>Example — create a post:</div>
          <code style={{ fontSize: 11.5, whiteSpace: "pre-wrap", wordBreak: "break-all" }}>{`curl -X POST ${origin}/api/v1/posts \\
  -H "X-API-Key: <your key>" \\
  -H "content-type: application/json" \\
  -d '{"caption":"Hello from the API","platforms":["instagram"]}'`}</code>
        </div>
      </div>

      {/* Webhooks */}
      <div className="card" style={{ padding: 20 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Webhooks</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>We'll POST events (post.created, post.published, post.failed, approval.changed) to your URL.</div>
        <div style={{ display: "flex", gap: 10, marginBottom: 12, flexWrap: "wrap" }}>
          <input className="input" placeholder="https://hooks.zapier.com/..." value={hookUrl} onChange={(e) => setHookUrl(e.target.value)} style={{ flex: 1, minWidth: 220 }} />
          <button className="btn btn-primary" onClick={addHook}><Icon.Plus width="14" height="14" /> Add webhook</button>
        </div>
        <div style={{ display: "grid", gap: 8 }}>
          {webhooks.map((w) => (
            <div key={w.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
              <Icon.Globe width="15" height="15" style={{ color: "var(--text-3)" }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{w.url}</div>
                <div className="faint" style={{ fontSize: 10.5 }}>{(w.events || []).join(", ")}{w.lastFiredAt ? ` · last fired ${new Date(w.lastFiredAt).toLocaleString()}` : ""}</div>
              </div>
              <button className="btn btn-sm" onClick={() => hub.actions.testWebhook(w.id)}>Send test</button>
              <button className="btn btn-sm" onClick={() => hub.actions.deleteWebhook(w.id)} style={{ color: "var(--danger)" }}>Delete</button>
            </div>
          ))}
          {!webhooks.length && <div className="muted" style={{ fontSize: 12.5 }}>No webhooks yet.</div>}
        </div>
      </div>
    </div>
  );
}

window.DeveloperPage = DeveloperPage;