import { jsxs as r, jsx as t, Fragment as z } from "react/jsx-runtime";
import { useState as o, useCallback as T, useEffect as b } from "react";
import { useTranslation as $ } from "react-i18next";
import { RefreshCw as I, Loader2 as U, AlertCircle as d, CheckCircle as j } from "lucide-react";
import { a7 as F, B as R, a8 as M } from "./index-CwSaRXXg.js";
const P = {
  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)]"
}, L = {
  Online: j,
  Busy: d,
  Away: d,
  Offline: d
}, c = {
  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)]"
};
function J() {
  const { t: a } = $("support"), [p, g] = o(!0), [l, f] = o([]), [u, y] = o(!1), [m, N] = o(""), [k, h] = o(null), s = T(async () => {
    try {
      g(!0);
      const e = await F.getAll();
      f(e);
    } catch (e) {
      console.error("Failed to load agent workload:", e);
    } finally {
      g(!1);
    }
  }, []);
  b(() => {
    s();
  }, [s]), b(() => {
    if (!u) return;
    const e = setInterval(() => s(), 3e4);
    return () => clearInterval(e);
  }, [u, s]);
  const v = (e) => Math.round(e.activeTicketCount / e.maxConcurrentTickets * 100), w = (e) => e >= 90 ? "bg-[var(--error-bg)]" : e >= 70 ? "bg-[var(--warning-bg)]" : "bg-[var(--success-bg)]", A = async (e, n) => {
    try {
      h(e), await M.update(e, { status: n }), await s();
    } catch (i) {
      console.error("Failed to change status:", i);
    } finally {
      h(null);
    }
  }, x = m ? l.filter((e) => e.availabilityStatus === m) : l, C = l.length, W = l.filter((e) => e.availabilityStatus === "Online").length, O = Math.round(
    l.reduce((e, n) => e + v(n), 0) / (l.length || 1)
  ), S = l.filter((e) => v(e) > 80).length;
  return /* @__PURE__ */ r("div", { className: "space-y-6", children: [
    /* @__PURE__ */ t(
      R,
      {
        items: [
          { label: a("title", "Support"), href: "/support" },
          { label: a("agentWorkload.title") }
        ]
      }
    ),
    /* @__PURE__ */ r("div", { className: "flex items-start justify-between", children: [
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ t("h1", { className: "text-2xl font-bold", children: a("agentWorkload.title") }),
        /* @__PURE__ */ t("p", { className: "text-[var(--text-secondary)]", children: a("agentWorkload.subtitle") })
      ] }),
      /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => s(),
            className: "p-2 rounded-lg hover:bg-[var(--bg-secondary)]",
            children: /* @__PURE__ */ t(I, { className: "w-5 h-5" })
          }
        ),
        /* @__PURE__ */ r("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) => y(e.target.checked),
              className: "w-4 h-4"
            }
          ),
          /* @__PURE__ */ t("span", { className: "text-sm", children: a("agentWorkload.autoRefresh", "Auto-refresh") })
        ] })
      ] })
    ] }),
    p ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ t(U, { className: "w-8 h-8 animate-spin text-[var(--color-primary-600)]" }) }) : /* @__PURE__ */ r(z, { children: [
      /* @__PURE__ */ r("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
        /* @__PURE__ */ r("div", { className: `card p-4 text-center border ${c.blue}`, children: [
          /* @__PURE__ */ t("div", { className: "text-2xl font-bold", children: C }),
          /* @__PURE__ */ t("div", { className: "text-sm opacity-80", children: a("agentWorkload.kpi.totalAgents", "Total Agents") })
        ] }),
        /* @__PURE__ */ r("div", { className: `card p-4 text-center border ${c.green}`, children: [
          /* @__PURE__ */ t("div", { className: "text-2xl font-bold", children: W }),
          /* @__PURE__ */ t("div", { className: "text-sm opacity-80", children: a("agentWorkload.kpi.online", "Online") })
        ] }),
        /* @__PURE__ */ r("div", { className: `card p-4 text-center border ${c.yellow}`, children: [
          /* @__PURE__ */ r("div", { className: "text-2xl font-bold", children: [
            O,
            "%"
          ] }),
          /* @__PURE__ */ t("div", { className: "text-sm opacity-80", children: a("agentWorkload.kpi.avgUtilization", "Avg. Utilization") })
        ] }),
        /* @__PURE__ */ r("div", { className: `card p-4 text-center border ${c.red}`, children: [
          /* @__PURE__ */ t("div", { className: "text-2xl font-bold", children: S }),
          /* @__PURE__ */ t("div", { className: "text-sm opacity-80", children: a("agentWorkload.kpi.overloaded", "Overloaded") })
        ] })
      ] }),
      /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ r(
        "select",
        {
          value: m,
          onChange: (e) => N(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") })
          ]
        }
      ) }),
      x.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: x.map((e) => {
        const n = L[e.availabilityStatus] || d, i = v(e);
        return /* @__PURE__ */ t("div", { className: "card p-6", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6", children: [
          /* @__PURE__ */ r("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__ */ r("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__ */ r("p", { className: "text-xs text-[var(--text-secondary)]", children: [
              a("assignment.capacity", "Capacity"),
              ": ",
              e.maxConcurrentTickets
            ] })
          ] }),
          /* @__PURE__ */ r("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 ${w(i)} transition-all`,
                style: { width: `${Math.min(i, 100)}%` }
              }
            ) }),
            /* @__PURE__ */ r("p", { className: "text-sm font-semibold mt-1", children: [
              i,
              "%"
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "md:col-span-1 flex flex-col gap-2", children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2 justify-center", children: [
              /* @__PURE__ */ t(n, { className: "w-5 h-5" }),
              /* @__PURE__ */ t("span", { className: `px-3 py-1 rounded-full text-xs font-medium ${P[e.availabilityStatus]}`, children: a(`agentWorkload.status.${e.availabilityStatus}`, e.availabilityStatus) })
            ] }),
            /* @__PURE__ */ r(
              "select",
              {
                value: e.availabilityStatus,
                onChange: (B) => A(e.userId, B.target.value),
                disabled: k === 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 {
  J as AgentWorkloadPage
};
//# sourceMappingURL=AgentWorkloadPage-H_7ze33H.js.map
