import { jsxs as s, jsx as t } from "react/jsx-runtime";
import { useState as c, useCallback as V, useEffect as X } from "react";
import { useTranslation as J } from "react-i18next";
import { FileText as A, Plus as K, Search as Q, Filter as U, Loader2 as F, Check as W, Copy as Y, Edit as Z, EyeOff as _, Eye as ee, Trash2 as te, X as ae, Save as se } from "lucide-react";
import { a4 as o, B as re } from "./index-CwSaRXXg.js";
const le = {
  Greeting: "bg-[var(--info-bg)] text-[var(--info-text)]",
  Acknowledgment: "bg-[var(--success-bg)] text-[var(--success-text)]",
  RequestInfo: "bg-[var(--warning-bg)] text-[var(--warning-text)]",
  Resolution: "bg-[var(--accent-bg)] text-[var(--accent-text)]",
  Escalation: "bg-[var(--warning-bg)] text-[var(--warning-text)]",
  Closure: "bg-[var(--bg-secondary)] text-[var(--text-secondary)]"
};
function me() {
  const { t: a } = J("support"), u = (e) => {
    const l = `templates.categories.${e}`, g = a(l);
    return g !== l ? g : e;
  }, [v, f] = c(!0), [S, O] = c([]), [b, j] = c([]), [i, L] = c(""), [d, D] = c(""), [x, E] = c(!1), [I, m] = c(!1), [h, N] = c(null), [w, C] = c(!1), [P, k] = c(null), [r, n] = c({
    title: "",
    content: "",
    category: "",
    displayOrder: 0
  }), p = V(async () => {
    try {
      f(!0);
      const [e, l] = await Promise.all([
        o.getAll(d || void 0, !x),
        o.getCategories()
      ]);
      O(e), j(l);
    } catch (e) {
      console.error("Failed to load templates:", e);
    } finally {
      f(!1);
    }
  }, [d, x]);
  X(() => {
    p();
  }, [p]);
  const y = S.filter(
    (e) => e.title.toLowerCase().includes(i.toLowerCase()) || e.content.toLowerCase().includes(i.toLowerCase())
  ), T = () => {
    N(null), n({
      title: "",
      content: "",
      category: b[0] || "",
      displayOrder: 0
    }), m(!0);
  }, R = (e) => {
    N(e), n({
      title: e.title,
      content: e.content,
      category: e.category,
      displayOrder: e.displayOrder
    }), m(!0);
  }, $ = async () => {
    try {
      C(!0), h ? await o.update(h.id, {
        title: r.title,
        content: r.content,
        category: r.category,
        displayOrder: r.displayOrder
      }) : await o.create({
        title: r.title,
        content: r.content,
        category: r.category
      }), m(!1), p();
    } catch (e) {
      console.error("Failed to save template:", e);
    } finally {
      C(!1);
    }
  }, q = async (e) => {
    if (confirm(a("templates.confirmDelete")))
      try {
        await o.delete(e), p();
      } catch (l) {
        console.error("Failed to delete template:", l);
      }
  }, B = async (e) => {
    try {
      e.isActive ? await o.deactivate(e.id) : await o.activate(e.id), p();
    } catch (l) {
      console.error("Failed to toggle template status:", l);
    }
  }, M = async (e) => {
    try {
      await navigator.clipboard.writeText(e.content), k(e.id), setTimeout(() => k(null), 2e3);
    } catch (l) {
      console.error("Failed to copy:", l);
    }
  }, z = [
    "{{ticketNumber}}",
    "{{ticketTitle}}",
    "{{userName}}",
    "{{userFirstName}}",
    "{{userLastName}}",
    "{{userEmail}}",
    "{{priority}}",
    "{{type}}",
    "{{status}}",
    "{{agentName}}",
    "{{agentFirstName}}",
    "{{createdAt}}",
    "{{resolvedAt}}",
    "{{resolution}}"
  ];
  return /* @__PURE__ */ s("div", { className: "space-y-6", children: [
    /* @__PURE__ */ t(
      re,
      {
        items: [
          { label: a("title", "Support"), href: "/support" },
          { label: a("templates.title", "Response Templates") }
        ]
      }
    ),
    /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
      /* @__PURE__ */ s("div", { children: [
        /* @__PURE__ */ s("h1", { className: "text-2xl font-bold flex items-center gap-2", children: [
          /* @__PURE__ */ t(A, { className: "w-6 h-6" }),
          a("templates.title")
        ] }),
        /* @__PURE__ */ t("p", { className: "text-[var(--text-secondary)]", children: a("templates.subtitle") })
      ] }),
      /* @__PURE__ */ s("button", { onClick: T, className: "btn btn-primary flex items-center gap-2", children: [
        /* @__PURE__ */ t(K, { className: "w-4 h-4" }),
        a("templates.newTemplate")
      ] })
    ] }),
    /* @__PURE__ */ s("div", { className: "flex flex-col md:flex-row gap-4", children: [
      /* @__PURE__ */ s("div", { className: "relative flex-1", children: [
        /* @__PURE__ */ t(Q, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" }),
        /* @__PURE__ */ t(
          "input",
          {
            type: "text",
            placeholder: a("templates.searchPlaceholder"),
            value: i,
            onChange: (e) => L(e.target.value),
            className: "input w-full pl-10"
          }
        )
      ] }),
      /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ t(U, { className: "w-4 h-4 text-[var(--text-secondary)]" }),
        /* @__PURE__ */ s(
          "select",
          {
            value: d,
            onChange: (e) => D(e.target.value),
            className: "input",
            children: [
              /* @__PURE__ */ t("option", { value: "", children: a("templates.allCategories") }),
              b.map((e) => /* @__PURE__ */ t("option", { value: e, children: u(e) }, e))
            ]
          }
        ),
        /* @__PURE__ */ s("label", { className: "flex items-center gap-2 text-sm", children: [
          /* @__PURE__ */ t(
            "input",
            {
              type: "checkbox",
              checked: x,
              onChange: (e) => E(e.target.checked),
              className: "rounded border-[var(--border-color)]"
            }
          ),
          a("templates.showInactive")
        ] })
      ] })
    ] }),
    v && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ t(F, { className: "w-8 h-8 animate-spin text-[var(--color-primary-600)]" }) }),
    !v && y.length > 0 && /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: y.map((e) => /* @__PURE__ */ s(
      "div",
      {
        className: `card p-4 ${e.isActive ? "" : "opacity-60"}`,
        children: [
          /* @__PURE__ */ s("div", { className: "flex items-start justify-between mb-3", children: [
            /* @__PURE__ */ t(
              "span",
              {
                className: `text-xs px-2 py-1 rounded-[var(--radius-badge)] font-medium ${le[e.category] || "bg-[var(--bg-secondary)] text-[var(--text-secondary)]"}`,
                children: u(e.category)
              }
            ),
            /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
              !e.isActive && /* @__PURE__ */ t("span", { className: "text-xs text-[var(--error-text)] mr-2", children: a("templates.inactive") }),
              /* @__PURE__ */ t(
                "button",
                {
                  onClick: () => M(e),
                  className: "p-1.5 rounded hover:bg-[var(--bg-hover)]",
                  title: a("templates.actions.copyContent"),
                  children: P === e.id ? /* @__PURE__ */ t(W, { className: "w-4 h-4 text-[var(--success-text)]" }) : /* @__PURE__ */ t(Y, { className: "w-4 h-4" })
                }
              ),
              /* @__PURE__ */ t(
                "button",
                {
                  onClick: () => R(e),
                  className: "p-1.5 rounded hover:bg-[var(--bg-hover)]",
                  title: a("templates.actions.edit"),
                  children: /* @__PURE__ */ t(Z, { className: "w-4 h-4" })
                }
              ),
              /* @__PURE__ */ t(
                "button",
                {
                  onClick: () => B(e),
                  className: "p-1.5 rounded hover:bg-[var(--bg-hover)]",
                  title: e.isActive ? a("templates.actions.deactivate") : a("templates.actions.activate"),
                  children: e.isActive ? /* @__PURE__ */ t(_, { className: "w-4 h-4" }) : /* @__PURE__ */ t(ee, { className: "w-4 h-4" })
                }
              ),
              /* @__PURE__ */ t(
                "button",
                {
                  onClick: () => q(e.id),
                  className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--error-text)]",
                  title: a("templates.actions.delete"),
                  children: /* @__PURE__ */ t(te, { className: "w-4 h-4" })
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ t("h3", { className: "font-semibold mb-2", children: e.title }),
          /* @__PURE__ */ t("p", { className: "text-sm text-[var(--text-secondary)] line-clamp-3 whitespace-pre-wrap", children: e.content }),
          /* @__PURE__ */ s("div", { className: "mt-3 pt-3 border-t border-[var(--border-color)] flex items-center justify-between text-xs text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ s("span", { children: [
              a("templates.labels.order"),
              ": ",
              e.displayOrder
            ] }),
            /* @__PURE__ */ s("span", { children: [
              a("templates.labels.updated"),
              ": ",
              e.updatedAt ? new Date(e.updatedAt).toLocaleDateString() : new Date(e.createdAt).toLocaleDateString()
            ] })
          ] })
        ]
      },
      e.id
    )) }),
    !v && y.length === 0 && /* @__PURE__ */ s("div", { className: "card p-12 text-center", children: [
      /* @__PURE__ */ t(A, { className: "w-16 h-16 mx-auto mb-4 opacity-30" }),
      /* @__PURE__ */ t("h3", { className: "text-lg font-medium mb-2", children: a("templates.noTemplates") }),
      /* @__PURE__ */ t("p", { className: "text-[var(--text-secondary)] mb-4", children: a(i || d ? "templates.adjustFilters" : "templates.createFirst") }),
      !i && !d && /* @__PURE__ */ t("button", { onClick: T, className: "btn btn-primary", children: a("templates.createTemplate") })
    ] }),
    I && /* @__PURE__ */ t("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ s("div", { className: "bg-[var(--bg-primary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden", children: [
      /* @__PURE__ */ s("div", { className: "p-4 border-b border-[var(--border-color)] flex items-center justify-between", children: [
        /* @__PURE__ */ t("h2", { className: "text-lg font-semibold", children: a(h ? "templates.editTemplate" : "templates.createTemplate") }),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => m(!1),
            className: "p-1 rounded hover:bg-[var(--bg-hover)]",
            children: /* @__PURE__ */ t(ae, { className: "w-5 h-5" })
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { className: "p-4 overflow-y-auto", style: { maxHeight: "calc(90vh - 140px)" }, children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
        /* @__PURE__ */ s("div", { children: [
          /* @__PURE__ */ s("label", { className: "block text-sm font-medium mb-1", children: [
            a("templates.form.title"),
            " *"
          ] }),
          /* @__PURE__ */ t(
            "input",
            {
              type: "text",
              value: r.title,
              onChange: (e) => n({ ...r, title: e.target.value }),
              className: "input w-full",
              placeholder: a("templates.form.titlePlaceholder")
            }
          )
        ] }),
        /* @__PURE__ */ s("div", { className: "grid grid-cols-2 gap-4", children: [
          /* @__PURE__ */ s("div", { children: [
            /* @__PURE__ */ s("label", { className: "block text-sm font-medium mb-1", children: [
              a("templates.form.category"),
              " *"
            ] }),
            /* @__PURE__ */ t(
              "select",
              {
                value: r.category,
                onChange: (e) => n({ ...r, category: e.target.value }),
                className: "input w-full",
                children: b.map((e) => /* @__PURE__ */ t("option", { value: e, children: u(e) }, e))
              }
            )
          ] }),
          /* @__PURE__ */ s("div", { children: [
            /* @__PURE__ */ t("label", { className: "block text-sm font-medium mb-1", children: a("templates.form.displayOrder") }),
            /* @__PURE__ */ t(
              "input",
              {
                type: "number",
                min: "0",
                value: r.displayOrder,
                onChange: (e) => n({ ...r, displayOrder: parseInt(e.target.value) || 0 }),
                className: "input w-full"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ s("div", { children: [
          /* @__PURE__ */ s("label", { className: "block text-sm font-medium mb-1", children: [
            a("templates.form.content"),
            " *"
          ] }),
          /* @__PURE__ */ t(
            "textarea",
            {
              value: r.content,
              onChange: (e) => n({ ...r, content: e.target.value }),
              className: "input w-full h-48 font-mono text-sm",
              placeholder: a("templates.form.contentPlaceholder")
            }
          )
        ] }),
        /* @__PURE__ */ s("div", { className: "bg-[var(--bg-secondary)] p-3 rounded-lg", children: [
          /* @__PURE__ */ t("h4", { className: "text-sm font-medium mb-2", children: a("templates.form.availableVariables") }),
          /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2", children: z.map((e) => /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: () => {
                const l = document.querySelector("textarea");
                if (l) {
                  const g = l.selectionStart, G = l.selectionEnd, H = r.content.substring(0, g) + e + r.content.substring(G);
                  n({ ...r, content: H });
                } else
                  n({ ...r, content: r.content + e });
              },
              className: "text-xs px-2 py-1 bg-[var(--bg-primary)] rounded border border-[var(--border-color)] hover:bg-[var(--bg-hover)] font-mono",
              children: e
            },
            e
          )) })
        ] })
      ] }) }),
      /* @__PURE__ */ s("div", { className: "p-4 border-t border-[var(--border-color)] flex justify-end gap-2", children: [
        /* @__PURE__ */ t("button", { onClick: () => m(!1), className: "btn btn-secondary", children: a("templates.actions.cancel") }),
        /* @__PURE__ */ s(
          "button",
          {
            onClick: $,
            disabled: !r.title || !r.content || !r.category || w,
            className: "btn btn-primary flex items-center gap-2",
            children: [
              w ? /* @__PURE__ */ t(F, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ t(se, { className: "w-4 h-4" }),
              a(h ? "templates.actions.update" : "templates.actions.create")
            ]
          }
        )
      ] })
    ] }) })
  ] });
}
export {
  me as TemplatesPage
};
//# sourceMappingURL=TemplatesPage-DdnGgioU.js.map
