import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { Link as i } from "react-router-dom";
import { useTranslation as d } from "react-i18next";
import { Layers as m, AppWindow as o, Blocks as l, FolderTree as p, FileCode as u, ChevronRight as x, ArrowRight as n } from "lucide-react";
const c = [
  {
    level: 1,
    name: "Application",
    icon: o,
    description: "Le niveau le plus haut de la hierarchie. Regroupe des fonctionnalites liees. Chaque application a ses propres roles et permissions.",
    example: "Administration, Support, MySpace",
    routeExample: "/administration/...",
    permissionExample: "administration.*",
    color: "from-blue-500 to-cyan-500"
  },
  {
    level: 2,
    name: "Module",
    icon: l,
    description: "Unite fonctionnelle avec une page UI dediee. Represente une fonctionnalite specifique accessible via le menu.",
    example: "Users, Roles, Permissions, Profile",
    routeExample: "/administration/users",
    permissionExample: "administration.users.read",
    color: "from-green-500 to-emerald-500"
  },
  {
    level: 3,
    name: "Section",
    icon: p,
    description: "Sous-division d'un module pour organiser des fonctionnalites complexes. Reserve pour les extensions futures.",
    example: "Settings, Advanced, Reports",
    routeExample: "/administration/users/settings",
    permissionExample: "administration.users.settings.*",
    color: "from-yellow-500 to-orange-500"
  },
  {
    level: 4,
    name: "Resource",
    icon: u,
    description: "Element individuel au sein d'une section. Niveau le plus granulaire pour les permissions.",
    example: "Export, Import, Bulk-actions",
    routeExample: "/administration/users/settings/export",
    permissionExample: "administration.users.settings.export.execute",
    color: "from-red-500 to-rose-500"
  }
], h = [
  {
    name: "Administration",
    code: "administration",
    zone: "Platform",
    modules: ["users", "permissions", "applications"],
    color: "from-purple-500 to-pink-500"
  },
  {
    name: "Support",
    code: "support",
    zone: "Platform",
    modules: ["dashboard", "tickets", "my-tickets", "admin"],
    color: "from-blue-500 to-cyan-500"
  },
  {
    name: "MySpace",
    code: "myspace",
    zone: "Personal",
    modules: ["profile", "preferences"],
    color: "from-green-500 to-emerald-500"
  },
  {
    name: "Support (User)",
    code: "support",
    zone: "Platform",
    modules: ["my-tickets", "my-tickets/create"],
    color: "from-orange-500 to-amber-500"
  }
];
function f() {
  const { t } = d("docs");
  return /* @__PURE__ */ s("div", { className: "space-y-8", children: [
    /* @__PURE__ */ s("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: t("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(i, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: t("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: t("breadcrumb.architecture") })
    ] }),
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ s("h1", { className: "text-3xl font-bold mb-4 flex items-center gap-3", children: [
        /* @__PURE__ */ e(m, { className: "w-8 h-8 text-[var(--color-primary-600)]" }),
        t("architecture.title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: t("architecture.subtitle") })
    ] }),
    /* @__PURE__ */ s("div", { className: "card p-6 bg-gradient-to-r from-[var(--color-primary-600)]/10 to-[var(--accent-bg)]", children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold mb-3", children: "Concept Cle" }),
      /* @__PURE__ */ s("p", { className: "text-[var(--text-secondary)]", children: [
        "Les routes de l'application sont ",
        /* @__PURE__ */ e("strong", { children: "alignees" }),
        " avec les permissions. Cela signifie que le chemin d'une page correspond directement au chemin de permission requis."
      ] }),
      /* @__PURE__ */ s("div", { className: "mt-4 p-4 bg-[var(--bg-primary)] rounded-lg font-mono text-sm", children: [
        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e("span", { className: "text-[var(--text-tertiary)]", children: "Route:" }),
          /* @__PURE__ */ e("span", { children: "/administration/users" })
        ] }),
        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mt-2", children: [
          /* @__PURE__ */ e("span", { className: "text-[var(--text-tertiary)]", children: "Permission:" }),
          /* @__PURE__ */ e("span", { children: "administration.users.read" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-6", children: [
      /* @__PURE__ */ e("h2", { className: "text-xl font-semibold", children: "Les 4 Niveaux" }),
      c.map((r, a) => /* @__PURE__ */ s("div", { className: "card p-6", children: [
        /* @__PURE__ */ s("div", { className: "flex items-start gap-4", children: [
          /* @__PURE__ */ e("div", { className: `w-14 h-14 rounded-xl bg-gradient-to-br ${r.color} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ e(r.icon, { className: "w-7 h-7 text-white" }) }),
          /* @__PURE__ */ s("div", { className: "flex-1", children: [
            /* @__PURE__ */ s("div", { className: "flex items-center gap-3 mb-2", children: [
              /* @__PURE__ */ s("span", { className: "text-sm font-medium text-[var(--text-tertiary)]", children: [
                "Niveau ",
                r.level
              ] }),
              /* @__PURE__ */ e("h3", { className: "text-xl font-semibold", children: r.name })
            ] }),
            /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: r.description }),
            /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-sm", children: [
              /* @__PURE__ */ s("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
                /* @__PURE__ */ e("div", { className: "text-[var(--text-tertiary)] mb-1", children: "Exemples" }),
                /* @__PURE__ */ e("div", { className: "font-medium", children: r.example })
              ] }),
              /* @__PURE__ */ s("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
                /* @__PURE__ */ e("div", { className: "text-[var(--text-tertiary)] mb-1", children: "Route" }),
                /* @__PURE__ */ e("code", { className: "font-mono text-xs", children: r.routeExample })
              ] }),
              /* @__PURE__ */ s("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
                /* @__PURE__ */ e("div", { className: "text-[var(--text-tertiary)] mb-1", children: "Permission" }),
                /* @__PURE__ */ e("code", { className: "font-mono text-xs", children: r.permissionExample })
              ] })
            ] })
          ] })
        ] }),
        a < c.length - 1 && /* @__PURE__ */ e("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ e(x, { className: "w-6 h-6 text-[var(--text-tertiary)] rotate-90" }) })
      ] }, r.level))
    ] }),
    /* @__PURE__ */ s("section", { className: "card p-6", children: [
      /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-6", children: "Structure Actuelle" }),
      /* @__PURE__ */ e("div", { className: "space-y-4", children: h.map((r) => /* @__PURE__ */ s("div", { className: "p-4 bg-blue-500/10 rounded-lg border-l-4 border-blue-500", children: [
        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
          /* @__PURE__ */ e(o, { className: "w-5 h-5 text-blue-500" }),
          /* @__PURE__ */ e("span", { className: "font-semibold text-blue-600 dark:text-blue-400", children: r.name }),
          /* @__PURE__ */ s("code", { className: "text-xs bg-[var(--bg-secondary)] px-2 py-0.5 rounded font-mono", children: [
            "/",
            r.code
          ] }),
          /* @__PURE__ */ e("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--bg-secondary)] text-[var(--text-tertiary)]", children: r.zone })
        ] }),
        /* @__PURE__ */ e("div", { className: "ml-4 flex flex-wrap gap-2", children: r.modules.map((a) => /* @__PURE__ */ s("div", { className: "flex items-center gap-1 px-2 py-1 bg-[var(--bg-primary)] rounded text-sm", children: [
          /* @__PURE__ */ e(l, { className: "w-3 h-3" }),
          /* @__PURE__ */ e("span", { children: a })
        ] }, a)) })
      ] }, r.code)) })
    ] }),
    /* @__PURE__ */ s("section", { className: "card p-6", children: [
      /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-4", children: "Permissions Wildcards" }),
      /* @__PURE__ */ s("p", { className: "text-[var(--text-secondary)] mb-4", children: [
        "Les permissions utilisent le caractere ",
        /* @__PURE__ */ e("code", { className: "px-1 bg-[var(--bg-secondary)] rounded", children: "*" }),
        " pour accorder des acces etendus."
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-2", children: [
        { pattern: "administration.*", desc: "Acces complet a l'application Administration" },
        { pattern: "administration.users.*", desc: "Toutes les actions sur le module Users" },
        { pattern: "administration.users.read", desc: "Uniquement lecture du module Users" }
      ].map((r) => /* @__PURE__ */ s("div", { className: "flex items-center gap-4 p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
        /* @__PURE__ */ e("code", { className: "font-mono text-sm text-[var(--color-primary-600)] min-w-[280px]", children: r.pattern }),
        /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: r.desc })
      ] }, r.pattern)) })
    ] }),
    /* @__PURE__ */ s("section", { className: "card p-6", children: [
      /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-4", children: "Actions Disponibles" }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Chaque module peut avoir les actions suivantes:" }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: [
        { action: "read", desc: "Consulter les donnees" },
        { action: "create", desc: "Creer de nouveaux elements" },
        { action: "update", desc: "Modifier les elements existants" },
        { action: "delete", desc: "Supprimer des elements" },
        { action: "assign", desc: "Assigner des roles/permissions" },
        { action: "execute", desc: "Executer des actions/workflows" }
      ].map((r) => /* @__PURE__ */ s("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
        /* @__PURE__ */ e("code", { className: "font-mono text-sm text-[var(--color-primary-600)]", children: r.action }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: r.desc })
      ] }, r.action)) })
    ] }),
    /* @__PURE__ */ s("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ s(
        i,
        {
          to: "/system/docs/user",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(n, { className: "w-4 h-4 rotate-180" }),
            "Retour"
          ]
        }
      ),
      /* @__PURE__ */ s(
        i,
        {
          to: "/system/docs/user/modules",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            "Modules",
            /* @__PURE__ */ e(n, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  f as ArchitecturePage
};
//# sourceMappingURL=ArchitecturePage-DNwzHKk0.js.map
