{% extends 'ewoooc_base.html' %}

{% block title %}EwoooC 廠商缺貨{% endblock %}
{% block page_attrs %}data-page-group="monitor" data-page-id="vendor-index"{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-vendor-index.css') }}">
{% endblock %}

{% block ewooo_content %}
<div class="vendor-v2-stack">
  <section class="vendor-hero" aria-label="廠商缺貨概況">
    <div class="vendor-hero-panel">
      <div>
        <div class="vendor-eyebrow momo-mono">
          <i class="fas fa-box-open"></i>
          供貨風險
        </div>
        <h1 class="vendor-title">廠商缺貨</h1>
        <p class="vendor-subtitle">
          處理缺貨風險，避免主推商品斷貨。
        </p>
      </div>
      <div class="vendor-actions">
        <a class="vendor-action is-primary" href="{{ url_for('vendor.import_page') }}">
          <i class="fas fa-file-import"></i>匯入 Excel
        </a>
        <a class="vendor-action" href="{{ url_for('vendor.list_page') }}">
          <i class="fas fa-list-check"></i>處理缺貨
        </a>
        <a class="vendor-action" href="{{ url_for('vendor.vendor_management_page') }}">
          <i class="fas fa-address-book"></i>廠商資料
        </a>
      </div>
    </div>

    <aside class="vendor-pulse">
      <div>
        <div class="vendor-pulse-label momo-mono">最新批次</div>
        {% if stats.latest_batch_id %}
          <div class="vendor-pulse-value momo-mono">{{ stats.latest_batch_count | number_format }}</div>
          <div class="vendor-pulse-meta momo-mono">
            批次 {{ stats.latest_batch_id }}<br>
            {{ stats.latest_batch_time.strftime('%Y-%m-%d %H:%M') if stats.latest_batch_time else '沒有時間紀錄' }}
          </div>
        {% else %}
          <div class="vendor-pulse-value momo-mono">0</div>
          <div class="vendor-pulse-meta momo-mono">目前沒有匯入批次紀錄</div>
        {% endif %}
      </div>
    </aside>
  </section>

  <section aria-label="廠商缺貨指標">
    <div class="vendor-section-label">
      <span class="num momo-mono">01</span>
      <span class="title">即時指標</span>
    </div>
    <div class="vendor-kpi-grid">
      <div class="vendor-card">
        <div class="vendor-kpi-label momo-mono">缺貨總筆數</div>
        <div class="vendor-kpi-value momo-mono">{{ stats.total_stockouts | number_format }}</div>
        <div class="vendor-kpi-sub momo-mono">涵蓋 {{ stats.distinct_vendor_count | number_format }} 個來源廠商</div>
      </div>
      <div class="vendor-card">
        <div class="vendor-kpi-label momo-mono">待發送</div>
        <div class="vendor-kpi-value momo-mono is-danger">{{ stats.pending_stockouts | number_format }}</div>
        <div class="vendor-kpi-sub momo-mono">失敗 {{ stats.failed_stockouts | number_format }} 筆</div>
      </div>
      <div class="vendor-card">
        <div class="vendor-kpi-label momo-mono">已發送</div>
        <div class="vendor-kpi-value momo-mono is-success">{{ stats.sent_stockouts | number_format }}</div>
        <div class="vendor-kpi-sub momo-mono">重複 {{ stats.duplicate_stockouts | number_format }} 筆</div>
      </div>
      <div class="vendor-card">
        <div class="vendor-kpi-label momo-mono">啟用廠商</div>
        <div class="vendor-kpi-value momo-mono">{{ stats.active_vendors | number_format }}</div>
        <div class="vendor-kpi-sub momo-mono">啟用郵件 {{ stats.active_emails | number_format }}</div>
      </div>
    </div>
  </section>

  <section aria-label="廠商缺貨工作流程">
    <div class="vendor-section-label">
      <span class="num momo-mono">02</span>
      <span class="title">工作入口</span>
    </div>
    <div class="vendor-flow-grid">
      <a class="vendor-flow-card" href="{{ url_for('vendor.import_page') }}">
        <span class="vendor-flow-icon"><i class="fas fa-file-import"></i></span>
        <span>
          <span class="vendor-flow-title">Excel 匯入</span>
          <span class="vendor-flow-meta momo-mono">建立缺貨批次</span>
        </span>
      </a>
      <a class="vendor-flow-card" href="{{ url_for('vendor.list_page') }}">
        <span class="vendor-flow-icon"><i class="fas fa-table-list"></i></span>
        <span>
          <span class="vendor-flow-title">缺貨清單</span>
          <span class="vendor-flow-meta momo-mono">{{ stats.total_stockouts | number_format }} 筆記錄</span>
        </span>
      </a>
      <a class="vendor-flow-card" href="{{ url_for('vendor.vendor_management_page') }}">
        <span class="vendor-flow-icon"><i class="fas fa-address-card"></i></span>
        <span>
          <span class="vendor-flow-title">廠商管理</span>
          <span class="vendor-flow-meta momo-mono">{{ stats.active_vendors | number_format }} 個啟用廠商</span>
        </span>
      </a>
      <a class="vendor-flow-card" href="{{ url_for('vendor.send_email_page') }}">
        <span class="vendor-flow-icon"><i class="fas fa-paper-plane"></i></span>
        <span>
          <span class="vendor-flow-title">郵件發送</span>
          <span class="vendor-flow-meta momo-mono">{{ stats.pending_stockouts | number_format }} 筆待處理</span>
        </span>
      </a>
      <a class="vendor-flow-card" href="{{ url_for('vendor.history_page') }}">
        <span class="vendor-flow-icon"><i class="fas fa-clock-rotate-left"></i></span>
        <span>
          <span class="vendor-flow-title">發送歷史</span>
          <span class="vendor-flow-meta momo-mono">{{ stats.email_total | number_format }} 筆郵件紀錄</span>
        </span>
      </a>
    </div>
  </section>

  <section class="vendor-table-card" aria-label="資料狀態摘要">
    <div class="vendor-table-head">
      <span class="vendor-table-title">資料狀態摘要</span>
      <span class="vendor-kpi-sub momo-mono">整合缺貨、窗口與通知紀錄</span>
    </div>
    <div class="vendor-summary-grid">
      <div class="vendor-summary-item">
        <div class="vendor-card-label momo-mono">最新匯入</div>
        {% if stats.latest_import_time %}
          <div class="vendor-summary-title">{{ stats.latest_import_vendor or '未標記廠商' }}</div>
          <div class="vendor-summary-meta momo-mono">
            {{ stats.latest_import_time.strftime('%Y-%m-%d %H:%M') }}<br>
            {{ stats.latest_import_product or '未標記商品' }}
          </div>
        {% else %}
          <div class="vendor-summary-title">尚無匯入紀錄</div>
          <div class="vendor-summary-meta momo-mono">先匯入缺貨批次，確認主推商品供貨風險</div>
        {% endif %}
      </div>
      <div class="vendor-summary-item">
        <div class="vendor-card-label momo-mono">郵件成功率</div>
        <div class="vendor-summary-title momo-mono">{{ stats.email_success_rate }}%</div>
        <div class="vendor-summary-meta momo-mono">
          成功 {{ stats.email_success | number_format }} / 總計 {{ stats.email_total | number_format }}<br>
          失敗 {{ stats.email_failed | number_format }}，待發送 {{ stats.email_pending | number_format }}
        </div>
      </div>
      <div class="vendor-summary-item">
        <div class="vendor-card-label momo-mono">最新郵件</div>
        {% if stats.latest_email_time %}
          <div class="vendor-summary-title momo-mono">{{ stats.latest_email_status or '未標記狀態' }}</div>
          <div class="vendor-summary-meta momo-mono">
            {{ stats.latest_email_time.strftime('%Y-%m-%d %H:%M') }}<br>
            廠商編號 {{ stats.latest_email_vendor_id }}
          </div>
        {% else %}
          <div class="vendor-summary-title">尚無郵件紀錄</div>
          <div class="vendor-summary-meta momo-mono">目前尚無通知紀錄</div>
        {% endif %}
      </div>
    </div>
    {% if stats.total_stockouts == 0 %}
      <div class="vendor-empty momo-mono">
        尚無缺貨批次；先匯入 Excel，確認主推商品供貨風險。
      </div>
    {% endif %}
  </section>
</div>
{% endblock %}