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, useCallback, 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';

function ProductTableContent() {
  const { token } = useAuth();
  const [products, setProducts] = useState([]);
  const [brands, setBrands] = useState([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
  const [search, setSearch] = useState("");
  const [brandFilter, setBrandFilter] = useState("");
  const [sneakerFilter, setSneakerFilter] = useState("");
  const [cutoutFilter, setCutoutFilter] = useState("");
  const [sortBy, setSortBy] = useState("created_at");
  const [sortDir, setSortDir] = useState("desc");
  const [page, setPage] = useState(1);
  const limit = 50;
  const headers = { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
  const loadProducts = useCallback(() => {
    setLoading(true);
    const params = new URLSearchParams({
      page: String(page),
      limit: String(limit),
      sort: sortBy,
      dir: sortDir
    });
    if (search) params.set("search", search);
    if (brandFilter) params.set("brand", brandFilter);
    if (sneakerFilter) params.set("is_sneaker", sneakerFilter);
    if (cutoutFilter) params.set("has_cutout", cutoutFilter);
    fetch(`/api/admin/products?${params}`, { headers: { Authorization: `Bearer ${token}` } }).then((r) => r.json()).then((d) => {
      setProducts(d.products || []);
      setTotal(d.total || 0);
      if (d.brands) setBrands(d.brands);
    }).catch(() => {
    }).finally(() => setLoading(false));
  }, [token, page, search, brandFilter, sneakerFilter, cutoutFilter, sortBy, sortDir]);
  useEffect(() => {
    loadProducts();
  }, [loadProducts]);
  const [searchInput, setSearchInput] = useState("");
  useEffect(() => {
    const t = setTimeout(() => {
      setSearch(searchInput);
      setPage(1);
    }, 300);
    return () => clearTimeout(t);
  }, [searchInput]);
  const toggleSelect = (id) => {
    setSelected((prev) => {
      const n = new Set(prev);
      n.has(id) ? n.delete(id) : n.add(id);
      return n;
    });
  };
  const toggleAll = () => {
    if (selected.size === products.length) setSelected(/* @__PURE__ */ new Set());
    else setSelected(new Set(products.map((p) => p.id)));
  };
  const bulkUpdate = async (field, value) => {
    await fetch("/api/admin/products", {
      method: "PUT",
      headers,
      body: JSON.stringify({ ids: [...selected], [field]: value })
    });
    setSelected(/* @__PURE__ */ new Set());
    loadProducts();
  };
  const toggleSneaker = async (product) => {
    await fetch("/api/admin/products", {
      method: "PUT",
      headers,
      body: JSON.stringify({ id: product.id, is_sneaker: !product.is_sneaker })
    });
    setProducts((prev) => prev.map((p) => p.id === product.id ? { ...p, is_sneaker: !p.is_sneaker } : p));
  };
  const handleSort = (col) => {
    if (sortBy === col) setSortDir((d) => d === "asc" ? "desc" : "asc");
    else {
      setSortBy(col);
      setSortDir("desc");
    }
    setPage(1);
  };
  const totalPages = Math.ceil(total / limit);
  const sortIcon = (col) => sortBy === col ? sortDir === "asc" ? " ↑" : " ↓" : "";
  return /* @__PURE__ */ jsxs(AdminLayout, { title: "Products", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 mb-6", children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          type: "text",
          placeholder: "Zoeken op naam of merk...",
          value: searchInput,
          onChange: (e) => setSearchInput(e.target.value),
          className: "bg-[#141414] border border-[#333] rounded-lg px-4 py-2 text-sm text-[#F5F5F5] focus:outline-none focus:border-[#00FF6A] flex-1 min-w-[200px] max-w-md"
        }
      ),
      /* @__PURE__ */ jsxs(
        "select",
        {
          value: brandFilter,
          onChange: (e) => {
            setBrandFilter(e.target.value);
            setPage(1);
          },
          className: "bg-[#141414] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#999]",
          children: [
            /* @__PURE__ */ jsx("option", { value: "", children: "Alle merken" }),
            brands.map((b) => /* @__PURE__ */ jsxs("option", { value: b.brand, children: [
              b.brand,
              " (",
              b.count,
              ")"
            ] }, b.brand))
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        "select",
        {
          value: sneakerFilter,
          onChange: (e) => {
            setSneakerFilter(e.target.value);
            setPage(1);
          },
          className: "bg-[#141414] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#999]",
          children: [
            /* @__PURE__ */ jsx("option", { value: "", children: "Sneaker: Alles" }),
            /* @__PURE__ */ jsx("option", { value: "true", children: "Alleen sneakers" }),
            /* @__PURE__ */ jsx("option", { value: "false", children: "Geen sneakers" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        "select",
        {
          value: cutoutFilter,
          onChange: (e) => {
            setCutoutFilter(e.target.value);
            setPage(1);
          },
          className: "bg-[#141414] border border-[#333] rounded-lg px-3 py-2 text-sm text-[#999]",
          children: [
            /* @__PURE__ */ jsx("option", { value: "", children: "Cutout: Alles" }),
            /* @__PURE__ */ jsx("option", { value: "true", children: "Met cutout" }),
            /* @__PURE__ */ jsx("option", { value: "false", children: "Zonder cutout" })
          ]
        }
      )
    ] }),
    selected.size > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-4 items-center", children: [
      /* @__PURE__ */ jsxs("span", { className: "text-sm text-[#999]", children: [
        selected.size,
        " geselecteerd"
      ] }),
      /* @__PURE__ */ jsx(
        "button",
        {
          onClick: () => bulkUpdate("is_sneaker", true),
          className: "text-xs bg-[#00FF6A]/10 border border-[#00FF6A]/20 px-3 py-1 rounded text-[#00FF6A] hover:bg-[#00FF6A]/20",
          children: "✓ Markeer als sneaker"
        }
      ),
      /* @__PURE__ */ jsx(
        "button",
        {
          onClick: () => bulkUpdate("is_sneaker", false),
          className: "text-xs bg-[#FF3B3B]/10 border border-[#FF3B3B]/20 px-3 py-1 rounded text-[#FF3B3B] hover:bg-[#FF3B3B]/20",
          children: "✗ Niet-sneaker"
        }
      ),
      /* @__PURE__ */ jsx("button", { onClick: () => setSelected(/* @__PURE__ */ new Set()), className: "text-xs text-[#666] hover:text-[#999] ml-2", children: "Deselecteer" })
    ] }),
    loading ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Laden..." }) : products.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: "Geen producten gevonden" })
    ] }) : /* @__PURE__ */ jsx("div", { className: "bg-[#141414] border border-[#333] rounded-xl overflow-hidden overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-[#333] text-[#999] text-left", children: [
        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 w-8", children: /* @__PURE__ */ jsx("input", { type: "checkbox", onChange: toggleAll, checked: selected.size === products.length && products.length > 0, className: "accent-[#00FF6A]" }) }),
        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 font-medium", children: "Product" }),
        /* @__PURE__ */ jsxs("th", { className: "px-4 py-3 font-medium cursor-pointer hover:text-[#F5F5F5]", onClick: () => handleSort("name"), children: [
          "Merk",
          sortIcon("name")
        ] }),
        /* @__PURE__ */ jsxs("th", { className: "px-4 py-3 font-medium cursor-pointer hover:text-[#F5F5F5]", onClick: () => handleSort("price"), children: [
          "Laagste prijs",
          sortIcon("price")
        ] }),
        /* @__PURE__ */ jsxs("th", { className: "px-4 py-3 font-medium cursor-pointer hover:text-[#F5F5F5]", onClick: () => handleSort("offers"), children: [
          "Aanbiedingen",
          sortIcon("offers")
        ] }),
        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 font-medium", children: "Sneaker" }),
        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 font-medium", children: "Cutout" })
      ] }) }),
      /* @__PURE__ */ jsx("tbody", { children: products.map((p) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-[#222] hover:bg-[#1A1A1A] transition-colors", children: [
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selected.has(p.id), onChange: () => toggleSelect(p.id), className: "accent-[#00FF6A]" }) }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
          p.image_url ? /* @__PURE__ */ jsx("img", { src: p.image_url, alt: "", className: "w-10 h-10 rounded-lg object-cover bg-[#1A1A1A]", loading: "lazy" }) : /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-[#1A1A1A] rounded-lg flex items-center justify-center text-[#666] text-xs", children: "?" }),
          /* @__PURE__ */ jsx("span", { className: "text-[#F5F5F5] font-medium truncate max-w-[250px]", children: p.name })
        ] }) }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-[#999]", children: p.brand || "-" }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-[#F5F5F5]", children: Number(p.lowest_price) > 0 ? `€${Number(p.lowest_price).toFixed(2)}` : "-" }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-[#999]", children: p.offer_count }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => toggleSneaker(p),
            className: `text-xs px-2 py-1 rounded transition-colors ${p.is_sneaker ? "bg-[#00FF6A]/10 text-[#00FF6A]" : "bg-[#333] text-[#666] hover:text-[#999]"}`,
            children: p.is_sneaker ? "👟 Ja" : "Nee"
          }
        ) }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: p.cutout_image_url ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[#00FF6A]", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-[#666]", children: "✗" }) })
      ] }, p.id)) })
    ] }) }),
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-4 text-sm text-[#999]", children: [
      /* @__PURE__ */ jsxs("span", { children: [
        total.toLocaleString(),
        " producten"
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => setPage(Math.max(1, page - 1)),
            disabled: page <= 1,
            className: "px-3 py-1 bg-[#141414] border border-[#333] rounded hover:bg-[#1A1A1A] disabled:opacity-30",
            children: "← Vorige"
          }
        ),
        /* @__PURE__ */ jsxs("span", { className: "px-3 py-1", children: [
          "Pagina ",
          page,
          " / ",
          totalPages || 1
        ] }),
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => setPage(Math.min(totalPages, page + 1)),
            disabled: page >= totalPages,
            className: "px-3 py-1 bg-[#141414] border border-[#333] rounded hover:bg-[#1A1A1A] disabled:opacity-30",
            children: "Volgende →"
          }
        )
      ] })
    ] })
  ] });
}
function ProductTablePage() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(ProductTableContent, {}) }) });
}

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

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

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

const page = () => _page;

export { page };
