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

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 EmailStatsContent() {
  const { token } = useAuth();
  const [overview, setOverview] = useState(null);
  const [recent, setRecent] = useState([]);
  const [mostWatched, setMostWatched] = useState([]);
  const [tab, setTab] = useState("overview");
  const [loading, setLoading] = useState(true);
  const headers = { Authorization: `Bearer ${token}` };
  useEffect(() => {
    Promise.all([
      fetch("/api/admin/emails?view=overview", { headers }).then((r) => r.json()),
      fetch("/api/admin/emails?view=recent", { headers }).then((r) => r.json()),
      fetch("/api/admin/emails?view=most-watched", { headers }).then((r) => r.json())
    ]).then(([ov, rec, mw]) => {
      setOverview(ov);
      setRecent(rec.data || []);
      setMostWatched(mw.data || []);
    }).finally(() => setLoading(false));
  }, []);
  if (loading) return /* @__PURE__ */ jsx(AdminLayout, { title: "Email & Watchlist", 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" }) }) });
  const emails = overview?.emails || {};
  const wl = overview?.watchlist || {};
  return /* @__PURE__ */ jsxs(AdminLayout, { title: "Email & Watchlist", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex gap-4 mb-6 border-b border-[#333] pb-3", children: [
      ["overview", "recent", "watchlist"].map((t) => /* @__PURE__ */ jsx(
        "button",
        {
          onClick: () => setTab(t),
          className: `text-sm pb-1 ${tab === t ? "text-[#00FF6A] border-b-2 border-[#00FF6A]" : "text-[#999] hover:text-white"}`,
          children: t === "overview" ? "Overzicht" : t === "recent" ? "Recent" : "Watchlist"
        },
        t
      )),
      /* @__PURE__ */ jsx("a", { href: "/admin/emails/editor", className: "ml-auto text-sm text-[#00FF6A] hover:underline", children: "✏️ Email Editor" })
    ] }),
    tab === "overview" && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx("h3", { className: "text-[#999] text-sm font-medium mb-3 uppercase tracking-wider", children: "Email Stats" }),
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4 mb-8", children: [
        /* @__PURE__ */ jsx(StatCard, { label: "Totaal Verstuurd", value: emails.total_sent || 0, icon: "📧" }),
        /* @__PURE__ */ jsx(StatCard, { label: "Unieke Gebruikers", value: emails.unique_users || 0, icon: "👤" }),
        /* @__PURE__ */ jsx(StatCard, { label: "Prijsalerts", value: emails.price_alerts || 0, icon: "🔔" }),
        /* @__PURE__ */ jsx(StatCard, { label: "Weekly Digests", value: emails.weekly_digests || 0, icon: "📰" }),
        /* @__PURE__ */ jsx(StatCard, { label: "Verificaties", value: emails.verifications || 0, icon: "✅" })
      ] }),
      /* @__PURE__ */ jsx("h3", { className: "text-[#999] text-sm font-medium mb-3 uppercase tracking-wider", children: "Watchlist Stats" }),
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: [
        /* @__PURE__ */ jsx(StatCard, { label: "Totaal Items", value: wl.total_items || 0, icon: "👀" }),
        /* @__PURE__ */ jsx(StatCard, { label: "Unieke Gebruikers", value: wl.unique_users || 0, icon: "👤" }),
        /* @__PURE__ */ jsx(StatCard, { label: "Gem. per Gebruiker", value: wl.avg_per_user || 0, icon: "📊" })
      ] })
    ] }),
    tab === "recent" && /* @__PURE__ */ jsx("div", { className: "bg-[#141414] border border-[#333] rounded-xl overflow-hidden", children: recent.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-20", children: "Geen emails verstuurd" }) : /* @__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: "Datum" }),
        /* @__PURE__ */ jsx("th", { className: "p-3", children: "Type" }),
        /* @__PURE__ */ jsx("th", { className: "p-3", children: "Email" }),
        /* @__PURE__ */ jsx("th", { className: "p-3", children: "Product" }),
        /* @__PURE__ */ jsx("th", { className: "p-3", children: "Resend ID" })
      ] }) }),
      /* @__PURE__ */ jsx("tbody", { children: recent.map((r, i) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-[#222]", children: [
        /* @__PURE__ */ jsx("td", { className: "p-3 text-[#999]", children: new Date(r.created_at).toLocaleString("nl-NL") }),
        /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx("span", { className: "bg-[#1A1A1A] text-[#F5F5F5] px-2 py-0.5 rounded text-xs", children: r.email_type }) }),
        /* @__PURE__ */ jsx("td", { className: "p-3 text-[#F5F5F5]", children: r.email || "-" }),
        /* @__PURE__ */ jsx("td", { className: "p-3 text-[#999] max-w-[200px] truncate", children: r.product_name || "-" }),
        /* @__PURE__ */ jsx("td", { className: "p-3 text-[#666] text-xs font-mono", children: r.resend_id || "-" })
      ] }, i)) })
    ] }) }),
    tab === "watchlist" && /* @__PURE__ */ jsxs("div", { className: "bg-[#141414] border border-[#333] rounded-xl overflow-hidden", children: [
      /* @__PURE__ */ jsx("h3", { className: "text-[#F5F5F5] font-semibold p-4 border-b border-[#222]", children: "Meest Gevolgde Producten" }),
      mostWatched.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-[#666] text-center py-20", children: "Geen watchlist data" }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-[#222]", children: mostWatched.map((p, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-4", children: [
        /* @__PURE__ */ jsx("span", { className: "text-[#666] w-6 text-right", children: i + 1 }),
        p.image_url && /* @__PURE__ */ jsx("img", { src: p.image_url, alt: "", className: "w-10 h-10 rounded bg-white object-contain" }),
        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
          /* @__PURE__ */ jsx("div", { className: "text-[#F5F5F5] text-sm truncate", children: p.name }),
          /* @__PURE__ */ jsx("div", { className: "text-xs text-[#666]", children: p.brand })
        ] }),
        /* @__PURE__ */ jsxs("span", { className: "text-[#00FF6A] font-medium", children: [
          p.watchers,
          " 👀"
        ] })
      ] }, i)) })
    ] })
  ] });
}
function EmailStats() {
  return /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(AuthGuard, { children: /* @__PURE__ */ jsx(EmailStatsContent, {}) }) });
}

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

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

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

const page = () => _page;

export { page };
