import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { useState as w } from "react";
import { Link as o } from "react-router-dom";
import { useTranslation as k } from "react-i18next";
import { ArrowLeft as n, LayoutDashboard as m, ChevronRight as h, Star as S, Building2 as $, Settings as j, Activity as x, TrendingUp as R, AlertTriangle as p, BarChart3 as v, Clock as T, Globe as E, Monitor as N, Laptop as A, Smartphone as C, Zap as G, HelpCircle as D, Code2 as L, ArrowRight as z } from "lucide-react";
const B = [
  { id: "1", label: "Utilisateurs", applicationLabel: "Administration", icon: "👥" },
  { id: "2", label: "Tickets", applicationLabel: "Support", icon: "🎧" },
  { id: "3", label: "Tenants", applicationLabel: "Administration", icon: "🏢" },
  { id: "4", label: "Workflows", applicationLabel: "Administration", icon: "⚙️" }
], U = [
  { day: "Lun", pct: 42 },
  { day: "Mar", pct: 78 },
  { day: "Mer", pct: 61 },
  { day: "Jeu", pct: 100 },
  { day: "Ven", pct: 52 },
  { day: "Sam", pct: 7 },
  { day: "Dim", pct: 0 }
], M = [
  2,
  5,
  12,
  18,
  25,
  22,
  10,
  8,
  20,
  17,
  14,
  9,
  4,
  1
], W = 25, b = 251.3, u = [
  { label: "Administration", pct: 65, offset: 0, color: "var(--dataviz-cat-1)" },
  { label: "Support", pct: 25, offset: 163.3, color: "var(--dataviz-cat-2)" },
  { label: "Mon Espace", pct: 10, offset: 225.8, color: "var(--dataviz-cat-3)" }
], H = [1, 2, 1, 4, 3, 6, 2, 1, 5, 4, 2, 8, 1, 3], P = [16, 22, 14, 28, 20, 32, 18, 24, 17, 30, 22, 27, 14, 26], g = 280, i = 80, _ = 14;
function y(r, c, l) {
  return r.map(
    (t, d) => `${(d / (_ - 1) * g).toFixed(1)},${(i - (t - c) / (l - c) * i).toFixed(1)}`
  ).join(" ");
}
const q = y(H, 0, 8), F = y(P, 12, 34), J = [
  { label: "Desktop", pct: 85, icon: A, color: "var(--dataviz-cat-1)" },
  { label: "Mobile", pct: 10, icon: C, color: "var(--dataviz-cat-2)" },
  { label: "Tablette", pct: 5, icon: N, color: "var(--dataviz-cat-3)" }
], f = [], V = {
  GET: "bg-[var(--accent-bg)] text-[var(--accent-text)] border-[var(--color-accent-500)]/20"
}, I = [
  { id: "BR-001", category: "Performance", key: "techRef.rules.br001" },
  { id: "BR-002", category: "UI / UX", key: "techRef.rules.br002" },
  { id: "BR-003", category: "Sécurité", key: "techRef.rules.br003" },
  { id: "BR-004", category: "Navigation", key: "techRef.rules.br004" },
  { id: "BR-005", category: "Performance", key: "techRef.rules.br005" },
  { id: "BR-006", category: "Accès", key: "techRef.rules.br006" }
], X = [
  { method: "GET", path: "/api/user/dashboard/all", handler: "GetAll", params: "?period=30&errorLimit=10" },
  { method: "GET", path: "/api/user/dashboard/session-analytics", handler: "GetSessionAnalytics", params: "?period=30" },
  { method: "GET", path: "/api/user/dashboard/login-errors", handler: "GetLoginErrors", params: "?limit=10" },
  { method: "GET", path: "/api/user/dashboard/current-session", handler: "GetCurrentSession", params: "" },
  { method: "GET", path: "/api/user/dashboard/device-stats", handler: "GetDeviceStats", params: "" },
  { method: "GET", path: "/api/user/dashboard/weekly-stats", handler: "GetWeeklyStats", params: "?period=30" },
  { method: "GET", path: "/api/user/dashboard/hourly-stats", handler: "GetHourlyStats", params: "?period=30" },
  { method: "GET", path: "/api/user/dashboard/application-usage", handler: "GetApplicationUsage", params: "?period=30" }
];
function s({ children: r }) {
  return /* @__PURE__ */ e("div", { className: "rounded-md border-l-2 border-[var(--color-accent-500)] bg-[var(--bg-secondary)] px-3 py-2 text-xs text-[var(--text-secondary)]", children: r });
}
function ee() {
  const { t: r } = k("docsMyspaceDashboard"), [c, l] = w(!1);
  return /* @__PURE__ */ a("div", { className: "space-y-8 max-w-5xl mx-auto pb-12", children: [
    /* @__PURE__ */ a(
      o,
      {
        to: "/system/docs/user",
        className: "inline-flex items-center gap-1.5 text-sm text-[var(--color-accent-500)] hover:text-[var(--color-accent-600)] transition-colors",
        children: [
          /* @__PURE__ */ e(n, { className: "h-4 w-4" }),
          r("nav.backToMySpace")
        ]
      }
    ),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-3", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--accent-bg)]", children: /* @__PURE__ */ e(m, { className: "h-6 w-6 text-[var(--color-accent-600)]" }) }),
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-[var(--text-primary)]", children: r("title") }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-0.5", children: r("subtitle") })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3 text-sm text-[var(--text-secondary)]", children: [
        /* @__PURE__ */ a("span", { children: [
          "6 ",
          r("header.businessRules")
        ] }),
        /* @__PURE__ */ e("span", { children: "·" }),
        /* @__PURE__ */ a("span", { children: [
          "8 ",
          r("header.apiEndpoints")
        ] }),
        /* @__PURE__ */ e("span", { children: "·" }),
        /* @__PURE__ */ a("span", { children: [
          "7 ",
          r("header.sections")
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { children: [
      /* @__PURE__ */ a("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "1" }),
        r("sections.objective")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] leading-relaxed", children: r("objective") })
    ] }),
    /* @__PURE__ */ a("section", { children: [
      /* @__PURE__ */ a("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "2" }),
        r("sections.access")
      ] }),
      /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)] space-y-3", children: [
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e("div", { className: "text-xs font-medium text-[var(--text-secondary)] mb-2", children: r("access.navigation") }),
          /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--accent-bg)] text-[var(--accent-text)] font-medium", children: "Mon Espace" }),
            /* @__PURE__ */ e(h, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }),
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--accent-bg)] text-[var(--accent-text)] font-medium", children: r("access.module") })
          ] })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3 text-xs", children: [
          /* @__PURE__ */ e("div", { className: "px-3 py-1.5 rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] font-mono text-[var(--text-secondary)]", children: "/myspace/dashboard" }),
          /* @__PURE__ */ e("div", { className: "px-3 py-1.5 rounded-full bg-[var(--accent-bg)] border border-[var(--color-accent-500)]/20 text-[var(--accent-text)] font-mono", children: r("access.permission") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { children: [
      /* @__PURE__ */ a("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "3" }),
        r("sections.dashboard")
      ] }),
      /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden bg-[var(--bg-card)] shadow-sm", children: [
        /* @__PURE__ */ a("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center gap-3", children: [
          /* @__PURE__ */ e(m, { className: "h-5 w-5 text-[var(--color-accent-600)]" }),
          /* @__PURE__ */ a("div", { children: [
            /* @__PURE__ */ e("h3", { className: "text-sm font-bold text-[var(--text-primary)]", children: r("dashboard.welcome") }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: r("dashboard.subtitle") })
          ] })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pt-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ a("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] p-4 bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-3", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(S, { className: "w-4 h-4 text-[var(--color-accent-500)]" }),
                /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: r("dashboard.favorites.title") }),
                /* @__PURE__ */ a("span", { className: "flex items-center gap-1 text-xs text-[var(--text-tertiary)] px-2 py-0.5 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-full", children: [
                  /* @__PURE__ */ e($, { className: "w-3 h-3" }),
                  r("dashboard.favorites.tenant")
                ] })
              ] }),
              /* @__PURE__ */ a("button", { className: "flex items-center gap-1 px-2 py-1 text-xs text-[var(--text-secondary)] border border-[var(--border-color)] rounded-md", children: [
                /* @__PURE__ */ e(j, { className: "w-3 h-3" }),
                r("dashboard.favorites.manage")
              ] })
            ] }),
            /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: B.map((t) => /* @__PURE__ */ a(
              "div",
              {
                className: "flex flex-col items-center gap-2 p-3 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-[var(--radius-card)]",
                children: [
                  /* @__PURE__ */ e("div", { className: "w-10 h-10 flex items-center justify-center bg-[var(--color-accent-100)] rounded-lg text-lg", children: t.icon }),
                  /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[var(--text-primary)] text-center", children: t.label }),
                  /* @__PURE__ */ e("span", { className: "text-[10px] text-[var(--text-muted)]", children: t.applicationLabel })
                ]
              },
              t.id
            )) })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.favorites") })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3", children: [
            /* @__PURE__ */ a("div", { className: "p-3 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-1", children: [
                /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-secondary)]", children: r("dashboard.kpi.totalSessions") }),
                /* @__PURE__ */ e(x, { className: "h-4 w-4 text-[var(--dataviz-cat-1)]" })
              ] }),
              /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-[var(--text-primary)]", children: "47" }),
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)] mt-0.5", children: r("dashboard.period") })
            ] }),
            /* @__PURE__ */ a("div", { className: "p-3 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-1", children: [
                /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-secondary)]", children: r("dashboard.kpi.avgDuration") }),
                /* @__PURE__ */ e(R, { className: "h-4 w-4 text-[var(--dataviz-cat-2)]" })
              ] }),
              /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-[var(--text-primary)]", children: "23 min" }),
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)] mt-0.5", children: r("dashboard.perSession") })
            ] }),
            /* @__PURE__ */ a("div", { className: "p-3 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-1", children: [
                /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-secondary)]", children: r("dashboard.kpi.connectionErrors") }),
                /* @__PURE__ */ e(p, { className: "h-4 w-4 text-[var(--dataviz-cat-3)]" })
              ] }),
              /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-[var(--text-primary)]", children: "0" }),
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)] mt-0.5", children: r("dashboard.recent") })
            ] })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.kpis") })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [
            /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-3 overflow-hidden", children: [
              /* @__PURE__ */ a("h4", { className: "text-xs font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
                /* @__PURE__ */ e(v, { className: "h-3.5 w-3.5" }),
                r("dashboard.weeklyUsage.title")
              ] }),
              /* @__PURE__ */ e("div", { className: "flex items-end gap-1 h-24", children: U.map((t) => /* @__PURE__ */ a("div", { className: "flex-1 min-w-0 flex flex-col items-center gap-0.5", children: [
                /* @__PURE__ */ e(
                  "div",
                  {
                    className: "w-full rounded-t",
                    style: {
                      height: `${t.pct}%`,
                      backgroundColor: "var(--dataviz-accent)",
                      opacity: t.pct > 0 ? 0.8 : 0,
                      minHeight: t.pct > 0 ? "6px" : "0"
                    }
                  }
                ),
                /* @__PURE__ */ e("span", { className: "text-[9px] text-[var(--text-muted)] mt-0.5", children: t.day })
              ] }, t.day)) })
            ] }),
            /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-3 overflow-hidden", children: [
              /* @__PURE__ */ a("h4", { className: "text-xs font-semibold text-[var(--text-primary)] mb-1 flex items-center gap-2", children: [
                /* @__PURE__ */ e(T, { className: "h-3.5 w-3.5" }),
                r("dashboard.hourlyUsage.title")
              ] }),
              /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)] mb-3", children: r("dashboard.hourlyUsage.peakHour") }),
              /* @__PURE__ */ e("div", { className: "flex items-end gap-px h-24", children: M.map((t, d) => /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "w-full rounded-t",
                  style: {
                    height: `${t / W * 100}%`,
                    backgroundColor: "var(--dataviz-accent)",
                    opacity: d === 4 ? 1 : 0.45,
                    minHeight: t > 0 ? "6px" : "0"
                  }
                }
              ) }, d)) }),
              /* @__PURE__ */ a("div", { className: "flex justify-between text-[9px] text-[var(--text-muted)] mt-1", children: [
                /* @__PURE__ */ e("span", { children: "06:00" }),
                /* @__PURE__ */ e("span", { children: "19:00" })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.weeklyUsage") }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.hourlyUsage") })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-3 overflow-hidden", children: [
            /* @__PURE__ */ a("h4", { className: "text-xs font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
              /* @__PURE__ */ e(E, { className: "h-3.5 w-3.5" }),
              r("dashboard.appUsage.title")
            ] }),
            /* @__PURE__ */ a("div", { className: "flex flex-col sm:flex-row items-center gap-4", children: [
              /* @__PURE__ */ a("svg", { viewBox: "0 0 120 120", className: "w-28 h-28 flex-shrink-0", "aria-hidden": "true", children: [
                /* @__PURE__ */ e("circle", { cx: "60", cy: "60", r: "40", fill: "none", stroke: "var(--bg-tertiary)", strokeWidth: "20" }),
                u.map((t) => /* @__PURE__ */ e(
                  "circle",
                  {
                    cx: "60",
                    cy: "60",
                    r: "40",
                    fill: "none",
                    stroke: t.color,
                    strokeWidth: "20",
                    strokeDasharray: `${b * t.pct / 100} ${b}`,
                    strokeDashoffset: -t.offset,
                    transform: "rotate(-90 60 60)"
                  },
                  t.label
                )),
                /* @__PURE__ */ e("circle", { cx: "60", cy: "60", r: "26", fill: "var(--bg-card)" })
              ] }),
              /* @__PURE__ */ e("div", { className: "space-y-1.5", children: u.map((t) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-xs", children: [
                /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full flex-shrink-0", style: { backgroundColor: t.color } }),
                /* @__PURE__ */ e("span", { className: "text-[var(--text-primary)]", children: t.label }),
                /* @__PURE__ */ a("span", { className: "text-[var(--text-muted)] font-medium ml-auto pl-2", children: [
                  t.pct,
                  "%"
                ] })
              ] }, t.label)) })
            ] })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.appUsage") })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ e("div", { className: "flex gap-2 justify-end", children: ["7", "30", "90"].map((t) => /* @__PURE__ */ e(
            "button",
            {
              className: `px-3 py-1 text-xs font-medium rounded-md ${t === "30" ? "bg-[var(--color-accent-500)] text-white" : "bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]"}`,
              children: r(`dashboard.periodButtons.${t}days`)
            },
            t
          )) }),
          /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-3 overflow-hidden", children: [
            /* @__PURE__ */ a("h4", { className: "text-xs font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2", children: [
              /* @__PURE__ */ e(x, { className: "h-3.5 w-3.5" }),
              r("dashboard.sessionAnalytics.title")
            ] }),
            /* @__PURE__ */ a("div", { className: "flex items-center gap-4 mb-2", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5 text-xs", children: [
                /* @__PURE__ */ e("div", { className: "w-8 h-0.5 bg-[var(--dataviz-cat-1)]" }),
                /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: r("dashboard.sessionAnalytics.connections") })
              ] }),
              /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5 text-xs", children: [
                /* @__PURE__ */ e("div", { className: "w-8 h-0.5 bg-[var(--dataviz-cat-2)]", style: { borderTop: "2px dashed var(--dataviz-cat-2)" } }),
                /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: r("dashboard.sessionAnalytics.avgDuration") })
              ] })
            ] }),
            /* @__PURE__ */ a(
              "svg",
              {
                viewBox: `0 0 ${g} ${i}`,
                className: "w-full",
                preserveAspectRatio: "none",
                style: { height: "80px" },
                "aria-hidden": "true",
                children: [
                  /* @__PURE__ */ e(
                    "polyline",
                    {
                      points: q,
                      fill: "none",
                      stroke: "var(--dataviz-cat-1)",
                      strokeWidth: "2",
                      strokeLinejoin: "round",
                      strokeLinecap: "round"
                    }
                  ),
                  /* @__PURE__ */ e(
                    "polyline",
                    {
                      points: F,
                      fill: "none",
                      stroke: "var(--dataviz-cat-2)",
                      strokeWidth: "2",
                      strokeDasharray: "5 3",
                      strokeLinejoin: "round",
                      strokeLinecap: "round"
                    }
                  )
                ]
              }
            ),
            /* @__PURE__ */ a("div", { className: "flex justify-between text-[9px] text-[var(--text-muted)] mt-1", children: [
              /* @__PURE__ */ e("span", { children: "J-14" }),
              /* @__PURE__ */ e("span", { children: "Aujourd'hui" })
            ] })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.periodButtons") }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.sessionAnalytics") })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-3", children: [
            /* @__PURE__ */ a("h4", { className: "text-xs font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
              /* @__PURE__ */ e(N, { className: "h-3.5 w-3.5" }),
              r("dashboard.currentSession.title")
            ] }),
            /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: [
              { label: r("dashboard.currentSession.browser"), value: "Chrome 124" },
              { label: r("dashboard.currentSession.os"), value: "Windows 10" },
              { label: r("dashboard.currentSession.device"), value: "Desktop" },
              { label: r("dashboard.currentSession.ip"), value: "192.168.1.42" }
            ].map((t) => /* @__PURE__ */ a("div", { className: "p-2 bg-[var(--bg-secondary)] rounded-[var(--radius-card)]", children: [
              /* @__PURE__ */ e("div", { className: "text-[10px] text-[var(--text-muted)] mb-0.5", children: t.label }),
              /* @__PURE__ */ e("div", { className: "text-xs font-medium text-[var(--text-primary)]", children: t.value })
            ] }, t.label)) })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.currentSession") })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden", children: [
            /* @__PURE__ */ a("div", { className: "px-3 py-2 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center gap-2", children: [
              /* @__PURE__ */ e(p, { className: "h-3.5 w-3.5 text-[var(--text-secondary)]" }),
              /* @__PURE__ */ e("h4", { className: "text-xs font-semibold text-[var(--text-primary)]", children: r("dashboard.loginErrors.title") })
            ] }),
            f.length === 0 ? /* @__PURE__ */ a("div", { className: "p-3 text-center text-xs text-[var(--text-secondary)]", children: [
              "✓ ",
              r("dashboard.loginErrors.empty")
            ] }) : /* @__PURE__ */ e("table", { className: "w-full text-xs", children: /* @__PURE__ */ e("tbody", { children: f.map((t, d) => /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "px-3 py-2", children: t.date }),
              /* @__PURE__ */ e("td", { className: "px-3 py-2 font-mono", children: t.ip }),
              /* @__PURE__ */ e("td", { className: "px-3 py-2 text-[var(--text-muted)]", children: t.reason })
            ] }, d)) }) })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.loginErrors") })
        ] }),
        /* @__PURE__ */ a("div", { className: "px-4 pb-4 space-y-2", children: [
          /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-3 overflow-hidden", children: [
            /* @__PURE__ */ a("h4", { className: "text-xs font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
              /* @__PURE__ */ e(v, { className: "h-3.5 w-3.5" }),
              r("dashboard.deviceStats.title")
            ] }),
            /* @__PURE__ */ e("div", { className: "space-y-2", children: J.map((t) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(t.icon, { className: "h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]" }),
              /* @__PURE__ */ e("div", { className: "w-16 text-xs text-[var(--text-secondary)]", children: t.label }),
              /* @__PURE__ */ e("div", { className: "flex-1 min-w-0 h-3 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "h-full rounded-full",
                  style: { width: `${t.pct}%`, backgroundColor: t.color }
                }
              ) }),
              /* @__PURE__ */ a("div", { className: "w-8 text-right text-xs font-medium text-[var(--text-primary)]", children: [
                t.pct,
                "%"
              ] })
            ] }, t.label)) })
          ] }),
          /* @__PURE__ */ e(s, { children: r("dashboard.annotations.deviceStats") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { children: [
      /* @__PURE__ */ a("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "4" }),
        r("sections.useCases")
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [1, 2, 3].map((t) => /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ e("div", { className: "text-xs font-semibold text-[var(--color-accent-600)] uppercase tracking-wide mb-1", children: r(`useCases.${t}.persona`) }),
        /* @__PURE__ */ e("p", { className: "text-sm font-medium mb-2", children: r(`useCases.${t}.situation`) }),
        /* @__PURE__ */ e("div", { className: "pt-2 border-t border-[var(--border-color)]", children: /* @__PURE__ */ a("p", { className: "text-xs text-[var(--text-muted)]", children: [
          /* @__PURE__ */ a("span", { className: "font-medium text-[var(--color-accent-600)]", children: [
            r("useCases.withLabel"),
            " "
          ] }),
          r(`useCases.${t}.outcome`)
        ] }) })
      ] }, `usecase-${t}`)) })
    ] }),
    /* @__PURE__ */ a("section", { children: [
      /* @__PURE__ */ a("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "5" }),
        r("sections.features")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)] flex gap-4", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--accent-bg)] flex-shrink-0 h-fit", children: /* @__PURE__ */ e(G, { className: "h-4 w-4 text-[var(--color-accent-600)]" }) }),
        /* @__PURE__ */ a("div", { className: "min-w-0", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-1", children: r(`features.${t}.title`) }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)] mb-2", children: r(`features.${t}.desc`) }),
          /* @__PURE__ */ a("div", { className: "px-3 py-1.5 rounded-md bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ e("span", { className: "font-medium text-[var(--color-accent-600)]", children: "Ex. " }),
            r(`features.${t}.example`)
          ] })
        ] })
      ] }, `feature-${t}`)) })
    ] }),
    /* @__PURE__ */ a("section", { children: [
      /* @__PURE__ */ a("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "6" }),
        r("sections.faq")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ a("div", { className: "flex items-start gap-2 mb-2", children: [
          /* @__PURE__ */ e(D, { className: "h-4 w-4 text-[var(--color-accent-600)] flex-shrink-0 mt-0.5" }),
          /* @__PURE__ */ e("h3", { className: "text-sm font-medium", children: r(`faq.${t}.question`) })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)] pl-6", children: r(`faq.${t}.answer`) })
      ] }, `faq-${t}`)) })
    ] }),
    /* @__PURE__ */ a("section", { children: [
      /* @__PURE__ */ a(
        "button",
        {
          onClick: () => l(!c),
          className: "w-full flex items-center justify-between p-4 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-card)] hover:bg-[var(--bg-secondary)] transition-colors",
          children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(L, { className: "h-4 w-4 text-[var(--text-muted)]" }),
              /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: r("sections.techRef") })
            ] }),
            /* @__PURE__ */ e(h, { className: `h-4 w-4 text-[var(--text-muted)] transition-transform ${c ? "rotate-90" : ""}` })
          ]
        }
      ),
      c && /* @__PURE__ */ a("div", { className: "mt-2 border border-[var(--border-color)] rounded-[var(--radius-card)] bg-[var(--bg-card)] divide-y divide-[var(--border-color)]", children: [
        /* @__PURE__ */ a("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: r("techRef.rulesTitle") }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: I.map((t) => /* @__PURE__ */ a("div", { className: "p-3 rounded-[var(--radius-card)] bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-1", children: [
              /* @__PURE__ */ e("span", { className: "font-mono text-[var(--color-accent-600)]", children: t.id }),
              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 rounded bg-[var(--accent-bg)] text-[var(--accent-text)]", children: t.category })
            ] }),
            /* @__PURE__ */ e("p", { className: "text-[var(--text-muted)]", children: r(t.key) })
          ] }, t.id)) })
        ] }),
        /* @__PURE__ */ a("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: r("techRef.permissionsTitle") }),
          /* @__PURE__ */ a("table", { className: "w-full text-xs", children: [
            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("th", { className: "text-left py-2 px-2 text-[var(--text-muted)] font-medium", children: "Condition" }),
              /* @__PURE__ */ e("th", { className: "text-left py-2 px-2 text-[var(--text-muted)] font-medium", children: "Description" })
            ] }) }),
            /* @__PURE__ */ e("tbody", { children: /* @__PURE__ */ a("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-2 font-mono text-[var(--accent-text)]", children: "JWT Bearer" }),
              /* @__PURE__ */ e("td", { className: "py-2 px-2 text-[var(--text-muted)]", children: r("techRef.perms.auth") })
            ] }) })
          ] })
        ] }),
        /* @__PURE__ */ a("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: r("techRef.endpointsTitle") }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: X.map((t, d) => /* @__PURE__ */ a("div", { className: "p-2.5 rounded-[var(--radius-card)] bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-0.5 min-w-0", children: [
              /* @__PURE__ */ e("span", { className: `font-bold px-1.5 py-0.5 rounded border text-xs flex-shrink-0 ${V[t.method]}`, children: t.method }),
              /* @__PURE__ */ a("code", { className: "text-[var(--text-primary)] truncate", children: [
                t.path,
                t.params
              ] })
            ] }),
            /* @__PURE__ */ e("div", { className: "text-[var(--text-muted)] pl-1", children: t.handler })
          ] }, `ep-${d}`)) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ a(
        o,
        {
          to: "/system/docs/user",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-accent-600)] transition-colors text-sm",
          children: [
            /* @__PURE__ */ e(n, { className: "w-4 h-4" }),
            r("nav.backToMySpace")
          ]
        }
      ),
      /* @__PURE__ */ a(
        o,
        {
          to: "/myspace/preferences",
          className: "flex items-center gap-2 text-[var(--color-accent-600)] hover:underline text-sm",
          children: [
            r("nav.toPreferences"),
            /* @__PURE__ */ e(z, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  ee as default
};
//# sourceMappingURL=index-CwTfzSoI.js.map
