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

const COLORS = ["#00FF6A", "#00CC55", "#FF6B35", "#FFD700", "#FF3B3B", "#6366F1", "#06B6D4"];
function StatCard({ label, value, icon }) {
  return /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-5", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
      /* @__PURE__ */ jsx("span", { className: "text-[#999] text-sm", children: label }),
      /* @__PURE__ */ jsx("span", { className: "text-lg", children: icon })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-[#F5F5F5]", children: value })
  ] });
}
function fmt(n) {
  return `€${Number(n).toFixed(2)}`;
}
function RevenueContent() {
  const { token } = useAuth();
  const [days, setDays] = useState(30);
  const [overview, setOverview] = useState(null);
  const [timeseries, setTimeseries] = useState([]);
  const [byShop, setByShop] = useState([]);
  const [byProduct, setByProduct] = useState([]);
  const [bySource, setBySource] = useState([]);
  const [byNetwork, setByNetwork] = useState([]);
  const [loading, setLoading] = useState(true);
  const headers = { Authorization: `Bearer ${token}` };
  useEffect(() => {
    setLoading(true);
    Promise.all([
      fetch(`/api/admin/revenue?view=overview`, { headers }).then((r) => r.json()),
      fetch(`/api/admin/revenue?view=timeseries&days=${days}`, { headers }).then((r) => r.json()),
      fetch(`/api/admin/revenue?view=by-shop&days=${days}`, { headers }).then((r) => r.json()),
      fetch(`/api/admin/revenue?view=by-product&days=${days}`, { headers }).then((r) => r.json()),
      fetch(`/api/admin/revenue?view=by-source&days=${days}`, { headers }).then((r) => r.json()),
      fetch(`/api/admin/revenue?view=by-network&days=${days}`, { headers }).then((r) => r.json())
    ]).then(([ov, ts, shop, prod, src, net]) => {
      setOverview(ov);
      setTimeseries(ts.data || []);
      setByShop(shop.data || []);
      setByProduct(prod.data || []);
      setBySource(src.data || []);
      setByNetwork(net.data || []);
    }).finally(() => setLoading(false));
  }, [days]);
  if (loading) return /* @__PURE__ */ jsx(AdminLayout, { title: "Revenue", children: /* @__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" }) }) });
  return /* @__PURE__ */ jsxs(AdminLayout, { title: "Revenue", children: [
    /* @__PURE__ */ jsx("div", { className: "flex gap-2 mb-6", children: [30, 90].map((d) => /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => setDays(d),
        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,
          " dagen"
        ]
      },
      d
    )) }),
    overview && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8", children: [
      /* @__PURE__ */ jsx(StatCard, { label: "Totale Revenue", value: fmt(overview.total_revenue), icon: "💰" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Revenue (maand)", value: fmt(overview.revenue_month), icon: "📅" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Revenue (vandaag)", value: fmt(overview.revenue_today), icon: "📈" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Gem. Commissie", value: fmt(overview.avg_commission), icon: "💵" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Conversies", value: overview.total_conversions, icon: "🎯" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Pending", value: fmt(overview.pending_revenue), icon: "⏳" })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-6 mb-6", children: [
      /* @__PURE__ */ jsx("h3", { className: "text-[#F5F5F5] font-semibold mb-4", children: "Revenue & Conversies" }),
      timeseries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Geen data beschikbaar" }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 300, children: /* @__PURE__ */ jsxs(ComposedChart, { data: timeseries, children: [
        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#333" }),
        /* @__PURE__ */ jsx(XAxis, { dataKey: "date", tick: { fill: "#999", fontSize: 12 } }),
        /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", tick: { fill: "#999", fontSize: 12 } }),
        /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", tick: { fill: "#999", fontSize: 12 } }),
        /* @__PURE__ */ jsx(Tooltip, { contentStyle: { background: "#1A1A1A", border: "1px solid #333", borderRadius: 8 } }),
        /* @__PURE__ */ jsx(Line, { yAxisId: "left", type: "monotone", dataKey: "revenue", stroke: "#00FF6A", strokeWidth: 2, dot: false, name: "Revenue (€)" }),
        /* @__PURE__ */ jsx(Bar, { yAxisId: "right", dataKey: "conversions", fill: "#00FF6A", opacity: 0.3, name: "Conversies" })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6", children: [
      /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-6", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-[#F5F5F5] font-semibold mb-4", children: "Revenue per Shop" }),
        byShop.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Geen data" }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 300, children: /* @__PURE__ */ jsxs(BarChart, { data: byShop, layout: "vertical", children: [
          /* @__PURE__ */ jsx(XAxis, { type: "number", tick: { fill: "#999", fontSize: 12 } }),
          /* @__PURE__ */ jsx(YAxis, { type: "category", dataKey: "shop", tick: { fill: "#999", fontSize: 11 }, width: 120 }),
          /* @__PURE__ */ jsx(Tooltip, { contentStyle: { background: "#1A1A1A", border: "1px solid #333", borderRadius: 8 } }),
          /* @__PURE__ */ jsx(Bar, { dataKey: "revenue", fill: "#00FF6A", radius: [0, 4, 4, 0] })
        ] }) })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-6", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-[#F5F5F5] font-semibold mb-4", children: "Revenue per Bron" }),
        bySource.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Geen data" }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 300, children: /* @__PURE__ */ jsxs(PieChart, { children: [
          /* @__PURE__ */ jsx(Pie, { data: bySource, dataKey: "revenue", nameKey: "source", cx: "50%", cy: "50%", outerRadius: 100, label: ({ source, percent }) => `${source} (${(percent * 100).toFixed(0)}%)`, children: bySource.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: COLORS[i % COLORS.length] }, i)) }),
          /* @__PURE__ */ jsx(Tooltip, { contentStyle: { background: "#1A1A1A", border: "1px solid #333", borderRadius: 8 } })
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-6", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-[#F5F5F5] font-semibold mb-4", children: "Top 20 Producten" }),
        byProduct.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Geen data" }) : /* @__PURE__ */ jsx("div", { className: "overflow-auto max-h-[400px]", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ jsx("thead", { className: "text-[#999] text-left sticky top-0 bg-[#141414]", children: /* @__PURE__ */ jsxs("tr", { children: [
            /* @__PURE__ */ jsx("th", { className: "pb-2", children: "Product" }),
            /* @__PURE__ */ jsx("th", { className: "pb-2", children: "Clicks" }),
            /* @__PURE__ */ jsx("th", { className: "pb-2", children: "Conv." }),
            /* @__PURE__ */ jsx("th", { className: "pb-2", children: "Revenue" }),
            /* @__PURE__ */ jsx("th", { className: "pb-2", children: "CR%" })
          ] }) }),
          /* @__PURE__ */ jsx("tbody", { children: byProduct.map((p, i) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-[#222]", children: [
            /* @__PURE__ */ jsx("td", { className: "py-2 text-[#F5F5F5] max-w-[200px] truncate", children: p.product }),
            /* @__PURE__ */ jsx("td", { className: "py-2 text-[#999]", children: p.clicks }),
            /* @__PURE__ */ jsx("td", { className: "py-2 text-[#999]", children: p.conversions }),
            /* @__PURE__ */ jsx("td", { className: "py-2 text-[#00FF6A]", children: fmt(p.revenue) }),
            /* @__PURE__ */ jsxs("td", { className: "py-2 text-[#999]", children: [
              p.cr,
              "%"
            ] })
          ] }, i)) })
        ] }) })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl p-6", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-[#F5F5F5] font-semibold mb-4", children: "Network Breakdown" }),
        byNetwork.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-12", children: "Geen data" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 200, children: /* @__PURE__ */ jsxs(PieChart, { children: [
            /* @__PURE__ */ jsx(Pie, { data: byNetwork, dataKey: "revenue", nameKey: "network", cx: "50%", cy: "50%", outerRadius: 80, label: ({ network }) => network, children: byNetwork.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: COLORS[i % COLORS.length] }, i)) }),
            /* @__PURE__ */ jsx(Tooltip, { contentStyle: { background: "#1A1A1A", border: "1px solid #333", borderRadius: 8 } })
          ] }) }),
          /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: byNetwork.map((n, i) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
            /* @__PURE__ */ jsx("span", { className: "text-[#F5F5F5]", children: n.network || "Unknown" }),
            /* @__PURE__ */ jsxs("span", { className: "text-[#00FF6A]", children: [
              fmt(n.revenue),
              " (",
              n.conversions,
              " conv.)"
            ] })
          ] }, i)) })
        ] })
      ] })
    ] })
  ] });
}
function RevenueDashboard() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(RevenueContent, {}) }) });
}

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

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

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

const page = () => _page;

export { page };
