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, LineChart, Line } from 'recharts';
export { renderers } from '../renderers.mjs';

function StatCard({ label, value, icon, sub }) {
  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 }),
    sub && /* @__PURE__ */ jsx("div", { className: "text-xs text-[#666] mt-1", children: sub })
  ] });
}
function DashboardContent() {
  const { token } = useAuth();
  const [stats, setStats] = useState(null);
  const [timeseries, setTimeseries] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const headers = { Authorization: `Bearer ${token}` };
    Promise.all([
      fetch("/api/admin/stats", { headers }).then((r) => r.json()),
      fetch("/api/admin/analytics?type=timeseries&days=30", { headers }).then((r) => r.json())
    ]).then(([s, ts]) => {
      setStats(s);
      setTimeseries(ts.data || []);
    }).catch(() => {
    }).finally(() => setLoading(false));
  }, [token]);
  if (loading) {
    return /* @__PURE__ */ jsx(AdminLayout, { title: "Dashboard", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-64 text-[#666]", children: "Laden..." }) });
  }
  const formatSync = (iso) => {
    if (!iso) return "Nooit";
    const d = new Date(iso);
    const mins = Math.floor((Date.now() - d.getTime()) / 6e4);
    if (mins < 1) return "Zojuist";
    if (mins < 60) return `${mins} min geleden`;
    if (mins < 1440) return `${Math.floor(mins / 60)} uur geleden`;
    return `${Math.floor(mins / 1440)} dagen geleden`;
  };
  return /* @__PURE__ */ jsxs(AdminLayout, { title: "Dashboard", children: [
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-8", children: [
      /* @__PURE__ */ jsx(StatCard, { label: "Sneakers", value: Number(stats?.total_sneakers || 0).toLocaleString(), icon: "👟" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Totaal producten", value: Number(stats?.total_products || 0).toLocaleString(), icon: "📦" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Actieve feeds", value: Number(stats?.active_feeds || 0), icon: "📡" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Clicks vandaag", value: Number(stats?.clicks_today || 0).toLocaleString(), icon: "🖱️" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Revenue (maand)", value: `€${Number(stats?.revenue_month || 0).toFixed(2)}`, icon: "💰" }),
      /* @__PURE__ */ jsx(StatCard, { label: "Laatste sync", value: formatSync(stats?.last_sync_at || null), icon: "🔄" })
    ] }),
    timeseries.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 analytics data" }),
      /* @__PURE__ */ jsx("div", { className: "text-[#666] text-xs mt-1", children: "Data verschijnt hier zodra er clicks en conversies binnenkomen" })
    ] }) : /* @__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-5", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[#999] mb-4", children: "Clicks (30 dagen)" }),
        /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 200, 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 }, labelStyle: { color: "#999" } }),
          /* @__PURE__ */ jsx(Bar, { dataKey: "clicks", fill: "#00FF6A", radius: [2, 2, 0, 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: "Revenue (30 dagen)" }),
        /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 200, children: /* @__PURE__ */ jsxs(LineChart, { 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 }, labelStyle: { color: "#999" } }),
          /* @__PURE__ */ jsx(Line, { type: "monotone", dataKey: "revenue", stroke: "#00FF6A", strokeWidth: 2, dot: false })
        ] }) })
      ] })
    ] })
  ] });
}
function Dashboard() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(DashboardContent, {}) }) });
}

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

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

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

const page = () => _page;

export { page };
