import { e as createComponent, l as renderHead, k as renderComponent, r as renderTemplate } from '../../../chunks/astro/server_DePCulMI.mjs';
import 'piccolore';
/* empty css                                        */
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect, useCallback } from 'react';
import { A as AuthProvider, a as AuthGuard, u as useAuth } from '../../../chunks/AdminAuth_CWvmd3cU.mjs';
import { A as AdminLayout } from '../../../chunks/AdminLayout_CZSIXmew.mjs';
export { renderers } from '../../../renderers.mjs';

const BLOCK_TYPES = [
  { type: "header", label: "Header", icon: "🏷️" },
  { type: "product", label: "Product", icon: "👟" },
  { type: "text", label: "Tekst", icon: "📝" },
  { type: "button", label: "Button", icon: "🔘" },
  { type: "divider", label: "Divider", icon: "➖" },
  { type: "price_comparison", label: "Prijsvergelijk", icon: "💰" }
];
function uid() {
  return Math.random().toString(36).slice(2, 9);
}
function renderBlockToHtml(block) {
  switch (block.type) {
    case "header":
      return `<div style="background:#0A0A0A;padding:24px;text-align:center;">
        ${block.data.logo ? `<img src="${block.data.logo}" alt="" style="height:32px;margin-bottom:8px;" />` : ""}
        <h1 style="color:#00FF6A;font-size:24px;margin:0;">${block.data.title || "SneakerPicks"}</h1>
      </div>`;
    case "product":
      return `<div style="background:#141414;border:1px solid #333;border-radius:8px;padding:16px;margin:8px 0;">
        <table width="100%"><tr>
          <td width="80"><img src="${block.data.image || ""}" alt="" style="width:80px;height:80px;object-fit:contain;background:white;border-radius:4px;" /></td>
          <td style="padding-left:16px;">
            <div style="color:#F5F5F5;font-size:16px;font-weight:bold;">${block.data.name || "Product"}</div>
            <div style="color:#00FF6A;font-size:20px;margin-top:4px;">${block.data.price ? `€${block.data.price}` : ""}</div>
            ${block.data.url ? `<a href="${block.data.url}" style="display:inline-block;background:#00FF6A;color:#000;padding:8px 16px;border-radius:6px;text-decoration:none;font-size:14px;margin-top:8px;">Bekijk Deal →</a>` : ""}
          </td>
        </tr></table>
      </div>`;
    case "text":
      return `<div style="color:#CCCCCC;font-size:14px;line-height:1.6;padding:12px 0;">${block.data.content || ""}</div>`;
    case "button":
      return `<div style="text-align:center;padding:16px 0;">
        <a href="${block.data.url || "#"}" style="display:inline-block;background:${block.data.color || "#00FF6A"};color:${block.data.textColor || "#000"};padding:12px 32px;border-radius:8px;text-decoration:none;font-weight:bold;">${block.data.label || "Click here"}</a>
      </div>`;
    case "divider":
      return `<hr style="border:none;border-top:1px solid #333;margin:16px 0;" />`;
    case "price_comparison":
      const shops = block.data.shops || [];
      return `<div style="background:#141414;border:1px solid #333;border-radius:8px;padding:16px;margin:8px 0;">
        <div style="color:#F5F5F5;font-size:16px;font-weight:bold;margin-bottom:12px;">${block.data.name || "Product"}</div>
        ${shops.map((s) => `<div style="display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid #222;">
          <span style="color:#999;">${s.shop}</span>
          <span style="color:#00FF6A;font-weight:bold;">€${s.price}</span>
        </div>`).join("")}
      </div>`;
    default:
      return "";
  }
}
function BlockEditor({ block, onChange, onRemove, onMoveUp, onMoveDown }) {
  const update = (key, val) => onChange({ ...block, data: { ...block.data, [key]: val } });
  return /* @__PURE__ */ jsxs("div", { className: "bg-[#1A1A1A] border border-[#333] rounded-lg p-4 group", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
      /* @__PURE__ */ jsx("span", { className: "text-sm text-[#999] font-medium uppercase tracking-wider", children: block.type }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
        /* @__PURE__ */ jsx("button", { onClick: onMoveUp, className: "text-xs px-2 py-1 text-[#999] hover:text-white", children: "↑" }),
        /* @__PURE__ */ jsx("button", { onClick: onMoveDown, className: "text-xs px-2 py-1 text-[#999] hover:text-white", children: "↓" }),
        /* @__PURE__ */ jsx("button", { onClick: onRemove, className: "text-xs px-2 py-1 text-[#FF3B3B] hover:text-[#FF6666]", children: "✕" })
      ] })
    ] }),
    block.type === "header" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          value: block.data.title || "",
          onChange: (e) => update("title", e.target.value),
          placeholder: "Titel",
          className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
        }
      ),
      /* @__PURE__ */ jsx(
        "input",
        {
          value: block.data.logo || "",
          onChange: (e) => update("logo", e.target.value),
          placeholder: "Logo URL",
          className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
        }
      )
    ] }),
    block.type === "product" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          value: block.data.name || "",
          onChange: (e) => update("name", e.target.value),
          placeholder: "Product naam",
          className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
        /* @__PURE__ */ jsx(
          "input",
          {
            value: block.data.price || "",
            onChange: (e) => update("price", e.target.value),
            placeholder: "Prijs",
            className: "bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
          }
        ),
        /* @__PURE__ */ jsx(
          "input",
          {
            value: block.data.url || "",
            onChange: (e) => update("url", e.target.value),
            placeholder: "Link",
            className: "bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
          }
        )
      ] }),
      /* @__PURE__ */ jsx(
        "input",
        {
          value: block.data.image || "",
          onChange: (e) => update("image", e.target.value),
          placeholder: "Afbeelding URL",
          className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
        }
      ),
      /* @__PURE__ */ jsx(ProductSearch, { onSelect: (p) => onChange({ ...block, data: { ...block.data, name: p.name, image: p.image_url, product_id: p.id } }) })
    ] }),
    block.type === "text" && /* @__PURE__ */ jsx(
      "textarea",
      {
        value: block.data.content || "",
        onChange: (e) => update("content", e.target.value),
        placeholder: "Tekst...",
        rows: 3,
        className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
      }
    ),
    block.type === "button" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          value: block.data.label || "",
          onChange: (e) => update("label", e.target.value),
          placeholder: "Button tekst",
          className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
        }
      ),
      /* @__PURE__ */ jsx(
        "input",
        {
          value: block.data.url || "",
          onChange: (e) => update("url", e.target.value),
          placeholder: "Button link",
          className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
        }
      )
    ] }),
    block.type === "price_comparison" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          value: block.data.name || "",
          onChange: (e) => update("name", e.target.value),
          placeholder: "Product naam",
          className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
        }
      ),
      (block.data.shops || []).map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
        /* @__PURE__ */ jsx(
          "input",
          {
            value: s.shop,
            onChange: (e) => {
              const shops = [...block.data.shops || []];
              shops[i] = { ...s, shop: e.target.value };
              update("shops", shops);
            },
            placeholder: "Shop",
            className: "flex-1 bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
          }
        ),
        /* @__PURE__ */ jsx(
          "input",
          {
            value: s.price,
            onChange: (e) => {
              const shops = [...block.data.shops || []];
              shops[i] = { ...s, price: e.target.value };
              update("shops", shops);
            },
            placeholder: "Prijs",
            className: "w-24 bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
          }
        ),
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => {
              const shops = (block.data.shops || []).filter((_, j) => j !== i);
              update("shops", shops);
            },
            className: "text-[#FF3B3B] px-2",
            children: "✕"
          }
        )
      ] }, i)),
      /* @__PURE__ */ jsx(
        "button",
        {
          onClick: () => update("shops", [...block.data.shops || [], { shop: "", price: "" }]),
          className: "text-sm text-[#00FF6A] hover:underline",
          children: "+ Shop toevoegen"
        }
      )
    ] })
  ] });
}
function ProductSearch({ onSelect }) {
  const { token } = useAuth();
  const [q, setQ] = useState("");
  const [results, setResults] = useState([]);
  useEffect(() => {
    if (q.length < 2) {
      setResults([]);
      return;
    }
    const t = setTimeout(() => {
      fetch(`/api/admin/products?search=${encodeURIComponent(q)}&limit=5`, { headers: { Authorization: `Bearer ${token}` } }).then((r) => r.json()).then((res) => setResults(res.data || []));
    }, 300);
    return () => clearTimeout(t);
  }, [q]);
  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
    /* @__PURE__ */ jsx(
      "input",
      {
        value: q,
        onChange: (e) => setQ(e.target.value),
        placeholder: "🔍 Zoek product...",
        className: "w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"
      }
    ),
    results.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute z-10 w-full mt-1 bg-[#1A1A1A] border border-[#333] rounded-lg shadow-lg max-h-48 overflow-auto", children: results.map((p) => /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => {
          onSelect(p);
          setQ("");
          setResults([]);
        },
        className: "w-full text-left px-3 py-2 text-sm text-[#F5F5F5] hover:bg-[#222] flex items-center gap-2",
        children: [
          p.image_url && /* @__PURE__ */ jsx("img", { src: p.image_url, alt: "", className: "w-8 h-8 rounded bg-white object-contain" }),
          /* @__PURE__ */ jsx("span", { className: "truncate", children: p.name })
        ]
      },
      p.id
    )) })
  ] });
}
function EmailEditorContent() {
  const { token } = useAuth();
  const [templates, setTemplates] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
  const [name, setName] = useState("");
  const [type, setType] = useState("custom");
  const [blocks, setBlocks] = useState([]);
  const [saving, setSaving] = useState(false);
  const [sending, setSending] = useState(false);
  const [msg, setMsg] = useState("");
  const headers = { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
  const loadTemplates = () => {
    fetch("/api/admin/emails/templates", { headers }).then((r) => r.json()).then((res) => setTemplates(res.data || []));
  };
  useEffect(loadTemplates, []);
  const loadTemplate = (id) => {
    fetch(`/api/admin/emails/templates?id=${id}`, { headers }).then((r) => r.json()).then((tpl) => {
      setSelectedId(tpl.id);
      setName(tpl.name);
      setType(tpl.type);
      setBlocks(tpl.blocks_json || []);
    });
  };
  const newTemplate = () => {
    setSelectedId(null);
    setName("");
    setType("custom");
    setBlocks([]);
  };
  const addBlock = (type2) => {
    const defaultData = {
      header: { title: "SneakerPicks", logo: "" },
      product: { name: "", price: "", image: "", url: "" },
      text: { content: "" },
      button: { label: "Bekijk nu", url: "", color: "#00FF6A", textColor: "#000" },
      divider: {},
      price_comparison: { name: "", shops: [] }
    };
    setBlocks([...blocks, { id: uid(), type: type2, data: defaultData[type2] }]);
  };
  const updateBlock = (i, b) => {
    const nb = [...blocks];
    nb[i] = b;
    setBlocks(nb);
  };
  const removeBlock = (i) => setBlocks(blocks.filter((_, j) => j !== i));
  const moveBlock = (i, dir) => {
    const ni = i + dir;
    if (ni < 0 || ni >= blocks.length) return;
    const nb = [...blocks];
    [nb[i], nb[ni]] = [nb[ni], nb[i]];
    setBlocks(nb);
  };
  const generateHtml = useCallback(() => {
    const body = blocks.map(renderBlockToHtml).join("");
    return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"></head>
      <body style="margin:0;padding:0;background:#0A0A0A;font-family:Arial,sans-serif;">
        <div style="max-width:600px;margin:0 auto;padding:20px;">${body}
          <div style="text-align:center;padding:20px;color:#666;font-size:12px;">
            <a href="https://sneakerpicks.nl" style="color:#00FF6A;">SneakerPicks.nl</a>
          </div>
        </div>
      </body></html>`;
  }, [blocks]);
  const save = async () => {
    setSaving(true);
    setMsg("");
    const html = generateHtml();
    const body = { name, type, blocks_json: blocks, html_cache: html, ...selectedId && { id: selectedId } };
    const res = await fetch("/api/admin/emails/templates", {
      method: selectedId ? "PUT" : "POST",
      headers,
      body: JSON.stringify(body)
    });
    const data = await res.json();
    if (res.ok) {
      setSelectedId(data.id);
      setMsg("Opgeslagen!");
      loadTemplates();
    } else setMsg(`Fout: ${data.error}`);
    setSaving(false);
  };
  const sendTest = async () => {
    setSending(true);
    setMsg("");
    const res = await fetch("/api/admin/emails/send-test", {
      method: "POST",
      headers,
      body: JSON.stringify({ html: generateHtml(), subject: `Test: ${name}` })
    });
    const data = await res.json();
    setMsg(res.ok ? "Test email verstuurd!" : `Fout: ${data.error}`);
    setSending(false);
  };
  const deleteTemplate = async () => {
    if (!selectedId || !confirm("Template verwijderen?")) return;
    await fetch(`/api/admin/emails/templates?id=${selectedId}`, { method: "DELETE", headers });
    newTemplate();
    loadTemplates();
  };
  return /* @__PURE__ */ jsx(AdminLayout, { title: "Email Editor", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-6 h-[calc(100vh-140px)]", children: [
    /* @__PURE__ */ jsxs("div", { className: "w-60 flex-shrink-0 space-y-4 overflow-auto", children: [
      /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
          /* @__PURE__ */ jsx("h3", { className: "text-sm text-[#999] font-medium", children: "Templates" }),
          /* @__PURE__ */ jsx("button", { onClick: newTemplate, className: "text-xs text-[#00FF6A] hover:underline", children: "+ Nieuw" })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
          templates.map((t) => /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => loadTemplate(t.id),
              className: `w-full text-left px-3 py-2 rounded text-sm truncate ${selectedId === t.id ? "bg-[#00FF6A]/10 text-[#00FF6A]" : "text-[#999] hover:text-white hover:bg-[#1A1A1A]"}`,
              children: t.name
            },
            t.id
          )),
          templates.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-[#666] text-xs", children: "Geen templates" })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-4", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-sm text-[#999] font-medium mb-3", children: "Blokken" }),
        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: BLOCK_TYPES.map((bt) => /* @__PURE__ */ jsxs(
          "button",
          {
            onClick: () => addBlock(bt.type),
            className: "w-full text-left px-3 py-2 rounded text-sm text-[#999] hover:text-white hover:bg-[#1A1A1A] flex items-center gap-2",
            children: [
              /* @__PURE__ */ jsx("span", { children: bt.icon }),
              /* @__PURE__ */ jsx("span", { children: bt.label })
            ]
          },
          bt.type
        )) })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto space-y-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-center", children: [
        /* @__PURE__ */ jsx(
          "input",
          {
            value: name,
            onChange: (e) => setName(e.target.value),
            placeholder: "Template naam...",
            className: "flex-1 bg-[#141414] border border-[#333] rounded-lg px-4 py-2 text-[#F5F5F5]"
          }
        ),
        /* @__PURE__ */ jsxs(
          "select",
          {
            value: type,
            onChange: (e) => setType(e.target.value),
            className: "bg-[#141414] border border-[#333] rounded-lg px-3 py-2 text-[#F5F5F5] text-sm",
            children: [
              /* @__PURE__ */ jsx("option", { value: "custom", children: "Custom" }),
              /* @__PURE__ */ jsx("option", { value: "price_alert", children: "Prijsalert" }),
              /* @__PURE__ */ jsx("option", { value: "weekly_digest", children: "Weekly Digest" }),
              /* @__PURE__ */ jsx("option", { value: "promo", children: "Promo" })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: save,
            disabled: saving || !name,
            className: "px-4 py-2 rounded-lg text-sm bg-[#00FF6A] text-black font-medium disabled:opacity-50",
            children: saving ? "..." : "💾 Opslaan"
          }
        ),
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: sendTest,
            disabled: sending || blocks.length === 0,
            className: "px-4 py-2 rounded-lg text-sm bg-[#1A1A1A] border border-[#333] text-[#999] hover:text-white disabled:opacity-50",
            children: sending ? "..." : "📧 Test"
          }
        ),
        selectedId && /* @__PURE__ */ jsx("button", { onClick: deleteTemplate, className: "px-4 py-2 rounded-lg text-sm text-[#FF3B3B] hover:bg-[#FF3B3B]/10", children: "🗑️" })
      ] }),
      msg && /* @__PURE__ */ jsx("div", { className: `text-sm px-3 py-2 rounded ${msg.includes("Fout") ? "text-[#FF3B3B] bg-[#FF3B3B]/10" : "text-[#00FF6A] bg-[#00FF6A]/10"}`, children: msg }),
      blocks.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-20 bg-[#141414] border border-[#333] rounded-xl", children: "Klik op een blok links om te beginnen" }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: blocks.map((b, i) => /* @__PURE__ */ jsx(
        BlockEditor,
        {
          block: b,
          onChange: (nb) => updateBlock(i, nb),
          onRemove: () => removeBlock(i),
          onMoveUp: () => moveBlock(i, -1),
          onMoveDown: () => moveBlock(i, 1)
        },
        b.id
      )) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "w-[350px] flex-shrink-0 bg-[#141414] border border-[#333] rounded-xl overflow-hidden", children: [
      /* @__PURE__ */ jsx("div", { className: "p-3 border-b border-[#333] text-sm text-[#999]", children: "Preview" }),
      /* @__PURE__ */ jsx("div", { className: "overflow-auto h-full", children: /* @__PURE__ */ jsx("iframe", { srcDoc: generateHtml(), className: "w-full h-full border-0", title: "Preview", style: { minHeight: "500px" } }) })
    ] })
  ] }) });
}
function EmailEditor() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(EmailEditorContent, {}) }) });
}

const $$Editor = createComponent(($$result, $$props, $$slots) => {
  return renderTemplate`<html lang="nl" class="dark"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Email Editor — SneakerPicks Admin</title>${renderHead()}</head> <body class="min-h-screen bg-[#0A0A0A] text-[#F5F5F5]"> ${renderComponent($$result, "EmailEditor", EmailEditor, { "client:load": true, "client:component-hydration": "load", "client:component-path": "C:/Users/Roel/clawd/sneakerpicks/src/components/admin/EmailEditor", "client:component-export": "default" })} </body></html>`;
}, "C:/Users/Roel/clawd/sneakerpicks/src/pages/admin/emails/editor.astro", void 0);

const $$file = "C:/Users/Roel/clawd/sneakerpicks/src/pages/admin/emails/editor.astro";
const $$url = "/admin/emails/editor";

const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: $$Editor,
  file: $$file,
  url: $$url
}, Symbol.toStringTag, { value: 'Module' }));

const page = () => _page;

export { page };
