import { jsxs as l, jsx as r } from "react/jsx-runtime";
import { useState as i, useCallback as M, useEffect as B } from "react";
import { useTranslation as P } from "react-i18next";
import { Loader2 as $, Edit2 as R, Trash2 as T, Plus as U } from "lucide-react";
import { a6 as N, B as F } from "./index-Dh9kUeDn.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 K() {
  const { t: s } = P("support"), [d, u] = i(!0), [w, S] = i([]), [b, C] = i(""), [m, y] = i(null), [o, n] = i([]), [h, x] = i(!1), g = M(async () => {
    try {
      u(!0);
      const e = await N.getAll(), a = L(e);
      S(a);
    } catch (e) {
      console.error("Failed to load agent skills:", e);
    } finally {
      u(!1);
    }
  }, []);
  B(() => {
    g();
  }, [g]);
  const L = (e) => {
    const a = /* @__PURE__ */ new Map();
    return e.forEach((t) => {
      a.has(t.userId) || a.set(t.userId, {
        userId: t.userId,
        userName: null,
        skills: []
      }), a.get(t.userId).skills.push(t);
    }), Array.from(a.values()).sort(
      (t, c) => (t.userName || "").localeCompare(c.userName || "")
    );
  }, p = w.filter(
    (e) => (e.userName || "").toLowerCase().includes(b.toLowerCase())
  ), f = (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), n(
      e.skills.map((a) => ({
        skillCategory: a.skillCategory,
        proficiencyLevel: a.proficiencyLevel
      }))
    );
  }, v = () => {
    y(null), n([]);
  }, I = () => {
    n([...o, { skillCategory: "", proficiencyLevel: 3 }]);
  }, E = (e) => {
    n(o.filter((a, t) => t !== e));
  }, k = (e, a, t) => {
    const c = [...o];
    c[e] = { ...c[e], [a]: t }, n(c);
  }, j = async () => {
    if (m)
      try {
        x(!0);
        const e = {
          skills: o.filter((a) => a.skillCategory.trim())
        };
        await N.update(m, e), await g(), v();
      } catch (e) {
        console.error("Failed to save skills:", e);
      } finally {
        x(!1);
      }
  };
  return /* @__PURE__ */ l("div", { className: "space-y-6", children: [
    /* @__PURE__ */ r(
      F,
      {
        items: [
          { label: s("title", "Support"), href: "/support" },
          { label: s("assignment.skills") }
        ]
      }
    ),
    /* @__PURE__ */ l("div", { children: [
      /* @__PURE__ */ r("h1", { className: "text-2xl font-bold", children: s("assignment.skills") }),
      /* @__PURE__ */ r("p", { className: "text-[var(--text-secondary)]", children: s("assignment.availabilityDescription", "Manage agent skills and proficiency levels") })
    ] }),
    /* @__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($, { className: "w-8 h-8 animate-spin text-[var(--color-primary-600)]" }) }),
    !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(--color-primary-600)] text-white rounded-lg hover:bg-[var(--color-primary-700)]",
            children: [
              /* @__PURE__ */ r(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((a) => /* @__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: a.skillCategory }) }),
            /* @__PURE__ */ r("span", { className: `px-3 py-1 rounded-full text-xs font-medium ${q[a.proficiencyLevel]}`, children: f(a.proficiencyLevel) })
          ]
        },
        `${a.skillCategory}-${a.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: [
        o.map((e, a) => /* @__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: (t) => k(a, "skillCategory", t.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((t) => /* @__PURE__ */ r("option", { value: t, children: t }, t))
                ]
              }
            )
          ] }),
          /* @__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: (t) => k(a, "proficiencyLevel", parseInt(t.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((t) => /* @__PURE__ */ r("option", { value: t, children: f(t) }, t))
              }
            )
          ] }),
          /* @__PURE__ */ r(
            "button",
            {
              onClick: () => E(a),
              className: "p-2 text-[var(--error-text)] hover:bg-[var(--error-bg)] rounded-lg",
              children: /* @__PURE__ */ r(T, { className: "w-4 h-4" })
            }
          )
        ] }, `skill-${a}`)),
        /* @__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(U, { 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: h,
            className: "px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg hover:bg-[var(--color-primary-700)] disabled:opacity-50",
            children: h ? s("common:saving", "Saving...") : s("common:save", "Save")
          }
        )
      ] })
    ] }) })
  ] });
}
export {
  K as AgentSkillsPage
};
//# sourceMappingURL=AgentSkillsPage-CIBKwqOk.js.map
