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';
import { ResponsiveContainer, BarChart, XAxis, YAxis, Tooltip, Bar, PieChart, Pie, Cell } from 'recharts';
export { renderers } from '../../renderers.mjs';

const COLORS = ["#00FF6A", "#00CC55", "#FF6B35", "#FFD700", "#FF3B3B", "#6366F1", "#06B6D4"];
function StatCard({ label, value }) {
  return /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-4 text-center", children: [
    /* @__PURE__ */ jsx("div", { className: "text-xl font-bold text-[#F5F5F5]", children: value }),
    /* @__PURE__ */ jsx("div", { className: "text-xs text-[#999] mt-1", children: label })
  ] });
}
function AnalyticsContent() {
  const { token } = useAuth();
  const [days, setDays] = useState(30);
  const [tab, setTab] = useState("clicks");
  const [timeseries, setTimeseries] = useState([]);
  const [overview, setOverview] = useState(null);
  const [topProducts, setTopProducts] = useState([]);
  const [sources, setSources] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const h = { Authorization: `Bearer ${token}` };
    setLoading(true);
    Promise.all([
      fetch(`/api/admin/analytics?type=timeseries&days=${days}`, { headers: h }).then((r) => r.json()),
      fetch(`/api/admin/analytics?type=overview&days=${days}`, { headers: h }).then((r) => r.json()),
      fetch(`/api/admin/analytics?type=top-products&days=${days}`, { headers: h }).then((r) => r.json()),
      fetch(`/api/admin/analytics?type=sources&days=${days}`, { headers: h }).then((r) => r.json())
    ]).then(([ts, ov, tp, src]) => {
      setTimeseries(ts.data || []);
      setOverview(ov);
      setTopProducts(tp.data || []);
      setSources(src.data || []);
    }).catch(() => {
    }).finally(() => setLoading(false));
  }, [token, days]);
  const hasData = timeseries.length > 0;
  if (loading) return /* @__PURE__ */ jsx(AdminLayout, { title: "Analytics", children: /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Laden..." }) });
  if (!hasData) {
    return /* @__PURE__ */ jsx(AdminLayout, { title: "Analytics", children: /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-12 text-center", children: [
      /* @__PURE__ */ jsx("div", { className: "text-4xl mb-4", children: "📊" }),
      /* @__PURE__ */ jsx("div", { className: "text-[#999] text-lg mb-2", children: "Begin met adverteren om analytics te zien" }),
      /* @__PURE__ */ jsx("div", { className: "text-[#666] text-sm", children: "Zodra er clicks en conversies binnenkomen verschijnt hier je data" })
    ] }) });
  }
  const totalClicks = Number(overview?.total_clicks || 0);
  const totalConversions = Number(overview?.total_conversions || 0);
  const totalRevenue = Number(overview?.total_revenue || 0);
  const totalPageviews = Number(overview?.total_pageviews || 0);
  const ctr = overview?.ctr || "0";
  const totalWatchlist = Number(overview?.total_watchlist || 0);
  const activePriceWatches = Number(overview?.active_price_watches || 0);
  const sourceData = sources.map((s) => ({
    name: s.source || "Unknown",
    value: Number(s.total_clicks || 0)
  })).filter((s) => s.value > 0);
  return /* @__PURE__ */ jsxs(AdminLayout, { title: "Analytics", children: [
    /* @__PURE__ */ jsx("div", { className: "flex gap-2 mb-6", children: [7, 14, 30, 90].map((d) => /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => setDays(d),
        className: `px-3 py-1.5 rounded-lg text-sm transition-colors ${days === d ? "bg-[#00FF6A]/10 text-[#00FF6A] border border-[#00FF6A]/30" : "bg-[#141414] border border-[#333] text-[#999] hover:text-[#F5F5F5]"}`,
        children: [
          d,
          "d"
        ]
      },
      d
    )) }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3 mb-4", children: [
      /* @__PURE__ */ jsx(StatCard, { label: "Pageviews", value: totalPageviews.toLocaleString() }),
      /* @__PURE__ */ jsx(StatCard, { label: "Clicks", value: totalClicks.toLocaleString() }),
      /* @__PURE__ */ jsx(StatCard, { label: "Conversions", value: totalConversions.toLocaleString() }),
      /* @__PURE__ */ jsx(StatCard, { label: "Revenue", value: `€${totalRevenue.toFixed(2)}` })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3 mb-8", children: [
      /* @__PURE__ */ jsx(StatCard, { label: "CTR (clicks/views)", value: `${ctr}%` }),
      /* @__PURE__ */ jsx(StatCard, { label: "Watchlist adds", value: totalWatchlist.toLocaleString() }),
      /* @__PURE__ */ jsx(StatCard, { label: "Actieve price watches", value: activePriceWatches.toLocaleString() }),
      /* @__PURE__ */ jsx(StatCard, { label: "Conv. rate", value: totalClicks > 0 ? `${(totalConversions / totalClicks * 100).toFixed(2)}%` : "0%" })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "flex gap-2 mb-4", children: ["clicks", "revenue", "conversions"].map((t) => /* @__PURE__ */ jsx(
      "button",
      {
        onClick: () => setTab(t),
        className: `px-3 py-1.5 rounded-lg text-sm capitalize ${tab === t ? "bg-[#00FF6A]/10 text-[#00FF6A]" : "text-[#999] hover:text-[#F5F5F5]"}`,
        children: t
      },
      t
    )) }),
    /* @__PURE__ */ jsx("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-5 mb-8", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 300, children: /* @__PURE__ */ jsxs(BarChart, { data: timeseries, children: [
      /* @__PURE__ */ jsx(XAxis, { dataKey: "date", tick: { fill: "#666", fontSize: 10 }, tickFormatter: (v) => v.slice(5) }),
      /* @__PURE__ */ jsx(YAxis, { tick: { fill: "#666", fontSize: 10 } }),
      /* @__PURE__ */ jsx(Tooltip, { contentStyle: { background: "#1A1A1A", border: "1px solid #333", borderRadius: 8, color: "#F5F5F5" } }),
      /* @__PURE__ */ jsx(Bar, { dataKey: tab, fill: "#00FF6A", radius: [2, 2, 0, 0] })
    ] }) }) }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
      topProducts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-5", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[#999] mb-4", children: "Top Producten" }),
        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: topProducts.slice(0, 10).map((p, i) => {
          const clicks = Number(p.total_clicks);
          const revenue = Number(p.total_revenue || 0);
          const displayName = p.product_name || p.product_id;
          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
              /* @__PURE__ */ jsxs("span", { className: "text-xs text-[#666] w-4 shrink-0", children: [
                i + 1,
                "."
              ] }),
              p.slug ? /* @__PURE__ */ jsx("a", { href: `/sneaker/${p.slug}`, className: "text-sm text-[#F5F5F5] truncate max-w-[200px] hover:text-[#00FF6A] transition-colors", title: displayName, children: displayName }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-[#F5F5F5] truncate max-w-[200px]", children: displayName })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-xs shrink-0", children: [
              /* @__PURE__ */ jsxs("span", { className: "text-[#666]", children: [
                p.pageviews,
                " views"
              ] }),
              /* @__PURE__ */ jsxs("span", { className: "text-[#999]", children: [
                clicks.toLocaleString(),
                " clicks"
              ] }),
              /* @__PURE__ */ jsxs("span", { className: "text-[#06B6D4]", children: [
                p.ctr,
                "% CTR"
              ] }),
              /* @__PURE__ */ jsxs("span", { className: "text-[#00FF6A]", children: [
                "€",
                revenue.toFixed(2)
              ] })
            ] })
          ] }, i);
        }) })
      ] }),
      sourceData.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-5", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[#999] mb-4", children: "Traffic Sources" }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
          /* @__PURE__ */ jsx("div", { className: "w-32 h-32", children: /* @__PURE__ */ jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsx(Pie, { data: sourceData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: 25, outerRadius: 50, children: sourceData.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: COLORS[i % COLORS.length] }, i)) }) }) }) }),
          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: sourceData.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
            /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full", style: { background: COLORS[i % COLORS.length] } }),
            /* @__PURE__ */ jsx("span", { className: "text-[#999]", children: s.name }),
            /* @__PURE__ */ jsx("span", { className: "text-[#F5F5F5]", children: s.value })
          ] }, i)) })
        ] })
      ] })
    ] })
  ] });
}
function AnalyticsPage() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(AnalyticsContent, {}) }) });
}

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

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

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

const page = () => _page;

export { page };
