import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { useMemo as $, useState as d, useRef as te, useCallback as re, useEffect as le } from "react";
import { useNavigate as ne } from "react-router-dom";
import { useTranslation as j } from "react-i18next";
import { Monitor as S, Tablet as ie, Smartphone as ce, Loader2 as de, AlertTriangle as z, RefreshCw as E, Users as oe, UserCheck as H, UserX as me, UserPlus as he, Activity as I, Key as ue, Shield as ve, Globe as xe, TrendingUp as pe, Clock as ge, LayoutDashboard as Ne } from "lucide-react";
import { q as L, r as fe, s as be, v as p, P as ye, K as f } from "./index-CeEMms9z.js";
import { a as q } from "./applicationAnalyticsApi-BdESQcDo.js";
import { N as K, C as we, a as Ce } from "./chartConstants-Ds00dPgh.js";
import { ResponsiveContainer as Ae, BarChart as Se, CartesianGrid as ke, XAxis as De, YAxis as Re, Tooltip as Ue, Bar as Te, Cell as $e } from "recharts";
const F = {
  Desktop: /* @__PURE__ */ e(S, { className: "w-4 h-4" }),
  Mobile: /* @__PURE__ */ e(ce, { className: "w-4 h-4" }),
  Tablet: /* @__PURE__ */ e(ie, { className: "w-4 h-4" }),
  Unknown: /* @__PURE__ */ e(S, { className: "w-4 h-4 opacity-50" })
};
function ze({
  data: t,
  deviceTypeLabel: m,
  browserLabel: l
}) {
  const { t: g } = j("common");
  return !t || !t.byDeviceType?.length && !t.byBrowser?.length ? /* @__PURE__ */ e(K, { message: g("dashboard.noChartData"), hint: g("dashboard.noDataHint") }) : /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-[var(--text-secondary)] mb-3", children: m }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: t.byDeviceType.map((n, u) => /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 w-28", children: [
          F[n.deviceType] || F.Unknown,
          /* @__PURE__ */ e("span", { className: "text-sm", children: n.deviceType })
        ] }),
        /* @__PURE__ */ e("div", { className: "flex-1 h-6 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
          "div",
          {
            className: "h-full rounded-full transition-all duration-500",
            style: {
              width: `${n.percentage}%`,
              backgroundColor: L(u)
            }
          }
        ) }),
        /* @__PURE__ */ s("div", { className: "w-20 text-right", children: [
          /* @__PURE__ */ e("span", { className: "font-medium", children: n.count }),
          /* @__PURE__ */ s("span", { className: "text-xs text-[var(--text-secondary)] ml-1", children: [
            "(",
            n.percentage.toFixed(1),
            "%)"
          ] })
        ] })
      ] }, n.deviceType)) })
    ] }),
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-[var(--text-secondary)] mb-3", children: l }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: t.byBrowser.map((n, u) => {
        const c = Math.max(...t.byBrowser.map((r) => r.count), 1), b = n.count / c * 100;
        return /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-24 text-sm", children: n.browser }),
          /* @__PURE__ */ e("div", { className: "flex-1 h-6 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
            "div",
            {
              className: "h-full rounded-full transition-all duration-500",
              style: {
                width: `${b}%`,
                backgroundColor: L(u)
              }
            }
          ) }),
          /* @__PURE__ */ e("div", { className: "w-12 text-right font-medium", children: n.count })
        ] }, n.browser);
      }) })
    ] })
  ] });
}
function Le({
  data: t,
  sessionDistributionLabel: m,
  peakHoursLabel: l,
  dailyActiveUsersLabel: g,
  retentionRateLabel: n,
  sessionsSuffix: u
}) {
  const { t: c } = j("common"), b = $(() => fe(), []), r = $(
    () => (t?.peakUsageHours ?? []).map((i) => ({
      hour: `${i.hour}h`,
      accessCount: i.accessCount
    })),
    [t?.peakUsageHours]
  ), k = $(
    () => Math.max(...r.map((i) => i.accessCount), 1),
    [r]
  );
  if (!t)
    return /* @__PURE__ */ e(K, { message: c("dashboard.noChartData"), hint: c("dashboard.noDataHint") });
  const w = Math.max(...t.sessionDistribution.map((i) => i.count), 1);
  return /* @__PURE__ */ s("div", { className: "space-y-6", children: [
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-[var(--text-secondary)] mb-3", children: m }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: t.sessionDistribution.map((i, v) => {
        const D = i.count / w * 100;
        return /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-20 text-sm", children: i.label }),
          /* @__PURE__ */ e("div", { className: "flex-1 h-6 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
            "div",
            {
              className: "h-full rounded-full transition-all duration-500",
              style: {
                width: `${D}%`,
                backgroundColor: L(v)
              }
            }
          ) }),
          /* @__PURE__ */ s("div", { className: "w-16 text-right", children: [
            /* @__PURE__ */ e("span", { className: "font-medium", children: i.count }),
            /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-secondary)] ml-1", children: u })
          ] })
        ] }, i.bucket);
      }) })
    ] }),
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-[var(--text-secondary)] mb-3", children: l }),
      /* @__PURE__ */ e("div", { style: { width: "100%", height: 160 }, children: /* @__PURE__ */ e(Ae, { width: "100%", height: "100%", children: /* @__PURE__ */ s(Se, { data: r, margin: we, children: [
        /* @__PURE__ */ e(ke, { strokeDasharray: "3 3", stroke: "var(--border-color)" }),
        /* @__PURE__ */ e(
          De,
          {
            dataKey: "hour",
            stroke: "var(--text-secondary)",
            tick: { fill: "var(--text-secondary)", fontSize: 10 },
            interval: 2
          }
        ),
        /* @__PURE__ */ e(
          Re,
          {
            stroke: "var(--text-secondary)",
            tick: { fill: "var(--text-secondary)", fontSize: 11 },
            allowDecimals: !1
          }
        ),
        /* @__PURE__ */ e(Ue, { cursor: { fill: "transparent" }, content: /* @__PURE__ */ e(Ce, {}) }),
        /* @__PURE__ */ e(Te, { dataKey: "accessCount", radius: [4, 4, 0, 0], children: r.map((i, v) => /* @__PURE__ */ e(
          $e,
          {
            fill: be(b, i.accessCount / k)
          },
          `${i.hour}-${v}`
        )) })
      ] }) }) })
    ] }),
    /* @__PURE__ */ s("div", { className: "grid grid-cols-2 gap-4 pt-4 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
        /* @__PURE__ */ e("div", { className: "text-2xl font-bold", style: { color: "var(--dataviz-accent)" }, children: t.dailyActiveUsers }),
        /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)] mt-1", children: g })
      ] }),
      /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
        /* @__PURE__ */ s("div", { className: "text-2xl font-bold", style: { color: "var(--dataviz-trend-up)" }, children: [
          (t.retentionRate * 100).toFixed(1),
          "%"
        ] }),
        /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)] mt-1", children: n })
      ] })
    ] })
  ] });
}
function Ve() {
  const { t } = j(["admin", "navigation"]), m = ne(), [l, g] = d(!0), [n, u] = d(!1), [c, b] = d(30), [r, k] = d(null), [w, i] = d([]), [v, D] = d([]), [V, G] = d([]), [M, O] = d([]), [R, X] = d([]), [x, Y] = d(null), [_, J] = d(null), [Q, W] = d(null), [P, C] = d(null), A = te(null), U = re(async (a) => {
    try {
      C(null);
      const [
        o,
        h,
        N,
        y,
        T,
        Z,
        ee,
        se,
        ae
      ] = await Promise.all([
        p.dashboard.getOverview(c, { signal: a }),
        p.dashboard.getByStatus({ signal: a }),
        p.dashboard.getByRole({ signal: a }),
        p.dashboard.getTrends(c, { signal: a }),
        p.dashboard.getLatestActiveSessions(5, { signal: a }),
        p.dashboard.getSecurityAlerts(3, 24, { signal: a }),
        p.dashboard.getActiveSessions({ signal: a }),
        q.getDeviceStats(c, { signal: a }),
        q.getEngagementMetrics(c, { signal: a })
      ]);
      a?.aborted || (k(o ?? null), i(h ?? []), D(N ?? []), G(y ?? []), O(T ?? []), X(Z ?? []), Y(ee ?? null), J(se ?? null), W(ae ?? null));
    } catch (o) {
      if (o instanceof Error && o.name === "CanceledError")
        return;
      console.error("Failed to load dashboard data:", o);
      const h = o;
      h.response?.status === 401 ? C("Session expirée. Veuillez vous reconnecter.") : h.response?.status === 403 ? C("Vous n'avez pas les permissions nécessaires pour accéder au dashboard.") : C("Erreur lors du chargement des données. Vérifiez que l'API est accessible.");
    } finally {
      a?.aborted || (g(!1), u(!1));
    }
  }, [c]);
  le(() => {
    A.current?.abort();
    const a = new AbortController();
    return A.current = a, U(a.signal), () => {
      a.abort();
    };
  }, [U]);
  const B = () => {
    A.current?.abort();
    const a = new AbortController();
    A.current = a, u(!0), U(a.signal);
  };
  return l ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ e(de, { className: "w-8 h-8 animate-spin text-[var(--color-primary-600)]" }) }) : /* @__PURE__ */ s(
    ye,
    {
      title: t("admin:header.title"),
      subtitle: "Vue d'ensemble de la gestion des utilisateurs",
      icon: /* @__PURE__ */ e(Ne, { className: "w-6 h-6" }),
      breadcrumbs: [
        { label: t("header.title") },
        { label: t("dashboard.title") }
      ],
      actions: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ s(
          "select",
          {
            value: c,
            onChange: (a) => b(Number(a.target.value)),
            className: "input",
            children: [
              /* @__PURE__ */ e("option", { value: 7, children: "7 derniers jours" }),
              /* @__PURE__ */ e("option", { value: 30, children: "30 derniers jours" }),
              /* @__PURE__ */ e("option", { value: 90, children: "90 derniers jours" })
            ]
          }
        ),
        /* @__PURE__ */ s(
          "button",
          {
            onClick: B,
            disabled: n,
            className: "btn btn-secondary flex items-center gap-2",
            children: [
              /* @__PURE__ */ e(E, { className: `w-4 h-4 ${n ? "animate-spin" : ""}` }),
              "Actualiser"
            ]
          }
        )
      ] }),
      children: [
        P && /* @__PURE__ */ s("div", { className: "bg-[var(--error-bg)] border border-[var(--error-border)] rounded-lg p-4 flex items-center gap-3", children: [
          /* @__PURE__ */ e(z, { className: "w-5 h-5 text-[var(--error-text)] flex-shrink-0" }),
          /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e("p", { className: "text-[var(--error-text)] font-medium", children: P }) }),
          /* @__PURE__ */ e(
            "button",
            {
              onClick: B,
              className: "text-[var(--error-text)] hover:opacity-80",
              children: /* @__PURE__ */ e(E, { className: "w-5 h-5" })
            }
          )
        ] }),
        /* @__PURE__ */ s("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", children: [
          /* @__PURE__ */ e(
            f,
            {
              title: "Total Utilisateurs",
              value: r?.totalUsers ?? 0,
              icon: /* @__PURE__ */ e(oe, { className: "w-5 h-5" }),
              accent: "primary"
            }
          ),
          /* @__PURE__ */ e(
            f,
            {
              title: "Actifs",
              value: r?.activeUsers ?? 0,
              icon: /* @__PURE__ */ e(H, { className: "w-5 h-5" }),
              accent: 5
            }
          ),
          /* @__PURE__ */ e(
            f,
            {
              title: "Inactifs",
              value: r?.inactiveUsers ?? 0,
              icon: /* @__PURE__ */ e(me, { className: "w-5 h-5" }),
              trend: { value: r?.inactiveUsers ?? 0, direction: "down" }
            }
          ),
          /* @__PURE__ */ e(
            f,
            {
              title: "Nouveaux",
              value: r?.newUsers ?? 0,
              icon: /* @__PURE__ */ e(he, { className: "w-5 h-5" }),
              subtitle: `${c} derniers jours`
            }
          ),
          /* @__PURE__ */ e(
            f,
            {
              title: "Sessions",
              value: r?.totalSessions ?? 0,
              icon: /* @__PURE__ */ e(I, { className: "w-5 h-5" }),
              accent: 5,
              subtitle: `${c} derniers jours`
            }
          ),
          /* @__PURE__ */ e(
            f,
            {
              title: "Connexions Echouées",
              value: r?.failedLogins ?? 0,
              icon: /* @__PURE__ */ e(z, { className: "w-5 h-5" }),
              trend: (r?.failedLogins ?? 0) > 10 ? { value: r?.failedLogins ?? 0, direction: "down" } : void 0,
              subtitle: `${c} derniers jours`
            }
          )
        ] }),
        (R?.length ?? 0) > 0 && /* @__PURE__ */ s("div", { className: "card p-4 border-l-4 border-[var(--error-border)]", children: [
          /* @__PURE__ */ s("h3", { className: "font-semibold text-[var(--error-text)] flex items-center gap-2 mb-3", children: [
            /* @__PURE__ */ e(z, { className: "w-5 h-5" }),
            "Alertes Sécurité (",
            R?.length ?? 0,
            ")"
          ] }),
          /* @__PURE__ */ e("div", { className: "space-y-2 max-h-40 overflow-y-auto", children: (R ?? []).slice(0, 5).map((a) => /* @__PURE__ */ s(
            "button",
            {
              type: "button",
              className: "w-full flex items-center justify-between p-2 bg-[var(--error-bg)] rounded cursor-pointer hover:opacity-80 text-left",
              onClick: () => m(`/administration/users/${a.userId}`),
              children: [
                /* @__PURE__ */ s("div", { children: [
                  /* @__PURE__ */ e("span", { className: "font-medium", children: a.fullName }),
                  /* @__PURE__ */ e("span", { className: "ml-2 text-sm text-[var(--text-secondary)]", children: a.email })
                ] }),
                /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
                  /* @__PURE__ */ s("span", { className: "text-xs text-[var(--error-text)] font-medium", children: [
                    a.failedAttempts,
                    " échecs"
                  ] }),
                  /* @__PURE__ */ s("span", { className: "text-xs text-[var(--text-secondary)]", children: [
                    a.ipAddresses?.length ?? 0,
                    " IP(s)"
                  ] })
                ] })
              ]
            },
            a.userId
          )) })
        ] }),
        /* @__PURE__ */ s("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
          /* @__PURE__ */ s("div", { className: "card p-4", children: [
            /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
              /* @__PURE__ */ e(H, { className: "w-5 h-5" }),
              "Utilisateurs par Statut"
            ] }),
            /* @__PURE__ */ e("div", { className: "space-y-3", children: (w ?? []).map((a, o) => {
              const h = (w ?? []).reduce((y, T) => y + T.count, 0), N = h > 0 ? a.count / h * 100 : 0;
              return /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
                /* @__PURE__ */ e("div", { className: "w-24 text-sm", children: a.status === "Active" ? "Actifs" : "Inactifs" }),
                /* @__PURE__ */ e("div", { className: "flex-1 h-6 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                  "div",
                  {
                    className: "h-full rounded-full transition-all duration-500",
                    style: {
                      width: `${N}%`,
                      backgroundColor: `var(--dataviz-cat-${o % 12 + 1})`
                    }
                  }
                ) }),
                /* @__PURE__ */ s("div", { className: "w-20 text-right", children: [
                  /* @__PURE__ */ e("span", { className: "font-medium", children: a.count }),
                  /* @__PURE__ */ s("span", { className: "text-xs text-[var(--text-secondary)] ml-1", children: [
                    "(",
                    N.toFixed(0),
                    "%)"
                  ] })
                ] })
              ] }, a.status);
            }) })
          ] }),
          /* @__PURE__ */ s("div", { className: "card p-4", children: [
            /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
              /* @__PURE__ */ e(ue, { className: "w-5 h-5" }),
              "Utilisateurs par Rôle"
            ] }),
            /* @__PURE__ */ e("div", { className: "space-y-3", children: (v?.length ?? 0) > 0 ? (v ?? []).map((a, o) => {
              const h = Math.max(...(v ?? []).map((y) => y.count), 1), N = a.count / h * 100;
              return /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
                /* @__PURE__ */ e("div", { className: "w-32 text-sm truncate", title: a.roleName, children: a.roleName }),
                /* @__PURE__ */ e("div", { className: "flex-1 h-6 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                  "div",
                  {
                    className: "h-full rounded-full transition-all duration-500",
                    style: {
                      width: `${N}%`,
                      backgroundColor: `var(--dataviz-cat-${o % 12 + 1})`
                    }
                  }
                ) }),
                /* @__PURE__ */ e("div", { className: "w-12 text-right font-medium", children: a.count })
              ] }, a.roleName);
            }) : /* @__PURE__ */ e("div", { className: "text-center py-4 text-[var(--text-secondary)]", children: "Aucun rôle configuré" }) })
          ] })
        ] }),
        /* @__PURE__ */ s("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
          /* @__PURE__ */ s("div", { className: "card p-4", children: [
            /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
              /* @__PURE__ */ e(ve, { className: "w-5 h-5" }),
              "Configuration Système"
            ] }),
            /* @__PURE__ */ s("div", { className: "grid grid-cols-2 gap-4", children: [
              /* @__PURE__ */ s("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
                /* @__PURE__ */ e("div", { className: "text-3xl font-bold", style: { color: "var(--dataviz-cat-1)" }, children: r?.totalRoles ?? 0 }),
                /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Rôles" })
              ] }),
              /* @__PURE__ */ s("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
                /* @__PURE__ */ e("div", { className: "text-3xl font-bold", style: { color: "var(--dataviz-cat-2)" }, children: r?.totalPermissions ?? 0 }),
                /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Permissions" })
              ] }),
              /* @__PURE__ */ s("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
                /* @__PURE__ */ e("div", { className: "text-3xl font-bold", style: { color: "var(--dataviz-cat-3)" }, children: r?.usersLoggedInRecently ?? 0 }),
                /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Connectés récemment" })
              ] }),
              /* @__PURE__ */ s("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
                /* @__PURE__ */ e("div", { className: "text-3xl font-bold", style: { color: "var(--dataviz-cat-4)" }, children: x?.totalActiveSessions ?? 0 }),
                /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Sessions actives" })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ s("div", { className: "card p-4", children: [
            /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
              /* @__PURE__ */ e(S, { className: "w-5 h-5" }),
              "Sessions Actives"
            ] }),
            x && ((x.byBrowser?.length ?? 0) > 0 || (x.byCountry?.length ?? 0) > 0) ? /* @__PURE__ */ s("div", { className: "grid grid-cols-2 gap-4", children: [
              /* @__PURE__ */ s("div", { children: [
                /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-[var(--text-secondary)] mb-2", children: "Par Navigateur" }),
                /* @__PURE__ */ e("div", { className: "space-y-2", children: (x.byBrowser ?? []).map((a) => /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-sm", children: [
                  /* @__PURE__ */ e("span", { children: a.browser }),
                  /* @__PURE__ */ e("span", { className: "font-medium", children: a.count })
                ] }, a.browser)) })
              ] }),
              /* @__PURE__ */ s("div", { children: [
                /* @__PURE__ */ s("h4", { className: "text-sm font-medium text-[var(--text-secondary)] mb-2 flex items-center gap-1", children: [
                  /* @__PURE__ */ e(xe, { className: "w-4 h-4" }),
                  " Par Pays"
                ] }),
                /* @__PURE__ */ e("div", { className: "space-y-2", children: (x.byCountry?.length ?? 0) > 0 ? (x.byCountry ?? []).map((a) => /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-sm", children: [
                  /* @__PURE__ */ e("span", { children: a.country }),
                  /* @__PURE__ */ e("span", { className: "font-medium", children: a.count })
                ] }, a.country)) : /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)] text-sm", children: "Non disponible" }) })
              ] })
            ] }) : /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: "Aucune session active" })
          ] })
        ] }),
        /* @__PURE__ */ s("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
          /* @__PURE__ */ s("div", { className: "card p-4", children: [
            /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
              /* @__PURE__ */ e(S, { className: "w-5 h-5" }),
              "Appareils & Navigateurs"
            ] }),
            /* @__PURE__ */ e(
              ze,
              {
                data: _,
                deviceTypeLabel: t("dashboard.deviceType", "Type d'appareil"),
                browserLabel: t("dashboard.browser", "Navigateur")
              }
            )
          ] }),
          /* @__PURE__ */ s("div", { className: "card p-4", children: [
            /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
              /* @__PURE__ */ e(I, { className: "w-5 h-5" }),
              "Engagement Utilisateurs"
            ] }),
            /* @__PURE__ */ e(
              Le,
              {
                data: Q,
                sessionDistributionLabel: t("dashboard.sessionDistribution", "Distribution des sessions"),
                peakHoursLabel: t("dashboard.peakHours", "Heures de pointe"),
                dailyActiveUsersLabel: t("dashboard.dailyActiveUsers", "Utilisateurs actifs quotidiens"),
                retentionRateLabel: t("dashboard.retentionRate", "Taux de rétention"),
                sessionsSuffix: t("dashboard.sessionsSuffix", "sessions")
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ s("div", { className: "card p-4", children: [
          /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
            /* @__PURE__ */ e(pe, { className: "w-5 h-5" }),
            "Tendances (",
            c,
            " derniers jours)"
          ] }),
          /* @__PURE__ */ e("div", { className: "h-64", children: /* @__PURE__ */ e(je, { data: V ?? [] }) })
        ] }),
        /* @__PURE__ */ s("div", { className: "card p-4", children: [
          /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
            /* @__PURE__ */ e(ge, { className: "w-5 h-5" }),
            "Dernières Sessions Actives"
          ] }),
          (M?.length ?? 0) > 0 ? /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ s("table", { className: "w-full", children: [
            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Utilisateur" }),
              /* @__PURE__ */ e("th", { className: "text-right p-3 font-medium", children: "Durée" })
            ] }) }),
            /* @__PURE__ */ e("tbody", { children: (M ?? []).map((a) => /* @__PURE__ */ s(
              "tr",
              {
                className: "border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)] cursor-pointer",
                onClick: () => m(`/administration/users/${a.userId}`),
                children: [
                  /* @__PURE__ */ e("td", { className: "p-3 font-medium", children: a.fullName }),
                  /* @__PURE__ */ e("td", { className: "p-3 text-right", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 rounded text-xs font-medium bg-[var(--success-bg)] text-[var(--success-text)]", children: a.duration }) })
                ]
              },
              a.userId + a.loginAt
            )) })
          ] }) }) : /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: "Aucune session active" })
        ] })
      ]
    }
  );
}
function je({ data: t }) {
  if (t.length === 0)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full text-[var(--text-secondary)]", children: "Aucune donnée de tendance disponible" });
  const m = Math.max(...t.flatMap((l) => [l.newUsers, l.logins]), 1);
  return /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ s("div", { className: "flex items-center gap-4 mb-4", children: [
      /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded", style: { backgroundColor: "var(--dataviz-cat-1)" } }),
        /* @__PURE__ */ e("span", { className: "text-sm", children: "Nouveaux utilisateurs" })
      ] }),
      /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded", style: { backgroundColor: "var(--dataviz-cat-2)" } }),
        /* @__PURE__ */ e("span", { className: "text-sm", children: "Connexions" })
      ] })
    ] }),
    /* @__PURE__ */ e("div", { className: "flex-1 flex items-end gap-1 overflow-x-auto pb-4", children: t.map((l) => /* @__PURE__ */ s("div", { className: "flex-1 min-w-[20px] flex gap-0.5", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: "flex-1 rounded-t transition-all duration-300 hover:opacity-80",
          style: {
            backgroundColor: "var(--dataviz-cat-1)",
            height: `${l.newUsers / m * 100}%`,
            minHeight: l.newUsers > 0 ? "4px" : "0"
          },
          title: `Nouveaux: ${l.newUsers}`
        }
      ),
      /* @__PURE__ */ e(
        "div",
        {
          className: "flex-1 rounded-t transition-all duration-300 hover:opacity-80",
          style: {
            backgroundColor: "var(--dataviz-cat-2)",
            height: `${l.logins / m * 100}%`,
            minHeight: l.logins > 0 ? "4px" : "0"
          },
          title: `Connexions: ${l.logins}`
        }
      )
    ] }, `${l.date}`)) }),
    /* @__PURE__ */ s("div", { className: "flex justify-between text-xs text-[var(--text-secondary)] mt-2", children: [
      /* @__PURE__ */ e("span", { children: t[0] && new Date(t[0].date).toLocaleDateString("fr-FR") }),
      /* @__PURE__ */ e("span", { children: t.at(-1) && new Date(t.at(-1).date).toLocaleDateString("fr-FR") })
    ] })
  ] });
}
export {
  Ve as AdminDashboardPage
};
//# sourceMappingURL=DashboardPage-CKAYiP52.js.map
