import { jsx as e, jsxs as a, Fragment as ne } from "react/jsx-runtime";
import { useState as l, useCallback as le, useEffect as ce } from "react";
import { useNavigate as ie } from "react-router-dom";
import { useTranslation as de } from "react-i18next";
import { o as oe, W as me, a as he, X as u, Y as ve, Z as L, B as ge, C as xe } from "./index-CwSaRXXg.js";
import { Loader2 as pe, RefreshCw as $, LayoutDashboard as be, Info as ue, ExternalLink as fe, Headphones as Ne, TrendingUp as ye, Clock as we, CheckCircle as Se, AlertTriangle as I, Star as P, XCircle as ke, Users as Re, ArrowUp as Ce, ArrowDown as Te } from "lucide-react";
import { t as $e } from "./ticketingApi-Bu4rKwLl.js";
const Pe = {
  Low: "var(--info-text)",
  Medium: "var(--warning-text)",
  High: "var(--warning-text)",
  Critical: "var(--error-text)"
}, De = {
  Open: "var(--warning-text)",
  InProgress: "var(--info-text)",
  OnHold: "var(--warning-text)",
  Resolved: "var(--success-text)",
  Closed: "var(--text-secondary)",
  Rejected: "var(--error-text)"
};
function Ge() {
  const { t } = de("support"), n = ie(), { hasPermission: d } = oe(), { isGlpi: s, glpiBaseUrl: h } = me(), { currentTenant: x } = he(), [D, G] = l(!0), [A, B] = l(!1), [o, W] = l(30), R = d("support.sla.read"), [v, F] = l(null), [M, U] = l([]), [j, O] = l([]), [C, V] = l([]), [X, z] = l([]), [g, K] = l(null), [p, Y] = l(null), [y, Z] = l([]), [w, _] = l([]), [c, q] = l(null), [S, E] = l(!1), k = le(async () => {
    try {
      const [
        r,
        i,
        m,
        b,
        N,
        te,
        re
      ] = await Promise.all([
        u.getOverview(o),
        u.getByStatus(),
        u.getByPriority(),
        u.getAgentWorkload(),
        u.getTrends(o),
        u.getSatisfactionStats(o),
        u.getSlaCompliance(o)
      ]);
      if (F(r), U(i), O(m), V(b), z(N), K(te), Y(re), s)
        try {
          const T = await ve.tickets.getGlpiSyncStats();
          q(T);
        } catch {
        }
      if (R) {
        const [T, se] = await Promise.all([
          L.getBreachedTickets(),
          L.getTicketsApproachingBreach(60)
        ]);
        Z(T), _(se);
      }
    } catch (r) {
      console.error("Failed to load dashboard data:", r);
    } finally {
      G(!1), B(!1);
    }
  }, [o, R, s]);
  ce(() => {
    k();
  }, [k]);
  const J = () => {
    B(!0), k();
  }, Q = async () => {
    if (!(!x?.id || S)) {
      E(!0);
      try {
        await $e.triggerSync(x.id), await k();
      } catch {
      } finally {
        E(!1);
      }
    }
  };
  if (D)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ e(pe, { className: "w-8 h-8 animate-spin text-[var(--color-primary-600)]" }) });
  const ee = (r) => r >= 95 ? "text-[var(--success-text)]" : r >= 80 ? "text-[var(--warning-text)]" : "text-[var(--error-text)]", ae = (r) => r >= 4 ? "text-[var(--success-text)]" : r >= 3 ? "text-[var(--warning-text)]" : "text-[var(--error-text)]";
  return /* @__PURE__ */ a("div", { className: "space-y-6", children: [
    /* @__PURE__ */ e(
      ge,
      {
        items: [
          { label: t("title", "Support"), href: "/support" },
          { label: t("dashboard.title", "Dashboard") }
        ]
      }
    ),
    /* @__PURE__ */ e(
      xe,
      {
        title: t("dashboard.title"),
        subtitle: t("dashboard.subtitle"),
        icon: /* @__PURE__ */ e(be, { className: "w-6 h-6" }),
        actions: /* @__PURE__ */ a(ne, { children: [
          /* @__PURE__ */ a(
            "select",
            {
              value: o,
              onChange: (r) => W(Number(r.target.value)),
              className: "input",
              children: [
                /* @__PURE__ */ e("option", { value: 7, children: t("dashboard.period7") }),
                /* @__PURE__ */ e("option", { value: 30, children: t("dashboard.period30") }),
                /* @__PURE__ */ e("option", { value: 90, children: t("dashboard.period90") })
              ]
            }
          ),
          /* @__PURE__ */ a(
            "button",
            {
              onClick: J,
              disabled: A,
              className: "btn btn-secondary flex items-center gap-2",
              children: [
                /* @__PURE__ */ e($, { className: `w-4 h-4 ${A ? "animate-spin" : ""}` }),
                t("dashboard.refresh")
              ]
            }
          )
        ] })
      }
    ),
    s && /* @__PURE__ */ a("div", { className: "flex items-center gap-3 p-4 rounded-lg bg-[var(--info-bg)] border border-[var(--info-border)] text-[var(--info-text)]", children: [
      /* @__PURE__ */ e(ue, { className: "w-5 h-5 flex-shrink-0" }),
      /* @__PURE__ */ a("div", { className: "flex-1", children: [
        /* @__PURE__ */ e("p", { className: "font-medium", children: t("glpi.managedByGlpi") }),
        /* @__PURE__ */ e("p", { className: "text-sm opacity-80", children: t("glpi.dashboardSyncInfo") })
      ] }),
      h && /* @__PURE__ */ a(
        "a",
        {
          href: h,
          target: "_blank",
          rel: "noopener noreferrer",
          className: "btn btn-secondary flex items-center gap-2 text-sm",
          children: [
            /* @__PURE__ */ e(fe, { className: "w-4 h-4" }),
            t("glpi.openGlpi")
          ]
        }
      )
    ] }),
    s && c && /* @__PURE__ */ a("div", { className: "card p-4 space-y-4", children: [
      /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ a("h3", { className: "font-semibold flex items-center gap-2", children: [
            /* @__PURE__ */ e($, { className: "w-5 h-5" }),
            t("glpi.sync.title", "GLPI Sync Status")
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: t("glpi.sync.subtitle", "Synchronization overview with GLPI") })
        ] }),
        /* @__PURE__ */ a(
          "button",
          {
            onClick: Q,
            disabled: S,
            className: "btn btn-secondary flex items-center gap-2",
            children: [
              /* @__PURE__ */ e($, { className: `w-4 h-4 ${S ? "animate-spin" : ""}` }),
              S ? t("glpi.sync.syncing", "Syncing...") : t("glpi.sync.triggerSync", "Sync Now")
            ]
          }
        )
      ] }),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
        /* @__PURE__ */ a("div", { className: "card p-4 text-center border bg-[var(--info-bg)] text-[var(--info-text)] border-[var(--info-border)]", children: [
          /* @__PURE__ */ e("div", { className: "text-2xl font-bold", children: c.totalMappedTickets }),
          /* @__PURE__ */ e("div", { className: "text-sm opacity-80", children: t("glpi.sync.totalSynced", "Total Synced") })
        ] }),
        /* @__PURE__ */ a("div", { className: "card p-4 text-center border bg-[var(--success-bg)] text-[var(--success-text)] border-[var(--success-border)]", children: [
          /* @__PURE__ */ e("div", { className: "text-2xl font-bold", children: c.ticketsSyncedOk }),
          /* @__PURE__ */ e("div", { className: "text-sm opacity-80", children: t("glpi.sync.syncSuccess", "Successful") })
        ] }),
        /* @__PURE__ */ a("div", { className: "card p-4 text-center border bg-[var(--error-bg)] text-[var(--error-text)] border-[var(--error-border)]", children: [
          /* @__PURE__ */ e("div", { className: "text-2xl font-bold", children: c.ticketsWithSyncErrors }),
          /* @__PURE__ */ e("div", { className: "text-sm opacity-80", children: t("glpi.sync.syncErrors", "Errors") })
        ] }),
        /* @__PURE__ */ a("div", { className: `card p-4 text-center border ${c.successRate >= 90 ? "bg-[var(--success-bg)] text-[var(--success-text)] border-[var(--success-border)]" : "bg-[var(--error-bg)] text-[var(--error-text)] border-[var(--error-border)]"}`, children: [
          /* @__PURE__ */ a("div", { className: "text-2xl font-bold", children: [
            c.successRate,
            "%"
          ] }),
          /* @__PURE__ */ e("div", { className: "text-sm opacity-80", children: t("glpi.sync.successRate", "Success Rate") })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "flex items-center gap-6 text-sm text-[var(--text-secondary)]", children: [
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ a("span", { className: "font-medium", children: [
            t("glpi.sync.lastSync", "Last Sync"),
            ":"
          ] }),
          " ",
          c.lastSyncAt ? new Date(c.lastSyncAt).toLocaleString() : t("glpi.sync.never", "Never")
        ] }),
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ a("span", { className: "font-medium", children: [
            t("glpi.sync.syncInterval", "Interval"),
            ":"
          ] }),
          " ",
          t("glpi.sync.everyNMinutes", "Every {{n}} min", { n: c.syncIntervalMinutes })
        ] }),
        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("span", { className: `px-2 py-0.5 rounded text-xs font-medium ${c.syncEnabled ? "bg-[var(--success-bg)] text-[var(--success-text)]" : "bg-[var(--bg-secondary)] text-[var(--text-secondary)]"}`, children: c.syncEnabled ? t("glpi.sync.enabled", "Enabled") : t("glpi.sync.disabled", "Disabled") }) })
      ] }),
      c.lastSyncError && /* @__PURE__ */ a("div", { className: "p-3 rounded-lg bg-[var(--error-bg)] border border-[var(--error-border)]", children: [
        /* @__PURE__ */ e("p", { className: "text-sm font-medium text-[var(--error-text)]", children: t("glpi.sync.lastError", "Last Sync Error") }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--error-text)] opacity-80 mt-1", children: c.lastSyncError })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", children: [
      /* @__PURE__ */ e(
        f,
        {
          title: t("dashboard.totalTickets"),
          value: v?.totalTickets ?? 0,
          icon: /* @__PURE__ */ e(Ne, { className: "w-5 h-5" }),
          color: "blue"
        }
      ),
      /* @__PURE__ */ e(
        f,
        {
          title: t("dashboard.newTickets"),
          value: v?.newTickets ?? 0,
          icon: /* @__PURE__ */ e(ye, { className: "w-5 h-5" }),
          color: "green",
          subtitle: t("dashboard.lastNDays", { period: o })
        }
      ),
      /* @__PURE__ */ e(
        f,
        {
          title: t("dashboard.openTickets"),
          value: v?.openTickets ?? 0,
          icon: /* @__PURE__ */ e(we, { className: "w-5 h-5" }),
          color: "yellow"
        }
      ),
      /* @__PURE__ */ e(
        f,
        {
          title: t("dashboard.resolvedTickets"),
          value: v?.resolvedTickets ?? 0,
          icon: /* @__PURE__ */ e(Se, { className: "w-5 h-5" }),
          color: "green",
          subtitle: t("dashboard.lastNDays", { period: o })
        }
      ),
      /* @__PURE__ */ e(
        f,
        {
          title: t("dashboard.slaCompliance"),
          value: `${v?.slaCompliancePercentage?.toFixed(1) ?? 0}%`,
          icon: /* @__PURE__ */ e(I, { className: "w-5 h-5" }),
          color: (v?.slaCompliancePercentage ?? 0) >= 90 ? "green" : "red"
        }
      ),
      /* @__PURE__ */ e(
        f,
        {
          title: t("dashboard.avgSatisfaction"),
          value: `${v?.averageSatisfaction?.toFixed(1) ?? 0}/5`,
          icon: /* @__PURE__ */ e(P, { className: "w-5 h-5" }),
          color: (v?.averageSatisfaction ?? 0) >= 4 ? "green" : "yellow"
        }
      )
    ] }),
    R && (y.length > 0 || w.length > 0) && /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [
      y.length > 0 && /* @__PURE__ */ a("div", { className: "card p-4 border-l-4 border-[var(--error-border)]", children: [
        /* @__PURE__ */ a("h3", { className: "font-semibold text-[var(--error-text)] flex items-center gap-2 mb-3", children: [
          /* @__PURE__ */ e(ke, { className: "w-5 h-5" }),
          t("dashboard.slaBreached"),
          " (",
          y.length,
          ")"
        ] }),
        /* @__PURE__ */ e("div", { className: "space-y-2 max-h-40 overflow-y-auto", children: y.slice(0, 5).map((r) => /* @__PURE__ */ a(
          "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: () => n(`/support/tickets/${r.ticketId}`),
            children: [
              /* @__PURE__ */ a("div", { children: [
                /* @__PURE__ */ e("span", { className: "font-mono text-sm", children: r.ticketNumber }),
                /* @__PURE__ */ e("span", { className: "ml-2 text-sm", children: r.ticketTitle })
              ] }),
              /* @__PURE__ */ a("span", { className: "text-xs text-[var(--error-text)] font-medium", children: [
                r.responseBreached && "Response",
                " ",
                r.resolutionBreached && "Resolution"
              ] })
            ]
          },
          r.id
        )) })
      ] }),
      w.length > 0 && /* @__PURE__ */ a("div", { className: "card p-4 border-l-4 border-[var(--warning-border)]", children: [
        /* @__PURE__ */ a("h3", { className: "font-semibold text-[var(--warning-text)] flex items-center gap-2 mb-3", children: [
          /* @__PURE__ */ e(I, { className: "w-5 h-5" }),
          t("dashboard.approachingBreach"),
          " (",
          w.length,
          ")"
        ] }),
        /* @__PURE__ */ e("div", { className: "space-y-2 max-h-40 overflow-y-auto", children: w.slice(0, 5).map((r) => /* @__PURE__ */ a(
          "button",
          {
            type: "button",
            className: "w-full flex items-center justify-between p-2 bg-[var(--warning-bg)] rounded cursor-pointer hover:opacity-80 text-left",
            onClick: () => n(`/support/tickets/${r.ticketId}`),
            children: [
              /* @__PURE__ */ a("div", { children: [
                /* @__PURE__ */ e("span", { className: "font-mono text-sm", children: r.ticketNumber }),
                /* @__PURE__ */ e("span", { className: "ml-2 text-sm", children: r.ticketTitle })
              ] }),
              /* @__PURE__ */ a("span", { className: "text-xs text-[var(--warning-text)] font-medium", children: [
                Math.round(r.responseSlaPercentage),
                "% Response"
              ] })
            ]
          },
          r.id
        )) })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ a("div", { className: "card p-4", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: t("dashboard.ticketsByStatus") }),
        /* @__PURE__ */ e("div", { className: "space-y-3", children: M.map((r) => {
          const i = M.reduce((b, N) => b + N.count, 0), m = i > 0 ? r.count / i * 100 : 0;
          return /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ e("div", { className: "w-24 text-sm", children: r.status }),
            /* @__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: `${m}%`,
                  backgroundColor: De[r.status] || "#6b7280"
                }
              }
            ) }),
            /* @__PURE__ */ e("div", { className: "w-16 text-right text-sm font-medium", children: r.count })
          ] }, r.status);
        }) })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-4", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: t("dashboard.activeTicketsByPriority") }),
        /* @__PURE__ */ e("div", { className: "space-y-3", children: j.map((r) => {
          const i = j.reduce((b, N) => b + N.count, 0), m = i > 0 ? r.count / i * 100 : 0;
          return /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ e("div", { className: "w-24 text-sm", children: r.priority }),
            /* @__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: `${m}%`,
                  backgroundColor: Pe[r.priority] || "#6b7280"
                }
              }
            ) }),
            /* @__PURE__ */ e("div", { className: "w-16 text-right text-sm font-medium", children: r.count })
          ] }, r.priority);
        }) })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ a("div", { className: "card p-4", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: t("dashboard.slaPerformance") }),
        p && /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-4", children: [
          /* @__PURE__ */ a("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ a("div", { className: `text-3xl font-bold ${ee(p.compliancePercentage)}`, children: [
              p.compliancePercentage.toFixed(1),
              "%"
            ] }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: t("dashboard.complianceRate") })
          ] }),
          /* @__PURE__ */ a("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ e("div", { className: "text-3xl font-bold", children: p.ticketsWithinSla }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: t("dashboard.withinSla") })
          ] }),
          /* @__PURE__ */ a("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ e("div", { className: "text-3xl font-bold text-[var(--error-text)]", children: p.ticketsBreached }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: t("dashboard.breached") })
          ] }),
          /* @__PURE__ */ a("div", { className: "space-y-2 p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
              /* @__PURE__ */ a("span", { children: [
                t("dashboard.avgResponse"),
                ":"
              ] }),
              /* @__PURE__ */ e("span", { className: "font-medium", children: H(p.averageResponseMinutes) })
            ] }),
            /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
              /* @__PURE__ */ a("span", { children: [
                t("dashboard.avgResolution"),
                ":"
              ] }),
              /* @__PURE__ */ e("span", { className: "font-medium", children: H(p.averageResolutionMinutes) })
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-4", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: t("dashboard.customerSatisfaction") }),
        g && /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-4", children: [
          /* @__PURE__ */ a("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ e("div", { className: `text-3xl font-bold ${ae(g.averageRating)}`, children: g.averageRating.toFixed(1) }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: t("dashboard.averageRating") }),
            /* @__PURE__ */ e("div", { className: "flex justify-center mt-1", children: [1, 2, 3, 4, 5].map((r) => /* @__PURE__ */ e(
              P,
              {
                className: `w-4 h-4 ${r <= Math.round(g.averageRating) ? "text-[var(--warning-text)] fill-[var(--warning-text)]" : "text-[var(--text-muted)]"}`
              },
              r
            )) })
          ] }),
          /* @__PURE__ */ a("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ e("div", { className: "text-3xl font-bold", children: g.totalResponses }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: t("dashboard.totalResponses") })
          ] }),
          /* @__PURE__ */ a("div", { className: "col-span-2 p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ e("div", { className: "text-sm font-medium mb-2", children: t("dashboard.ratingDistribution") }),
            /* @__PURE__ */ e("div", { className: "space-y-1", children: [5, 4, 3, 2, 1].map((r) => {
              const i = g.ratingDistribution[r] || 0, m = g.totalResponses > 0 ? i / g.totalResponses * 100 : 0;
              return /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-sm", children: [
                /* @__PURE__ */ e("span", { className: "w-4", children: r }),
                /* @__PURE__ */ e(P, { className: "w-3 h-3 text-[var(--warning-text)] fill-[var(--warning-text)]" }),
                /* @__PURE__ */ e("div", { className: "flex-1 h-3 bg-[var(--bg-primary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                  "div",
                  {
                    className: "h-full bg-[var(--warning-text)] rounded-full",
                    style: { width: `${m}%` }
                  }
                ) }),
                /* @__PURE__ */ e("span", { className: "w-8 text-right text-xs", children: i })
              ] }, r);
            }) })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "card p-4", children: [
      /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: t("dashboard.ticketTrends", { period: o }) }),
      /* @__PURE__ */ e("div", { className: "h-64", children: /* @__PURE__ */ e(Ae, { data: X, t }) })
    ] }),
    /* @__PURE__ */ a("div", { className: "card p-4", children: [
      /* @__PURE__ */ a("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e(Re, { className: "w-5 h-5" }),
        t("dashboard.agentWorkload")
      ] }),
      C.length > 0 ? /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ a("table", { className: "w-full", children: [
        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
          /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: t("dashboard.agent") }),
          /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: t("dashboard.total") }),
          /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: t("dashboard.open") }),
          /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: t("dashboard.inProgress") }),
          /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: t("dashboard.onHold") }),
          /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: t("dashboard.load") })
        ] }) }),
        /* @__PURE__ */ e("tbody", { children: C.map((r) => {
          const i = Math.max(...C.map((b) => b.totalAssigned)), m = i > 0 ? r.totalAssigned / i * 100 : 0;
          return /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ a("td", { className: "p-3", children: [
              /* @__PURE__ */ e("div", { className: "font-medium", children: r.name }),
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)]", children: r.email })
            ] }),
            /* @__PURE__ */ e("td", { className: "text-center p-3 font-semibold", children: r.totalAssigned }),
            /* @__PURE__ */ e("td", { className: "text-center p-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-[var(--warning-bg)] text-[var(--warning-text)] rounded-[var(--radius-badge)] text-sm", children: r.openCount }) }),
            /* @__PURE__ */ e("td", { className: "text-center p-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-[var(--info-bg)] text-[var(--info-text)] rounded-[var(--radius-badge)] text-sm", children: r.inProgressCount }) }),
            /* @__PURE__ */ e("td", { className: "text-center p-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-[var(--warning-bg)] text-[var(--warning-text)] rounded-[var(--radius-badge)] text-sm", children: r.onHoldCount }) }),
            /* @__PURE__ */ e("td", { className: "p-3 w-32", children: /* @__PURE__ */ e("div", { className: "h-2 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
              "div",
              {
                className: "h-full bg-[var(--info-text)] rounded-full",
                style: { width: `${m}%` }
              }
            ) }) })
          ] }, r.userId);
        }) })
      ] }) }) : /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: t("dashboard.noAgentsAssigned") })
    ] })
  ] });
}
function f({
  title: t,
  value: n,
  icon: d,
  color: s,
  subtitle: h,
  trend: x
}) {
  return /* @__PURE__ */ a("div", { className: `card p-4 border ${{
    blue: "bg-[var(--info-bg)] text-[var(--info-text)] border-[var(--info-border)]",
    green: "bg-[var(--success-bg)] text-[var(--success-text)] border-[var(--success-border)]",
    yellow: "bg-[var(--warning-bg)] text-[var(--warning-text)] border-[var(--warning-border)]",
    red: "bg-[var(--error-bg)] text-[var(--error-text)] border-[var(--error-border)]"
  }[s]}`, children: [
    /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-2", children: [
      /* @__PURE__ */ e("span", { className: "text-sm font-medium opacity-80", children: t }),
      d
    ] }),
    /* @__PURE__ */ e("div", { className: "text-2xl font-bold", children: n }),
    h && /* @__PURE__ */ e("div", { className: "text-xs opacity-70 mt-1", children: h }),
    x && /* @__PURE__ */ a("div", { className: `flex items-center gap-1 mt-1 text-xs ${x.isUp ? "text-[var(--success-text)]" : "text-[var(--error-text)]"}`, children: [
      x.isUp ? /* @__PURE__ */ e(Ce, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Te, { className: "w-3 h-3" }),
      x.value,
      "%"
    ] })
  ] });
}
function Ae({ data: t, t: n }) {
  if (t.length === 0)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full text-[var(--text-secondary)]", children: n("dashboard.noTrendData") });
  const d = Math.max(...t.flatMap((s) => [s.created, s.resolved]), 1);
  return /* @__PURE__ */ a("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ a("div", { className: "flex items-center gap-4 mb-4", children: [
      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded bg-[var(--info-text)]" }),
        /* @__PURE__ */ e("span", { className: "text-sm", children: n("dashboard.created") })
      ] }),
      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded bg-[var(--success-text)]" }),
        /* @__PURE__ */ e("span", { className: "text-sm", children: n("dashboard.resolved") })
      ] })
    ] }),
    /* @__PURE__ */ e("div", { className: "flex-1 flex items-end gap-1 overflow-x-auto pb-4", children: t.map((s) => /* @__PURE__ */ a("div", { className: "flex-1 min-w-[20px] flex gap-0.5", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: "flex-1 bg-[var(--info-text)] rounded-t transition-all duration-300 hover:opacity-80",
          style: { height: `${s.created / d * 100}%`, minHeight: s.created > 0 ? "4px" : "0" },
          title: `Created: ${s.created}`
        }
      ),
      /* @__PURE__ */ e(
        "div",
        {
          className: "flex-1 bg-[var(--success-text)] rounded-t transition-all duration-300 hover:opacity-80",
          style: { height: `${s.resolved / d * 100}%`, minHeight: s.resolved > 0 ? "4px" : "0" },
          title: `Resolved: ${s.resolved}`
        }
      )
    ] }, `${s.date}`)) }),
    /* @__PURE__ */ a("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() }),
      /* @__PURE__ */ e("span", { children: t.at(-1) && new Date(t.at(-1).date).toLocaleDateString() })
    ] })
  ] });
}
function H(t) {
  if (t < 60) return `${Math.round(t)}m`;
  const n = Math.floor(t / 60), d = Math.round(t % 60);
  if (n < 24) return d > 0 ? `${n}h ${d}m` : `${n}h`;
  const s = Math.floor(n / 24), h = n % 24;
  return h > 0 ? `${s}d ${h}h` : `${s}d`;
}
export {
  Ge as DashboardPage
};
//# sourceMappingURL=DashboardPage-CUZ80NGV.js.map
