import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { Link as i } from "react-router-dom";
import { useTranslation as x } from "react-i18next";
import { LayoutDashboard as n, HeadphonesIcon as l, UserCheck as h, Clock as o, FileText as d, TrendingUp as p, Settings as f, Shield as v, ArrowRight as a } from "lucide-react";
function w() {
  const { t: s } = x("docs"), m = [
    {
      title: s("support.modules.dashboard.title"),
      description: s("support.modules.dashboard.description"),
      icon: n,
      href: "/system/docs/user/support-dashboard",
      color: "from-blue-500 to-cyan-500",
      features: [
        s("support.modules.dashboard.features.realTimeKpis"),
        s("support.modules.dashboard.features.slaAlerts"),
        s("support.modules.dashboard.features.agentWorkload"),
        s("support.modules.dashboard.features.trends")
      ]
    },
    {
      title: s("support.modules.tickets.title"),
      description: s("support.modules.tickets.description"),
      icon: l,
      href: "/system/docs/user/support-tickets",
      color: "from-purple-500 to-pink-500",
      features: [
        s("support.modules.tickets.features.views"),
        s("support.modules.tickets.features.filters"),
        s("support.modules.tickets.features.search"),
        s("support.modules.tickets.features.quickActions")
      ]
    },
    {
      title: s("support.modules.myTickets.title"),
      description: s("support.modules.myTickets.description"),
      icon: h,
      href: "/system/docs/user/support-my-tickets",
      color: "from-green-500 to-emerald-500",
      features: [
        s("support.modules.myTickets.features.personalQueue"),
        s("support.modules.myTickets.features.slaIndicators"),
        s("support.modules.myTickets.features.prioritization"),
        s("support.modules.myTickets.features.directActions")
      ]
    },
    {
      title: s("support.modules.sla.title"),
      description: s("support.modules.sla.description"),
      icon: o,
      href: "/system/docs/user/support-sla",
      color: "from-orange-500 to-red-500",
      features: [
        s("support.modules.sla.features.timeByPriority"),
        s("support.modules.sla.features.performanceMetrics"),
        s("support.modules.sla.features.autoPause"),
        s("support.modules.sla.features.compliance")
      ]
    },
    {
      title: s("support.modules.templates.title"),
      description: s("support.modules.templates.description"),
      icon: d,
      href: "/system/docs/user/support-templates",
      color: "from-teal-500 to-cyan-500",
      features: [
        s("support.modules.templates.features.categories"),
        s("support.modules.templates.features.dynamicVariables"),
        s("support.modules.templates.features.quickCopy"),
        s("support.modules.templates.features.displayOrder")
      ]
    },
    {
      title: s("support.modules.escalation.title"),
      description: s("support.modules.escalation.description"),
      icon: p,
      href: "/system/docs/user/support-escalation",
      color: "from-amber-500 to-orange-500",
      features: [
        s("support.modules.escalation.features.threeLevelHierarchy"),
        s("support.modules.escalation.features.configurableDelays"),
        s("support.modules.escalation.features.roleNotifications"),
        s("support.modules.escalation.features.triggers")
      ]
    }
  ], u = [
    { label: s("support.index.stats.modules"), value: "6", icon: f },
    { label: s("support.index.stats.slaLevels"), value: "4", icon: o },
    { label: s("support.index.stats.escalationLevels"), value: "3", icon: p },
    { label: s("support.index.stats.templateCategories"), value: "6", icon: d }
  ];
  return /* @__PURE__ */ t("div", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
      /* @__PURE__ */ e(i, { to: "/system/docs", className: "hover:text-[var(--color-primary-600)]", children: s("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(i, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: s("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: s("breadcrumb.support") })
    ] }),
    /* @__PURE__ */ t("div", { children: [
      /* @__PURE__ */ t("h1", { className: "text-3xl font-bold mb-4 flex items-center gap-3", children: [
        /* @__PURE__ */ e(l, { className: "w-8 h-8 text-[var(--color-primary-600)]" }),
        s("support.index.title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: s("support.index.subtitle") }),
      /* @__PURE__ */ e("div", { className: "mt-4 flex items-center gap-2", children: /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-cyan-500/10 text-cyan-600 border border-cyan-500/20", children: "Support" }) })
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: u.map((r) => /* @__PURE__ */ t("div", { className: "card p-4 text-center", children: [
      /* @__PURE__ */ e(r.icon, { className: "w-6 h-6 mx-auto mb-2 text-[var(--color-primary-600)]" }),
      /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-[var(--color-primary-600)]", children: r.value }),
      /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: r.label })
    ] }, r.label)) }),
    /* @__PURE__ */ t("div", { className: "card p-6 bg-gradient-to-r from-[var(--color-primary-600)]/10 to-transparent", children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-4", children: s("support.index.overview.title") }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: s("support.index.overview.description") }),
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ t("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(n, { className: "w-4 h-4 text-blue-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.overview.dashboard.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.overview.dashboard.description") })
          ] })
        ] }),
        /* @__PURE__ */ t("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(l, { className: "w-4 h-4 text-purple-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.overview.tickets.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.overview.tickets.description") })
          ] })
        ] }),
        /* @__PURE__ */ t("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(o, { className: "w-4 h-4 text-orange-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.overview.sla.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.overview.sla.description") })
          ] })
        ] }),
        /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-teal-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(d, { className: "w-4 h-4 text-teal-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.overview.templates.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.overview.templates.description") })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "card p-6", children: [
      /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
        /* @__PURE__ */ e(v, { className: "w-5 h-5 text-[var(--color-primary-600)]" }),
        /* @__PURE__ */ e("h2", { className: "text-lg font-semibold", children: s("support.index.permissions.title") })
      ] }),
      /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ t("table", { className: "w-full text-sm", children: [
        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)]", children: [
          /* @__PURE__ */ e("th", { className: "text-left py-2 font-medium", children: s("support.index.permissions.module") }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 font-medium", children: s("support.index.permissions.permission") }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 font-medium", children: s("support.index.permissions.description") })
        ] }) }),
        /* @__PURE__ */ t("tbody", { children: [
          /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2", children: "Dashboard" }),
            /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs", children: "support.dashboard.read" }) }),
            /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: s("support.index.permissions.viewDashboard") })
          ] }),
          /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2", children: "Tickets" }),
            /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs", children: "support.tickets.*" }) }),
            /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: s("support.index.permissions.manageTickets") })
          ] }),
          /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2", children: "SLA" }),
            /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs", children: "support.sla.*" }) }),
            /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: s("support.index.permissions.configureSla") })
          ] }),
          /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2", children: "Templates" }),
            /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs", children: "support.templates.*" }) }),
            /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: s("support.index.permissions.manageTemplates") })
          ] }),
          /* @__PURE__ */ t("tr", { children: [
            /* @__PURE__ */ e("td", { className: "py-2", children: "Escalade" }),
            /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs", children: "support.escalation.*" }) }),
            /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: s("support.index.permissions.configureEscalation") })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ t("div", { children: [
      /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-4", children: s("support.index.sections") }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: m.map((r) => /* @__PURE__ */ e(
        i,
        {
          to: r.href,
          className: "card p-5 hover:shadow-lg transition-all group block",
          children: /* @__PURE__ */ t("div", { className: "flex items-start gap-4", children: [
            /* @__PURE__ */ e("div", { className: `p-3 rounded-xl bg-gradient-to-br ${r.color} flex-shrink-0`, children: /* @__PURE__ */ e(r.icon, { className: "w-6 h-6 text-white" }) }),
            /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
              /* @__PURE__ */ t("h3", { className: "font-semibold group-hover:text-[var(--color-primary-600)] transition-colors flex items-center gap-2", children: [
                r.title,
                /* @__PURE__ */ e(a, { className: "w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" })
              ] }),
              /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: r.description }),
              /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mt-3", children: r.features.map((c) => /* @__PURE__ */ e(
                "span",
                {
                  className: "px-2 py-0.5 text-xs rounded bg-[var(--bg-secondary)] text-[var(--text-tertiary)]",
                  children: c
                },
                c
              )) })
            ] })
          ] })
        },
        r.href
      )) })
    ] }),
    /* @__PURE__ */ t("div", { className: "card p-6", children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-4", children: s("support.index.workflow.title") }),
      /* @__PURE__ */ t("div", { className: "space-y-4", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold", children: "1" }),
          /* @__PURE__ */ t("div", { className: "flex-1", children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.workflow.creation.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.workflow.creation.description") })
          ] }),
          /* @__PURE__ */ e(a, { className: "w-5 h-5 text-[var(--text-tertiary)]" })
        ] }),
        /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-yellow-500 text-white flex items-center justify-center font-bold", children: "2" }),
          /* @__PURE__ */ t("div", { className: "flex-1", children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.workflow.assignment.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.workflow.assignment.description") })
          ] }),
          /* @__PURE__ */ e(a, { className: "w-5 h-5 text-[var(--text-tertiary)]" })
        ] }),
        /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold", children: "3" }),
          /* @__PURE__ */ t("div", { className: "flex-1", children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.workflow.processing.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.workflow.processing.description") })
          ] }),
          /* @__PURE__ */ e(a, { className: "w-5 h-5 text-[var(--text-tertiary)]" })
        ] }),
        /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-orange-500 text-white flex items-center justify-center font-bold", children: "!" }),
          /* @__PURE__ */ t("div", { className: "flex-1", children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.workflow.escalation.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.workflow.escalation.description") })
          ] }),
          /* @__PURE__ */ e(a, { className: "w-5 h-5 text-[var(--text-tertiary)]" })
        ] }),
        /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center font-bold", children: "4" }),
          /* @__PURE__ */ t("div", { className: "flex-1", children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: s("support.index.workflow.resolution.title") }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: s("support.index.workflow.resolution.description") })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ t(
        i,
        {
          to: "/system/docs/user/modules",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(a, { className: "w-4 h-4 rotate-180" }),
            s("support.index.nav.allModules")
          ]
        }
      ),
      /* @__PURE__ */ t(
        i,
        {
          to: "/system/docs/user/support-dashboard",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            s("support.index.nav.startDashboard"),
            /* @__PURE__ */ e(a, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  w as SupportIndexPage
};
//# sourceMappingURL=SupportIndexPage-Bb0giRKn.js.map
