import { jsx as t, jsxs as l, Fragment as U } from "react/jsx-runtime";
import { useState as o, useCallback as z, useEffect as f } from "react";
import { useTranslation as I } from "react-i18next";
import { Loader2 as P, Users as F, CheckCircle as b, Percent as $, AlertTriangle as j, AlertCircle as d, RefreshCw as R, UserCog as M } from "lucide-react";
import { aI as K, P as L, K as c, aJ as E } from "./index-CeEMms9z.js";
const J = {
  Online: "bg-[var(--success-bg)] text-[var(--success-text)]",
  Busy: "bg-[var(--warning-bg)] text-[var(--warning-text)]",
  Away: "bg-[var(--info-bg)] text-[var(--info-text)]",
  Offline: "bg-[var(--bg-secondary)] text-[var(--text-secondary)]"
}, q = {
  Online: b,
  Busy: d,
  Away: d,
  Offline: d
};
function X() {
  const { t: a } = I("support"), [x, h] = o(!0), [s, y] = o([]), [u, N] = o(!1), [g, k] = o(""), [w, v] = o(null), n = z(async () => {
    try {
      h(!0);
      const e = await K.getAll();
      y(e);
    } catch (e) {
      console.error("Failed to load agent workload:", e);
    } finally {
      h(!1);
    }
  }, []);
  f(() => {
    n();
  }, [n]), f(() => {
    if (!u) return;
    const e = setInterval(() => n(), 3e4);
    return () => clearInterval(e);
  }, [u, n]);
  const m = (e) => Math.round(e.activeTicketCount / e.maxConcurrentTickets * 100), A = (e) => e >= 90 ? "bg-[var(--error-bg)]" : e >= 70 ? "bg-[var(--warning-bg)]" : "bg-[var(--success-bg)]", C = async (e, r) => {
    try {
      v(e), await E.update(e, { status: r }), await n();
    } catch (i) {
      console.error("Failed to change status:", i);
    } finally {
      v(null);
    }
  }, p = g ? s.filter((e) => e.availabilityStatus === g) : s, W = s.length, O = s.filter((e) => e.availabilityStatus === "Online").length, S = Math.round(
    s.reduce((e, r) => e + m(r), 0) / (s.length || 1)
  ), T = s.filter((e) => m(e) > 80).length;
  return /* @__PURE__ */ t(
    L,
    {
      title: a("agentWorkload.title"),
      subtitle: a("agentWorkload.subtitle"),
      icon: /* @__PURE__ */ t(M, { className: "w-6 h-6" }),
      breadcrumbs: [
        { label: a("title", "Support"), href: "/support" },
        { label: a("agentWorkload.title") }
      ],
      actions: /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => n(),
            className: "p-2 rounded-lg hover:bg-[var(--bg-secondary)]",
            children: /* @__PURE__ */ t(R, { className: "w-5 h-5" })
          }
        ),
        /* @__PURE__ */ l("label", { className: "flex items-center gap-2 px-4 py-2 border border-[var(--border-color)] rounded-lg cursor-pointer", children: [
          /* @__PURE__ */ t(
            "input",
            {
              type: "checkbox",
              checked: u,
              onChange: (e) => N(e.target.checked),
              className: "w-4 h-4"
            }
          ),
          /* @__PURE__ */ t("span", { className: "text-sm", children: a("agentWorkload.autoRefresh", "Auto-refresh") })
        ] })
      ] }),
      children: x ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ t(P, { className: "w-8 h-8 animate-spin text-[var(--info-dot)]" }) }) : /* @__PURE__ */ l(U, { children: [
        /* @__PURE__ */ l("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
          /* @__PURE__ */ t(
            c,
            {
              title: a("agentWorkload.kpi.totalAgents", "Total Agents"),
              value: W,
              icon: /* @__PURE__ */ t(F, { className: "w-5 h-5" }),
              accent: "primary"
            }
          ),
          /* @__PURE__ */ t(
            c,
            {
              title: a("agentWorkload.kpi.online", "Online"),
              value: O,
              icon: /* @__PURE__ */ t(b, { className: "w-5 h-5" }),
              accent: 5
            }
          ),
          /* @__PURE__ */ t(
            c,
            {
              title: a("agentWorkload.kpi.avgUtilization", "Avg. Utilization"),
              value: `${S}%`,
              icon: /* @__PURE__ */ t($, { className: "w-5 h-5" }),
              accent: 2
            }
          ),
          /* @__PURE__ */ t(
            c,
            {
              title: a("agentWorkload.kpi.overloaded", "Overloaded"),
              value: T,
              icon: /* @__PURE__ */ t(j, { className: "w-5 h-5" }),
              accent: 1
            }
          )
        ] }),
        /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ l(
          "select",
          {
            value: g,
            onChange: (e) => k(e.target.value),
            className: "px-4 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] border-[var(--border-color)]",
            children: [
              /* @__PURE__ */ t("option", { value: "", children: a("common:all", "All Statuses") }),
              /* @__PURE__ */ t("option", { value: "Online", children: a("agentWorkload.status.Online", "Online") }),
              /* @__PURE__ */ t("option", { value: "Busy", children: a("agentWorkload.status.Busy", "Busy") }),
              /* @__PURE__ */ t("option", { value: "Away", children: a("agentWorkload.status.Away", "Away") }),
              /* @__PURE__ */ t("option", { value: "Offline", children: a("agentWorkload.status.Offline", "Offline") })
            ]
          }
        ) }),
        p.length === 0 ? /* @__PURE__ */ t("div", { className: "text-center py-12", children: /* @__PURE__ */ t("p", { className: "text-[var(--text-secondary)]", children: a("assignment.noAgents", "No agents found") }) }) : /* @__PURE__ */ t("div", { className: "grid grid-cols-1 gap-4", children: p.map((e) => {
          const r = q[e.availabilityStatus] || d, i = m(e);
          return /* @__PURE__ */ t("div", { className: "card p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6", children: [
            /* @__PURE__ */ l("div", { className: "md:col-span-1", children: [
              /* @__PURE__ */ t("h3", { className: "font-semibold text-lg", children: e.userName || "Unknown Agent" }),
              /* @__PURE__ */ t("p", { className: "text-sm text-[var(--text-secondary)]", children: e.userId })
            ] }),
            /* @__PURE__ */ l("div", { className: "md:col-span-1", children: [
              /* @__PURE__ */ t("p", { className: "text-xs text-[var(--text-secondary)] font-medium mb-1", children: a("assignment.activeTickets", "Active Tickets") }),
              /* @__PURE__ */ t("p", { className: "text-2xl font-bold", children: e.activeTicketCount }),
              /* @__PURE__ */ l("p", { className: "text-xs text-[var(--text-secondary)]", children: [
                a("assignment.capacity", "Capacity"),
                ": ",
                e.maxConcurrentTickets
              ] })
            ] }),
            /* @__PURE__ */ l("div", { className: "md:col-span-1", children: [
              /* @__PURE__ */ t("p", { className: "text-xs text-[var(--text-secondary)] font-medium mb-2", children: a("agentWorkload.utilization", "Utilization") }),
              /* @__PURE__ */ t("div", { className: "w-full bg-[var(--bg-secondary)] rounded-full h-2 overflow-hidden", children: /* @__PURE__ */ t(
                "div",
                {
                  className: `h-full ${A(i)} transition-all`,
                  style: { width: `${Math.min(i, 100)}%` }
                }
              ) }),
              /* @__PURE__ */ l("p", { className: "text-sm font-semibold mt-1", children: [
                i,
                "%"
              ] })
            ] }),
            /* @__PURE__ */ l("div", { className: "md:col-span-1 flex flex-col gap-2", children: [
              /* @__PURE__ */ l("div", { className: "flex items-center gap-2 justify-center", children: [
                /* @__PURE__ */ t(r, { className: "w-5 h-5" }),
                /* @__PURE__ */ t("span", { className: `px-3 py-1 rounded-full text-xs font-medium ${J[e.availabilityStatus]}`, children: a(`agentWorkload.status.${e.availabilityStatus}`, e.availabilityStatus) })
              ] }),
              /* @__PURE__ */ l(
                "select",
                {
                  value: e.availabilityStatus,
                  onChange: (B) => C(e.userId, B.target.value),
                  disabled: w === e.userId,
                  className: "w-full px-2 py-1 text-xs border rounded bg-[var(--bg-secondary)] text-[var(--text-primary)] border-[var(--border-color)]",
                  children: [
                    /* @__PURE__ */ t("option", { value: "Online", children: a("agentWorkload.status.Online", "Online") }),
                    /* @__PURE__ */ t("option", { value: "Busy", children: a("agentWorkload.status.Busy", "Busy") }),
                    /* @__PURE__ */ t("option", { value: "Away", children: a("agentWorkload.status.Away", "Away") }),
                    /* @__PURE__ */ t("option", { value: "Offline", children: a("agentWorkload.status.Offline", "Offline") })
                  ]
                }
              )
            ] })
          ] }) }, e.userId);
        }) })
      ] })
    }
  );
}
export {
  X as AgentWorkloadPage
};
//# sourceMappingURL=AgentWorkloadPage-C75vkEEn.js.map
