18/8/26

see feedwrite_readme.txt for licence, setup instructions, and terms of use.

// =====================================================================
// FEEDWRITE v1.3 - Scheduled Sequence Poster (Text + Image Slots)
// =====================================================================


// =====================================================================
// CLOUDFLARE WORKER (single file -- includes the built-in Admin UI)
// Save as worker.js and deploy via the Cloudflare Workers dashboard.
//
// Bindings required (set in the Worker's Settings > Variables/Bindings):
//   FEEDWRITE_KV -- KV Namespace binding (process config + schedule state)
//   BUCKET       -- R2 bucket binding (stores slot text/images + library)
//   ADMIN_KEY    -- Secret (password for the Admin UI / API)
//   FEEDPOST     -- (optional) Service Binding to another Worker, if your
//                   webhook receiver is also a Cloudflare Worker in the
//                   same account. Not required -- FeedWrite falls back to
//                   a normal fetch() if this binding isn't present.
//
// Also add a Cron Trigger (e.g. 0 * * * * for hourly) so scheduled
// processes are checked and posted on time.
// =====================================================================


// FeedWrite Worker v1.3
// ═══════════════════════════════════════════════════════════════════════════
// Changes in v1.3 (code review nice-to-haves):
//   - Slot prefixes are now generated with crypto.randomUUID() instead of
//     Date.now().toString(), avoiding a collision if "Add Slot" is clicked
//     twice in quick succession.
//   - Deleting a slot now also removes its prefix from state:slot_order,
//     instead of leaving it for the next /api/slots call to self-heal.
//   - The frontend req() helper no longer assumes every successful response
//     is JSON, avoiding a crash on empty/204 responses.
//   - The library upload file input now clears after a successful upload.
//   - Process names, folder names, webhook URLs, slot text previews, and
//     library keys are now HTML-escaped before being inserted into the
//     admin UI, reducing the risk of stored content injecting markup.
// ═══════════════════════════════════════════════════════════════════════════
// ═══════════════════════════════════════════════════════════════════════════
// Changes in v1.1:
//   - Deleting a process now also deletes its slots from R2 and its
//     KV sequence-index/order state, via a new /api/delete-process endpoint.
//   - Slots can now be reordered (Up/Down in the UI). Order is tracked in
//     KV (state:slot_order:<processId>) and self-heals: new slots append
//     to the end automatically, deleted slots drop out automatically.
// ═══════════════════════════════════════════════════════════════════════════
// New standalone tool: stores paired text+image "slots" and posts them in
// sequence, at a configurable interval, by calling an existing FeedPost
// webhook-trigger process (via Service Binding — not a raw fetch, since
// same-account workers.dev-to-workers.dev fetch calls are unreliable on the
// free tier). FeedWrite never posts to Buffer directly; FeedPost's existing
// webhook-trigger process type does that.
//
// Bindings required:
//   env.FEEDWRITE_KV  - KV namespace for process config + schedule state
//   env.BUCKET        - R2 bucket ("content-library"), shared across tools
//   env.FEEDPOST      - Service Binding to the FeedPost worker
//   env.ADMIN_KEY     - this worker's own admin key (secret)
//
// R2 key layout in the shared content-library bucket:
//   library/<folder>/<filename>       - reusable picker images (e.g. library/acorn/xyz.jpg)
//   slots/<processId>/<prefix>.txt    - queued post text (read-only once uploaded)
//   slots/<processId>/<prefix>.img    - queued post image (uploaded fresh or copied from library)
//
// Sequence behaviour: loops through a process's slots in order, one per
// scheduled tick, wrapping back to the start indefinitely (matches FeedPost's
// old handleSequence pattern) — slots are never auto-deleted after posting.
// ═══════════════════════════════════════════════════════════════════════════

const DEFAULT_INTERVAL_HOURS = 24;

// Guards against path traversal / malformed keys when client-supplied
// id/prefix values are used to build R2 keys.
function isSafeId(s) {
  return typeof s === "string" && s.length > 0 && !s.includes("/") && !s.includes("..");
}

export default {
  async fetch(request, env) {
    const url = new URL(request.url), path = url.pathname;
    const respond = (data, status = 200, type = "application/json") => {
      const headers = {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, X-Admin-Key",
      };
headers["Content-Type"] = type;
      const body = (status === 204 || status === 304) ? null : (type === "application/json" ? JSON.stringify(data) : data);
      return new Response(body, { status, headers });
    };

    if (request.method === "OPTIONS") return respond(null, 204);

    // Public image proxy (serves both library/ and slots/ prefixes)
    if (path.startsWith("/image/")) {
      const key = decodeURIComponent(path.replace("/image/", ""));
      const object = await env.BUCKET.get(key);
      if (!object) return respond("Not Found", 404, "text/plain");
      const h = new Headers(); object.writeHttpMetadata(h); h.set("Access-Control-Allow-Origin", "*");
      return new Response(object.body, { headers: h });
    }

    if (path.startsWith("/api/")) {
      const auth = request.headers.get("X-Admin-Key");
      if (auth !== env.ADMIN_KEY) return respond({ error: "Unauthorized" }, 401);

      const storedHost = await env.FEEDWRITE_KV.get("settings:base_host");
      if (storedHost !== url.host) await env.FEEDWRITE_KV.put("settings:base_host", url.host);

      if (path === "/api/processes") {
        if (request.method === "GET") return respond(JSON.parse(await env.FEEDWRITE_KV.get("processes") || "[]"));
        const raw = await request.text();
        let parsed;
        try { parsed = JSON.parse(raw); } catch (e) { return respond({ error: "Invalid JSON" }, 400); }
        if (!Array.isArray(parsed)) return respond({ error: "Processes must be an array" }, 400);
        await env.FEEDWRITE_KV.put("processes", JSON.stringify(parsed));
        return respond({ success: true });
      }

      // ---- Shared image library (folder-scoped) ----
      if (path === "/api/library") {
        const folder = url.searchParams.get("folder") || "";
        if (request.method === "GET") {
          if (!folder) return respond({ error: "folder required" }, 400);
          const list = await env.BUCKET.list({ prefix: `library/${folder}/` });
          const files = list.objects.map(o => ({ key: o.key, url: `https://${url.host}/image/${encodeURIComponent(o.key)}` }));
          return respond(files);
        }
        if (request.method === "POST") {
          const fd = await request.formData(), img = fd.get("image"), fol = fd.get("folder");
          if (!img || img.size === 0) return respond({ error: "No image" }, 400);
          if (!fol) return respond({ error: "No folder" }, 400);
          const key = `library/${fol}/${Date.now()}_${img.name.replace(/[^a-zA-Z0-9.-]/g, '_')}`;
          await env.BUCKET.put(key, img, { httpMetadata: { contentType: img.type } });
          return respond({ success: true });
        }
        if (request.method === "DELETE") {
          const { key } = await request.json();
          if (key.startsWith("library/")) await env.BUCKET.delete(key);
          return respond({ success: true });
        }
      }

// ---- Slots (queued sequence content per process) ----
      if (path === "/api/slots") {
        const pid = url.searchParams.get("id");
        if (!isSafeId(pid)) return respond({ error: "Invalid id" }, 400);
        const list = await env.BUCKET.list({ prefix: `slots/${pid}/` });
        const slots = {};
        const txtKeys = [];
        for (const o of list.objects) {
          const pre = o.key.split("/")[2].split(".")[0];
          if (!slots[pre]) slots[pre] = { prefix: pre, hasText: false, hasImage: false, textPreview: "", imageUrl: "" };
          if (o.key.endsWith(".txt")) { slots[pre].hasText = true; txtKeys.push({ pre, key: o.key }); }
          if (o.key.endsWith(".img")) {
            slots[pre].hasImage = true;
            slots[pre].imageUrl = `https://${url.host}/image/${encodeURIComponent(o.key)}`;
          }
        }
        await Promise.all(txtKeys.map(async ({ pre, key }) => {
          const obj = await env.BUCKET.get(key);
          const txt = obj ? await obj.text() : "";
          slots[pre].textPreview = txt.length > 80 ? txt.slice(0, 80) + '…' : txt;
        }));
        const order = await getOrderedPrefixes(env, pid, list);
        return respond(order.map(pre => slots[pre]).filter(Boolean));
      }

      if (path === "/api/reorder-slots") {
        const { id, order } = await request.json();
        if (!isSafeId(id) || !Array.isArray(order) || !order.every(isSafeId)) return respond({ error: "Invalid id or order" }, 400);
        await env.FEEDWRITE_KV.put(`state:slot_order:${id}`, JSON.stringify(order));
        return respond({ success: true });
      }

      if (path === "/api/upload-slot") {
        const fd = await request.formData();
        const pid = fd.get("id"), prefix = fd.get("prefix") || Date.now().toString();
        const textFile = fd.get("textFile"), img = fd.get("image"), libraryKey = fd.get("libraryKey");
        if (!isSafeId(pid) || !isSafeId(prefix)) return respond({ error: "Invalid id or prefix" }, 400);
        if (textFile && textFile.size > 0) {
          await env.BUCKET.put(`slots/${pid}/${prefix}.txt`, await textFile.text());
        }
        if (img && img.size > 0) {
          await env.BUCKET.put(`slots/${pid}/${prefix}.img`, img, { httpMetadata: { contentType: img.type } });
        } else if (libraryKey) {
          const libObj = await env.BUCKET.get(libraryKey);
          if (!libObj) return respond({ error: "Library image not found" }, 404);
          await env.BUCKET.put(`slots/${pid}/${prefix}.img`, libObj.body, { httpMetadata: libObj.httpMetadata });
        }
        return respond({ success: true });
      }

      if (path === "/api/delete-slot") {
        const { id, prefix } = await request.json();
        if (!isSafeId(id) || !isSafeId(prefix)) return respond({ error: "Invalid id or prefix" }, 400);
        await env.BUCKET.delete([`slots/${id}/${prefix}.txt`, `slots/${id}/${prefix}.img`]);
        const orderStr = await env.FEEDWRITE_KV.get(`state:slot_order:${id}`);
        if (orderStr) {
          const order = JSON.parse(orderStr).filter(p => p !== prefix);
          await env.FEEDWRITE_KV.put(`state:slot_order:${id}`, JSON.stringify(order));
        }
        return respond({ success: true });
      }

      if (path === "/api/delete-process") {
        const { id } = await request.json();
        if (!isSafeId(id)) return respond({ error: "Invalid id" }, 400);
        const processes = JSON.parse(await env.FEEDWRITE_KV.get("processes") || "[]").filter(p => p.id !== id);
        await env.FEEDWRITE_KV.put("processes", JSON.stringify(processes));
        const list = await env.BUCKET.list({ prefix: `slots/${id}/` });
        if (list.objects.length) await env.BUCKET.delete(list.objects.map(o => o.key));
        await env.FEEDWRITE_KV.delete(`state:sequence:index:${id}`);
        await env.FEEDWRITE_KV.delete(`state:slot_order:${id}`);
        return respond({ success: true, processes });
      }

      if (path === "/api/run-process") {
        const { id } = await request.json();
        const proc = JSON.parse(await env.FEEDWRITE_KV.get("processes") || "[]").find(p => p.id === id);
        if (!proc) return respond({ error: "Not found" }, 404);
        return respond({ result: await runSequence(proc, env, url.host, true) });
      }

      return respond({ error: "Not Found" }, 404);
    }

    return respond(renderUI(), 200, "text/html;charset=UTF-8");
  },

async scheduled(event, env) {
    const host = await env.FEEDWRITE_KV.get("settings:base_host") || "";
    const processes = JSON.parse(await env.FEEDWRITE_KV.get("processes") || "[]");
    const now = Date.now();

    for (const proc of processes) {
      if (!proc.schedule || !proc.schedule.startAt) continue;
      const startAtMs = new Date(proc.schedule.startAt).getTime();
      if (now < startAtMs) continue;
      const intervalMs = (parseFloat(proc.schedule.intervalHours) || DEFAULT_INTERVAL_HOURS) * 3600000;
      const currentPeriod = Math.floor((now - startAtMs) / intervalMs);
const lastPeriodStr = await env.FEEDWRITE_KV.get(`state:period:${proc.id}:${proc.schedule.startAt}`);
      const lastPeriod = lastPeriodStr ? parseInt(lastPeriodStr) : -1;
      if (currentPeriod <= lastPeriod) continue;

      const res = await runSequence(proc, env, host, false);
      if (res && res.success) {
        await env.FEEDWRITE_KV.put(`state:period:${proc.id}:${proc.schedule.startAt}`, currentPeriod.toString());
      }
    }
  }
};

// Returns slot prefixes for a process in persisted display/posting order,
// self-healing by appending any new prefixes at the end and dropping any
// that no longer exist in R2 (persisting the corrected order back to KV).
async function getOrderedPrefixes(env, pid, list) {
  const allPrefixes = [...new Set(list.objects.map(o => o.key.split("/")[2].split(".")[0]))];
  const orderStr = await env.FEEDWRITE_KV.get(`state:slot_order:${pid}`);
  let order = orderStr ? JSON.parse(orderStr) : [];
  order = order.filter(p => allPrefixes.includes(p));
  const missing = allPrefixes.filter(p => !order.includes(p)).sort();
  order = order.concat(missing);
  if (orderStr !== JSON.stringify(order)) {
    await env.FEEDWRITE_KV.put(`state:slot_order:${pid}`, JSON.stringify(order));
  }
  return order;
}

// Advances one step through a process's slot sequence and posts it to
// FeedPost's webhook-trigger endpoint via Service Binding.
async function runSequence(proc, env, host, isTest) {
  try {
    if (!proc.webhookUrl) return { success: false, error: "No webhook URL configured for this process." };

    const list = await env.BUCKET.list({ prefix: `slots/${proc.id}/` });
    const prefixes = await getOrderedPrefixes(env, proc.id, list);
    if (!prefixes.length) return { success: false, error: "No slots uploaded for this process." };

    const curIdx = parseInt(await env.FEEDWRITE_KV.get(`state:sequence:index:${proc.id}`) || "0");
    const prefix = prefixes[curIdx % prefixes.length];

    const txtObj = await env.BUCKET.get(`slots/${proc.id}/${prefix}.txt`);
    const hasImg = list.objects.find(o => o.key === `slots/${proc.id}/${prefix}.img`);
    const title = txtObj ? (await txtObj.text()).trim() : "";
    const imageUrl = hasImg ? `https://${host}/image/${encodeURIComponent(`slots/${proc.id}/${prefix}.img`)}` : "";

    if (!title) return { success: false, error: `Slot ${prefix} has no text.` };

    const payload = { title, imageUrl };
    let whUrl;
    try {
      const u = new URL(proc.webhookUrl);
      if (proc.webhookSecret) u.searchParams.set("key", proc.webhookSecret);
      whUrl = u.toString();
    } catch (e) {
      return { success: false, error: "Invalid webhook URL." };
    }

    let whRes;
    try {
      whRes = env.FEEDPOST
        ? await env.FEEDPOST.fetch(new Request(whUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }))
        : await fetch(whUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
    } catch (e) {
      return { success: false, error: `Webhook call failed: ${e.message}` };
    }

    if (whRes.ok) {
      await env.FEEDWRITE_KV.put(`state:sequence:index:${proc.id}`, (curIdx + 1).toString());
    }

    return { success: whRes.ok, slot: prefix, title, imageUrl, webhookStatus: whRes.status };
  } catch (e) {
    return { success: false, error: e.message };
  }
}

// ─── INTEGRATED ADMIN UI ────────────────────────────────────────────────────

function renderUI() {
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FeedWrite v1.3</title>
<style>
  body { background: white; color: black; font-family: Verdana, sans-serif; max-width: 700px; margin: 40px auto; padding: 0 20px; line-height: 1.5; }
  h1 { font-size: 1.2em; margin-bottom: 20px; }
  h2 { font-size: 1em; margin-top: 32px; padding: 8px 10px; background: #f0f0f0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
  h3 { font-size: 0.9em; margin: 20px 0 10px 0; }
  label { display: block; margin-top: 16px; font-size: 0.9em; font-weight: bold; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select, textarea { width: 100%; padding: 6px; margin-top: 4px; font-family: Verdana, sans-serif; font-size: 0.9em; box-sizing: border-box; border: 1px solid #ccc; }
  textarea { min-height: 80px; }
  span.required { color: red; margin-left: 4px; }
  button { padding: 8px 14px; font-family: Verdana, sans-serif; cursor: pointer; border-radius: 0; border: 1px solid #ccc; background: #eee; }
  button:hover { background: #e0e0e0; }
  .buttons { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .red { color: red !important; }
  .btn-small { padding: 4px 8px; font-size: 0.8em; }
  .btn-link { font-size: 0.8em; color: #666; border: none; background: none; text-decoration: underline; padding: 0; }
  .card { border: 1px solid #ccc; padding: 15px; margin-top: 10px; }
  .wf-row, .item-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 0.9em; }
  .wf-btns { display: flex; gap: 6px; flex-shrink: 0; }
  .wf-settings { background: #f9f9f9; padding: 12px 16px; margin-top: 8px; border: none; line-height: 1.8; font-size: 0.85em; display: none; }
  .wf-settings dt { font-weight: bold; float: left; width: 130px; clear: left; }
  .wf-settings dd { margin-left: 140px; margin-bottom: 4px; }
  .note { font-size: 0.8em; color: #555; margin-top: 4px; }
  code { background: #f0f0f0; padding: 0.2em 0.4em; border-radius: 3px; word-break: break-all; font-family: monospace; }
  pre { background: #f0f0f0; padding: 1em; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; font-size: 0.85em; margin-top: 8px; display: none; }
  .sched-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
  #gallery, #libGallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 10px; }
  .thumb-wrap { position: relative; border: 1px solid #ddd; padding: 4px; background: #fff; }
  .thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
  .thumb-del { position: absolute; top: 0; right: 0; background: red; color: white; border: none; cursor: pointer; padding: 2px 6px; font-size: 10px; }
  #pickerGallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .picker-wrap { border: 1px solid #ddd; padding: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
  .picker-wrap.selected { border-color: #000; background: #eee; }
  .picker-wrap img { width: 48px; height: 48px; aspect-ratio: 1; object-fit: cover; display: block; pointer-events: none; flex-shrink: 0; }
  .picker-wrap .picker-name { font-size: 0.8em; word-break: break-all; pointer-events: none; }
</style>
</head>
<body>
<h1>FeedWrite v1.3</h1>

<div id="loginView">
  <label>Admin Key</label>
  <input type="password" id="adminKey" onkeydown="if(event.key==='Enter')connect()">
  <div class="buttons"><button onclick="connect()">Connect</button></div>
  <p id="loginMsg" class="note red" style="display:none">Incorrect key.</p>
</div>

<div id="mainView" style="display:none">
  <button class="btn-link" onclick="logout()">[Disconnect]</button>

  <h2 onclick="toggleSec('procListSec')">Processes</h2>
  <div id="procListSec" style="display:none">
    <div class="buttons" style="margin-top:10px; margin-bottom:20px;">
      <button onclick="editP(null)">+ Add Process</button>
    </div>
    <div id="pList">Loading...</div>
  </div>

  <div id="procEditSec" class="card" style="display:none">
    <h3 id="formTitle" style="margin-top:0">New Process</h3>

    <label>Process Name<span class="required">*</span></label>
    <input type="text" id="pName" placeholder="e.g. ACORN-autosequence">

    <label>Library Folder</label>
    <input type="text" id="pFolder" placeholder="e.g. acorn">
    <p class="note">Which content-library folder the image picker (below) browses for this process.</p>

    <h3>FeedPost Webhook</h3>
    <label>Webhook URL<span class="required">*</span></label>
    <input type="text" id="pWhUrl" placeholder="https://feedpost.....workers.dev/webhook/&lt;process-id&gt;">
    <label>Webhook Key/Secret</label>
    <input type="text" id="pWhSecret" placeholder="FeedPost's ADMIN_KEY">
    <p class="note">FeedWrite sends {title, imageUrl} to this URL each time a slot is due. Create the matching webhook-trigger process in FeedPost's own admin UI first, then paste its URL here.</p>

    <h3>Schedule</h3>
    <div class="sched-grid">
      <div><label>First Run Date (UTC)</label><input type="date" id="pStartDate"></div>
      <div><label>First Run Time (UTC)</label><input type="time" id="pStartTime"></div>
      <div style="grid-column: 1 / -1;"><label>Interval (Hours)</label><input type="number" id="pInt" value="${DEFAULT_INTERVAL_HOURS}" step="0.5"></div>
    </div>

    <div class="buttons">
      <button onclick="saveP()">Save Process</button>
      <button onclick="cancelP()">Cancel</button>
      <button id="btnTest" style="display:none" onclick="testP()">Run Now</button>
    </div>
    <pre id="testLog" style="display:none"></pre>

    <div id="slotsArea" style="display:none">
      <h3>Slots (queued posts, loop in order)</h3>
      <div id="slotList">Loading...</div>

      <h3>Add Slot</h3>
      <label>Text File (.txt)<span class="required">*</span></label>
      <input type="file" id="slotText" accept=".txt">
      <label>Image (upload new)</label>
      <input type="file" id="slotImage" accept="image/*">
      <p class="note">Or pick an existing image from the library below instead of uploading a new one.</p>
      <div id="pickerGallery"></div>
      <div class="buttons"><button onclick="addSlot()">Add Slot</button></div>
    </div>
  </div>

  <h2 onclick="toggleSec('libSec')">Image Library</h2>
  <div id="libSec" style="display:none">
    <p class="note">Shared across all tools via the content-library bucket, organised into folders (e.g. acorn, irons-all-in).</p>
    <label>Folder</label>
    <input type="text" id="libFolder" placeholder="e.g. acorn" oninput="loadLibrary()">
<input type="file" id="libFileInput" onchange="uploadLibraryImage()">
    <div id="libGallery">Enter a folder name above.</div>
  </div>
</div>

<script>
  let KEY = "", procs = [], editingId = null, libImgs = [], currentSlots = [];

  function escapeHtml(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function toggleSec(id) {
    const b = document.getElementById(id);
    if (!b) return;
    b.style.display = (b.style.display === 'block') ? 'none' : 'block';
  }

  async function req(path, m = 'GET', body = null) {
    const opts = { method: m, headers: { 'X-Admin-Key': KEY } };
    if (body instanceof FormData) opts.body = body;
    else if (body) { opts.body = JSON.stringify(body); opts.headers['Content-Type'] = 'application/json'; }
    const r = await fetch(path, opts);
    if (!r.ok) {
      if (r.status === 401) { logout(); throw new Error("Unauthorized"); }
      throw new Error("HTTP " + r.status);
    }
    if (r.status === 204) return null;
    const text = await r.text();
    return text ? JSON.parse(text) : null;
  }

  async function connect() {
    KEY = document.getElementById("adminKey").value.trim();
    try {
      procs = await req("/api/processes");
      localStorage.setItem("fw_key", KEY);
      document.getElementById("loginView").style.display = "none";
      document.getElementById("mainView").style.display = "block";
      renderList();
    } catch (e) {
      document.getElementById("loginMsg").style.display = "block";
    }
  }

  function logout() { localStorage.removeItem("fw_key"); location.reload(); }

  function renderList() {
    const html = procs.map(p => {
      const next = p.schedule?.startAt ? new Date(p.schedule.startAt).toLocaleString() : 'Not scheduled';
      return \`
      <div class="wf-row">
        <span><strong>\${escapeHtml(p.name)}</strong></span>
        <div class="wf-btns">
          <button class="btn-small" onclick="toggleSec('sets-\${p.id}')">Info</button>
          <button class="btn-small" onclick="editP('\${p.id}')">Edit</button>
          <button class="btn-small red" onclick="delP('\${p.id}')">Del</button>
        </div>
      </div>
      <div id="sets-\${p.id}" class="wf-settings">
        <dl>
          <dt>Webhook</dt><dd><code>\${escapeHtml(p.webhookUrl || '')}</code></dd>
          <dt>Folder</dt><dd>\${escapeHtml(p.folder || '(none)')}</dd>
          <dt>Start At</dt><dd>\${next}</dd>
          <dt>Interval</dt><dd>Every \${p.schedule?.intervalHours || ${DEFAULT_INTERVAL_HOURS}} hrs</dd>
        </dl>
      </div>\`;
    }).join('');
    document.getElementById('pList').innerHTML = html || '<p class="note">No processes found.</p>';
  }

  function editP(id) {
    editingId = id;
    const p = id ? procs.find(x => x.id === id) : {};
    document.getElementById('formTitle').innerText = id ? "Edit Process" : "New Process";
    document.getElementById('pName').value = p.name || '';
    document.getElementById('pFolder').value = p.folder || '';
    document.getElementById('pWhUrl').value = p.webhookUrl || '';
    document.getElementById('pWhSecret').value = p.webhookSecret || '';
    const startAt = p.schedule?.startAt || '';
    document.getElementById('pStartDate').value = startAt ? startAt.split('T')[0] : '';
    document.getElementById('pStartTime').value = startAt ? startAt.split('T')[1].slice(0, 5) : '';
    document.getElementById('pInt').value = p.schedule?.intervalHours || ${DEFAULT_INTERVAL_HOURS};

    document.getElementById('btnTest').style.display = id ? 'inline-block' : 'none';
    document.getElementById('testLog').style.display = 'none';
    document.getElementById('slotsArea').style.display = id ? 'block' : 'none';
    if (id) { loadSlots(); loadPickerForProcess(p); }

    document.getElementById('procListSec').style.display = 'none';
    document.getElementById('procEditSec').style.display = 'block';
  }

  function cancelP() {
    document.getElementById('procEditSec').style.display = 'none';
    document.getElementById('procListSec').style.display = 'block';
  }

  async function saveP() {
    const name = document.getElementById('pName').value.trim();
    const webhookUrl = document.getElementById('pWhUrl').value.trim();
    if (!name) return alert("Name is required");
    if (!webhookUrl) return alert("Webhook URL is required");

    let sDate = document.getElementById('pStartDate').value;
    let sTime = document.getElementById('pStartTime').value;
    if (sDate || sTime) {
      if (!sDate) sDate = new Date().toISOString().split('T')[0];
      if (!sTime) sTime = "00:00";
      sTime = sTime.substring(0, 5);
    }
    const finalStartAt = (sDate && sTime) ? sDate + 'T' + sTime + ':00.000Z' : '';

    const p = {
      id: editingId || crypto.randomUUID(),
      name,
      folder: document.getElementById('pFolder').value.trim(),
      webhookUrl,
      webhookSecret: document.getElementById('pWhSecret').value.trim(),
      schedule: { startAt: finalStartAt, intervalHours: document.getElementById('pInt').value }
    };

    if (editingId) { const idx = procs.findIndex(x => x.id === editingId); procs[idx] = p; }
    else { procs.push(p); }

    try {
      await req("/api/processes", "POST", procs);
      cancelP(); renderList();
    } catch (e) { alert("Save failed: " + e.message); }
  }

  async function delP(id) {
    if (!confirm("Delete this process and all its uploaded slots? This cannot be undone.")) return;
    try {
      const res = await req("/api/delete-process", "POST", { id });
      procs = res.processes || procs.filter(x => x.id !== id);
      renderList();
    } catch (e) { alert("Delete failed: " + e.message); }
  }

  async function testP() {
    if (!editingId) return;
    const btn = document.getElementById("btnTest"); btn.disabled = true; btn.innerText = "Running...";
    const l = document.getElementById("testLog"); l.style.display = "block"; l.innerText = "Processing...";
    try {
      const res = await req("/api/run-process", "POST", { id: editingId });
      l.innerText = JSON.stringify(res.result, null, 2);
    } catch (e) { l.innerText = "Test Failed: " + e.message; }
    btn.disabled = false; btn.innerText = "Run Now";
  }

  // ---- Slots ----
  async function loadSlots() {
    document.getElementById('slotList').innerText = "Loading...";
    try {
      currentSlots = await req("/api/slots?id=" + editingId);
      document.getElementById('slotList').innerHTML = currentSlots.map((s, i) => \`
        <div class="item-row">
          <span>
            \${s.imageUrl ? '<img src="' + s.imageUrl + '" style="width:32px;height:32px;object-fit:cover;vertical-align:middle;margin-right:8px;border:1px solid #ddd">' : ''}
            \${escapeHtml(s.textPreview) || '(no text)'}
          </span>
          <div class="wf-btns">
            <button class="btn-small" \${i === 0 ? 'disabled' : ''} onclick="moveSlot(\${i}, -1)">↑</button>
            <button class="btn-small" \${i === currentSlots.length - 1 ? 'disabled' : ''} onclick="moveSlot(\${i}, 1)">↓</button>
            <button class="btn-small red" onclick="delSlot('\${s.prefix}')">Del</button>
          </div>
        </div>\`
      ).join('') || '<p class="note">No slots yet.</p>';
    } catch (e) { document.getElementById('slotList').innerText = "Error loading slots."; }
  }

  async function moveSlot(index, dir) {
    const newIndex = index + dir;
    if (newIndex < 0 || newIndex >= currentSlots.length) return;
    const order = currentSlots.map(s => s.prefix);
    [order[index], order[newIndex]] = [order[newIndex], order[index]];
    try {
      await req("/api/reorder-slots", "POST", { id: editingId, order });
      loadSlots();
    } catch (e) { alert("Reorder failed: " + e.message); }
  }

  async function delSlot(prefix) {
    if (!confirm("Delete this slot?")) return;
    try { await req("/api/delete-slot", "POST", { id: editingId, prefix }); loadSlots(); }
    catch (e) { alert("Delete failed: " + e.message); }
  }

  async function loadPickerForProcess(p) {
    const folder = (p.folder || '').trim();
    document.getElementById('pickerGallery').innerHTML = '';
    if (!folder) return;
    try {
      libImgs = await req("/api/library?folder=" + encodeURIComponent(folder));
      document.getElementById('pickerGallery').innerHTML = libImgs.map(i => \`
        <div class="picker-wrap" onclick="selectPicker(this)" data-key="\${escapeHtml(i.key)}">
          <img src="\${i.url}">
          <span class="picker-name">\${escapeHtml(i.key.split('/').pop())}</span>
        </div>\`
      ).join('') || '<p class="note">No images in this folder yet — add some in the Image Library section.</p>';
    } catch (e) {}
  }

  function selectPicker(el) {
    document.querySelectorAll('#pickerGallery .picker-wrap').forEach(w => w.classList.remove('selected'));
    el.classList.toggle('selected');
  }

  async function addSlot() {
    const textFile = document.getElementById('slotText').files[0];
    const imageFile = document.getElementById('slotImage').files[0];
    const selected = document.querySelector('#pickerGallery .picker-wrap.selected');
    if (!textFile) return alert("A text file is required.");
    if (!imageFile && !selected) return alert("Choose an image to upload, or select one from the library.");

    const fd = new FormData();
    fd.append("id", editingId);
    fd.append("prefix", crypto.randomUUID());
    fd.append("textFile", textFile);
    if (imageFile) fd.append("image", imageFile);
    else if (selected) fd.append("libraryKey", selected.dataset.key);

    try {
      await req("/api/upload-slot", "POST", fd);
      document.getElementById('slotText').value = '';
      document.getElementById('slotImage').value = '';
      loadSlots();
    } catch (e) { alert("Upload failed: " + e.message); }
  }

  // ---- Image Library ----
  async function loadLibrary() {
    const folder = document.getElementById('libFolder').value.trim();
    if (!folder) { document.getElementById('libGallery').innerText = "Enter a folder name above."; return; }
    document.getElementById('libGallery').innerText = "Loading...";
    try {
      const imgs = await req("/api/library?folder=" + encodeURIComponent(folder));
      document.getElementById('libGallery').innerHTML = imgs.map(i => \`
        <div class="thumb-wrap">
          <img class="thumb" src="\${i.url}">
          <button class="thumb-del" onclick="delLibraryImage('\${escapeHtml(i.key)}')">X</button>
        </div>\`
      ).join('') || '<p class="note">No images in this folder yet.</p>';
    } catch (e) { document.getElementById('libGallery').innerText = "Error loading library."; }
  }



  async function uploadLibraryImage() {
    const folder = document.getElementById('libFolder').value.trim();
    const f = document.getElementById('libFileInput').files[0];
    if (!folder) return alert("Enter a folder name first.");
    if (!f) return;
    const fd = new FormData(); fd.append("image", f); fd.append("folder", folder);
    try {
      await req("/api/library", "POST", fd);
      document.getElementById('libFileInput').value = '';
      loadLibrary();
    } catch (e) { alert("Upload failed: " + e.message); }
  }



  async function delLibraryImage(key) {
    if (!confirm("Delete image from library?")) return;
    try { await req("/api/library", "DELETE", { key }); loadLibrary(); }
    catch (e) { alert("Delete failed: " + e.message); }
  }

  window.onload = () => {
    const saved = localStorage.getItem("fw_key");
    if (saved) { document.getElementById("adminKey").value = saved; connect(); }
  };
</script>
</body>
</html>`;
}