// A reference settings page for an app built on Outlevo: the workspace's webhooks. List them, add one (the signing
// secret is shown once), send a test delivery, rotate the secret, read recent deliveries and remove one.
// Plain fetch through your own server route (/api/outlevo, see allow.ts), so no package is needed and no key
// reaches the browser. Show it to your admins only. API keys are created at app.outlevo.com → Developers.
import { useCallback, useEffect, useState, type FormEvent } from 'react';

const BASE = '/api/outlevo';

type Webhook = { id: string; url: string; events: string[]; status: string; created_at: string };
type Delivery = { id: string; event_id: string; type: string; attempt: number; status: string; error: string | null; created_at: string };
type ApiError = { error?: { code?: string; message?: string; fix?: string } };

async function call<T>(method: string, path: string, body?: unknown): Promise<T> {
  // POST bodies go through as JSON; the proxy adds the key and an Idempotency-Key
  const r = await fetch(`${BASE}${path}`, { method, headers: body === undefined ? undefined : { 'content-type': 'application/json' }, body: body === undefined ? undefined : JSON.stringify(body) });
  const data = (await r.json().catch(() => ({}))) as T & ApiError;
  if (!r.ok) throw new Error([data.error?.message ?? `HTTP ${r.status}`, data.error?.fix].filter(Boolean).join(' '));
  return data;
}

// The events most apps start with; the full list is at https://developers.outlevo.com/webhooks.html
const SUGGESTED = ['lead.replied', 'lead.answered', 'meeting.booked', 'company.qualified', 'handoff.created', 'job.completed', 'job.failed'];

function Secret({ value, onClose }: { value: string; onClose: () => void }) {
  return (
    <div role="dialog" aria-label="Signing secret" style={{ border: '1px solid', padding: 12, margin: '12px 0' }}>
      <p>Copy this signing secret now and keep it on your server as OUTLEVO_WEBHOOK_SECRET. It is not shown again.</p>
      <code style={{ userSelect: 'all' }}>{value}</code>
      <p><button type="button" onClick={() => { void navigator.clipboard?.writeText(value); }}>Copy</button> <button type="button" onClick={onClose}>Done</button></p>
    </div>
  );
}

function Deliveries({ id }: { id: string }) {
  const [rows, setRows] = useState<Delivery[] | null>(null);
  useEffect(() => { call<{ data: Delivery[] }>('GET', `/v1/webhooks/${id}/deliveries?limit=10`).then((d) => setRows(d.data)).catch(() => setRows([])); }, [id]);
  if (!rows) return <p>Loading deliveries…</p>;
  if (!rows.length) return <p>No deliveries yet.</p>;
  return (
    <table>
      <thead><tr><th>When</th><th>Event</th><th>Attempt</th><th>Status</th><th>Error</th></tr></thead>
      <tbody>{rows.map((d) => <tr key={d.id}><td>{new Date(d.created_at).toLocaleString()}</td><td>{d.type}</td><td>{d.attempt}</td><td>{d.status}</td><td>{d.error ?? '–'}</td></tr>)}</tbody>
    </table>
  );
}

export function Settings() {
  const [hooks, setHooks] = useState<Webhook[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [secret, setSecret] = useState<string | null>(null);
  const [open, setOpen] = useState<string | null>(null);
  const [url, setUrl] = useState('');
  const [events, setEvents] = useState<string[]>(['lead.replied', 'meeting.booked']);

  const load = useCallback(() => call<{ data: Webhook[] }>('GET', '/v1/webhooks').then((d) => setHooks(d.data)).catch((e) => setError(String(e.message ?? e))), []);
  useEffect(() => { void load(); }, [load]);

  const run = async (fn: () => Promise<void>) => { setError(null); setNotice(null); try { await fn(); await load(); } catch (e) { setError(e instanceof Error ? e.message : String(e)); } };

  const add = (e: FormEvent) => { e.preventDefault(); void run(async () => {
    const created = await call<{ id: string; secret: string }>('POST', '/v1/webhooks', { url, events });
    setSecret(created.secret); setUrl('');
  }); };
  const test = (id: string) => run(async () => {
    const r = await call<{ delivered: boolean; status_code: number | null; error?: string }>('POST', `/v1/webhooks/${id}/test`);
    setNotice(r.delivered ? `Test delivered: your endpoint answered ${r.status_code}.` : `Test not delivered${r.status_code ? `: your endpoint answered ${r.status_code}` : ''}${r.error ? ` (${r.error})` : ''}.`);
  });
  const rotate = (id: string) => window.confirm('Issue a new signing secret? The old one keeps working for 24 hours.') && run(async () => {
    setSecret((await call<{ secret: string }>('POST', `/v1/webhooks/${id}/rotate-secret`)).secret);
  });
  const remove = (id: string) => window.confirm('Stop deliveries to this address?') && run(async () => { await call('DELETE', `/v1/webhooks/${id}`); });

  return (
    <main style={{ maxWidth: 960, margin: '0 auto', padding: 16 }}>
      <h1>Settings</h1>
      <h2>Webhooks</h2>
      <p>Outlevo sends signed events to these addresses. Verify each delivery with the signing secret before trusting it.</p>
      {error && <p role="alert">{error}</p>}
      {notice && <p role="status">{notice}</p>}
      {secret && <Secret value={secret} onClose={() => setSecret(null)} />}
      {!hooks ? <p>Loading…</p> : !hooks.length ? <p>No webhooks yet.</p> : (
        <table>
          <thead><tr><th>Address</th><th>Events</th><th>Status</th><th></th></tr></thead>
          <tbody>{hooks.map((h) => (
            <tr key={h.id}>
              <td>{h.url}</td><td>{h.events.join(', ')}</td><td>{h.status}</td>
              <td>{h.status === 'active' && <>
                <button type="button" onClick={() => void test(h.id)}>Send test</button>{' '}
                <button type="button" onClick={() => void rotate(h.id)}>Rotate secret</button>{' '}
                <button type="button" onClick={() => setOpen(open === h.id ? null : h.id)}>{open === h.id ? 'Hide deliveries' : 'Deliveries'}</button>{' '}
                <button type="button" onClick={() => void remove(h.id)}>Remove</button>
              </>}{open === h.id && <Deliveries id={h.id} />}</td>
            </tr>
          ))}</tbody>
        </table>
      )}
      <h3>Add a webhook</h3>
      <form onSubmit={add}>
        <label>HTTPS address <input type="url" required pattern="https://.*" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://your.app/api/outlevo-webhook" /></label>
        <fieldset><legend>Events</legend>
          {SUGGESTED.map((ev) => <label key={ev} style={{ display: 'block' }}><input type="checkbox" checked={events.includes(ev)} onChange={(e) => setEvents(e.target.checked ? [...events, ev] : events.filter((x) => x !== ev))} /> {ev}</label>)}
        </fieldset>
        <button type="submit" disabled={!events.length}>Add webhook</button>
      </form>
      <h2>API keys</h2>
      <p>Keys are created and revoked at <a href="https://app.outlevo.com" target="_blank" rel="noreferrer">app.outlevo.com</a> → Developers. Keep them in your server's environment, never in this page.</p>
    </main>
  );
}

export default Settings;