import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { useState as o, useCallback as $, useEffect as B } from "react";
import { useTranslation as E } from "react-i18next";
import { Loader2 as T, Check as F, Save as O, AlertTriangle as W, Clock as j } from "lucide-react";
import { az as x, P as I } from "./index-CeEMms9z.js";
const A = ["Critical", "High", "Medium", "Low"];
function Q() {
  const { t: r } = E("support"), [c, d] = o(!0), [m, h] = o(null), [b, C] = o([]), [g, M] = o([]), [i, k] = o(null), [p, f] = o({}), [N, y] = o(null), v = $(async () => {
    try {
      d(!0);
      const [t, a, n] = await Promise.all([
        x.getConfigurations(),
        x.getEscalationRules(),
        x.getMetrics()
      ]), l = [...t].sort(
        (u, P) => A.indexOf(u.priority) - A.indexOf(P.priority)
      );
      C(l), M(a), k(n);
      const S = {};
      l.forEach((u) => {
        S[u.priority] = {
          response: u.responseTimeMinutes,
          resolution: u.resolutionTimeMinutes
        };
      }), f(S);
    } catch (t) {
      console.error("Failed to load SLA configurations:", t);
    } finally {
      d(!1);
    }
  }, []);
  B(() => {
    v();
  }, [v]);
  const L = async (t) => {
    const a = p[t];
    if (a)
      try {
        h(t), await x.updateConfiguration(t, {
          responseTimeMinutes: a.response,
          resolutionTimeMinutes: a.resolution
        }), await v(), y(`${t} SLA configuration saved successfully`), setTimeout(() => y(null), 3e3);
      } catch (n) {
        console.error("Failed to save SLA configuration:", n);
      } finally {
        h(null);
      }
  }, w = (t, a, n) => {
    f((l) => ({
      ...l,
      [t]: {
        ...l[t],
        [a]: n
      }
    }));
  }, R = (t) => {
    const a = b.find((l) => l.priority === t), n = p[t];
    return !a || !n ? !1 : a.responseTimeMinutes !== n.response || a.resolutionTimeMinutes !== n.resolution;
  };
  return c ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ e(T, { className: "w-8 h-8 animate-spin text-[var(--info-dot)]" }) }) : /* @__PURE__ */ s(
    I,
    {
      title: r("sla.title", "SLA Configuration"),
      subtitle: "Configure Service Level Agreements for ticket response and resolution times",
      icon: /* @__PURE__ */ e(j, { className: "w-6 h-6" }),
      breadcrumbs: [
        { label: r("title", "Support"), href: "/support" },
        { label: r("sla.title", "SLA Configuration") }
      ],
      children: [
        N && /* @__PURE__ */ s("div", { className: "bg-[var(--success-bg)] border border-[var(--success-border)] text-[var(--success-text)] px-4 py-3 rounded flex items-center gap-2", children: [
          /* @__PURE__ */ e(F, { className: "w-5 h-5" }),
          N
        ] }),
        i && /* @__PURE__ */ s("div", { className: "card p-4", children: [
          /* @__PURE__ */ e("h2", { className: "font-semibold mb-4", children: r("dashboard.currentSlaPerformance") }),
          /* @__PURE__ */ s("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", children: [
            /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded", children: [
              /* @__PURE__ */ e("div", { className: "text-2xl font-bold", children: i.totalTickets }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: r("dashboard.totalTickets") })
            ] }),
            /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded", children: [
              /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-[var(--success-text)]", children: i.ticketsWithinSla }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: r("dashboard.withinSla") })
            ] }),
            /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded", children: [
              /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-[var(--error-text)]", children: i.ticketsBreached }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: r("dashboard.breached") })
            ] }),
            /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded", children: [
              /* @__PURE__ */ s("div", { className: `text-2xl font-bold ${i.slaCompliancePercentage >= 90 ? "text-[var(--success-text)]" : "text-[var(--warning-text)]"}`, children: [
                i.slaCompliancePercentage.toFixed(1),
                "%"
              ] }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: r("dashboard.compliance") })
            ] }),
            /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded", children: [
              /* @__PURE__ */ s("div", { className: `text-2xl font-bold ${i.ticketsWithoutSla > 0 ? "text-[var(--warning-text)]" : "text-[var(--success-text)]"}`, children: [
                i.slaCoveragePercentage.toFixed(1),
                "%"
              ] }),
              /* @__PURE__ */ s("div", { className: "text-sm text-[var(--text-secondary)]", children: [
                r("dashboard.slaCoverage"),
                i.ticketsWithoutSla > 0 && /* @__PURE__ */ e("span", { className: "block text-xs text-[var(--warning-text)]", children: r("dashboard.ticketsWithoutSla", { count: i.ticketsWithoutSla }) })
              ] })
            ] })
          ] }),
          Object.keys(i.breachesByPriority).length > 0 && /* @__PURE__ */ s("div", { className: "mt-4 pt-4 border-t border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("h3", { className: "text-sm font-medium mb-2", children: r("dashboard.breachesByPriority") }),
            /* @__PURE__ */ e("div", { className: "flex gap-4", children: Object.entries(i.breachesByPriority).map(([t, a]) => /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ s("span", { className: "text-sm", children: [
                t,
                ":"
              ] }),
              /* @__PURE__ */ e("span", { className: "font-medium text-[var(--error-text)]", children: a })
            ] }, t)) })
          ] })
        ] }),
        /* @__PURE__ */ s("div", { className: "card", children: [
          /* @__PURE__ */ s("div", { className: "p-4 border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("h2", { className: "font-semibold", children: "Response & Resolution Times" }),
            /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Define the maximum time allowed for initial response and complete resolution by priority" })
          ] }),
          /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ s("table", { className: "w-full", children: [
            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: [
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Priority" }),
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Response Time" }),
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Resolution Time" }),
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Status" }),
              /* @__PURE__ */ e("th", { className: "text-right p-4 font-medium", children: "Actions" })
            ] }) }),
            /* @__PURE__ */ e("tbody", { children: b.map((t) => {
              const a = p[t.priority], n = R(t.priority);
              return /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
                /* @__PURE__ */ e("td", { className: "p-4", children: /* @__PURE__ */ e("span", { className: `inline-flex items-center px-3 py-1 rounded-[var(--radius-badge)] font-medium text-sm ${t.priority === "Critical" ? "bg-[var(--error-bg)] text-[var(--error-text)]" : t.priority === "High" || t.priority === "Medium" ? "bg-[var(--warning-bg)] text-[var(--warning-text)]" : "bg-[var(--info-bg)] text-[var(--info-text)]"}`, children: t.priority }) }),
                /* @__PURE__ */ e("td", { className: "p-4", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
                  /* @__PURE__ */ e(
                    "input",
                    {
                      type: "number",
                      min: "1",
                      value: a?.response ?? t.responseTimeMinutes,
                      onChange: (l) => w(t.priority, "response", parseInt(l.target.value) || 0),
                      className: "input w-24"
                    }
                  ),
                  /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: "minutes" }),
                  /* @__PURE__ */ s("span", { className: "text-sm text-[var(--text-secondary)] ml-2", children: [
                    "(",
                    t.responseTimeFormatted,
                    ")"
                  ] })
                ] }) }),
                /* @__PURE__ */ e("td", { className: "p-4", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
                  /* @__PURE__ */ e(
                    "input",
                    {
                      type: "number",
                      min: "1",
                      value: a?.resolution ?? t.resolutionTimeMinutes,
                      onChange: (l) => w(t.priority, "resolution", parseInt(l.target.value) || 0),
                      className: "input w-24"
                    }
                  ),
                  /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: "minutes" }),
                  /* @__PURE__ */ s("span", { className: "text-sm text-[var(--text-secondary)] ml-2", children: [
                    "(",
                    t.resolutionTimeFormatted,
                    ")"
                  ] })
                ] }) }),
                /* @__PURE__ */ e("td", { className: "p-4", children: t.isActive ? /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-1 rounded bg-[var(--success-bg)] text-[var(--success-text)] text-sm", children: "Active" }) : /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-1 rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)] text-sm", children: "Inactive" }) }),
                /* @__PURE__ */ e("td", { className: "p-4 text-right", children: /* @__PURE__ */ s(
                  "button",
                  {
                    onClick: () => L(t.priority),
                    disabled: !n || m === t.priority,
                    className: `btn ${n ? "btn-primary" : "btn-secondary"} flex items-center gap-2`,
                    children: [
                      m === t.priority ? /* @__PURE__ */ e(T, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(O, { className: "w-4 h-4" }),
                      "Save"
                    ]
                  }
                ) })
              ] }, t.id);
            }) })
          ] }) })
        ] }),
        /* @__PURE__ */ s("div", { className: "card", children: [
          /* @__PURE__ */ s("div", { className: "p-4 border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("h2", { className: "font-semibold", children: "Escalation Rules" }),
            /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Automatic escalation paths when SLAs are breached" })
          ] }),
          g.length > 0 ? /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ s("table", { className: "w-full", children: [
            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: [
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Level" }),
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Trigger" }),
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Delay After Breach" }),
              /* @__PURE__ */ e("th", { className: "text-left p-4 font-medium", children: "Status" })
            ] }) }),
            /* @__PURE__ */ e("tbody", { children: g.map((t) => /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "p-4", children: /* @__PURE__ */ e("span", { className: "font-medium", children: t.level }) }),
              /* @__PURE__ */ e("td", { className: "p-4", children: /* @__PURE__ */ e("span", { className: "text-sm", children: H(t.triggerType) }) }),
              /* @__PURE__ */ e("td", { className: "p-4", children: /* @__PURE__ */ e("span", { className: "text-sm", children: D(t.delayAfterBreachMinutes) }) }),
              /* @__PURE__ */ e("td", { className: "p-4", children: t.isActive ? /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-1 rounded bg-[var(--success-bg)] text-[var(--success-text)] text-sm", children: "Active" }) : /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-1 rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)] text-sm", children: "Inactive" }) })
            ] }, t.id)) })
          ] }) }) : /* @__PURE__ */ s("div", { className: "p-8 text-center text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ e(W, { className: "w-12 h-12 mx-auto mb-4 opacity-50" }),
            /* @__PURE__ */ e("p", { children: "No escalation rules configured" })
          ] })
        ] }),
        /* @__PURE__ */ s("div", { className: "card p-4 bg-[var(--info-bg)] border-[var(--info-border)]", children: [
          /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--info-text)] mb-2", children: "About SLA Configuration" }),
          /* @__PURE__ */ s("ul", { className: "text-sm text-[var(--info-text)] space-y-1", children: [
            /* @__PURE__ */ s("li", { children: [
              /* @__PURE__ */ e("strong", { children: "Response Time:" }),
              " Maximum time allowed for the first agent response after ticket creation"
            ] }),
            /* @__PURE__ */ s("li", { children: [
              /* @__PURE__ */ e("strong", { children: "Resolution Time:" }),
              " Maximum time allowed to fully resolve and close the ticket"
            ] }),
            /* @__PURE__ */ s("li", { children: [
              /* @__PURE__ */ e("strong", { children: "SLA Pause:" }),
              " SLA timers automatically pause when a ticket is placed On Hold"
            ] }),
            /* @__PURE__ */ s("li", { children: [
              /* @__PURE__ */ e("strong", { children: "Escalation:" }),
              " When SLA is breached, tickets are automatically escalated to higher levels"
            ] })
          ] })
        ] })
      ]
    }
  );
}
function H(r) {
  switch (r) {
    case "ResponseBreach":
      return "Response SLA Breached";
    case "ResolutionBreach":
      return "Resolution SLA Breached";
    default:
      return r;
  }
}
function D(r) {
  if (r < 60) return `${r} minutes`;
  const c = Math.floor(r / 60), d = r % 60;
  if (c < 24) return d > 0 ? `${c}h ${d}m` : `${c} hours`;
  const m = Math.floor(c / 24), h = c % 24;
  return h > 0 ? `${m}d ${h}h` : `${m} days`;
}
export {
  Q as SlaConfigPage
};
//# sourceMappingURL=SlaConfigPage-C5lI2xxG.js.map
