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 } 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 SECTION_TYPES = [
  { value: "hero", label: "Hero Banner" },
  { value: "featured_products", label: "Featured Products" },
  { value: "collection", label: "Collection" },
  { value: "brand_grid", label: "Brand Grid" },
  { value: "deals", label: "Latest Deals" },
  { value: "trending", label: "Trending" },
  { value: "new_arrivals", label: "New Arrivals" },
  { value: "custom_html", label: "Custom HTML" }
];
const TYPE_ICONS = {
  hero: "🖼️",
  featured_products: "⭐",
  collection: "📁",
  brand_grid: "🏷️",
  deals: "🔥",
  trending: "📈",
  new_arrivals: "🆕",
  custom_html: "💻"
};
function ConfigEditor({ section, onChange }) {
  const c = section.config || {};
  const update = (key, value) => onChange({ ...c, [key]: value });
  switch (section.type) {
    case "hero":
      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mt-3", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Title" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              value: c.title || "",
              onChange: (e) => update("title", e.target.value),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Subtitle" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              value: c.subtitle || "",
              onChange: (e) => update("subtitle", e.target.value),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "CTA Text" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              value: c.cta_text || "",
              onChange: (e) => update("cta_text", e.target.value),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "CTA URL" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              value: c.cta_url || "",
              onChange: (e) => update("cta_url", e.target.value),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "col-span-2", children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Background Image URL" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              value: c.background_image || "",
              onChange: (e) => update("background_image", e.target.value),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] })
      ] });
    case "featured_products":
      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mt-3", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Max Items" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              type: "number",
              value: c.max_items || 8,
              onChange: (e) => update("max_items", parseInt(e.target.value)),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Product IDs (comma-separated)" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              value: (c.product_ids || []).join(", "),
              onChange: (e) => update("product_ids", e.target.value.split(",").map((s) => s.trim()).filter(Boolean)),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] })
      ] });
    case "collection":
      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 mt-3", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Collection Slug" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              value: c.collection_slug || "",
              onChange: (e) => update("collection_slug", e.target.value),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Limit" }),
          /* @__PURE__ */ jsx(
            "input",
            {
              type: "number",
              value: c.limit || 8,
              onChange: (e) => update("limit", parseInt(e.target.value)),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Layout" }),
          /* @__PURE__ */ jsxs(
            "select",
            {
              value: c.layout || "grid",
              onChange: (e) => update("layout", e.target.value),
              className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]",
              children: [
                /* @__PURE__ */ jsx("option", { value: "grid", children: "Grid" }),
                /* @__PURE__ */ jsx("option", { value: "carousel", children: "Carousel" })
              ]
            }
          )
        ] })
      ] });
    case "brand_grid":
      return /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Brands (comma-separated)" }),
        /* @__PURE__ */ jsx(
          "input",
          {
            value: (c.brands || []).join(", "),
            onChange: (e) => update("brands", e.target.value.split(",").map((s) => s.trim()).filter(Boolean)),
            className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]",
            placeholder: "Nike, Adidas, New Balance, Asics"
          }
        )
      ] });
    case "deals":
    case "trending":
    case "new_arrivals":
      return /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Limit" }),
        /* @__PURE__ */ jsx(
          "input",
          {
            type: "number",
            value: c.limit || 8,
            onChange: (e) => update("limit", parseInt(e.target.value)),
            className: "w-32 bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
          }
        ),
        /* @__PURE__ */ jsx("span", { className: "text-xs text-[#666] ml-2", children: "Automatisch gevuld" })
      ] });
    default:
      return null;
  }
}
function HomepageEditorContent() {
  const { token } = useAuth();
  const [sections, setSections] = useState([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [dragIdx, setDragIdx] = useState(null);
  const [newType, setNewType] = useState("hero");
  const [message, setMessage] = useState("");
  const headers = { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
  useEffect(() => {
    fetch("/api/admin/homepage", { headers: { Authorization: `Bearer ${token}` } }).then((r) => r.json()).then((d) => setSections(d.sections || [])).catch(() => {
    }).finally(() => setLoading(false));
  }, [token]);
  const flash = (msg) => {
    setMessage(msg);
    setTimeout(() => setMessage(""), 3e3);
  };
  const moveSection = (from, to) => {
    const next = [...sections];
    const [item] = next.splice(from, 1);
    next.splice(to, 0, item);
    setSections(next.map((s, i) => ({ ...s, sort_order: i })));
  };
  const saveOrder = async () => {
    setSaving(true);
    try {
      await fetch("/api/admin/homepage", {
        method: "PUT",
        headers,
        body: JSON.stringify({ reorder: true, ids: sections.map((s) => s.id) })
      });
      flash("Volgorde opgeslagen ✓");
    } catch {
      flash("Fout bij opslaan");
    }
    setSaving(false);
  };
  const toggleEnabled = async (section) => {
    const updated = { ...section, enabled: !section.enabled };
    await fetch("/api/admin/homepage", {
      method: "PUT",
      headers,
      body: JSON.stringify({ id: section.id, type: section.type, title: section.title, config: section.config, enabled: updated.enabled })
    });
    setSections((prev) => prev.map((s) => s.id === section.id ? updated : s));
  };
  const saveSection = async (section) => {
    await fetch("/api/admin/homepage", {
      method: "PUT",
      headers,
      body: JSON.stringify({ id: section.id, type: section.type, title: section.title, config: section.config, enabled: section.enabled })
    });
    flash("Sectie opgeslagen ✓");
    setEditingId(null);
  };
  const addSection = async () => {
    const label = SECTION_TYPES.find((t) => t.value === newType)?.label || newType;
    try {
      const res = await fetch("/api/admin/homepage", {
        method: "POST",
        headers,
        body: JSON.stringify({ type: newType, title: label, config: {}, enabled: true })
      });
      const created = await res.json();
      setSections((prev) => [...prev, created]);
      flash("Sectie toegevoegd ✓");
    } catch {
      flash("Fout bij toevoegen");
    }
  };
  const deleteSection = async (id) => {
    if (!confirm("Sectie verwijderen?")) return;
    await fetch("/api/admin/homepage", {
      method: "DELETE",
      headers,
      body: JSON.stringify({ id })
    });
    setSections((prev) => prev.filter((s) => s.id !== id));
    flash("Verwijderd ✓");
  };
  if (loading) return /* @__PURE__ */ jsx(AdminLayout, { title: "Homepage Manager", children: /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Laden..." }) });
  return /* @__PURE__ */ jsxs(AdminLayout, { title: "Homepage Manager", children: [
    message && /* @__PURE__ */ jsx("div", { className: "mb-4 bg-[#00FF6A]/10 border border-[#00FF6A]/30 text-[#00FF6A] text-sm px-4 py-2 rounded-lg", children: message }),
    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
      /* @__PURE__ */ jsx("p", { className: "text-sm text-[#999]", children: "Sleep om te herschikken. Klik Edit om secties aan te passen." }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-center", children: [
        /* @__PURE__ */ jsx(
          "select",
          {
            value: newType,
            onChange: (e) => setNewType(e.target.value),
            className: "bg-[#141414] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]",
            children: SECTION_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t.value, children: t.label }, t.value))
          }
        ),
        /* @__PURE__ */ jsx("button", { onClick: addSection, className: "bg-[#00FF6A] text-[#0A0A0A] font-semibold px-4 py-2 rounded-lg text-sm hover:bg-[#00CC55]", children: "+ Toevoegen" })
      ] })
    ] }),
    sections.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-8 text-center", children: [
      /* @__PURE__ */ jsx("div", { className: "text-[#666] text-lg mb-2", children: "🏠" }),
      /* @__PURE__ */ jsx("div", { className: "text-[#999] text-sm", children: "Nog geen homepage secties" }),
      /* @__PURE__ */ jsx("div", { className: "text-[#666] text-xs mt-1", children: "Voeg hierboven een sectie toe om te beginnen" })
    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: sections.map((section, idx) => /* @__PURE__ */ jsxs(
      "div",
      {
        draggable: true,
        onDragStart: () => setDragIdx(idx),
        onDragOver: (e) => e.preventDefault(),
        onDrop: () => {
          if (dragIdx !== null && dragIdx !== idx) moveSection(dragIdx, idx);
          setDragIdx(null);
        },
        className: `bg-[#141414] border rounded-xl p-4 transition-all cursor-move
                ${section.enabled ? "border-[#333]" : "border-[#222] opacity-50"}
                ${dragIdx === idx ? "border-[#00FF6A] scale-[1.02]" : "hover:border-[#444]"}`,
        children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ jsx("span", { className: "text-[#666] cursor-grab", children: "☰" }),
              /* @__PURE__ */ jsx("span", { className: "text-lg", children: TYPE_ICONS[section.type] || "📄" }),
              /* @__PURE__ */ jsxs("div", { children: [
                /* @__PURE__ */ jsx("div", { className: "text-[#F5F5F5] font-medium text-sm", children: section.title }),
                /* @__PURE__ */ jsx("div", { className: "text-xs text-[#666]", children: SECTION_TYPES.find((t) => t.value === section.type)?.label || section.type })
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ jsx(
                "button",
                {
                  onClick: () => toggleEnabled(section),
                  className: `text-xs px-2 py-1 rounded ${section.enabled ? "bg-[#00FF6A]/10 text-[#00FF6A]" : "bg-[#333] text-[#666]"}`,
                  children: section.enabled ? "Enabled" : "Disabled"
                }
              ),
              /* @__PURE__ */ jsx(
                "button",
                {
                  onClick: () => setEditingId(editingId === section.id ? null : section.id),
                  className: "text-[#999] hover:text-[#F5F5F5] text-sm",
                  children: "Edit"
                }
              ),
              /* @__PURE__ */ jsx("button", { onClick: () => deleteSection(section.id), className: "text-[#666] hover:text-[#FF3B3B] text-sm", children: "🗑" })
            ] })
          ] }),
          editingId === section.id && /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-[#333] pt-4", children: [
            /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[#999] mb-1", children: "Title" }),
              /* @__PURE__ */ jsx(
                "input",
                {
                  value: section.title,
                  onChange: (e) => setSections((prev) => prev.map((s) => s.id === section.id ? { ...s, title: e.target.value } : s)),
                  className: "w-full bg-[#0A0A0A] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#F5F5F5]"
                }
              )
            ] }),
            /* @__PURE__ */ jsx(ConfigEditor, { section, onChange: (config) => setSections((prev) => prev.map((s) => s.id === section.id ? { ...s, config } : s)) }),
            /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
              "button",
              {
                onClick: () => saveSection(section),
                className: "bg-[#00FF6A] text-[#0A0A0A] font-semibold px-4 py-2 rounded-lg text-sm hover:bg-[#00CC55]",
                children: "Opslaan"
              }
            ) })
          ] })
        ]
      },
      section.id
    )) }),
    sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
      "button",
      {
        onClick: saveOrder,
        disabled: saving,
        className: "bg-[#00FF6A] text-[#0A0A0A] font-semibold px-6 py-2.5 rounded-lg text-sm hover:bg-[#00CC55] disabled:opacity-50",
        children: saving ? "Opslaan..." : "Volgorde opslaan"
      }
    ) })
  ] });
}
function HomepageEditorPage() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(HomepageEditorContent, {}) }) });
}

const $$Homepage = 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>Homepage — SneakerPicks Admin</title>${renderHead()}</head> <body class="min-h-screen bg-[#0A0A0A] text-[#F5F5F5]"> ${renderComponent($$result, "HomepageEditor", HomepageEditorPage, { "client:load": true, "client:component-hydration": "load", "client:component-path": "C:/Users/Roel/clawd/sneakerpicks/src/components/admin/HomepageEditor", "client:component-export": "default" })} </body></html>`;
}, "C:/Users/Roel/clawd/sneakerpicks/src/pages/admin/homepage.astro", void 0);

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

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

const page = () => _page;

export { page };
