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

function PerformanceContent() {
  const { token } = useAuth();
  const [days, setDays] = useState(30);
  const [brand, setBrand] = useState("");
  const [sort, setSort] = useState("score");
  const [order, setOrder] = useState("desc");
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const headers = { Authorization: `Bearer ${token}` };
  useEffect(() => {
    setLoading(true);
    const params = new URLSearchParams({ days: String(days), sort, order, page: String(page), limit: "50" });
    if (brand) params.set("brand", brand);
    fetch(`/api/admin/performance?${params}`, { headers }).then((r) => r.json()).then((res) => {
      setData(res.data || []);
      setTotal(res.total || 0);
    }).finally(() => setLoading(false));
  }, [days, brand, sort, order, page]);
  const toggleSort = (col) => {
    if (sort === col) setOrder(order === "desc" ? "asc" : "desc");
    else {
      setSort(col);
      setOrder("desc");
    }
  };
  const exportCSV = () => {
    const cols = ["name", "brand", "pageviews", "clicks", "watchlist_adds", "active_alerts", "ctr", "conversions", "revenue", "score"];
    const csv = [cols.join(","), ...data.map((r) => cols.map((c) => `"${r[c] ?? ""}"`).join(","))].join("\n");
    const blob = new Blob([csv], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `performance-${days}d.csv`;
    a.click();
  };
  const SortHeader = ({ col, label }) => /* @__PURE__ */ jsxs("th", { className: "pb-2 cursor-pointer hover:text-[#00FF6A] select-none", onClick: () => toggleSort(col), children: [
    label,
    " ",
    sort === col && (order === "desc" ? "↓" : "↑")
  ] });
  return /* @__PURE__ */ jsxs(AdminLayout, { title: "Product Performance", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 mb-6 items-center", children: [
      [7, 30, 90].map((d) => /* @__PURE__ */ jsxs(
        "button",
        {
          onClick: () => {
            setDays(d);
            setPage(1);
          },
          className: `px-4 py-1.5 rounded-lg text-sm ${days === d ? "bg-[#00FF6A] text-black font-medium" : "bg-[#1A1A1A] text-[#999] hover:text-white"}`,
          children: [
            d,
            "d"
          ]
        },
        d
      )),
      /* @__PURE__ */ jsx(
        "input",
        {
          type: "text",
          placeholder: "Filter merk...",
          value: brand,
          onChange: (e) => {
            setBrand(e.target.value);
            setPage(1);
          },
          className: "bg-[#1A1A1A] border border-[#333] rounded-lg px-3 py-1.5 text-sm text-[#F5F5F5] w-48"
        }
      ),
      /* @__PURE__ */ jsx("button", { onClick: exportCSV, className: "ml-auto px-4 py-1.5 rounded-lg text-sm bg-[#1A1A1A] text-[#999] hover:text-white border border-[#333]", children: "📥 Export CSV" })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl overflow-hidden", children: [
      loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-[#00FF6A] border-t-transparent rounded-full animate-spin" }) }) : data.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-20", children: "Geen producten gevonden" }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
        /* @__PURE__ */ jsx("thead", { className: "text-[#999] text-left bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs("tr", { children: [
          /* @__PURE__ */ jsx("th", { className: "p-3", children: "Product" }),
          /* @__PURE__ */ jsx(SortHeader, { col: "pageviews", label: "Views" }),
          /* @__PURE__ */ jsx(SortHeader, { col: "clicks", label: "Clicks" }),
          /* @__PURE__ */ jsx(SortHeader, { col: "watchlist", label: "Watchlist" }),
          /* @__PURE__ */ jsx("th", { className: "pb-2", children: "Alerts" }),
          /* @__PURE__ */ jsx(SortHeader, { col: "ctr", label: "CTR" }),
          /* @__PURE__ */ jsx(SortHeader, { col: "conversions", label: "Conv." }),
          /* @__PURE__ */ jsx(SortHeader, { col: "revenue", label: "Revenue" }),
          /* @__PURE__ */ jsx(SortHeader, { col: "score", label: "Score" })
        ] }) }),
        /* @__PURE__ */ jsx("tbody", { children: data.map((r, i) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-[#222] hover:bg-[#1A1A1A]", children: [
          /* @__PURE__ */ jsxs("td", { className: "p-3", children: [
            /* @__PURE__ */ jsx("div", { className: "text-[#F5F5F5] max-w-[250px] truncate", children: r.name }),
            /* @__PURE__ */ jsx("div", { className: "text-xs text-[#666]", children: r.brand })
          ] }),
          /* @__PURE__ */ jsx("td", { className: "p-3 text-[#999]", children: r.pageviews }),
          /* @__PURE__ */ jsx("td", { className: "p-3 text-[#999]", children: r.clicks }),
          /* @__PURE__ */ jsx("td", { className: "p-3 text-[#999]", children: r.watchlist_adds }),
          /* @__PURE__ */ jsx("td", { className: "p-3 text-[#999]", children: r.active_alerts }),
          /* @__PURE__ */ jsxs("td", { className: "p-3 text-[#999]", children: [
            r.ctr,
            "%"
          ] }),
          /* @__PURE__ */ jsx("td", { className: "p-3 text-[#999]", children: r.conversions }),
          /* @__PURE__ */ jsxs("td", { className: "p-3 text-[#00FF6A]", children: [
            "€",
            Number(r.revenue).toFixed(2)
          ] }),
          /* @__PURE__ */ jsx("td", { className: "p-3 font-medium text-[#F5F5F5]", children: Math.round(Number(r.score)) })
        ] }, i)) })
      ] }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[#222] text-sm text-[#999]", children: [
        /* @__PURE__ */ jsxs("span", { children: [
          total,
          " producten"
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
          /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => setPage((p) => Math.max(1, p - 1)),
              disabled: page === 1,
              className: "px-3 py-1 rounded bg-[#1A1A1A] disabled:opacity-30",
              children: "←"
            }
          ),
          /* @__PURE__ */ jsxs("span", { className: "px-3 py-1", children: [
            "Pagina ",
            page
          ] }),
          /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => setPage((p) => p + 1),
              disabled: data.length < 50,
              className: "px-3 py-1 rounded bg-[#1A1A1A] disabled:opacity-30",
              children: "→"
            }
          )
        ] })
      ] })
    ] })
  ] });
}
function PerformanceDashboard() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(PerformanceContent, {}) }) });
}

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

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

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

const page = () => _page;

export { page };
