import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { Link as a } from "react-router-dom";
import { useTranslation as b } from "react-i18next";
import { FileText as i, Variable as x, Copy as d, EyeOff as n, ArrowRight as c, Shield as v, Plus as m, Search as N, Filter as g, Edit as p, Eye as f, Trash2 as u, Save as y, HelpCircle as w, MessageSquare as T, Info as k } from "lucide-react";
const o = {
  Greeting: { label: "Salutation", color: "bg-blue-500/10 text-blue-600" },
  Acknowledgment: { label: "Accuse reception", color: "bg-green-500/10 text-green-600" },
  RequestInfo: { label: "Demande info", color: "bg-yellow-500/10 text-yellow-600" },
  Resolution: { label: "Resolution", color: "bg-purple-500/10 text-purple-600" },
  Escalation: { label: "Escalade", color: "bg-orange-500/10 text-orange-600" },
  Closure: { label: "Cloture", color: "bg-gray-500/10 text-gray-600" }
}, C = [
  { id: "1", title: "Accuse de reception", category: "Acknowledgment", content: `Bonjour {{userFirstName}},

Nous avons bien recu votre demande concernant "{{ticketTitle}}"...`, active: !0, order: 1 },
  { id: "2", title: "Demande de precision", category: "RequestInfo", content: `Bonjour {{userFirstName}},

Afin de mieux traiter votre demande, pourriez-vous nous preciser...`, active: !0, order: 2 },
  { id: "3", title: "Resolution standard", category: "Resolution", content: `Bonjour {{userFirstName}},

Votre probleme a ete resolu. Voici la solution...`, active: !0, order: 3 },
  { id: "4", title: "Escalade niveau 2", category: "Escalation", content: `Bonjour {{userFirstName}},

Votre demande necessite une expertise supplementaire...`, active: !1, order: 4 }
], h = [
  { name: "{{ticketNumber}}", description: "Numero du ticket (ex: TKT-2024-001)" },
  { name: "{{ticketTitle}}", description: "Titre du ticket" },
  { name: "{{userName}}", description: "Nom complet du demandeur" },
  { name: "{{userFirstName}}", description: "Prenom du demandeur" },
  { name: "{{userLastName}}", description: "Nom de famille du demandeur" },
  { name: "{{userEmail}}", description: "Email du demandeur" },
  { name: "{{priority}}", description: "Priorite du ticket (Low/Medium/High/Critical)" },
  { name: "{{type}}", description: "Type de ticket (Bug/Feature/Support/Question)" },
  { name: "{{status}}", description: "Statut actuel du ticket" },
  { name: "{{agentName}}", description: "Nom de l'agent assigne" },
  { name: "{{agentFirstName}}", description: "Prenom de l'agent" },
  { name: "{{createdAt}}", description: "Date de creation du ticket" },
  { name: "{{resolvedAt}}", description: "Date de resolution" },
  { name: "{{resolution}}", description: "Note de resolution" }
], q = [
  {
    question: "Comment utiliser les variables dans un template ?",
    answer: "Les variables sont encadrees par des doubles accolades {{variable}}. Lors de l'utilisation du template, elles sont automatiquement remplacees par les valeurs reelles du ticket. Cliquez sur une variable dans l'editeur pour l'inserer a la position du curseur."
  },
  {
    question: "Quelle est la difference entre actif et inactif ?",
    answer: "Les templates inactifs ne sont pas visibles par les agents lors de la redaction de reponses. Utilisez cette fonctionnalite pour archiver des templates obsoletes sans les supprimer definitivement."
  },
  {
    question: "Comment organiser l'ordre d'affichage ?",
    answer: `Le champ "Display Order" permet de definir l'ordre d'apparition des templates dans une meme categorie. Les templates avec un ordre plus bas apparaissent en premier.`
  },
  {
    question: "Puis-je dupliquer un template existant ?",
    answer: `Il n'y a pas de fonction de duplication directe. Copiez le contenu avec le bouton "Copy", creez un nouveau template et collez le contenu. Vous pouvez ensuite le modifier selon vos besoins.`
  }
], j = [
  { method: "GET", url: "/api/support/templates", description: "Liste des templates (filtrable par categorie)" },
  { method: "GET", url: "/api/support/templates/categories", description: "Liste des categories disponibles" },
  { method: "GET", url: "/api/support/templates/{id}", description: "Detail d'un template" },
  { method: "POST", url: "/api/support/templates", description: "Creer un nouveau template" },
  { method: "PUT", url: "/api/support/templates/{id}", description: "Modifier un template" },
  { method: "DELETE", url: "/api/support/templates/{id}", description: "Supprimer un template" },
  { method: "POST", url: "/api/support/templates/{id}/activate", description: "Activer un template" },
  { method: "POST", url: "/api/support/templates/{id}/deactivate", description: "Desactiver un template" }
];
function P() {
  const { t: s } = b("docs");
  return /* @__PURE__ */ r("div", { className: "space-y-8", children: [
    /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
      /* @__PURE__ */ e(a, { to: "/system/docs", className: "hover:text-[var(--color-primary-600)]", children: s("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(a, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: s("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(a, { to: "/system/docs/user/support", className: "hover:text-[var(--color-primary-600)]", children: s("breadcrumb.support") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: s("support.templates.title") })
    ] }),
    /* @__PURE__ */ r("div", { children: [
      /* @__PURE__ */ r("h1", { className: "text-3xl font-bold mb-4 flex items-center gap-3", children: [
        /* @__PURE__ */ e(i, { className: "w-8 h-8 text-[var(--color-primary-600)]" }),
        "Templates de Reponse"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: "Gestion des reponses pre-definies avec variables dynamiques pour accelerer le traitement des tickets." }),
      /* @__PURE__ */ r("div", { className: "mt-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-teal-500/10 text-teal-600 border border-teal-500/20", children: "Configuration" }),
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-purple-500/10 text-purple-600 border border-purple-500/20", children: "Variables" })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: "card p-4 bg-[var(--bg-secondary)]", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold mb-3", children: "Table des matieres" }),
      /* @__PURE__ */ r("nav", { className: "grid grid-cols-2 md:grid-cols-4 gap-2 text-sm", children: [
        /* @__PURE__ */ e("a", { href: "#introduction", className: "text-[var(--color-primary-600)] hover:underline", children: "1. Introduction" }),
        /* @__PURE__ */ e("a", { href: "#access", className: "text-[var(--color-primary-600)] hover:underline", children: "2. Acces" }),
        /* @__PURE__ */ e("a", { href: "#overview", className: "text-[var(--color-primary-600)] hover:underline", children: "3. Vue d'ensemble" }),
        /* @__PURE__ */ e("a", { href: "#categories", className: "text-[var(--color-primary-600)] hover:underline", children: "4. Categories" }),
        /* @__PURE__ */ e("a", { href: "#variables", className: "text-[var(--color-primary-600)] hover:underline", children: "5. Variables" }),
        /* @__PURE__ */ e("a", { href: "#crud", className: "text-[var(--color-primary-600)] hover:underline", children: "6. Operations" }),
        /* @__PURE__ */ e("a", { href: "#faq", className: "text-[var(--color-primary-600)] hover:underline", children: "7. FAQ" }),
        /* @__PURE__ */ e("a", { href: "#api", className: "text-[var(--color-primary-600)] hover:underline", children: "8. Reference API" })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "introduction", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "1" }),
        "Introduction"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Les templates de reponse permettent aux agents de gagner du temps en utilisant des reponses pre-formatees. Les variables dynamiques sont remplacees automatiquement par les informations du ticket lors de l'insertion." }),
      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(i, { className: "w-4 h-4 text-blue-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "6 categories" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Organisation claire des templates" })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(x, { className: "w-4 h-4 text-purple-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "14 variables" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Personnalisation automatique" })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(d, { className: "w-4 h-4 text-green-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Copie rapide" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Un clic pour copier le contenu" })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(n, { className: "w-4 h-4 text-orange-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Activation/Desactivation" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Archivage sans suppression" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "access", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "2" }),
        "Acces au module"
      ] }),
      /* @__PURE__ */ r("div", { className: "mb-4", children: [
        /* @__PURE__ */ e("div", { className: "text-sm font-medium mb-2", children: "Navigation" }),
        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm bg-[var(--bg-secondary)] p-3 rounded-lg", children: [
          /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-[var(--bg-primary)] rounded", children: "Support" }),
          /* @__PURE__ */ e(c, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
          /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-[var(--color-primary-600)] text-white rounded", children: "Templates" })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: "mb-4", children: [
        /* @__PURE__ */ e("div", { className: "text-sm font-medium mb-2", children: "URL directe" }),
        /* @__PURE__ */ e("code", { className: "block p-3 bg-[var(--bg-secondary)] rounded-lg text-sm font-mono", children: "/support/templates" })
      ] }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
          /* @__PURE__ */ e(v, { className: "w-4 h-4 text-[var(--color-primary-600)]" }),
          /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Permissions requises" })
        ] }),
        /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tl-lg", children: "Action" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tr-lg", children: "Permission" })
          ] }) }),
          /* @__PURE__ */ r("tbody", { children: [
            /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Voir les templates" }),
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("code", { className: "text-xs bg-[var(--bg-secondary)] px-2 py-0.5 rounded", children: "support.templates.read" }) })
            ] }),
            /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Creer un template" }),
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("code", { className: "text-xs bg-[var(--bg-secondary)] px-2 py-0.5 rounded", children: "support.templates.create" }) })
            ] }),
            /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Modifier un template" }),
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("code", { className: "text-xs bg-[var(--bg-secondary)] px-2 py-0.5 rounded", children: "support.templates.update" }) })
            ] }),
            /* @__PURE__ */ r("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Supprimer un template" }),
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("code", { className: "text-xs bg-[var(--bg-secondary)] px-2 py-0.5 rounded", children: "support.templates.delete" }) })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "overview", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "3" }),
        "Vue d'ensemble"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "L'interface affiche les templates en grille de cartes avec filtrage par categorie et recherche." }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-lg overflow-hidden", children: [
        /* @__PURE__ */ r("div", { className: "p-4 border-b border-[var(--border-color)] flex items-center justify-between", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(i, { className: "w-5 h-5" }),
              /* @__PURE__ */ e("span", { className: "font-bold", children: "Response Templates" })
            ] }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Manage pre-defined response templates for tickets" })
          ] }),
          /* @__PURE__ */ r("button", { className: "px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg flex items-center gap-2 text-sm", children: [
            /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
            "New Template"
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "p-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ r("div", { className: "flex-1 relative", children: [
            /* @__PURE__ */ e(N, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" }),
            /* @__PURE__ */ e(
              "input",
              {
                type: "text",
                placeholder: "Search templates...",
                className: "w-full pl-10 pr-4 py-2 border border-[var(--border-color)] rounded-lg bg-[var(--bg-primary)]",
                readOnly: !0
              }
            )
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(g, { className: "w-4 h-4 text-[var(--text-secondary)]" }),
            /* @__PURE__ */ r("select", { className: "px-3 py-2 border border-[var(--border-color)] rounded-lg bg-[var(--bg-primary)]", children: [
              /* @__PURE__ */ e("option", { children: "All Categories" }),
              /* @__PURE__ */ e("option", { children: "Greeting" }),
              /* @__PURE__ */ e("option", { children: "Acknowledgment" }),
              /* @__PURE__ */ e("option", { children: "Request Info" })
            ] })
          ] }),
          /* @__PURE__ */ r("label", { className: "flex items-center gap-2 text-sm", children: [
            /* @__PURE__ */ e("input", { type: "checkbox", className: "rounded" }),
            "Show Inactive"
          ] })
        ] }) }),
        /* @__PURE__ */ e("div", { className: "p-4 grid grid-cols-1 md:grid-cols-2 gap-4", children: C.map((t) => /* @__PURE__ */ r("div", { className: `p-4 border border-[var(--border-color)] rounded-lg ${t.active ? "" : "opacity-60"}`, children: [
          /* @__PURE__ */ r("div", { className: "flex items-start justify-between mb-3", children: [
            /* @__PURE__ */ e("span", { className: `text-xs px-2 py-1 rounded font-medium ${o[t.category]?.color}`, children: o[t.category]?.label }),
            /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
              !t.active && /* @__PURE__ */ e("span", { className: "text-xs text-red-500 mr-2", children: "Inactive" }),
              /* @__PURE__ */ e("button", { className: "p-1 hover:bg-[var(--bg-secondary)] rounded", children: /* @__PURE__ */ e(d, { className: "w-3.5 h-3.5" }) }),
              /* @__PURE__ */ e("button", { className: "p-1 hover:bg-[var(--bg-secondary)] rounded", children: /* @__PURE__ */ e(p, { className: "w-3.5 h-3.5" }) }),
              /* @__PURE__ */ e("button", { className: "p-1 hover:bg-[var(--bg-secondary)] rounded", children: t.active ? /* @__PURE__ */ e(n, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5" }) }),
              /* @__PURE__ */ e("button", { className: "p-1 hover:bg-[var(--bg-secondary)] rounded text-red-500", children: /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5" }) })
            ] })
          ] }),
          /* @__PURE__ */ e("h3", { className: "font-semibold mb-2", children: t.title }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] line-clamp-2 whitespace-pre-wrap", children: t.content }),
          /* @__PURE__ */ r("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__ */ r("span", { children: [
              "Order: ",
              t.order
            ] }),
            /* @__PURE__ */ e("span", { children: "Updated: 09/01/2026" })
          ] })
        ] }, t.id)) })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "categories", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "4" }),
        "Categories de templates"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Les templates sont organises en 6 categories correspondant aux differentes etapes du cycle de vie d'un ticket." }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: Object.entries(o).map(([t, l]) => /* @__PURE__ */ r("div", { className: `p-4 rounded-lg ${l.color}`, children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-2", children: l.label }),
        /* @__PURE__ */ r("p", { className: "text-sm opacity-80", children: [
          t === "Greeting" && "Messages de bienvenue et d'introduction",
          t === "Acknowledgment" && "Accuses de reception des demandes",
          t === "RequestInfo" && "Demandes d'informations complementaires",
          t === "Resolution" && "Messages de resolution de probleme",
          t === "Escalation" && "Notifications d'escalade",
          t === "Closure" && "Messages de cloture de ticket"
        ] })
      ] }, t)) })
    ] }),
    /* @__PURE__ */ r("section", { id: "variables", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "5" }),
        "Variables dynamiques"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Les variables permettent de personnaliser automatiquement les templates avec les informations du ticket. Elles sont remplacees lors de l'insertion du template." }),
      /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tl-lg", children: "Variable" }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tr-lg", children: "Description" })
        ] }) }),
        /* @__PURE__ */ e("tbody", { children: h.map((t) => /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
          /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs font-mono", children: t.name }) }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: t.description })
        ] }, t.name)) })
      ] }) }),
      /* @__PURE__ */ r("div", { className: "mt-4 p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
        /* @__PURE__ */ e("h3", { className: "font-medium mb-2", children: "Exemple d'utilisation" }),
        /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-primary)] rounded border border-[var(--border-color)] font-mono text-sm", children: [
          /* @__PURE__ */ r("div", { children: [
            "Bonjour ",
            /* @__PURE__ */ e("span", { className: "text-purple-600", children: "{{userFirstName}}" }),
            ","
          ] }),
          /* @__PURE__ */ r("div", { className: "mt-2", children: [
            'Nous avons bien recu votre demande concernant "',
            /* @__PURE__ */ e("span", { className: "text-purple-600", children: "{{ticketTitle}}" }),
            '" (ref: ',
            /* @__PURE__ */ e("span", { className: "text-purple-600", children: "{{ticketNumber}}" }),
            ")."
          ] }),
          /* @__PURE__ */ r("div", { className: "mt-2", children: [
            "Votre ticket a ete assigne a ",
            /* @__PURE__ */ e("span", { className: "text-purple-600", children: "{{agentName}}" }),
            " qui vous recontactera sous peu."
          ] })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-2", children: "Les variables en violet seront remplacees par les valeurs reelles du ticket." })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "crud", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "6" }),
        "Operations disponibles"
      ] }),
      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-green-500/10 border border-green-500/20", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(m, { className: "w-5 h-5 text-green-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-green-600", children: "Creer" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Ouvre une modale avec le formulaire de creation: titre, categorie, contenu et ordre d'affichage." })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-blue-500/10 border border-blue-500/20", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(p, { className: "w-5 h-5 text-blue-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-blue-600", children: "Modifier" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Edition du template existant. Tous les champs sont modifiables." })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-purple-500/10 border border-purple-500/20", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(d, { className: "w-5 h-5 text-purple-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-purple-600", children: "Copier" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Copie le contenu du template dans le presse-papiers pour une utilisation immediate." })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-orange-500/10 border border-orange-500/20", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(n, { className: "w-5 h-5 text-orange-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-orange-600", children: "Activer/Desactiver" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Bascule l'etat du template. Les inactifs sont masques pour les agents." })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-red-500/10 border border-red-500/20 md:col-span-2", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(u, { className: "w-5 h-5 text-red-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-red-600", children: "Supprimer" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Supprime definitivement le template apres confirmation. Preferez la desactivation pour conserver l'historique." })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: "mt-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-medium mb-3", children: "Formulaire de creation/edition" }),
        /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-lg overflow-hidden", children: [
          /* @__PURE__ */ r("div", { className: "p-4 border-b border-[var(--border-color)] flex items-center justify-between bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("span", { className: "font-semibold", children: "Create Template" }),
            /* @__PURE__ */ e("button", { className: "p-1 hover:bg-[var(--bg-hover)] rounded", children: "×" })
          ] }),
          /* @__PURE__ */ r("div", { className: "p-4 space-y-4", children: [
            /* @__PURE__ */ r("div", { children: [
              /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Title *" }),
              /* @__PURE__ */ e("input", { type: "text", placeholder: "Template title", className: "w-full p-2 border border-[var(--border-color)] rounded-lg", readOnly: !0 })
            ] }),
            /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-4", children: [
              /* @__PURE__ */ r("div", { children: [
                /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Category *" }),
                /* @__PURE__ */ e("select", { className: "w-full p-2 border border-[var(--border-color)] rounded-lg", children: /* @__PURE__ */ e("option", { children: "Greeting" }) })
              ] }),
              /* @__PURE__ */ r("div", { children: [
                /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Display Order" }),
                /* @__PURE__ */ e("input", { type: "number", value: "0", className: "w-full p-2 border border-[var(--border-color)] rounded-lg", readOnly: !0 })
              ] })
            ] }),
            /* @__PURE__ */ r("div", { children: [
              /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Content *" }),
              /* @__PURE__ */ e("textarea", { rows: 4, placeholder: "Template content...", className: "w-full p-2 border border-[var(--border-color)] rounded-lg font-mono text-sm", readOnly: !0 })
            ] }),
            /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
              /* @__PURE__ */ e("div", { className: "text-sm font-medium mb-2", children: "Available Variables" }),
              /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1", children: [
                h.slice(0, 6).map((t) => /* @__PURE__ */ e("button", { className: "text-xs px-2 py-1 bg-[var(--bg-primary)] rounded border border-[var(--border-color)] font-mono", children: t.name }, t.name)),
                /* @__PURE__ */ e("span", { className: "text-xs px-2 py-1 text-[var(--text-secondary)]", children: "+8 more" })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "p-4 border-t border-[var(--border-color)] flex justify-end gap-2 bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("button", { className: "px-4 py-2 border border-[var(--border-color)] rounded-lg", children: "Cancel" }),
            /* @__PURE__ */ r("button", { className: "px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg flex items-center gap-2", children: [
              /* @__PURE__ */ e(y, { className: "w-4 h-4" }),
              "Create"
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "faq", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "7" }),
        /* @__PURE__ */ e(w, { className: "w-5 h-5" }),
        "Questions frequentes"
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-4", children: q.map((t) => /* @__PURE__ */ e("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-lg", children: /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
        /* @__PURE__ */ e(T, { className: "w-5 h-5 text-[var(--color-primary-600)] flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h4", { className: "font-medium mb-2", children: t.question }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: t.answer })
        ] })
      ] }) }, t.question)) })
    ] }),
    /* @__PURE__ */ r("section", { id: "api", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "8" }),
        "Reference API"
      ] }),
      /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tl-lg", children: "Methode" }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3", children: "Endpoint" }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tr-lg", children: "Description" })
        ] }) }),
        /* @__PURE__ */ e("tbody", { children: j.map((t, l) => /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
          /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: `px-2 py-0.5 rounded text-xs font-medium ${t.method === "GET" ? "bg-green-500/10 text-green-600" : t.method === "POST" ? "bg-yellow-500/10 text-yellow-600" : t.method === "PUT" ? "bg-blue-500/10 text-blue-600" : "bg-red-500/10 text-red-600"}`, children: t.method }) }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 font-mono text-xs", children: t.url }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: t.description })
        ] }, `${t.method}-${t.url}-${l}`)) })
      ] }) })
    ] }),
    /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-blue-500/10 border border-blue-500/20 flex items-start gap-3", children: [
      /* @__PURE__ */ e(k, { className: "w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e("div", { className: "font-medium text-blue-600", children: "Pour aller plus loin" }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: 'Consultez la documentation "Configuration Escalade" pour automatiser les notifications lors de depassements SLA.' })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ r(
        a,
        {
          to: "/system/docs/user/support-sla",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(c, { className: "w-4 h-4 rotate-180" }),
            "Configuration SLA"
          ]
        }
      ),
      /* @__PURE__ */ r(
        a,
        {
          to: "/system/docs/user/support-escalation",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            "Configuration Escalade",
            /* @__PURE__ */ e(c, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  P as SupportTemplatesDocPage
};
//# sourceMappingURL=SupportTemplatesDocPage-sCKQlZFJ.js.map
