import { jsx as e, jsxs as t } from "react/jsx-runtime";
import G, { useState as g, useEffect as T, useCallback as V } from "react";
import { useNavigate as X } from "react-router-dom";
import { useTranslation as Y } from "react-i18next";
import { Loader2 as P, Users as _, Clock as E, Home as J, ChevronRight as z, ArrowLeft as Q, AlertTriangle as Z, RefreshCw as I, BarChart3 as F, Activity as D, TrendingUp as M, PieChart as ee, Layers as te } from "lucide-react";
import { a as ae, B as re } from "./index-CwSaRXXg.js";
import { a as k } from "./applicationAnalyticsApi-B8AhFYLr.js";
import { ResponsiveContainer as j, LineChart as se, CartesianGrid as ne, XAxis as le, YAxis as ie, Tooltip as ce, Legend as oe, Line as de, PieChart as K, Pie as H, Cell as W, Sector as R } from "recharts";
const U = [
  "#3b82f6",
  // blue
  "#22c55e",
  // green
  "#f59e0b",
  // amber
  "#ef4444",
  // red
  "#8b5cf6",
  // violet
  "#06b6d4",
  // cyan
  "#ec4899"
  // pink
], me = ({ period: d = 30, mode: i = "access" }) => {
  const [r, l] = g(null), [v, m] = g(!0), [a, c] = g(null);
  if (T(() => {
    (async () => {
      try {
        m(!0);
        const o = await k.getTrendsByApplication(d);
        l(o), c(null);
      } catch (o) {
        c(o instanceof Error ? o.message : "Failed to load trends");
      } finally {
        m(!1);
      }
    })();
  }, [d]), v)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-[300px]", children: /* @__PURE__ */ e(P, { className: "h-6 w-6 animate-spin text-[var(--color-primary-600)]" }) });
  if (a || !r)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-[300px] text-[var(--text-secondary)]", children: a || "Aucune donnée disponible" });
  if (!r?.dailyData?.length || !r?.applications?.length)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-[300px] text-[var(--text-secondary)]", children: "Aucune donnée de tendance disponible" });
  const p = r.dailyData.map((s) => {
    const o = {
      date: new Date(s.date).toLocaleDateString("fr-FR", {
        day: "2-digit",
        month: "short"
      })
    };
    return r.applications.forEach((y) => {
      i === "access" ? o[y.name] = s.applicationCounts[y.name] || 0 : o[y.name] = s.applicationDurations?.[y.name] || 0;
    }), o;
  }), h = (s, o) => s.color || U[o % U.length];
  return /* @__PURE__ */ t("div", { className: "space-y-4", children: [
    /* @__PURE__ */ e("div", { style: { width: "100%", height: 300 }, children: /* @__PURE__ */ e(j, { width: "100%", height: 300, children: /* @__PURE__ */ t(
      se,
      {
        data: p,
        margin: { top: 5, right: 30, left: 20, bottom: 5 },
        children: [
          /* @__PURE__ */ e(
            ne,
            {
              strokeDasharray: "3 3",
              stroke: "var(--border-color)"
            }
          ),
          /* @__PURE__ */ e(
            le,
            {
              dataKey: "date",
              stroke: "var(--text-secondary)",
              style: { fontSize: "11px" },
              tick: { fill: "var(--text-secondary)" }
            }
          ),
          /* @__PURE__ */ e(
            ie,
            {
              stroke: "var(--text-secondary)",
              style: { fontSize: "11px" },
              tick: { fill: "var(--text-secondary)" },
              label: {
                value: i === "access" ? "Accès" : "Minutes",
                angle: -90,
                position: "insideLeft",
                style: { fill: "var(--text-secondary)", fontSize: "11px" }
              }
            }
          ),
          /* @__PURE__ */ e(
            ce,
            {
              contentStyle: {
                backgroundColor: "var(--bg-card)",
                border: "1px solid var(--border-color)",
                borderRadius: "8px",
                color: "var(--text-primary)"
              },
              labelStyle: { color: "var(--text-primary)", fontWeight: "bold", marginBottom: "8px" },
              itemStyle: { color: "var(--text-secondary)" }
            }
          ),
          /* @__PURE__ */ e(
            oe,
            {
              wrapperStyle: {
                paddingTop: "20px"
              },
              formatter: (s) => /* @__PURE__ */ e("span", { style: { color: "var(--text-secondary)", fontSize: "12px" }, children: s })
            }
          ),
          r.applications.map((s, o) => /* @__PURE__ */ e(
            de,
            {
              type: "monotone",
              dataKey: s.name,
              stroke: h(s, o),
              strokeWidth: 2,
              dot: { r: 2, fill: h(s, o) },
              activeDot: { r: 5, fill: h(s, o) }
            },
            s.name
          ))
        ]
      }
    ) }) }),
    /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 justify-center border-t border-[var(--border-color)] pt-4", children: r.applications.map((s, o) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: "w-3 h-3 rounded-full",
          style: { backgroundColor: h(s, o) }
        }
      ),
      /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: s.name }),
      /* @__PURE__ */ e("span", { className: "text-sm font-semibold", style: { color: h(s, o) }, children: i === "access" ? s.totalAccess : `${s.totalDurationMinutes} min` })
    ] }, s.name)) })
  ] });
}, L = [
  "#3b82f6",
  "#8b5cf6",
  "#22c55e",
  "#f59e0b",
  "#ef4444",
  "#06b6d4",
  "#ec4899",
  "#10b981",
  "#f97316",
  "#6366f1"
], he = ({ data: d, mode: i = "access" }) => {
  if (!d || d.length === 0)
    return /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: "No module data available" });
  const r = (a) => i === "access" ? a.accessCount : a.totalDurationMinutes, l = i === "access" ? "accès" : "min", v = Math.max(...d.map((a) => r(a)), 1), m = (a) => {
    if (a < 60) return `${a}s`;
    const c = Math.floor(a / 60), p = a % 60;
    return p > 0 ? `${c}m ${p}s` : `${c}m`;
  };
  return /* @__PURE__ */ e("div", { className: "space-y-3", children: d.map((a, c) => {
    const p = r(a), h = p / v * 100;
    return /* @__PURE__ */ t(
      "div",
      {
        className: "rounded-lg bg-[var(--bg-secondary)] p-4 hover:shadow-sm transition-shadow border-l-4",
        style: { borderLeftColor: L[c % L.length] },
        children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-2", children: [
            /* @__PURE__ */ t("div", { className: "flex-1", children: [
              /* @__PURE__ */ t("div", { className: "text-xs text-[var(--text-tertiary)] mb-1 font-mono", children: [
                /* @__PURE__ */ e("span", { className: "text-blue-500", children: "platform" }),
                /* @__PURE__ */ e("span", { className: "mx-1", children: "›" }),
                /* @__PURE__ */ e("span", { className: "text-green-500", children: a.applicationName }),
                /* @__PURE__ */ e("span", { className: "mx-1", children: "›" }),
                /* @__PURE__ */ e("span", { className: "text-purple-500", children: a.moduleName })
              ] }),
              /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e("h5", { className: "font-semibold text-[var(--text-primary)]", children: a.moduleName }) })
            ] }),
            /* @__PURE__ */ t("div", { className: "text-right", children: [
              /* @__PURE__ */ e("div", { className: "text-xl font-bold", style: { color: L[c % L.length] }, children: p.toLocaleString() }),
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)]", children: l })
            ] })
          ] }),
          /* @__PURE__ */ e("div", { className: "h-2 bg-[var(--bg-primary)] rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ e(
            "div",
            {
              className: "h-full rounded-full transition-all duration-500",
              style: {
                width: `${h}%`,
                backgroundColor: L[c % L.length]
              }
            }
          ) }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-4 text-xs text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
              /* @__PURE__ */ e(_, { className: "w-3 h-3" }),
              /* @__PURE__ */ t("span", { children: [
                a.uniqueUsers,
                " utilisateurs uniques"
              ] })
            ] }),
            /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
              /* @__PURE__ */ e(E, { className: "w-3 h-3" }),
              /* @__PURE__ */ t("span", { children: [
                "Moy: ",
                m(a.avgDuration)
              ] })
            ] })
          ] })
        ]
      },
      a.moduleId
    );
  }) });
}, O = [
  "#3b82f6",
  // blue-500
  "#22c55e",
  // green-500
  "#f59e0b",
  // amber-500
  "#ef4444",
  // red-500
  "#8b5cf6",
  // violet-500
  "#06b6d4",
  // cyan-500
  "#ec4899",
  // pink-500
  "#f97316",
  // orange-500
  "#14b8a6",
  // teal-500
  "#6366f1"
  // indigo-500
], pe = (d) => {
  const {
    cx: i = 0,
    cy: r = 0,
    midAngle: l = 0,
    innerRadius: v = 0,
    outerRadius: m = 0,
    startAngle: a = 0,
    endAngle: c = 0,
    fill: p = "#8884d8",
    payload: h,
    percent: s = 0,
    value: o = 0
  } = d;
  if (!h) return /* @__PURE__ */ e("g", {});
  const y = Math.PI / 180, f = Math.sin(-y * l), N = Math.cos(-y * l), u = i + (m + 10) * N, S = r + (m + 10) * f, C = i + (m + 30) * N, w = r + (m + 30) * f, b = C + (N >= 0 ? 1 : -1) * 22, x = w, n = N >= 0 ? "start" : "end";
  return /* @__PURE__ */ t("g", { children: [
    /* @__PURE__ */ e("text", { x: i, y: r, dy: -10, textAnchor: "middle", fill: "var(--text-primary)", style: { fontSize: "14px", fontWeight: "bold" }, children: h.applicationName }),
    /* @__PURE__ */ t("text", { x: i, y: r, dy: 10, textAnchor: "middle", fill: "var(--text-secondary)", style: { fontSize: "12px" }, children: [
      o.toLocaleString(),
      " accès"
    ] }),
    /* @__PURE__ */ e(
      R,
      {
        cx: i,
        cy: r,
        innerRadius: v,
        outerRadius: m,
        startAngle: a,
        endAngle: c,
        fill: p
      }
    ),
    /* @__PURE__ */ e(
      R,
      {
        cx: i,
        cy: r,
        startAngle: a,
        endAngle: c,
        innerRadius: m + 6,
        outerRadius: m + 10,
        fill: p
      }
    ),
    /* @__PURE__ */ e("path", { d: `M${u},${S}L${C},${w}L${b},${x}`, stroke: p, fill: "none" }),
    /* @__PURE__ */ e("circle", { cx: b, cy: x, r: 2, fill: p, stroke: "none" }),
    /* @__PURE__ */ e("text", { x: b + (N >= 0 ? 1 : -1) * 12, y: x, textAnchor: n, fill: "var(--text-primary)", style: { fontSize: "12px" }, children: `${(s * 100).toFixed(0)}%` })
  ] });
}, xe = ({ data: d }) => {
  const [i, r] = g(0);
  if (!d || d.length === 0)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full text-[var(--text-secondary)]", children: "Aucune donnée d'activité disponible" });
  const l = d.reduce((a, c) => a + c.accessCount, 0), v = d.map((a, c) => ({
    ...a,
    name: a.applicationName,
    value: a.accessCount,
    fill: O[c % O.length]
  })), m = (a, c) => {
    r(c);
  };
  return /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
    /* @__PURE__ */ e("div", { className: "flex items-center gap-2 text-sm h-[34px]", children: /* @__PURE__ */ e("span", { className: "text-[var(--text-tertiary)]", children: "Vue globale des applications actives" }) }),
    /* @__PURE__ */ t("div", { className: "flex items-center justify-center gap-2", children: [
      /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-green-600", children: "Applications" }),
      /* @__PURE__ */ t("span", { className: "text-[var(--text-secondary)]", children: [
        "(",
        d.length,
        " actives • ",
        l.toLocaleString(),
        " accès total)"
      ] })
    ] }),
    /* @__PURE__ */ e("div", { style: { width: "100%", height: 350 }, children: /* @__PURE__ */ e(j, { width: "100%", height: 350, children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(
      H,
      {
        activeIndex: i,
        activeShape: pe,
        data: v,
        cx: "50%",
        cy: "50%",
        innerRadius: 70,
        outerRadius: 110,
        fill: "#8884d8",
        dataKey: "value",
        onMouseEnter: m,
        children: v.map((a) => /* @__PURE__ */ e(W, { fill: a.fill }, a.name))
      }
    ) }) }) }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2 max-h-[200px] overflow-y-auto", children: v.map((a, c) => /* @__PURE__ */ t(
      "div",
      {
        onMouseEnter: () => r(c),
        className: `flex items-center gap-2 p-2 rounded-lg hover:bg-[var(--bg-secondary)] transition-colors cursor-pointer ${i === c ? "bg-[var(--bg-secondary)]" : ""}`,
        children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: "w-3 h-3 rounded-full flex-shrink-0",
              style: { backgroundColor: a.fill }
            }
          ),
          /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
            /* @__PURE__ */ e("p", { className: "text-sm font-medium truncate text-[var(--text-primary)]", children: a.applicationName }),
            /* @__PURE__ */ t("p", { className: "text-xs text-[var(--text-secondary)]", children: [
              a.accessCount.toLocaleString(),
              " accès"
            ] })
          ] })
        ]
      },
      a.applicationId
    )) })
  ] });
}, B = [
  "#3b82f6",
  // blue-500
  "#22c55e",
  // green-500
  "#f59e0b",
  // amber-500
  "#ef4444",
  // red-500
  "#8b5cf6",
  // violet-500
  "#06b6d4",
  // cyan-500
  "#ec4899",
  // pink-500
  "#f97316",
  // orange-500
  "#14b8a6",
  // teal-500
  "#6366f1"
  // indigo-500
], ue = ["Application", "Module"], q = ["text-blue-500", "text-green-500"], ve = (d) => (i) => {
  const {
    cx: r = 0,
    cy: l = 0,
    midAngle: v = 0,
    innerRadius: m = 0,
    outerRadius: a = 0,
    startAngle: c = 0,
    endAngle: p = 0,
    fill: h = "#8884d8",
    payload: s,
    percent: o = 0,
    value: y = 0
  } = i;
  if (!s) return /* @__PURE__ */ e("g", {});
  const f = Math.PI / 180, N = Math.sin(-f * v), u = Math.cos(-f * v), S = r + (a + 10) * u, C = l + (a + 10) * N, w = r + (a + 30) * u, b = l + (a + 30) * N, x = w + (u >= 0 ? 1 : -1) * 22, n = b, A = u >= 0 ? "start" : "end";
  return /* @__PURE__ */ t("g", { children: [
    /* @__PURE__ */ e("text", { x: r, y: l, dy: -10, textAnchor: "middle", fill: "var(--text-primary)", style: { fontSize: "14px", fontWeight: "bold" }, children: s.name }),
    /* @__PURE__ */ t("text", { x: r, y: l, dy: 10, textAnchor: "middle", fill: "var(--text-secondary)", style: { fontSize: "12px" }, children: [
      y.toLocaleString(),
      " ",
      d
    ] }),
    /* @__PURE__ */ e("text", { x: r, y: l, dy: 28, textAnchor: "middle", fill: "var(--text-tertiary)", style: { fontSize: "11px" }, children: s.hasChildren ? "Cliquez pour explorer" : "" }),
    /* @__PURE__ */ e(
      R,
      {
        cx: r,
        cy: l,
        innerRadius: m,
        outerRadius: a,
        startAngle: c,
        endAngle: p,
        fill: h
      }
    ),
    /* @__PURE__ */ e(
      R,
      {
        cx: r,
        cy: l,
        startAngle: c,
        endAngle: p,
        innerRadius: a + 6,
        outerRadius: a + 10,
        fill: h
      }
    ),
    /* @__PURE__ */ e("path", { d: `M${S},${C}L${w},${b}L${x},${n}`, stroke: h, fill: "none" }),
    /* @__PURE__ */ e("circle", { cx: x, cy: n, r: 2, fill: h, stroke: "none" }),
    /* @__PURE__ */ e(
      "text",
      {
        x: x + (u >= 0 ? 1 : -1) * 12,
        y: n,
        textAnchor: A,
        fill: "var(--text-primary)",
        style: { fontSize: "12px" },
        children: `${(o * 100).toFixed(1)}%`
      }
    ),
    /* @__PURE__ */ e(
      "text",
      {
        x: x + (u >= 0 ? 1 : -1) * 12,
        y: n,
        dy: 14,
        textAnchor: A,
        fill: "var(--text-secondary)",
        style: { fontSize: "10px" },
        children: `${s.uniqueUsers} utilisateurs`
      }
    )
  ] });
}, fe = ({ period: d, mode: i = "access" }) => {
  const [r, l] = g(null), [v, m] = g(!0), [a, c] = g(null), [p, h] = g(0), [s, o] = g(0), [y, f] = g(), N = V(async () => {
    try {
      m(!0), c(null);
      const n = await k.getHierarchyData(
        s,
        y,
        d
      );
      l(n), h(0);
    } catch (n) {
      c(n instanceof Error ? n.message : "Failed to load data");
    } finally {
      m(!1);
    }
  }, [s, y, d]);
  T(() => {
    N();
  }, [N]);
  const u = (n) => {
    n.hasChildren && s === 0 && (f(n.id), o(1));
  }, S = () => {
    s === 1 && (f(void 0), o(0));
  }, C = (n, A) => {
    h(A);
  };
  if (v)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-[400px]", children: /* @__PURE__ */ e(P, { className: "h-8 w-8 animate-spin text-[var(--color-primary-600)]" }) });
  if (a)
    return /* @__PURE__ */ e("div", { className: "text-center py-8 text-red-500", children: a });
  if (!r?.items?.length)
    return /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: "Aucune donnée disponible pour ce niveau" });
  const w = i === "access" ? "accès" : "min", b = r.items.map((n, A) => ({
    ...n,
    value: i === "access" ? n.accessCount : n.totalDurationMinutes,
    fill: B[A % B.length],
    valueLabel: w
  })), x = ve(w);
  return /* @__PURE__ */ t("div", { className: "space-y-4", children: [
    /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm flex-wrap", children: [
      /* @__PURE__ */ t(
        "button",
        {
          onClick: () => {
            o(0), f(void 0);
          },
          className: `flex items-center gap-1 px-2 py-1 rounded hover:bg-[var(--bg-secondary)] transition-colors ${s === 0 ? "font-semibold text-blue-600" : "text-[var(--text-secondary)]"}`,
          children: [
            /* @__PURE__ */ e(J, { className: "h-4 w-4" }),
            /* @__PURE__ */ e("span", { children: "Applications" })
          ]
        }
      ),
      r.breadcrumb.map((n) => /* @__PURE__ */ t(G.Fragment, { children: [
        /* @__PURE__ */ e(z, { className: "h-4 w-4 text-[var(--text-tertiary)]" }),
        /* @__PURE__ */ e("span", { className: `px-2 py-1 font-semibold ${q[1]}`, children: n.name })
      ] }, n.id)),
      s > 0 && /* @__PURE__ */ t(
        "button",
        {
          onClick: S,
          className: "ml-auto flex items-center gap-1 px-3 py-1 rounded-lg bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] transition-colors text-[var(--text-secondary)]",
          children: [
            /* @__PURE__ */ e(Q, { className: "h-4 w-4" }),
            "Retour"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ t("div", { className: "flex items-center justify-center gap-2", children: [
      /* @__PURE__ */ t("span", { className: `text-lg font-semibold ${q[s]}`, children: [
        ue[s],
        "s"
      ] }),
      /* @__PURE__ */ t("span", { className: "text-[var(--text-secondary)]", children: [
        "(",
        r.items.length,
        " éléments • ",
        i === "access" ? `${r.totalAccess.toLocaleString()} accès total` : `${r.totalDurationMinutes.toLocaleString()} min total`,
        ")"
      ] })
    ] }),
    /* @__PURE__ */ e("div", { style: { width: "100%", height: 350 }, children: /* @__PURE__ */ e(j, { width: "100%", height: 350, children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(
      H,
      {
        activeIndex: p,
        activeShape: x,
        data: b,
        cx: "50%",
        cy: "50%",
        innerRadius: 70,
        outerRadius: 110,
        fill: "#8884d8",
        dataKey: "value",
        onMouseEnter: C,
        onClick: (n, A) => u(b[A]),
        style: { cursor: b[p]?.hasChildren ? "pointer" : "default" },
        children: b.map((n) => /* @__PURE__ */ e(W, { fill: n.fill }, n.id))
      }
    ) }) }) }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2 max-h-[200px] overflow-y-auto", children: b.map((n, A) => /* @__PURE__ */ t(
      "button",
      {
        onClick: () => n.hasChildren && u(n),
        onMouseEnter: () => h(A),
        className: `flex items-center gap-2 p-2 rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-left ${n.hasChildren ? "cursor-pointer" : "cursor-default"} ${p === A ? "bg-[var(--bg-secondary)]" : ""}`,
        children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: "w-3 h-3 rounded-full flex-shrink-0",
              style: { backgroundColor: n.fill }
            }
          ),
          /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
            /* @__PURE__ */ e("p", { className: "text-sm font-medium truncate text-[var(--text-primary)]", children: n.name }),
            /* @__PURE__ */ t("p", { className: "text-xs text-[var(--text-secondary)]", children: [
              n.value.toLocaleString(),
              " ",
              w
            ] })
          ] }),
          n.hasChildren && /* @__PURE__ */ e(z, { className: "h-4 w-4 text-[var(--text-tertiary)] flex-shrink-0" })
        ]
      },
      n.id
    )) })
  ] });
}, $ = ({ label: d, value: i, icon: r, color: l, subtitle: v }) => /* @__PURE__ */ t("div", { className: "rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)] border border-[var(--item-color-border)]", children: [
  /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-2", children: [
    /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: d }),
    /* @__PURE__ */ e("div", { className: {
      blue: "text-blue-500",
      green: "text-green-500",
      purple: "text-purple-500",
      orange: "text-orange-500",
      yellow: "text-yellow-500",
      red: "text-red-500"
    }[l], children: r })
  ] }),
  /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-[var(--text-primary)]", children: typeof i == "number" ? i.toLocaleString() : i }),
  v && /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-tertiary)] mt-1", children: v })
] }), Le = () => {
  const d = X(), { t: i } = Y("admin"), { currentTenant: r } = ae(), [l, v] = g(null), [m, a] = g([]), [c, p] = g(!0), [h, s] = g(!1), [o, y] = g(null), [f, N] = g(30), [u, S] = g("access"), C = V(async () => {
    try {
      y(null);
      const [x, n] = await Promise.all([
        k.getDashboardStats(),
        k.getTopModules(5, f)
      ]);
      v(x), a(n);
    } catch (x) {
      y(x instanceof Error ? x.message : "Failed to load dashboard");
    } finally {
      p(!1), s(!1);
    }
  }, [f, r?.id]);
  T(() => {
    C();
  }, [C]);
  const w = () => {
    s(!0), C();
  }, b = (x) => x < 60 ? `${x}s` : `${Math.floor(x / 60)}m`;
  return c ? /* @__PURE__ */ e("div", { className: "flex h-96 items-center justify-center", children: /* @__PURE__ */ e(P, { className: "h-8 w-8 animate-spin text-[var(--color-primary-600)]" }) }) : o ? /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ t("div", { className: "bg-[var(--error-bg)] border border-[var(--error-border)] rounded-[var(--radius-card)] p-4 flex items-center gap-3", children: [
    /* @__PURE__ */ e(Z, { className: "h-5 w-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: o }) }),
    /* @__PURE__ */ e(
      "button",
      {
        onClick: w,
        className: "text-[var(--error-text)] hover:opacity-80",
        children: /* @__PURE__ */ e(I, { className: "h-5 w-5" })
      }
    )
  ] }) }) : /* @__PURE__ */ t("div", { className: "space-y-6", children: [
    /* @__PURE__ */ e(
      re,
      {
        items: [
          { label: i("header.title"), href: "/administration" },
          { label: i("dashboard.title", "Dashboard") }
        ]
      }
    ),
    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ t("h1", { className: "text-2xl font-bold text-[var(--text-primary)] flex items-center gap-2", children: [
          /* @__PURE__ */ e(F, { className: "h-6 w-6" }),
          "Tableau de bord Applications"
        ] }),
        /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mt-1", children: "Analyse d'utilisation par Context › Application › Module" })
      ] }),
      /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-1 rounded-lg border border-[var(--item-color-border)] bg-[var(--bg-secondary)] p-1", children: [
          /* @__PURE__ */ e(
            "button",
            {
              onClick: () => S("access"),
              className: `px-3 py-1.5 text-sm font-medium rounded-md transition-all ${u === "access" ? "bg-[var(--color-primary-600)] text-white shadow-sm" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"}`,
              children: /* @__PURE__ */ t("span", { className: "flex items-center gap-1.5", children: [
                /* @__PURE__ */ e(D, { className: "w-3.5 h-3.5" }),
                "Accès"
              ] })
            }
          ),
          /* @__PURE__ */ e(
            "button",
            {
              onClick: () => S("duration"),
              className: `px-3 py-1.5 text-sm font-medium rounded-md transition-all ${u === "duration" ? "bg-[var(--color-primary-600)] text-white shadow-sm" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"}`,
              children: /* @__PURE__ */ t("span", { className: "flex items-center gap-1.5", children: [
                /* @__PURE__ */ e(E, { className: "w-3.5 h-3.5" }),
                "Temps"
              ] })
            }
          )
        ] }),
        /* @__PURE__ */ t(
          "select",
          {
            value: f,
            onChange: (x) => N(Number(x.target.value)),
            className: "rounded-[var(--radius-input)] border border-[var(--item-color-border)] bg-[var(--bg-secondary)] px-4 py-2 text-[var(--text-primary)] focus:border-[var(--color-primary-600)] focus:outline-none",
            children: [
              /* @__PURE__ */ e("option", { value: 7, children: "7 days" }),
              /* @__PURE__ */ e("option", { value: 30, children: "30 days" }),
              /* @__PURE__ */ e("option", { value: 90, children: "90 days" })
            ]
          }
        ),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: w,
            disabled: h,
            className: "rounded-[var(--radius-button)] border border-[var(--item-color-border)] bg-[var(--bg-secondary)] px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] flex items-center gap-2 transition-colors",
            children: [
              /* @__PURE__ */ e(I, { className: `w-4 h-4 ${h ? "animate-spin" : ""}` }),
              "Refresh"
            ]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", children: [
      /* @__PURE__ */ e(
        $,
        {
          label: "Total Applications",
          value: l?.totalApplications || 0,
          icon: /* @__PURE__ */ e(F, { className: "h-5 w-5" }),
          color: "blue"
        }
      ),
      /* @__PURE__ */ e(
        $,
        {
          label: "Active Applications",
          value: l?.activeApplications || 0,
          icon: /* @__PURE__ */ e(D, { className: "h-5 w-5" }),
          color: "green"
        }
      ),
      /* @__PURE__ */ e(
        $,
        {
          label: "Total Users",
          value: l?.totalUsers || 0,
          icon: /* @__PURE__ */ e(_, { className: "h-5 w-5" }),
          color: "purple"
        }
      ),
      /* @__PURE__ */ e(
        $,
        {
          label: "Active Today",
          value: l?.activeUsersToday || 0,
          icon: /* @__PURE__ */ e(M, { className: "h-5 w-5" }),
          color: "orange"
        }
      ),
      /* @__PURE__ */ e(
        $,
        {
          label: "Avg Session",
          value: b(l?.avgSessionDuration || 0),
          icon: /* @__PURE__ */ e(E, { className: "h-5 w-5" }),
          color: "blue",
          subtitle: `${f} days`
        }
      ),
      /* @__PURE__ */ e(
        $,
        {
          label: "Growth Rate",
          value: `${l?.growthRate.toFixed(1) || 0}%`,
          icon: /* @__PURE__ */ e(M, { className: "h-5 w-5" }),
          color: (l?.growthRate ?? 0) >= 0 ? "green" : "red",
          subtitle: "vs previous period"
        }
      )
    ] }),
    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ t("div", { className: "rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-[var(--bg-card)] p-4", children: [
        /* @__PURE__ */ t("h3", { className: "font-semibold mb-4 flex items-center gap-2 text-[var(--text-primary)]", children: [
          /* @__PURE__ */ e(ee, { className: "h-5 w-5 text-[var(--color-primary-600)]" }),
          u === "access" ? "Activité" : "Temps passé",
          " par Hiérarchie",
          /* @__PURE__ */ e("span", { className: "text-xs font-normal text-[var(--text-secondary)] ml-2", children: "(Cliquez pour explorer)" })
        ] }),
        /* @__PURE__ */ e(fe, { period: f, mode: u }, `hierarchy-${r?.id ?? "global"}`)
      ] }),
      /* @__PURE__ */ t("div", { className: "rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-[var(--bg-card)] p-4", children: [
        /* @__PURE__ */ t("h3", { className: "font-semibold mb-4 flex items-center gap-2 text-[var(--text-primary)]", children: [
          /* @__PURE__ */ e(D, { className: "h-5 w-5 text-green-600" }),
          "Top Applications"
        ] }),
        l?.mostPopularApps && l.mostPopularApps.length > 0 ? /* @__PURE__ */ e(xe, { data: l.mostPopularApps }) : /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: "Aucune donnée d'activité disponible" })
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-[var(--bg-card)] p-4", children: [
      /* @__PURE__ */ t("h3", { className: "font-semibold mb-4 flex items-center gap-2 text-[var(--text-primary)]", children: [
        /* @__PURE__ */ e(M, { className: "h-5 w-5" }),
        "Tendance ",
        u === "access" ? "d'utilisation" : "du temps passé",
        " par Application (",
        f,
        " jours)"
      ] }),
      /* @__PURE__ */ e(me, { period: f, mode: u }, `trends-${r?.id ?? "global"}`)
    ] }),
    /* @__PURE__ */ t("div", { className: "rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-[var(--bg-card)] p-4", children: [
      /* @__PURE__ */ t("h3", { className: "font-semibold mb-4 flex items-center gap-2 text-[var(--text-primary)]", children: [
        /* @__PURE__ */ e(te, { className: "h-5 w-5 text-purple-600" }),
        "Modules les plus ",
        u === "access" ? "populaires" : "utilisés",
        /* @__PURE__ */ e("span", { className: "text-xs font-normal text-[var(--text-secondary)] ml-2", children: "(Context › Application › Module)" })
      ] }),
      (m?.length ?? 0) > 0 ? /* @__PURE__ */ e(he, { data: m, mode: u }) : /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: "Aucune donnée de module disponible" })
    ] }),
    /* @__PURE__ */ e("div", { className: "rounded-[var(--radius-card)] border border-[var(--item-color-border)] bg-gradient-to-r from-[var(--color-primary-600)]/10 to-[var(--color-accent-500)]/10 p-6", children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e("h3", { className: "font-bold text-[var(--text-primary)]", children: "Explorer toutes les Applications" }),
        /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-[var(--text-secondary)]", children: "Voir les analyses détaillées pour chaque application et gérer les permissions" })
      ] }),
      /* @__PURE__ */ e(
        "button",
        {
          onClick: () => d("/administration/applications/list"),
          className: "whitespace-nowrap rounded-[var(--radius-button)] bg-[var(--color-primary-600)] px-4 py-2 font-medium text-white transition-all hover:shadow-md",
          children: "Voir les Applications"
        }
      )
    ] }) })
  ] });
};
export {
  Le as ApplicationsDashboardPage
};
//# sourceMappingURL=ApplicationsDashboardPage-DTWZxJJM.js.map
