@acms-subir/core 0.2.0 → 0.3.0

package/src/pages/admin/calendar/events/index.astro

@@ -0,0 +1,408 @@
+---
+import Admin from '../../../../layouts/Admin.astro';
+import Modal from '../../../../components/Modal.astro';
+import ContentList, { type ContentItem } from '../../../../components/ContentList.astro';
+import { getRepo } from '../../../../lib/repo';
+import { slugify, type Status } from '../../../../lib/schema';
+import { CALENDAR, eventUrl } from '../../../../lib/calendar/config';
+import { featuredOccurrence, formatOccurrence, locationLine, safeColor } from '../../../../lib/calendar/events';
+import { describeRepeat } from '../../../../lib/calendar/rrule';
+import { expandVEvents, loadFeed, tzParts } from '../../../../lib/calendar/ics';
+import { normalizeCalendarSrc } from '../../../../lib/calendar/src';
+import { eventsFromCsv, eventsFromIcs, eventsFromVEvents } from '../../../../lib/calendar/import';
+import { eventChanged, eventDeleted } from '../../../../lib/calendar/hooks';
+import { siteOrigin } from '../../../../lib/seo';
+import { siteLocale } from '../../../../lib/dates';
+import { waitUntilFrom } from '../../../../lib/webhooks';
+import { invalidateRedirectCache } from '../../../../middleware';
+
+// Events list: upcoming first, grouped by the month each event next happens.
+// Feed calendars (live ICS mirrors) appear as read-only rows with a "Copy"
+// action that turns one into an editable draft.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const tz = settings.timezone || 'UTC';
+const locale = siteLocale(settings);
+const now = Date.now();
+const back = (notice?: string) => {
+  const p = new URLSearchParams(Astro.url.search);
+  p.delete('notice');
+  if (notice) p.set('notice', notice);
+  const q = p.toString();
+  return Astro.redirect(`/admin/calendar/events${q ? `?${q}` : ''}`);
+};
+
+async function uniqueSlug(title: string) {
+  const base = slugify(title);
+  let slug = base;
+  for (let n = 2; await repo.getEventBySlug(slug); n++) slug = `${base}-${n}`;
+  return slug;
+}
+
+async function saveImported(list: ReturnType<typeof eventsFromIcs>['events'], calendarId: string) {
+  const known = new Set((await repo.listEvents()).map((e) => e.sourceUid).filter(Boolean));
+  let created = 0;
+  let dupes = 0;
+  for (const e of list) {
+    if (e.sourceUid && known.has(e.sourceUid)) { dupes++; continue; }
+    await repo.createEvent({ ...e, slug: await uniqueSlug(e.title), status: 'draft', calendarIds: calendarId ? [calendarId] : [] });
+    if (e.sourceUid) known.add(e.sourceUid);
+    created++;
+  }
+  return { created, dupes };
+}
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  const hookOpts = { origin: siteOrigin(settings, Astro.url), waitUntil: waitUntilFrom(Astro.locals), onRedirect: invalidateRedirectCache };
+
+  if (op === 'create') {
+    const title = String(form.get('title') || 'Untitled event').slice(0, 300);
+    const date = String(form.get('date') || '');
+    const time = String(form.get('time') || '');
+    const calendarId = String(form.get('calendarId') || '');
+    const today = tzParts(now + 86_400_000, tz);
+    const day = /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : `${today.y}-${String(today.m).padStart(2, '0')}-${String(today.d).padStart(2, '0')}`;
+    const start = /^\d{2}:\d{2}$/.test(time) ? `${day}T${time}` : day;
+    const event = await repo.createEvent({
+      title, slug: await uniqueSlug(title), start, allDay: !/^\d{2}:\d{2}$/.test(time),
+      calendarIds: calendarId && (await repo.getCalendar(calendarId))?.kind === 'native' ? [calendarId] : [],
+    });
+    return Astro.redirect(`/admin/calendar/events/${event.id}`);
+  }
+
+  if (op === 'bulk') {
+    const to = String(form.get('to'));
+    for (const id of form.getAll('ids').map(String).filter(Boolean)) {
+      const before = await repo.getEvent(id);
+      if (!before) continue;
+      if (to === 'delete') {
+        await repo.deleteEvent(id);
+        await eventDeleted(repo, before, hookOpts);
+      } else if (to === 'published' || to === 'draft' || to === 'archived') {
+        await repo.updateEvent(id, { status: to as Status, ...(to === 'published' ? { scheduledAt: null } : {}) });
+        await eventChanged(repo, before, (await repo.getEvent(id))!, hookOpts);
+      }
+    }
+    return back();
+  }
+
+  // a read-only feed occurrence → an editable draft
+  if (op === 'copy') {
+    const cal = await repo.getCalendar(String(form.get('calendarId')));
+    const uid = String(form.get('uid'));
+    if (!cal || cal.kind !== 'feed') return back('That feed calendar is gone.');
+    try {
+      const feed = await loadFeed(cal.feedUrl, now);
+      const v = feed.vevents.find((x) => x.uid === uid && !x.recurrenceId);
+      const [e] = v ? eventsFromVEvents([v], feed.calTz, settings.timezone).events : [];
+      if (!e) return back('That event is no longer in the feed.');
+      const event = await repo.createEvent({ ...e, slug: await uniqueSlug(e.title), status: 'draft' });
+      return Astro.redirect(`/admin/calendar/events/${event.id}`);
+    } catch {
+      return back('Couldn’t reach that feed right now.');
+    }
+  }
+
+  // live mirror of an external calendar
+  if (op === 'subscribe') {
+    const url = normalizeCalendarSrc(String(form.get('url') || ''));
+    const name = String(form.get('name') || '').trim() || 'Imported calendar';
+    if (!url) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
+    try {
+      await loadFeed(url, now);
+    } catch (err) {
+      return back(err instanceof Error ? err.message : 'Couldn’t load that feed.');
+    }
+    const base = slugify(name);
+    let slug = base;
+    for (let n = 2; await repo.getCalendarBySlug(slug); n++) slug = `${base}-${n}`;
+    await repo.createCalendar({ name, slug, kind: 'feed', feedUrl: url, color: safeColor(String(form.get('color') || '#2f9e6e')) });
+    return back(`Subscribed to “${name}” — its events now show on your calendar.`);
+  }
+
+  // one-time import: .ics / .csv file, or an ICS URL, into drafts
+  if (op === 'import') {
+    const calendarId = String(form.get('calendarId') || '');
+    const file = form.get('file');
+    const url = String(form.get('url') || '').trim();
+    let parsed: { events: ReturnType<typeof eventsFromIcs>['events']; skipped: number; error?: string };
+    try {
+      if (file instanceof File && file.size > 0) {
+        if (file.size > 3_000_000) return back('That file is too large (3 MB max).');
+        const text = await file.text();
+        parsed = /\.csv$/i.test(file.name) || !text.includes('BEGIN:VCALENDAR') ? eventsFromCsv(text) : eventsFromIcs(text, settings.timezone);
+      } else if (url) {
+        const feedUrl = normalizeCalendarSrc(url);
+        if (!feedUrl) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
+        const feed = await loadFeed(feedUrl, now);
+        parsed = eventsFromVEvents(feed.vevents, feed.calTz, settings.timezone);
+      } else {
+        return back('Choose a file or paste a calendar URL.');
+      }
+    } catch (err) {
+      return back(err instanceof Error ? err.message : 'Import failed.');
+    }
+    if (parsed.error) return back(parsed.error);
+    const { created, dupes } = await saveImported(parsed.events, calendarId);
+    const bits = [`Imported ${created} event${created === 1 ? '' : 's'} as drafts`];
+    if (dupes) bits.push(`${dupes} already imported`);
+    if (parsed.skipped) bits.push(`${parsed.skipped} skipped`);
+    return back(`${bits.join(' · ')}.`);
+  }
+}
+
+const [events, calendars] = await Promise.all([repo.listEvents(), repo.listCalendars()]);
+const calById = new Map(calendars.map((c) => [c.id, c]));
+const nativeCals = calendars.filter((c) => c.kind === 'native');
+const feedCals = calendars.filter((c) => c.kind === 'feed');
+
+const scope = (['upcoming', 'past', 'drafts', 'all'] as const).find((s) => s === Astro.url.searchParams.get('scope')) ?? 'upcoming';
+const calFilter = Astro.url.searchParams.get('cal') ?? '';
+const q = (Astro.url.searchParams.get('q') ?? '').toLowerCase();
+const notice = Astro.url.searchParams.get('notice') ?? '';
+
+const rows = events.map((e) => ({ e, o: featuredOccurrence(e, settings, now) }));
+const isUpcoming = (r: (typeof rows)[number]) => r.e.status !== 'archived' && (r.o ? r.o.end > now : true);
+const counts = {
+  upcoming: rows.filter(isUpcoming).length,
+  past: rows.filter((r) => !isUpcoming(r)).length,
+  drafts: rows.filter((r) => r.e.status === 'draft').length,
+  all: rows.length,
+};
+const selected = rows
+  .filter((r) => {
+    if (scope === 'upcoming' && !isUpcoming(r)) return false;
+    if (scope === 'past' && isUpcoming(r)) return false;
+    if (scope === 'drafts' && r.e.status !== 'draft') return false;
+    if (calFilter && !r.e.calendarIds.includes(calFilter)) return false;
+    if (q && !`${r.e.title} ${r.e.slug} ${r.e.location.name}`.toLowerCase().includes(q)) return false;
+    return true;
+  })
+  .sort((a, b) => ((a.o?.start ?? 0) - (b.o?.start ?? 0)) * (scope === 'past' ? -1 : 1));
+
+const items: ContentItem[] = selected.map(({ e, o }) => {
+  const f = o ? formatOccurrence(o, tz, locale) : null;
+  const cals = e.calendarIds.map((id) => calById.get(id)?.name).filter(Boolean);
+  const repeats = describeRepeat(e.rrule, e.start);
+  return {
+    id: e.id,
+    href: `/admin/calendar/events/${e.id}`,
+    title: e.title,
+    sub: '',
+    meta: [locationLine(e.location) ? e.location.name || locationLine(e.location) : '', cals.join(', '), repeats].filter(Boolean).join(' · '),
+    when: f ? (o!.allDay ? f.range : `${f.range} – ${new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit', timeZone: tz }).format(o!.end)}`) : '',
+    at: o?.start ?? e.startAt,
+    status: e.status,
+    edited: Boolean(e.draft),
+    scheduledAt: e.scheduledAt,
+    image: e.cover,
+    viewHref: e.status === 'published' ? eventUrl(e.slug) : undefined,
+    featured: e.featured,
+    badges: e.cancelled ? ['Cancelled'] : [],
+  };
+});
+
+// feed calendars: the next 60 days as read-only rows (upcoming/all scopes)
+const feedErrors: string[] = [];
+if ((scope === 'upcoming' || scope === 'all') && feedCals.length) {
+  const inScope = calFilter ? feedCals.filter((c) => c.id === calFilter) : feedCals;
+  const win = { displayTz: tz, now, windowStartMs: now, windowEndMs: now + 60 * 86_400_000 };
+  await Promise.all(inScope.map(async (c) => {
+    try {
+      const feed = await loadFeed(c.feedUrl, now);
+      const uids = new Map(feed.vevents.map((v) => [`${v.title}|${v.location}`, v.uid]));
+      for (const occ of expandVEvents(feed.vevents, feed.calTz, win, 0).slice(0, 40)) {
+        if (q && !occ.title.toLowerCase().includes(q)) continue;
+        const f = formatOccurrence(occ, tz, locale);
+        const uid = uids.get(`${occ.title}|${occ.location}`) ?? '';
+        items.push({
+          id: `feed-${c.id}-${occ.start}`,
+          href: `/admin/calendar/calendars#cal-${c.id}`,
+          title: occ.title,
+          sub: '',
+          meta: [occ.location, `from ${c.name}`].filter(Boolean).join(' · '),
+          when: occ.allDay ? f.range : f.range,
+          at: occ.start,
+          status: 'feed',
+          statusLabel: 'Read-only · feed',
+          readonly: true,
+          action: uid ? { label: 'Copy', fields: { op: 'copy', calendarId: c.id, uid } } : undefined,
+        });
+      }
+    } catch (err) {
+      feedErrors.push(`${c.name}: ${err instanceof Error ? err.message : 'unreachable'}`);
+    }
+  }));
+  items.sort((a, b) => a.at - b.at);
+}
+
+const scopeHref = (s: string) => {
+  const p = new URLSearchParams(Astro.url.search);
+  p.delete('notice');
+  s === 'upcoming' ? p.delete('scope') : p.set('scope', s);
+  const str = p.toString();
+  return `/admin/calendar/events${str ? `?${str}` : ''}`;
+};
+const calHref = (id: string) => {
+  const p = new URLSearchParams(Astro.url.search);
+  p.delete('notice');
+  id ? p.set('cal', id) : p.delete('cal');
+  const str = p.toString();
+  return `/admin/calendar/events${str ? `?${str}` : ''}`;
+};
+const SCOPES = [['upcoming', 'Upcoming'], ['past', 'Past'], ['drafts', 'Drafts'], ['all', 'All']] as const;
+const chev = 'M6 9l6 6 6-6';
+const tomorrow = tzParts(now + 86_400_000, tz);
+const tomorrowIso = `${tomorrow.y}-${String(tomorrow.m).padStart(2, '0')}-${String(tomorrow.d).padStart(2, '0')}`;
+const subBits = [
+  `${counts.upcoming} upcoming`,
+  counts.drafts ? `${counts.drafts} draft${counts.drafts === 1 ? '' : 's'}` : '',
+  feedCals.length ? `${feedCals.length} feed calendar${feedCals.length === 1 ? '' : 's'}` : '',
+].filter(Boolean);
+---
+
+<Admin title="Events" section="calendar:events">
+  <div class="page-head">
+    <div>
+      <h1>Events</h1>
+      <p class="sub">{subBits.join(' · ')} · public at <a href={CALENDAR.base} target="_blank" rel="noopener">{CALENDAR.base}</a></p>
+    </div>
+    <div class="page-actions">
+      <button class="btn" type="button" data-modal="import-events">Import</button>
+      <button class="btn primary" type="button" data-modal="new-event">New event</button>
+    </div>
+  </div>
+
+  {notice && <p class="notice" role="status">{notice}</p>}
+  {feedErrors.map((e) => <p class="notice warn">Couldn’t refresh {e}</p>)}
+
+  <Modal id="new-event" title="New event" open={Astro.url.searchParams.has('new')}>
+    <form method="post">
+      <input type="hidden" name="op" value="create" />
+      <label class="field">
+        <span>Title</span>
+        <input type="text" name="title" placeholder="Fall Festival" required autofocus />
+      </label>
+      <div class="field-row">
+        <label class="field"><span>Date</span><input type="date" name="date" value={tomorrowIso} required /></label>
+        <label class="field"><span>Time <em class="hint">blank = all day</em></span><input type="time" name="time" value="10:00" step="300" /></label>
+      </div>
+      {nativeCals.length > 0 && (
+        <label class="field">
+          <span>Calendar</span>
+          <select name="calendarId">
+            <option value="">None — main calendar only</option>
+            {nativeCals.map((c) => <option value={c.id} selected={c.id === calFilter}>{c.name}</option>)}
+          </select>
+        </label>
+      )}
+      <div class="modal-foot">
+        <button class="btn ghost" type="button" data-close>Cancel</button>
+        <button class="btn primary" type="submit">Create event</button>
+      </div>
+      <p class="hint modal-note">Creates a draft and opens the editor, where you add the image, location, button and repeat rule.</p>
+    </form>
+  </Modal>
+
+  <Modal id="import-events" title="Bring in events">
+    <div class="seg block ev-import-tabs" role="tablist">
+      <button type="button" role="tab" aria-selected="true" data-tab="subscribe">Subscribe to a calendar</button>
+      <button type="button" role="tab" aria-selected="false" data-tab="once">Import once</button>
+    </div>
+    <form method="post" data-panel="subscribe">
+      <input type="hidden" name="op" value="subscribe" />
+      <p class="hint">Mirror a Google, Apple or Outlook calendar live. Its events show on your calendar and stay in sync, read-only.</p>
+      <label class="field"><span>Name</span><input type="text" name="name" placeholder="Staff calendar" required /></label>
+      <label class="field"><span>Calendar link</span><input class="mono" type="text" name="url" placeholder="Google Calendar link, calendar ID, or an .ics URL" required /></label>
+      <label class="field"><span>Color</span><input type="color" name="color" value="#2f9e6e" /></label>
+      <div class="modal-foot">
+        <button class="btn ghost" type="button" data-close>Cancel</button>
+        <button class="btn primary" type="submit">Subscribe</button>
+      </div>
+    </form>
+    <form method="post" enctype="multipart/form-data" data-panel="once" hidden>
+      <input type="hidden" name="op" value="import" />
+      <p class="hint">Copy events in as editable drafts. Works with .ics exports from Google, Apple and Outlook, or a spreadsheet saved as .csv with Title and Start date columns.</p>
+      <label class="field"><span>File</span><input type="file" name="file" accept=".ics,.csv,text/calendar,text/csv" /></label>
+      <label class="field"><span>Or a calendar link</span><input class="mono" type="text" name="url" placeholder="https://calendar.google.com/…" /></label>
+      {nativeCals.length > 0 && (
+        <label class="field">
+          <span>Add them to</span>
+          <select name="calendarId">
+            <option value="">No calendar</option>
+            {nativeCals.map((c) => <option value={c.id}>{c.name}</option>)}
+          </select>
+        </label>
+      )}
+      <div class="modal-foot">
+        <button class="btn ghost" type="button" data-close>Cancel</button>
+        <button class="btn primary" type="submit">Import as drafts</button>
+      </div>
+    </form>
+  </Modal>
+
+  {events.length === 0 && feedCals.length === 0 ? (
+    <div class="empty-state">
+      <b>No events yet</b>
+      <p>Add your first event, or bring in an existing Google, Apple or Outlook calendar.</p>
+      <div class="empty-actions">
+        <button class="btn" type="button" data-modal="import-events">Import</button>
+        <button class="btn primary" type="button" data-modal="new-event">New event</button>
+      </div>
+    </div>
+  ) : (
+    <>
+      <nav class="chips" aria-label="Show">
+        {SCOPES.map(([k, l]) => <a class={scope === k ? 'on' : ''} href={scopeHref(k)}>{l}<small>{counts[k]}</small></a>)}
+      </nav>
+      <div class="list-tools">
+        <div class="list-lead">
+          <nav class="seg ev-scope" aria-label="Show">
+            {SCOPES.map(([k, l]) => <a href={scopeHref(k)} aria-current={scope === k ? 'page' : undefined} class={scope === k ? 'on' : ''}>{l}</a>)}
+          </nav>
+          <form method="get" class="list-search" role="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4" /></svg>
+            {scope !== 'upcoming' && <input type="hidden" name="scope" value={scope} />}
+            {calFilter && <input type="hidden" name="cal" value={calFilter} />}
+            <input type="search" name="q" value={q} placeholder="Filter events…" data-live-filter aria-label="Filter events" />
+          </form>
+        </div>
+        {calendars.length > 0 && (
+          <div class="fmenus">
+            <details class={`fmenu ${calFilter ? 'is-set' : ''}`}>
+              <summary>{calFilter ? calById.get(calFilter)?.name ?? 'Calendar' : 'All calendars'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={chev} /></svg></summary>
+              <div class="fmenu-pop">
+                <a class={!calFilter ? 'on' : ''} href={calHref('')}>All calendars</a>
+                {calendars.map((c) => <a class={calFilter === c.id ? 'on' : ''} href={calHref(c.id)}><span><i class="cal-dot" style={`background:${safeColor(c.color)}`} />{c.name}</span>{c.kind === 'feed' && <small>feed</small>}</a>)}
+              </div>
+            </details>
+          </div>
+        )}
+      </div>
+      <ContentList items={items} noun="event" timeZone={settings.timezone || undefined} groupByMonth={true} empty="No events match the current filters." />
+      {items.length === 0 && (
+        <p class="hint" style="padding:24px 8px">
+          {scope === 'upcoming' ? 'Nothing coming up.' : 'No events match the current filters.'} <a href="/admin/calendar/events?new=1">Add an event</a>
+        </p>
+      )}
+    </>
+  )}
+</Admin>
+
+<script>
+  document.addEventListener('click', (e) => {
+    document.querySelectorAll<HTMLDetailsElement>('details.fmenu[open]').forEach((d) => {
+      if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;
+    });
+  });
+  // import modal tabs
+  const tabs = document.querySelectorAll<HTMLButtonElement>('.ev-import-tabs [data-tab]');
+  tabs.forEach((t) => t.addEventListener('click', () => {
+    tabs.forEach((x) => x.setAttribute('aria-selected', String(x === t)));
+    document.querySelectorAll<HTMLElement>('#import-events [data-panel]').forEach((p) => { p.hidden = p.dataset.panel !== t.dataset.tab; });
+  }));
+</script>

package/src/pages/admin/calendar/index.ts

@@ -0,0 +1,4 @@
+import type { APIRoute } from 'astro';
+
+// /admin/calendar has no screen of its own — Events is the section's home
+export const GET: APIRoute = ({ redirect }) => redirect('/admin/calendar/events', 302);

package/src/pages/admin/calendar/integrations.astro

@@ -0,0 +1,221 @@
+---
+import Admin from '../../../layouts/Admin.astro';
+import Modal from '../../../components/Modal.astro';
+import { getRepo } from '../../../lib/repo';
+import { API_SCOPES, WEBHOOK_EVENTS, type ApiScope } from '../../../lib/schema';
+import { validateSession, SESSION_COOKIE, OWNER_ENV } from '../../../lib/auth';
+import { CALENDAR, bookingsEnabled, calendarFeedUrl } from '../../../lib/calendar/config';
+import { issueApiKey } from '../../../lib/api-keys';
+import { attemptDelivery, generateWebhookSecret, validateWebhookUrl } from '../../../lib/webhooks';
+import { resolveConfig } from '../../../lib/email/config';
+import { env } from '../../../lib/env';
+import { siteOrigin } from '../../../lib/seo';
+
+// Settings → Calendar & integrations (mockup J): subscribe feeds, scoped API
+// keys (shown once), signed webhooks with a delivery log and a test button,
+// and the email setup status. Owner-only: keys and webhooks reach private data.
+if (!CALENDAR.enabled) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const sessionId = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
+const me = sessionId && sessionId !== OWNER_ENV ? await repo.getUser(sessionId) : null;
+const isOwner = sessionId === OWNER_ENV || me?.role === 'owner';
+const settings = await repo.getSettings();
+const origin = siteOrigin(settings, Astro.url);
+let notice = '';
+let error = '';
+let newKey = '';
+let newSecret = '';
+const dev = import.meta.env.DEV;
+
+if (Astro.request.method === 'POST') {
+  if (!isOwner) return new Response('Owners only', { status: 403 });
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  try {
+    if (op === 'key') {
+      const scopes = form.getAll('scopes').map(String).filter((s): s is ApiScope => (API_SCOPES as readonly string[]).includes(s));
+      if (!scopes.length) throw new Error('Pick at least one permission.');
+      const { key } = await issueApiKey(repo, String(form.get('name') || 'API key').slice(0, 80), scopes);
+      newKey = key;
+    } else if (op === 'revoke') {
+      await repo.deleteApiKey(String(form.get('id')));
+      notice = 'Key revoked — anything using it stops working now.';
+    } else if (op === 'hook') {
+      const url = validateWebhookUrl(String(form.get('url') || ''), dev);
+      const events = form.getAll('events').map(String).filter((e) => (WEBHOOK_EVENTS as readonly string[]).includes(e));
+      if (!events.length) throw new Error('Pick at least one event.');
+      const secret = generateWebhookSecret();
+      await repo.createWebhook({ url, secret, events });
+      newSecret = secret;
+    } else if (op === 'toggle') {
+      const h = (await repo.listWebhooks()).find((w) => w.id === form.get('id'));
+      if (h) await repo.updateWebhook(h.id, { active: !h.active });
+    } else if (op === 'delhook') {
+      await repo.deleteWebhook(String(form.get('id')));
+      notice = 'Webhook removed.';
+    } else if (op === 'test') {
+      const h = (await repo.listWebhooks()).find((w) => w.id === form.get('id'));
+      if (h) {
+        const now = Date.now();
+        const d = { id: crypto.randomUUID(), webhookId: h.id, event: 'ping', payload: JSON.stringify({ type: 'ping', createdAt: new Date(now).toISOString(), data: { message: 'Test delivery from acms' } }), status: 'pending' as const, attempts: 0, nextAt: now, responseCode: null, createdAt: now, deliveredAt: null };
+        await repo.createDeliveries([d]);
+        await attemptDelivery(repo, { ...d, attempts: 3 }, h);
+        const last = (await repo.listDeliveries(h.id, 1))[0];
+        notice = last?.responseCode ? `Test sent — the endpoint answered ${last.responseCode}.` : 'Test sent — the endpoint didn’t answer.';
+      }
+    }
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Something went wrong.';
+  }
+}
+
+const [keys, hooks, calendars] = await Promise.all([repo.listApiKeys(), repo.listWebhooks(), repo.listCalendars()]);
+const logs = new Map(await Promise.all(hooks.map(async (h) => [h.id, await repo.listDeliveries(h.id, 5)] as const)));
+const emailConfig = resolveConfig(await repo.email.config(), Astro.locals);
+const provider = emailConfig.error ? 'none' : emailConfig.provider;
+const ago = (ts: number | null) => {
+  if (!ts) return 'never';
+  const s = Math.floor((Date.now() - ts) / 1000);
+  return s < 60 ? 'just now' : s < 3600 ? `${Math.floor(s / 60)} min ago` : s < 86400 ? `${Math.floor(s / 3600)} h ago` : `${Math.floor(s / 86400)} d ago`;
+};
+const SCOPE_LABEL: Record<string, string> = {
+  'events:read': 'Read events (incl. private calendars)', 'events:write': 'Create and edit events',
+  'bookings:read': 'Read bookings and guest details', 'bookings:write': 'Create, confirm and cancel bookings',
+  'resources:read': 'Read resources and links', 'resources:write': 'Edit resources and links',
+};
+const feeds = [
+  { label: 'Everything public', url: origin + calendarFeedUrl() },
+  ...calendars.filter((c) => c.kind === 'native' && c.visibility !== 'private').map((c) => ({ label: c.name, url: origin + calendarFeedUrl(c.slug) })),
+];
+---
+
+<Admin title="API & webhooks" section="calendar:integrations">
+  <div class="page-head">
+    <div>
+      <h1>API &amp; webhooks</h1>
+      <p class="sub">Connect the calendar{bookingsEnabled() ? ' and bookings' : ''} to Zapier, Make, Slack, a lobby screen or your own code. <a href="/api/calendar/docs" target="_blank" rel="noopener">API reference ↗</a></p>
+    </div>
+  </div>
+  {notice && <p class="notice" role="status">{notice}</p>}
+  {error && <p class="notice warn" role="alert">{error}</p>}
+  {!isOwner && <p class="notice">Only owners can create keys or webhooks.</p>}
+  {newKey && (
+    <div class="notice reveal">
+      <b>Copy this key now — it won’t be shown again.</b>
+      <div class="cal-feed"><input type="text" class="mono" readonly value={newKey} /><button class="btn sm" type="button" data-copy={newKey}>Copy</button></div>
+      <span class="hint">Send it as <code>Authorization: Bearer {newKey.slice(0, 14)}…</code></span>
+    </div>
+  )}
+  {newSecret && (
+    <div class="notice reveal">
+      <b>Signing secret — copy it into the receiver now.</b>
+      <div class="cal-feed"><input type="text" class="mono" readonly value={newSecret} /><button class="btn sm" type="button" data-copy={newSecret}>Copy</button></div>
+      <span class="hint">Verify <code>X-Acms-Signature</code> = <code>sha256=</code>HMAC-SHA256(secret, <code>{'{X-Acms-Timestamp}.{body}'}</code>).</span>
+    </div>
+  )}
+
+  <div class="res-grid">
+    <div>
+      <section class="card card-pad">
+        <div class="card-head"><b>API keys</b>{isOwner && <button class="btn sm" type="button" data-modal="new-key">New key</button>}</div>
+        {keys.length === 0 && <p class="hint">No keys yet. Public calendars and bookings don’t need one — keys unlock private data and changes.</p>}
+        {keys.map((k) => (
+          <div class="int-row">
+            <div><b>{k.name}</b> <code>{k.prefix}…</code><div class="int-scopes">{k.scopes.map((s) => <span class="pill lang">{s}</span>)}</div></div>
+            <span class="hint">used {ago(k.lastUsedAt)}</span>
+            {isOwner && <form method="post"><input type="hidden" name="op" value="revoke" /><input type="hidden" name="id" value={k.id} /><button class="btn sm ghost danger" data-confirm={`Revoke “${k.name}”?`}>Revoke</button></form>}
+          </div>
+        ))}
+        <p class="hint">The agent key from Settings → AI &amp; agents also works here, with every permission.</p>
+      </section>
+
+      <section class="card card-pad">
+        <div class="card-head"><b>Webhooks</b>{isOwner && <button class="btn sm" type="button" data-modal="new-hook">Add endpoint</button>}</div>
+        {hooks.length === 0 && <p class="hint">Get a signed POST the moment something happens — a booking comes in, an event goes live.</p>}
+        {hooks.map((h) => {
+          const log = logs.get(h.id) ?? [];
+          const ok = h.lastStatus !== null && h.lastStatus >= 200 && h.lastStatus < 300;
+          return (
+            <div class="int-hook">
+              <div class="int-row">
+                <div><b class="mono">{h.url.replace(/^https?:\/\//, '').slice(0, 60)}</b><div class="int-scopes">{h.events.map((e) => <span class="pill lang">{e}</span>)}</div></div>
+                <span class={`int-status ${h.lastStatus === null ? '' : ok ? 'ok' : 'bad'}`}>{h.lastStatus === null ? 'no deliveries yet' : `${h.lastStatus || 'no answer'} · ${ago(h.lastAt)}`}</span>
+                {isOwner && (
+                  <form method="post" class="int-acts">
+                    <input type="hidden" name="id" value={h.id} />
+                    <button class="btn sm" name="op" value="test">Send test</button>
+                    <button class="btn sm ghost" name="op" value="toggle">{h.active ? 'Pause' : 'Resume'}</button>
+                    <button class="btn sm ghost danger" name="op" value="delhook" data-confirm="Remove this webhook?">Remove</button>
+                  </form>
+                )}
+              </div>
+              {log.length > 0 && (
+                <details class="int-log"><summary>Last {log.length} deliveries</summary>
+                  {log.map((d) => <div><span class={`status ${d.status === 'delivered' ? 'published' : d.status === 'failed' ? 'archived' : 'scheduled'}`}>{d.status}</span> <code>{d.event}</code> <span class="hint">{d.responseCode ?? '—'} · {d.attempts} attempt{d.attempts === 1 ? '' : 's'} · {ago(d.createdAt)}</span></div>)}
+                </details>
+              )}
+              {!h.active && <p class="hint">Paused — nothing is sent.</p>}
+            </div>
+          );
+        })}
+      </section>
+    </div>
+
+    <div class="res-side">
+      <section class="card card-pad">
+        <div class="card-head"><b>Email</b><span class={`int-status ${provider === 'none' ? 'bad' : 'ok'}`}>{provider === 'none' ? 'Not set up' : ({cloudflare:'Cloudflare Email',resend:'Resend',mailgun:'Mailgun',ses:'Amazon SES'})[provider]}</span></div>
+        {provider === 'none' ? (
+          <p class="hint">Choose Resend, Mailgun, Amazon SES or Cloudflare in <a href="/admin/email">Email settings</a>. Configure a sender and review delivery activity there.</p>
+        ) : <p class="hint">Sending as <code>{emailConfig.config.from}</code>. Guests get confirmations, updates and a reminder the day before.</p>}
+      </section>
+      <section class="card card-pad">
+        <div class="card-head"><b>Subscribe feeds</b></div>
+        {feeds.map((f) => <div class="int-feed"><span>{f.label}</span><div class="cal-feed"><input type="text" class="mono" readonly value={f.url} /><button class="btn sm" type="button" data-copy={f.url}>Copy</button></div></div>)}
+        <p class="hint">Private calendars and resource staff feeds have secret links on their own screens.</p>
+      </section>
+      <section class="card card-pad">
+        <div class="card-head"><b>Quick start</b></div>
+        <pre class="int-code">{`curl ${origin}/api/calendar/events?from=2026-10-01
+
+curl -H "Authorization: Bearer <key>" \\
+  ${origin}/api/calendar/bookings?status=pending`}</pre>
+      </section>
+    </div>
+  </div>
+
+  <Modal id="new-key" title="New API key">
+    <form method="post">
+      <input type="hidden" name="op" value="key" />
+      <label class="field"><span>Name</span><input type="text" name="name" placeholder="Zapier, lobby screen…" required /></label>
+      <div class="field"><span>Permissions</span>
+        {API_SCOPES.filter((s) => bookingsEnabled() || !s.startsWith('bookings') && !s.startsWith('resources')).map((s) => (
+          <label class="check-row"><input type="checkbox" name="scopes" value={s} checked={s.endsWith(':read')} /> {SCOPE_LABEL[s]} <code>{s}</code></label>
+        ))}
+      </div>
+      <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Create key</button></div>
+    </form>
+  </Modal>
+  <Modal id="new-hook" title="Add webhook endpoint">
+    <form method="post">
+      <input type="hidden" name="op" value="hook" />
+      <label class="field"><span>Endpoint URL</span><input type="url" class="mono" name="url" placeholder="https://hooks.zapier.com/…" required /></label>
+      <div class="field"><span>Send these events</span>
+        {WEBHOOK_EVENTS.filter((e) => bookingsEnabled() || !e.startsWith('booking')).map((e) => <label class="check-row"><input type="checkbox" name="events" value={e} checked={e === 'booking.created' || e === 'event.published'} /> <code>{e}</code></label>)}
+      </div>
+      <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Add endpoint</button></div>
+      <p class="hint modal-note">Deliveries are signed and retried 3 times over about an hour.</p>
+    </form>
+  </Modal>
+</Admin>
+
+<script>
+  document.addEventListener('click', async (e) => {
+    const c = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
+    if (c && !confirm(c.dataset.confirm)) { e.preventDefault(); return; }
+    const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
+    if (!b) return;
+    await navigator.clipboard.writeText(b.dataset.copy ?? '');
+    b.textContent = 'Copied';
+    setTimeout(() => (b.textContent = 'Copy'), 1200);
+  });
+</script>