import { jsxs as l, jsx as r } from "react/jsx-runtime";
import { useState as i, useCallback as P, useEffect as M } from "react";
import { useTranslation as T } from "react-i18next";
import { Loader2 as U, Edit2 as $, Trash2 as R, Plus as B, Users as F } from "lucide-react";
import { aH as N, P as H } from "./index-CeEMms9z.js";
const q = {
  1: "bg-[var(--error-bg)] text-[var(--error-text)]",
  2: "bg-[var(--warning-bg)] text-[var(--warning-text)]",
  3: "bg-[var(--info-bg)] text-[var(--info-text)]",
  4: "bg-[var(--success-bg)] text-[var(--success-text)]",
  5: "bg-[var(--success-bg)] text-[var(--success-text)]"
}, z = ["Billing", "Technical", "Security", "General", "Networking", "Software", "Hardware"];
function O() {
  const { t: s } = T("support"), [d, u] = i(!0), [w, S] = i([]), [b, C] = i(""), [m, y] = i(null), [n, o] = i([]), [f, h] = i(!1), g = P(async () => {
    try {
      u(!0);
      const e = await N.getAll(), t = L(e);
      S(t);
    } catch (e) {
      console.error("Failed to load agent skills:", e);
    } finally {
      u(!1);
    }
  }, []);
  M(() => {
    g();
  }, [g]);
  const L = (e) => {
    const t = /* @__PURE__ */ new Map();
    return e.forEach((a) => {
      t.has(a.userId) || t.set(a.userId, {
        userId: a.userId,
        userName: null,
        skills: []
      }), t.get(a.userId).skills.push(a);
    }), Array.from(t.values()).sort(
      (a, c) => (a.userName || "").localeCompare(c.userName || "")
    );
  }, p = w.filter(
    (e) => (e.userName || "").toLowerCase().includes(b.toLowerCase())
  ), x = (e) => ({
    1: s("agentSkills.proficiency.beginner"),
    2: s("agentSkills.proficiency.intermediate"),
    3: s("agentSkills.proficiency.advanced"),
    4: s("agentSkills.proficiency.expert"),
    5: s("agentSkills.proficiency.master")
  })[e] || "", A = (e) => {
    y(e.userId), o(
      e.skills.map((t) => ({
        skillCategory: t.skillCategory,
        proficiencyLevel: t.proficiencyLevel
      }))
    );
  }, v = () => {
    y(null), o([]);
  }, I = () => {
    o([...n, { skillCategory: "", proficiencyLevel: 3 }]);
  }, E = (e) => {
    o(n.filter((t, a) => a !== e));
  }, k = (e, t, a) => {
    const c = [...n];
    c[e] = { ...c[e], [t]: a }, o(c);
  }, j = async () => {
    if (m)
      try {
        h(!0);
        const e = {
          skills: n.filter((t) => t.skillCategory.trim())
        };
        await N.update(m, e), await g(), v();
      } catch (e) {
        console.error("Failed to save skills:", e);
      } finally {
        h(!1);
      }
  };
  return /* @__PURE__ */ l(
    H,
    {
      title: s("assignment.skills"),
      subtitle: s("assignment.availabilityDescription", "Manage agent skills and proficiency levels"),
      icon: /* @__PURE__ */ r(F, { className: "w-6 h-6" }),
      breadcrumbs: [
        { label: s("title", "Support"), href: "/support" },
        { label: s("assignment.skills") }
      ],
      children: [
        /* @__PURE__ */ r("div", { className: "mb-4", children: /* @__PURE__ */ r(
          "input",
          {
            type: "text",
            placeholder: s("common:search", "Search agents..."),
            value: b,
            onChange: (e) => C(e.target.value),
            className: "w-full px-4 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] border-[var(--border-color)]"
          }
        ) }),
        d && /* @__PURE__ */ r("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ r(U, { className: "w-8 h-8 animate-spin text-[var(--info-dot)]" }) }),
        !d && p.length === 0 && /* @__PURE__ */ r("div", { className: "text-center py-12", children: /* @__PURE__ */ r("p", { className: "text-[var(--text-secondary)]", children: s("assignment.noAgents", "No agents found") }) }),
        !d && p.length > 0 && /* @__PURE__ */ r("div", { className: "space-y-4", children: p.map((e) => /* @__PURE__ */ l("div", { className: "card p-6", children: [
          /* @__PURE__ */ l("div", { className: "flex items-start justify-between mb-4", children: [
            /* @__PURE__ */ l("div", { children: [
              /* @__PURE__ */ r("h3", { className: "text-lg font-semibold", children: e.userName || "Unknown Agent" }),
              /* @__PURE__ */ r("p", { className: "text-sm text-[var(--text-secondary)]", children: e.userId })
            ] }),
            /* @__PURE__ */ l(
              "button",
              {
                onClick: () => A(e),
                className: "flex items-center gap-2 px-3 py-2 bg-[var(--info-bg)] text-[var(--info-text)] rounded-lg hover:opacity-80",
                children: [
                  /* @__PURE__ */ r($, { className: "w-4 h-4" }),
                  s("common:edit", "Edit")
                ]
              }
            )
          ] }),
          e.skills.length > 0 ? /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: e.skills.map((t) => /* @__PURE__ */ l(
            "div",
            {
              className: "flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg",
              children: [
                /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r("p", { className: "font-medium text-sm", children: t.skillCategory }) }),
                /* @__PURE__ */ r("span", { className: `px-3 py-1 rounded-full text-xs font-medium ${q[t.proficiencyLevel]}`, children: x(t.proficiencyLevel) })
              ]
            },
            `${t.skillCategory}-${t.proficiencyLevel}`
          )) }) : /* @__PURE__ */ r("p", { className: "text-sm text-[var(--text-secondary)] italic", children: s("assignment.noSkills", "No skills assigned") })
        ] }, e.userId)) }),
        m && /* @__PURE__ */ r("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ l("div", { className: "bg-[var(--bg-primary)] rounded-lg shadow-lg max-w-2xl w-full max-h-96 overflow-y-auto", children: [
          /* @__PURE__ */ l("div", { className: "sticky top-0 bg-[var(--bg-primary)] border-b border-[var(--border-color)] p-6 flex items-center justify-between", children: [
            /* @__PURE__ */ r("h2", { className: "text-lg font-semibold", children: s("assignment.editSkills", "Edit Skills") }),
            /* @__PURE__ */ r(
              "button",
              {
                onClick: v,
                className: "text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
                children: "✕"
              }
            )
          ] }),
          /* @__PURE__ */ l("div", { className: "p-6 space-y-4", children: [
            n.map((e, t) => /* @__PURE__ */ l("div", { className: "flex gap-3 items-end", children: [
              /* @__PURE__ */ l("div", { className: "flex-1", children: [
                /* @__PURE__ */ r("label", { className: "block text-xs font-medium mb-1 text-[var(--text-secondary)]", children: s("assignment.skillCategory", "Skill Category") }),
                /* @__PURE__ */ l(
                  "select",
                  {
                    value: e.skillCategory,
                    onChange: (a) => k(t, "skillCategory", a.target.value),
                    className: "w-full px-3 py-2 border rounded-lg bg-[var(--bg-secondary)] text-[var(--text-primary)] border-[var(--border-color)]",
                    children: [
                      /* @__PURE__ */ r("option", { value: "", children: "Select skill..." }),
                      z.map((a) => /* @__PURE__ */ r("option", { value: a, children: a }, a))
                    ]
                  }
                )
              ] }),
              /* @__PURE__ */ l("div", { className: "w-32", children: [
                /* @__PURE__ */ r("label", { className: "block text-xs font-medium mb-1 text-[var(--text-secondary)]", children: s("assignment.proficiency", "Proficiency") }),
                /* @__PURE__ */ r(
                  "select",
                  {
                    value: e.proficiencyLevel,
                    onChange: (a) => k(t, "proficiencyLevel", parseInt(a.target.value)),
                    className: "w-full px-3 py-2 border rounded-lg bg-[var(--bg-secondary)] text-[var(--text-primary)] border-[var(--border-color)]",
                    children: [1, 2, 3, 4, 5].map((a) => /* @__PURE__ */ r("option", { value: a, children: x(a) }, a))
                  }
                )
              ] }),
              /* @__PURE__ */ r(
                "button",
                {
                  onClick: () => E(t),
                  className: "p-2 text-[var(--error-text)] hover:bg-[var(--error-bg)] rounded-lg",
                  children: /* @__PURE__ */ r(R, { className: "w-4 h-4" })
                }
              )
            ] }, `skill-${t}`)),
            /* @__PURE__ */ l(
              "button",
              {
                onClick: I,
                className: "flex items-center gap-2 px-4 py-2 text-sm border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)]",
                children: [
                  /* @__PURE__ */ r(B, { className: "w-4 h-4" }),
                  s("assignment.addSkill", "Add Skill")
                ]
              }
            )
          ] }),
          /* @__PURE__ */ l("div", { className: "sticky bottom-0 bg-[var(--bg-primary)] border-t border-[var(--border-color)] p-6 flex justify-end gap-3", children: [
            /* @__PURE__ */ r(
              "button",
              {
                onClick: v,
                className: "px-4 py-2 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)]",
                children: s("common:cancel", "Cancel")
              }
            ),
            /* @__PURE__ */ r(
              "button",
              {
                onClick: j,
                disabled: f,
                className: "px-4 py-2 bg-[var(--info-bg)] text-[var(--info-text)] rounded-lg hover:opacity-80 disabled:opacity-50",
                children: f ? s("common:saving", "Saving...") : s("common:save", "Save")
              }
            )
          ] })
        ] }) })
      ]
    }
  );
}
export {
  O as AgentSkillsPage
};
//# sourceMappingURL=AgentSkillsPage-DDQU3Rbq.js.map
