<%
  const detailRole = role && typeof role === 'object' ? role : {};
  const detailLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const detailEnglish = detailLocale === 'en';
  const detailCatalogue = Array.isArray(permissions) ? permissions : [];
  const detailRoutes = Array.isArray(detailRole.permissions)
    ? detailRole.permissions.filter((route) => typeof route === 'string')
    : [];
  const detailSelected = new Set(detailRoutes);
  const detailProtected = Boolean(detailRole.isProtected);
  const detailAssigned = Boolean(detailRole.isAssigned);
  const detailEditable = typeof detailRole.canEdit === 'boolean'
    ? detailRole.canEdit
    : (typeof detailRole.isEditable === 'boolean'
      ? detailRole.isEditable
      : !detailProtected);
  const detailAvailableCount = detailCatalogue.reduce(
    (total, group) => total + (Array.isArray(group.child) ? group.child.length : 0),
    0
  );
  const detailMatchedRoutes = new Set();
  const detailGroups = detailCatalogue.map((group) => {
    const items = (Array.isArray(group.child) ? group.child : [])
      .filter((permission) => detailSelected.has(permission.route));
    items.forEach((permission) => detailMatchedRoutes.add(permission.route));
    return { ...group, items };
  }).filter((group) => group.items.length);
  const detailStaleRoutes = detailRoutes.filter((route) => !detailMatchedRoutes.has(route));
  const detailCoverage = detailAvailableCount
    ? Math.min(100, Math.round((detailMatchedRoutes.size / detailAvailableCount) * 100))
    : 0;
  const detailName = detailRole.name && typeof detailRole.name === 'object'
    ? detailRole.name
    : {};
  const detailCopy = detailEnglish ? {
    identity: 'Role identity',
    arabicName: 'Arabic name',
    englishName: 'English name',
    description: 'Description',
    emptyDescription: 'No description has been added.',
    created: 'Created',
    updated: 'Last updated',
    safety: 'Access safety',
    protected: 'Protected system role',
    managed: 'Managed role',
    editable: 'Editable',
    readOnly: 'Read only',
    assigned: 'Assigned administrators',
    protectedReason: 'Permission changes are blocked because this is a protected system role.',
    assignedReason: 'This role is linked to administrators and cannot be deleted.',
    selected: 'Selected',
    available: 'Available',
    coverage: 'Catalogue coverage',
    permissionTitle: 'Selected permissions',
    permissionHelp: 'The exact route access currently granted to this role.',
    search: 'Search selected permissions',
    searchPlaceholder: 'Search by permission, route, or method',
    empty: 'This role has no selected permissions.',
    staleTitle: 'Legacy permissions',
    staleLabel: 'Saved permission',
    noResults: 'No selected permissions match this search.'
  } : {
    identity: 'هوية الدور',
    arabicName: 'الاسم بالعربية',
    englishName: 'الاسم بالإنجليزية',
    description: 'الوصف',
    emptyDescription: 'لم تتم إضافة وصف لهذا الدور.',
    created: 'تاريخ الإنشاء',
    updated: 'آخر تحديث',
    safety: 'سلامة الوصول',
    protected: 'دور نظام محمي',
    managed: 'دور قابل للإدارة',
    editable: 'قابل للتعديل',
    readOnly: 'للقراءة فقط',
    assigned: 'المشرفون المرتبطون',
    protectedReason: 'تغيير الصلاحيات متوقف لأن هذا دور نظام محمي.',
    assignedReason: 'هذا الدور مرتبط بمشرفين، لذلك لا يمكن حذفه.',
    selected: 'المحدد',
    available: 'المتاح',
    coverage: 'تغطية الكتالوج',
    permissionTitle: 'الصلاحيات المحددة',
    permissionHelp: 'المسارات الفعلية الممنوحة لهذا الدور حاليًا.',
    search: 'البحث في الصلاحيات المحددة',
    searchPlaceholder: 'ابحث بالصلاحية أو المسار أو الطريقة',
    empty: 'لا توجد صلاحيات محددة لهذا الدور.',
    staleTitle: 'صلاحيات قديمة',
    staleLabel: 'صلاحية محفوظة',
    noResults: 'لا توجد صلاحيات محددة مطابقة للبحث.'
  };
  const formatDetailDate = (value) => {
    const date = value ? new Date(value) : null;
    if (!date || Number.isNaN(date.getTime())) return '—';
    return new Intl.DateTimeFormat(detailEnglish ? 'en-GB' : 'ar-SA', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    }).format(date);
  };
%>

<article
  class="kt-permissions-role-detail"
  data-permissions-role-detail
  data-role-id="<%= detailRole.roleId || '' %>"
  data-editable="<%= detailEditable ? 'true' : 'false' %>"
>
  <section class="kt-permissions-role-detail__identity">
    <div class="kt-permissions-role-detail__section-title">
      <span aria-hidden="true"><i class="ti ti-id"></i></span>
      <div>
        <h3><%= detailCopy.identity %></h3>
        <p><%= detailCopy.description %></p>
      </div>
    </div>
    <div class="kt-permissions-role-detail__identity-grid">
      <div>
        <small><%= detailCopy.arabicName %></small>
        <strong dir="rtl"><%= detailName.ar || '' %></strong>
      </div>
      <div>
        <small><%= detailCopy.englishName %></small>
        <strong dir="ltr"><%= detailName.en || '' %></strong>
      </div>
      <div class="is-wide">
        <small><%= detailCopy.description %></small>
        <p><%= detailRole.description || detailCopy.emptyDescription %></p>
      </div>
      <div>
        <small><%= detailCopy.created %></small>
        <time><%= formatDetailDate(detailRole.createdAt) %></time>
      </div>
      <div>
        <small><%= detailCopy.updated %></small>
        <time><%= formatDetailDate(detailRole.updatedAt) %></time>
      </div>
    </div>
  </section>

  <section class="kt-permissions-role-detail__safety">
    <div class="kt-permissions-role-detail__section-title">
      <span aria-hidden="true"><i class="ti ti-shield"></i></span>
      <div>
        <h3><%= detailCopy.safety %></h3>
        <p><%= detailProtected ? detailCopy.protected : detailCopy.managed %></p>
      </div>
    </div>
    <div class="kt-permissions-role-detail__safety-grid">
      <span class="<%= detailProtected ? 'is-protected' : 'is-managed' %>">
        <i class="ti <%= detailProtected ? 'ti-lock' : 'ti-edit' %>" aria-hidden="true"></i>
        <strong><%= detailEditable ? detailCopy.editable : detailCopy.readOnly %></strong>
      </span>
      <span>
        <i class="ti ti-users" aria-hidden="true"></i>
        <small><%= detailCopy.assigned %></small>
        <strong><%= Number(detailRole.assignmentCount) || 0 %></strong>
      </span>
    </div>
    <% if (detailProtected || detailAssigned) { %>
      <div class="kt-permissions-role-detail__reasons">
        <% if (detailProtected) { %><p><i class="ti ti-lock" aria-hidden="true"></i><%= detailCopy.protectedReason %></p><% } %>
        <% if (detailAssigned) { %><p><i class="ti ti-users" aria-hidden="true"></i><%= detailCopy.assignedReason %></p><% } %>
      </div>
    <% } %>
  </section>

  <section class="kt-permissions-role-detail__coverage">
    <div>
      <small><%= detailCopy.selected %></small>
      <strong><%= detailRoutes.length %></strong>
    </div>
    <div>
      <small><%= detailCopy.available %></small>
      <strong><%= detailAvailableCount %></strong>
    </div>
    <div class="is-progress">
      <span><small><%= detailCopy.coverage %></small><strong><%= detailCoverage %>%</strong></span>
      <progress value="<%= detailCoverage %>" max="100"><%= detailCoverage %>%</progress>
    </div>
  </section>

  <section class="kt-permissions-role-detail__permissions">
    <div class="kt-permissions-role-detail__permissions-heading">
      <div>
        <h3><%= detailCopy.permissionTitle %></h3>
        <p><%= detailCopy.permissionHelp %></p>
      </div>
      <% if (detailRoutes.length > 6) { %>
        <label class="kt-permissions-role-detail__search">
          <span class="kt-permissions-visually-hidden"><%= detailCopy.search %></span>
          <i class="ti ti-search" aria-hidden="true"></i>
          <input
            type="search"
            placeholder="<%= detailCopy.searchPlaceholder %>"
            data-permissions-view-search
          >
          <button type="button" data-permissions-view-search-clear aria-label="<%= detailCopy.search %>">
            <i class="ti ti-x" aria-hidden="true"></i>
          </button>
        </label>
      <% } %>
    </div>

    <% if (detailGroups.length || detailStaleRoutes.length) { %>
      <div class="kt-permissions-role-detail__groups" data-permissions-view-groups>
        <% detailGroups.forEach((group, groupIndex) => { %>
          <%
            const detailGroupLabel = i18n.__(`permissions.${group.parent}`);
            const detailGroupSearch = `${detailGroupLabel} ${group.parent} ${group.items.map((item) => `${item.route} ${(item.method || []).join(' ')}`).join(' ')}`.toLowerCase();
          %>
          <details
            class="kt-permissions-role-detail__group"
            data-permissions-view-group
            data-search-text="<%= detailGroupSearch %>"
            <%= groupIndex === 0 ? 'open' : '' %>
          >
            <summary>
              <span>
                <i class="ti ti-folder" aria-hidden="true"></i>
                <span><strong><%= detailGroupLabel %></strong><small dir="ltr"><%= group.parent %></small></span>
              </span>
              <span><b><%= group.items.length %></b><i class="ti ti-chevron-down" aria-hidden="true"></i></span>
            </summary>
            <div>
              <% group.items.forEach((permission) => { %>
                <%
                  const detailLabelKey = permission.translate
                    ? `permissions.${permission.translate}`
                    : `permissions.${permission.route.replace(/:/g, '')}`;
                  const detailMethods = Array.isArray(permission.method) ? permission.method : [];
                  const detailPermissionSearch = `${i18n.__(detailLabelKey)} ${permission.route} ${detailMethods.join(' ')}`.toLowerCase();
                %>
                <article
                  class="kt-permissions-role-detail__permission"
                  data-permissions-view-permission
                  data-search-text="<%= detailPermissionSearch %>"
                >
                  <span><i class="ti ti-check" aria-hidden="true"></i></span>
                  <div>
                    <strong><%= i18n.__(detailLabelKey) %></strong>
                    <code dir="ltr"><%= permission.route %></code>
                  </div>
                  <div class="kt-permissions-role-detail__methods">
                    <% detailMethods.forEach((method) => { %>
                      <small class="is-<%= String(method).toLowerCase() %>"><%= String(method).toUpperCase() %></small>
                    <% }) %>
                  </div>
                </article>
              <% }) %>
            </div>
          </details>
        <% }) %>

        <% if (detailStaleRoutes.length) { %>
          <details
            class="kt-permissions-role-detail__group"
            data-permissions-view-group
            data-search-text="<%= `${detailCopy.staleTitle} ${detailStaleRoutes.join(' ')}`.toLowerCase() %>"
          >
            <summary>
              <span>
                <i class="ti ti-alert-circle" aria-hidden="true"></i>
                <span><strong><%= detailCopy.staleTitle %></strong><small>legacy</small></span>
              </span>
              <span><b><%= detailStaleRoutes.length %></b><i class="ti ti-chevron-down" aria-hidden="true"></i></span>
            </summary>
            <div>
              <% detailStaleRoutes.forEach((route) => { %>
                <article
                  class="kt-permissions-role-detail__permission"
                  data-permissions-view-permission
                  data-search-text="<%= `${detailCopy.staleLabel} ${route}`.toLowerCase() %>"
                >
                  <span><i class="ti ti-route" aria-hidden="true"></i></span>
                  <div><strong><%= detailCopy.staleLabel %></strong><code dir="ltr"><%= route %></code></div>
                </article>
              <% }) %>
            </div>
          </details>
        <% } %>
      </div>
      <p class="kt-permissions-role-detail__no-results" data-permissions-view-no-results hidden>
        <i class="ti ti-search" aria-hidden="true"></i><%= detailCopy.noResults %>
      </p>
    <% } else { %>
      <p class="kt-permissions-role-detail__empty">
        <i class="ti ti-shield-off" aria-hidden="true"></i><%= detailCopy.empty %>
      </p>
    <% } %>
  </section>
</article>