<%
  const orderOperations = operations.orders && typeof operations.orders === 'object'
    ? operations.orders
    : { todayTotal: 0, slaPercent: 0, averageStartMinutes: 0, stages: [] };
  const orderStages = Array.isArray(orderOperations.stages) ? orderOperations.stages : [];
  const urgent = operations.urgentReviews && typeof operations.urgentReviews === 'object'
    ? operations.urgentReviews
    : { total: 0, processedToday: 0, items: [] };
  const urgentItems = Array.isArray(urgent.items) ? urgent.items : [];
  const urgentPresentation = {
    providers: { icon: 'ti-user-check' },
    auctions: { icon: 'ti-gavel' },
    complaints: { icon: 'ti-alert-triangle' },
    messages: { icon: 'ti-messages' },
  };
%>
<section class="pf-section pf-section--operations" aria-labelledby="pf-operations-title">
  <header class="pf-section__head" data-final-heading>
    <div>
      <span class="pf-section__eyebrow"><b>02</b><%= t('sections.operationsEyebrow', 'قلب المنصة') %></span>
      <h2 id="pf-operations-title"><%= t('sections.operationsTitle', 'لوحة عمليات السوق') %></h2>
      <p><%= t('sections.operationsSubtitle', 'مسار التنفيذ ونقاط التدخل العاجلة في مشهد واحد.') %></p>
    </div>
    <a class="pf-text-link" href="/dashboard/orders/all">
      <%= t('actions.operationsReport', 'عرض تقرير التشغيل') %>
      <i class="ti ti-arrow-left" aria-hidden="true"></i>
    </a>
  </header>

  <div class="pf-operations-board" data-final-operations>
    <div class="pf-operations-grid">
      <section class="pf-flow-cockpit">
        <header class="pf-board-head">
          <div>
            <span><%= t('operations.orderCycle', 'دورة الطلب') %></span>
            <h3><%= t('operations.pipelineTitle', 'مسار الطلبات') %></h3>
            <p><%= t('operations.pipelineSubtitle', 'حركة الطلبات منذ بداية اليوم وحتى الآن.') %></p>
          </div>
          <div class="pf-sla">
            <span><i aria-hidden="true"></i><%= t('operations.sla', 'مستوى الخدمة') %></span>
            <strong>
              <b data-count-to="<%= safeNumber(orderOperations.slaPercent) %>" data-count-delay="1080"><%= formatNumber(orderOperations.slaPercent) %></b>%
            </strong>
          </div>
        </header>

        <div class="pf-flow-track" aria-label="<%= t('operations.pipelineTitle', 'مسار الطلبات') %>" data-pipeline>
          <% orderStages.forEach((stage, index) => { %>
            <article class="is-<%= stage.tone %>">
              <span class="pf-flow-track__index"><%= String(index + 1).padStart(2, '0') %></span>
              <div>
                <span><%= t(`status.orders.${stage.key}`, safeText(stage.key)) %></span>
                <strong data-count-to="<%= safeNumber(stage.count) %>" data-count-delay="<%= 1140 + (index * 60) %>"><%= formatNumber(stage.count) %></strong>
                <small><%= formatNumber(stage.percent) %>% <%= t('operations.ofToday', 'من حركة اليوم') %></small>
              </div>
              <i><b style="--pf-stage:<%= safeNumber(stage.percent) %>%"></b></i>
            </article>
          <% }) %>
        </div>

        <div class="pf-flow-summary">
          <span class="pf-flow-summary__icon"><i class="ti ti-clock" aria-hidden="true"></i></span>
          <div>
            <strong><%= t('operations.averageStart', 'متوسط بدء التنفيذ') %></strong>
            <span><%= formatNumber(orderOperations.averageStartMinutes) %> <%= t('common.minutes', 'دقيقة') %></span>
          </div>
          <a href="/dashboard/orders/all">
            <%= t('actions.performanceDetails', 'تفاصيل الأداء') %>
            <i class="ti ti-arrow-left" aria-hidden="true"></i>
          </a>
        </div>
      </section>

      <aside class="pf-urgent">
        <header class="pf-board-head">
          <div>
            <span><%= t('operations.needsDecision', 'تحتاج قراراً') %></span>
            <h3><%= t('operations.urgentTitle', 'مراجعات عاجلة') %></h3>
            <p><%= t('operations.urgentSubtitle', 'الأولوية حسب أثرها على السوق.') %></p>
          </div>
          <span class="pf-urgent__count" data-count-to="<%= safeNumber(urgent.total) %>" data-count-delay="1220"><%= formatNumber(urgent.total) %></span>
        </header>

        <div class="pf-urgent__list">
          <% urgentItems.forEach((item) => {
            const presentation = urgentPresentation[item.key] || { icon: 'ti-alert-circle' };
          %>
            <a href="<%= safeText(item.href, '#') %>">
              <span class="pf-urgent__icon"><i class="ti <%= presentation.icon %>" aria-hidden="true"></i></span>
              <span>
                <strong><%= t(`urgent.${item.key}.title`, safeText(item.key)) %></strong>
                <small><%= t(`urgent.${item.key}.description`, '—') %></small>
              </span>
              <b><%= formatNumber(item.count) %></b>
              <i class="ti ti-chevron-left" aria-hidden="true"></i>
            </a>
          <% }) %>
        </div>

        <div class="pf-urgent__footer">
          <span>
            <i aria-hidden="true"></i>
            <%= t('operations.processedToday', 'تمت المعالجة اليوم') %>:
            <%= formatNumber(urgent.processedToday) %>
          </span>
          <a href="/dashboard/complaints"><%= t('actions.openReviews', 'فتح صندوق المراجعة') %></a>
        </div>
      </aside>
    </div>
  </div>
</section>
