<%
  const latestOrders = Array.isArray(activity.orders) ? activity.orders : [];
  const pendingProviders = Array.isArray(activity.pendingProviders)
    ? activity.pendingProviders
    : [];
  const activeAuctions = Array.isArray(activity.activeAuctions)
    ? activity.activeAuctions
    : [];
  const latestProducts = Array.isArray(activity.products) ? activity.products : [];
%>
<section class="pf-section pf-section--activity" aria-labelledby="pf-activity-title">
  <header class="pf-section__head" data-final-heading>
    <div>
      <span class="pf-section__eyebrow"><b>03</b><%= t('sections.activityEyebrow', 'مباشر من السوق') %></span>
      <h2 id="pf-activity-title"><%= t('sections.activityTitle', 'حركة السوق الآن') %></h2>
      <p><%= t('sections.activitySubtitle', 'أحدث الطلبات وملفات الاعتماد والمزادات والمنتجات.') %></p>
    </div>
  </header>

  <div class="pf-activity-board" data-final-activity>
    <div class="pf-activity-grid">
      <section class="pf-orders-table pf-act-card" data-final-table>
        <header class="pf-board-head">
          <div>
            <span><%= t('activity.ordersEyebrow', 'آخر النشاطات') %></span>
            <h3><%= t('activity.latestOrders', 'أحدث الطلبات') %></h3>
            <p><%= t('activity.latestOrdersSubtitle', 'التدفق الأخير وحالة التنفيذ الحالية.') %></p>
          </div>
          <a class="pf-text-link" href="/dashboard/orders/all">
            <%= t('actions.allOrders', 'كل الطلبات') %>
            <i class="ti ti-arrow-left" aria-hidden="true"></i>
          </a>
        </header>

        <% if (latestOrders.length) { %>
          <div class="pf-table-scroll">
            <table class="pf-table pf-table--orders">
              <colgroup>
                <col class="pf-col-order" />
                <col class="pf-col-client" />
                <col class="pf-col-provider" />
                <col class="pf-col-status" />
                <col class="pf-col-value" />
                <col class="pf-col-action" />
              </colgroup>
              <thead>
                <tr>
                  <th><%= t('columns.order', 'الطلب') %></th>
                  <th><%= t('columns.client', 'العميل') %></th>
                  <th><%= t('columns.provider', 'مقدم الخدمة') %></th>
                  <th><%= t('columns.status', 'الحالة') %></th>
                  <th><%= t('columns.value', 'القيمة') %></th>
                  <th><span class="visually-hidden"><%= t('columns.action', 'إجراء') %></span></th>
                </tr>
              </thead>
              <tbody>
                <% latestOrders.forEach((order) => { %>
                  <tr>
                    <td>
                      <div class="pf-order-cell">
                        <strong class="pf-order-id">KT-<%= formatNumber(order.number) %></strong>
                        <% if (order.createdAtDate && order.createdAtDate !== '—') { %>
                          <time class="pf-order-when" datetime="<%= safeText(order.createdAtIso) %>">
                            <span class="pf-order-when__date"><%= safeText(order.createdAtDate) %></span>
                            <% if (order.createdAtTime && order.createdAtTime !== '—') { %>
                              <span class="pf-order-when__time">
                                <span class="pf-order-when__clock"><%= safeText(order.createdAtTime) %></span>
                                <% if (order.createdAtMeridiem) { %>
                                  <span class="pf-order-when__meridiem is-<%= safeText(order.createdAtPeriod, 'neutral') %>"><%= safeText(order.createdAtMeridiem) %></span>
                                <% } %>
                              </span>
                            <% } %>
                          </time>
                        <% } else { %>
                          <span class="pf-order-when pf-order-when--empty"><%= safeText(order.createdAtLabel) %></span>
                        <% } %>
                      </div>
                    </td>
                    <td>
                      <span class="pf-person">
                        <i><%= initials(order.client && order.client.name) %></i>
                        <span>
                          <strong title="<%= safeText(order.client && order.client.name) %>"><%= safeText(order.client && order.client.name) %></strong>
                          <% if (order.client && order.client.locationLabel) { %>
                            <small title="<%= safeText(order.client.locationLabel) %>"><%= safeText(order.client.locationLabel) %></small>
                          <% } %>
                        </span>
                      </span>
                    </td>
                    <td><span class="pf-cell-text" title="<%= safeText(order.providerName) %>"><%= safeText(order.providerName) %></span></td>
                    <td><span class="pf-badge is-<%= safeText(order.status && order.status.tone, 'neutral') %>"><%= t(`status.orders.${safeText(order.status && order.status.key, 'unknown')}`, '—') %></span></td>
                    <td>
                      <span class="pf-value-chip">
                        <strong><%= safeText(order.displayTotal, '0') %></strong>
                        <small><%= t('common.currency', 'ر.س') %></small>
                      </span>
                    </td>
                    <td>
                      <a class="pf-row-action" href="<%= safeText(order.href, '#') %>" aria-label="<%= t('actions.viewOrder', 'عرض الطلب') %>">
                        <i class="ti ti-eye" aria-hidden="true"></i>
                      </a>
                    </td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        <% } else { %>
          <%- include('./emptyState.ejs', {
            icon: 'ti-receipt-off',
            title: t('empty.ordersTitle', 'لا توجد طلبات حديثة'),
            description: t('empty.ordersDescription', 'ستظهر أحدث الطلبات هنا عند إنشائها.')
          }) %>
        <% } %>
      </section>

      <aside class="pf-market-rail">
        <section class="pf-rail-section pf-act-card is-review">
          <header>
            <span>
              <small><%= t('activity.reviewQueue', 'قائمة القرار') %></small>
              <strong><%= t('activity.pendingProviders', 'مقدمو الخدمة قيد المراجعة') %></strong>
            </span>
            <a href="/dashboard/providers/all"><%= t('actions.viewAll', 'عرض الكل') %></a>
          </header>
          <% if (pendingProviders.length) { %>
            <div class="pf-provider-list">
              <% pendingProviders.forEach((provider, index) => { %>
                <a href="<%= safeText(provider.href, '#') %>">
                  <span class="pf-avatar <%= index % 3 === 1 ? 'is-orange' : (index % 3 === 2 ? 'is-green' : '') %>"><%= initials(provider.name) %></span>
                  <span>
                    <strong><%= safeText(provider.name) %></strong>
                    <small><i class="ti ti-map-pin" aria-hidden="true"></i><%= safeText(provider.cityLabel) %> · <%= safeText(provider.submittedAtLabel) %></small>
                  </span>
                  <em><%= t('actions.review', 'مراجعة') %></em>
                </a>
              <% }) %>
            </div>
          <% } else { %>
            <%- include('./emptyState.ejs', {
              icon: 'ti-user-check',
              title: t('empty.providersTitle', 'لا توجد طلبات قيد المراجعة'),
              description: t('empty.providersDescription', 'ستظهر طلبات الانضمام الجديدة هنا.')
            }) %>
          <% } %>
        </section>

        <section class="pf-rail-section pf-act-card is-auctions">
          <header>
            <span>
              <small><i aria-hidden="true"></i><%= t('activity.liveNow', 'مباشر الآن') %></small>
              <strong><%= t('activity.activeAuctions', 'المزادات النشطة') %></strong>
            </span>
            <a href="/dashboard/auctions/all"><%= t('actions.viewAll', 'عرض الكل') %></a>
          </header>
          <% if (activeAuctions.length) { %>
            <div class="pf-auction-list">
              <% activeAuctions.forEach((auction) => { %>
                <a href="<%= safeText(auction.href, '#') %>">
                  <span class="pf-auction-icon"><i class="ti ti-gavel" aria-hidden="true"></i></span>
                  <span>
                    <strong><%= safeText(auction.name) %></strong>
                    <small><%= safeText(auction.displayPrice, '0') %> <%= t('common.currency', 'ر.س') %> · <%= formatNumber(auction.bids) %> <%= t('common.bids', 'عرضاً') %></small>
                  </span>
                  <em><%= safeText(auction.remainingLabel) %></em>
                </a>
              <% }) %>
            </div>
          <% } else { %>
            <%- include('./emptyState.ejs', {
              icon: 'ti-gavel',
              title: t('empty.auctionsTitle', 'لا توجد مزادات نشطة'),
              description: t('empty.auctionsDescription', 'ستظهر المزادات الجارية هنا بعد اعتمادها.')
            }) %>
          <% } %>
        </section>
      </aside>
    </div>

    <section class="pf-products-table pf-act-card" data-final-table>
      <header class="pf-board-head">
        <div>
          <span><%= t('activity.catalogEyebrow', 'نشاط الكتالوج') %></span>
          <h3><%= t('activity.latestProducts', 'أحدث المنتجات') %></h3>
          <p><%= t('activity.latestProductsSubtitle', 'آخر الإضافات وحالة جاهزيتها للبيع.') %></p>
        </div>
        <a class="pf-text-link" href="/dashboard/products">
          <%= t('actions.manageProducts', 'إدارة المنتجات') %>
          <i class="ti ti-arrow-left" aria-hidden="true"></i>
        </a>
      </header>

      <% if (latestProducts.length) { %>
        <div class="pf-table-scroll">
          <table class="pf-table pf-table--products">
            <colgroup>
              <col class="pf-col-product-name" />
              <col class="pf-col-provider" />
              <col class="pf-col-department" />
              <col class="pf-col-price" />
              <col class="pf-col-status" />
              <col class="pf-col-stock" />
              <col class="pf-col-action" />
            </colgroup>
            <thead>
              <tr>
                <th><%= t('columns.product', 'المنتج') %></th>
                <th><%= t('columns.provider', 'مقدم الخدمة') %></th>
                <th><%= t('columns.department', 'القسم') %></th>
                <th><%= t('columns.price', 'السعر') %></th>
                <th><%= t('columns.status', 'الحالة') %></th>
                <th><%= t('columns.stock', 'الإتاحة') %></th>
                <th><span class="visually-hidden"><%= t('columns.action', 'إجراء') %></span></th>
              </tr>
            </thead>
            <tbody>
              <% latestProducts.forEach((product, index) => { %>
                <tr>
                  <td>
                    <span class="pf-product">
                      <i class="<%= index % 3 === 1 ? 'is-orange' : (index % 3 === 2 ? 'is-green' : '') %>">
                        <% if (product.thumbnailUrl) { %>
                          <img src="<%= safeText(product.thumbnailUrl, '') %>" alt="" loading="lazy" data-dashboard-image>
                          <span hidden><i class="ti ti-package" aria-hidden="true"></i></span>
                        <% } else { %>
                          <span><i class="ti ti-package" aria-hidden="true"></i></span>
                        <% } %>
                      </i>
                      <span>
                        <strong title="<%= safeText(product.name) %>"><%= safeText(product.name) %></strong>
                        <small class="pf-product-code">KT-<%= formatNumber(product.number) %></small>
                      </span>
                    </span>
                  </td>
                  <td><span class="pf-cell-text" title="<%= safeText(product.providerName) %>"><%= safeText(product.providerName) %></span></td>
                  <td><span class="pf-cell-text" title="<%= safeText(product.departmentName) %>"><%= safeText(product.departmentName) %></span></td>
                  <td>
                    <span class="pf-value-chip">
                      <strong><%= safeText(product.displayPrice, '0') %></strong>
                      <small><%= t('common.currency', 'ر.س') %></small>
                    </span>
                  </td>
                  <td><span class="pf-badge is-<%= safeText(product.status && product.status.tone, 'neutral') %>"><%= t(`status.products.${safeText(product.status && product.status.key, 'inactive')}`, '—') %></span></td>
                  <td><%= formatNumber(product.stock) %></td>
                  <td>
                    <a class="pf-row-action" href="<%= safeText(product.href, '#') %>" aria-label="<%= t('actions.viewProduct', 'عرض المنتج') %>">
                      <i class="ti ti-eye" aria-hidden="true"></i>
                    </a>
                  </td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      <% } else { %>
        <%- include('./emptyState.ejs', {
          icon: 'ti-package-off',
          title: t('empty.productsTitle', 'لا توجد منتجات حديثة'),
          description: t('empty.productsDescription', 'ستظهر أحدث المنتجات هنا بمجرد إضافتها.')
        }) %>
      <% } %>
    </section>
  </div>
</section>
