<%
  const safeClients = Array.isArray(clients) ? clients : [];
  const tableLocale = typeof clientsLocale === 'string'
    ? clientsLocale
    : (typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar');
  const tableCopy = tableLocale === 'ar'
    ? {
        caption: 'سجل مستخدمي KamTeswa',
        identity: 'هوية المستخدم',
        contact: 'قنوات التواصل',
        state: 'الحالة والوصول',
        engagement: 'التفاعل',
        actions: 'الإجراءات',
        selectAll: 'تحديد كل المستخدمين',
        directoryHint: 'ملفات العملاء في النطاق الحالي',
        emptyTitle: 'لا يوجد مستخدمون في هذا النطاق',
        emptyText: 'لا توجد حسابات مطابقة للحالة الحالية. يمكنك الانتقال إلى نطاق آخر أو إضافة مستخدم.',
        add: 'إضافة مستخدم',
        total: 'إجمالي النتائج المعروضة',
        helper: 'حسابات المستخدمين في الصفحة الحالية',
        active: 'نشط',
        inactive: 'غير نشط',
        blocked: 'محظور'
      }
    : {
        caption: 'KamTeswa users register',
        identity: 'User identity',
        contact: 'Contact channels',
        state: 'State and access',
        engagement: 'Engagement',
        actions: 'Actions',
        selectAll: 'Select all users',
        directoryHint: 'Customer profiles in the current scope',
        emptyTitle: 'No users in this scope',
        emptyText: 'No accounts match this state. Choose another scope or add a user.',
        add: 'Add user',
        total: 'Results shown',
        helper: 'User accounts on the current page',
        active: 'Active',
        inactive: 'Inactive',
        blocked: 'Blocked'
      };
%>

<div class="kt-people-table-fragment kt-client-directory-fragment" data-people-table-fragment>
  <% if (!safeClients.length) { %>
    <div class="kt-people-empty kt-client-directory-empty" data-people-empty>
      <span class="kt-client-directory-empty__art" aria-hidden="true">
        <i class="ti ti-user-search"></i>
        <b></b><b></b><b></b>
      </span>
      <h3><%= tableCopy.emptyTitle %></h3>
      <p><%= tableCopy.emptyText %></p>
      <a class="kt-people-btn kt-people-btn--primary" href="/dashboard/clients/create">
        <i class="ti ti-user-plus" aria-hidden="true"></i>
        <span><%= tableCopy.add %></span>
      </a>
    </div>
  <% } else { %>
    <div class="kt-client-directory__summary">
      <label class="kt-client-directory__select-all">
        <input
          class="kt-people-checkbox"
          type="checkbox"
          data-people-select-all
          aria-label="<%= tableCopy.selectAll %>"
        >
        <span><%= tableCopy.selectAll %></span>
      </label>
      <span class="kt-client-directory__scope">
        <i class="ti ti-address-book" aria-hidden="true"></i>
        <span><%= tableCopy.directoryHint %></span>
        <strong><%= safeClients.length %></strong>
      </span>
    </div>

    <div
      class="kt-client-directory"
      role="list"
      aria-label="<%= tableCopy.caption %>"
      data-clients-resource-list
      data-clients-layout-version="customer-crm-v2"
      data-clients-table-contract="clients-customer-crm-v2"
      data-clients-icon-system="tabler"
    >
      <%- include('./tds.ejs', {
        clients: safeClients,
        clientsLocale: tableLocale,
        clientTableCopy: tableCopy
      }) %>
    </div>

    <!-- Kept for the existing PDF/Excel export contract; not part of the visual layout. -->
    <div
      class="kt-people-visually-hidden kt-client-export-source"
      aria-hidden="true"
      data-client-export-source
    >
      <table class="kt-client-export-table" data-people-table tabindex="-1">
        <caption><%= tableCopy.caption %></caption>
        <thead>
          <tr>
            <th><%= tableCopy.identity %></th>
            <th><%= tableCopy.contact %></th>
            <th><%= tableCopy.state %></th>
            <th><%= tableCopy.engagement %></th>
          </tr>
        </thead>
        <tbody>
          <% safeClients.forEach((item) => { %>
            <%
              const exportBlocked = item && item.status === 'block';
              const exportActive = Boolean(item && item.active);
              const exportRating = Number(item && item.rating);
              const exportJoined = item && item.createdAt
                ? moment(item.createdAt).locale(tableLocale).format('YYYY/MM/DD')
                : '—';
              const exportPhone = item
                ? (item.fullPhone || `${item.countryCode || ''}${item.phone || ''}` || '—')
                : '—';
            %>
            <tr>
              <td><%= item && item.name ? item.name : '—' %></td>
              <td>
                <%= exportPhone %>
                <%= item && item.email ? ` — ${item.email}` : '' %>
              </td>
              <td>
                <%= exportBlocked ? tableCopy.blocked : (exportActive ? tableCopy.active : tableCopy.inactive) %>
              </td>
              <td>
                <%= Number.isFinite(exportRating) ? exportRating.toFixed(1) : '0.0' %>
                — <%= exportJoined %>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>

    <% if (typeof paginationHtml !== 'undefined' && paginationHtml) { %>
      <nav class="kt-people-pagination kt-client-directory__pagination" aria-label="<%= tableCopy.caption %>">
        <%- paginationHtml %>
      </nav>
    <% } %>
  <% } %>

  <footer class="kt-people-table-footer kt-client-directory__footer">
    <span><%= tableCopy.total %>: <strong><%= safeClients.length %></strong></span>
    <span><%= tableCopy.helper %></span>
  </footer>
</div>
