import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { useState as o, useCallback as $, useEffect as P } from "react";
import { useTranslation as E } from "react-i18next";
import { Loader2 as S, Clock as O, Check as j, Save as F, AlertTriangle as I } from "lucide-react";
import { Z as p, B as H } from "./index-CwSaRXXg.js";
const T = ["Critical", "High", "Medium", "Low"];
function K() {
  const { t: i } = E("support"), [c, d] = o(!0), [m, h] = o(null), [b, C] = o([]), [f, M] = o([]), [l, L] = o(null), [x, g] = o({}), [N, y] = o(null), v = $(async () => {
    try {
      d(!0);
      const [t, r, a] = await Promise.all([
        p.getConfigurations(),
        p.getEscalationRules(),
        p.getMetrics()
      ]), n = [...t].sort(
        (u, B) => T.indexOf(u.priority) - T.indexOf(B.priority)
      );
      C(n), M(r), L(a);
      const A = {};
      n.forEach((u) => {
        A[u.priority] = {
          response: u.responseTimeMinutes,
          resolution: u.resolutionTimeMinutes
        };
      }), g(A);
    } catch (t) {
      console.error("Failed to load SLA configurations:", t);
    } finally {
      d(!1);
    }
  }, []);
  P(() => {
    v();
  }, [v]);
  const R = async (t) => {
    const r = x[t];
    if (r)
      try {
        h(t), await p.updateConfiguration(t, {
          responseTimeMinutes: r.response,
          resolutionTimeMinutes: r.resolution
        }), await v(), y(`${t} SLA configuration saved successfully`), setTimeout(() => y(null), 3e3);
      } catch (a) {
        console.error("Failed to save SLA configuration:", a);
      } finally {
        h(null);
      }
  }, w = (t, r, a) => {
    g((n) => ({
      ...n,
      [t]: {
        ...n[t],
        [r]: a
      }
    }));
  }, k = (t) => {
    const r = b.find((n) => n.priority === t), a = x[t];
    return !r || !a ? !1 : r.responseTimeMinutes !== a.response || r.resolutionTimeMinutes !== a.resolution;
  };
  return c ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ e(S, { className: "w-8 h-8 animate-spin text-[var(--color-primary-600)]" }) }) : /* @__PURE__ */ s("div", { className: "space-y-6", children: [
    /* @__PURE__ */ e(
      H,
      {
        items: [
          { label: i("title", "Support"), href: "/support" },
          { label: i("sla.title", "SLA Configuration") }
        ]
      }
    ),
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ s("h1", { className: "text-2xl font-bold flex items-center gap-2", children: [
        /* @__PURE__ */ e(O, { className: "w-6 h-6" }),
        i("sla.title", "SLA Configuration")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: "Configure Service Level Agreements for ticket response and resolution times" })
    ] }),
    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(j, { className: "w-5 h-5" }),
      N
    ] }),
    l && /* @__PURE__ */ s("div", { className: "card p-4", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold mb-4", children: "Current SLA Performance" }),
      /* @__PURE__ */ s("div", { className: "grid grid-cols-2 md:grid-cols-4 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: l.totalTickets }),
          /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Total Tickets" })
        ] }),
        /* @__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: l.ticketsWithinSla }),
          /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Within SLA" })
        ] }),
        /* @__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: l.ticketsBreached }),
          /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Breached" })
        ] }),
        /* @__PURE__ */ s("div", { className: "text-center p-3 bg-[var(--bg-secondary)] rounded", children: [
          /* @__PURE__ */ s("div", { className: `text-2xl font-bold ${l.slaCompliancePercentage >= 90 ? "text-[var(--success-text)]" : "text-[var(--warning-text)]"}`, children: [
            l.slaCompliancePercentage.toFixed(1),
            "%"
          ] }),
          /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Compliance" })
        ] })
      ] }),
      Object.keys(l.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: "Breaches by Priority" }),
        /* @__PURE__ */ e("div", { className: "flex gap-4", children: Object.entries(l.breachesByPriority).map(([t, r]) => /* @__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: r })
        ] }, 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 r = x[t.priority], a = k(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: r?.response ?? t.responseTimeMinutes,
                  onChange: (n) => w(t.priority, "response", parseInt(n.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: r?.resolution ?? t.resolutionTimeMinutes,
                  onChange: (n) => w(t.priority, "resolution", parseInt(n.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: () => R(t.priority),
                disabled: !a || m === t.priority,
                className: `btn ${a ? "btn-primary" : "btn-secondary"} flex items-center gap-2`,
                children: [
                  m === t.priority ? /* @__PURE__ */ e(S, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(F, { 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" })
      ] }),
      f.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: f.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: D(t.triggerType) }) }),
          /* @__PURE__ */ e("td", { className: "p-4", children: /* @__PURE__ */ e("span", { className: "text-sm", children: W(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(I, { 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 D(i) {
  switch (i) {
    case "ResponseBreach":
      return "Response SLA Breached";
    case "ResolutionBreach":
      return "Resolution SLA Breached";
    default:
      return i;
  }
}
function W(i) {
  if (i < 60) return `${i} minutes`;
  const c = Math.floor(i / 60), d = i % 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 {
  K as SlaConfigPage
};
//# sourceMappingURL=SlaConfigPage-BY7gvYU6.js.map
