{% extends 'ewoooc_base.html' %}

{% block title %}EwoooC 缺貨清單{% endblock %}
{% block page_attrs %}data-page-group="monitor" data-page-id="vendor-list"{% endblock %}

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

{% block ewooo_content %}
{% set status_labels = {'pending': '待發送', 'sent': '已發送', 'failed': '失敗', 'duplicate': '重複', 'unknown': '未標記'} %}
<div class="stockout-list-stack">

  <section class="stockout-header">
    <div>
      <div class="stockout-eyebrow momo-mono">
        <i class="fas fa-table-list"></i>缺貨清單 · 即時狀態
      </div>
      <h1 class="stockout-title">缺貨清單</h1>
      <p class="stockout-subtitle">
        依正式缺貨資料呈現，可用批次、廠商、商品與發送狀態篩選；桌機保留密度，手機改為逐筆資料卡。
      </p>
    </div>
    <div class="stockout-actions">
      <a class="stockout-action" href="{{ url_for('vendor.index') }}">
        <i class="fas fa-arrow-left"></i>回總覽
      </a>
      <a class="stockout-action is-primary" href="{{ url_for('vendor.import_page') }}">
        <i class="fas fa-file-import"></i>匯入 Excel
      </a>
    </div>
  </section>

  <div class="momo-dot-divider is-tight is-whisper is-accent" aria-hidden="true"></div>

  <section class="stockout-kpi-grid" aria-label="缺貨清單統計">
    <div class="stockout-kpi">
      <div class="stockout-kpi-label momo-mono">符合筆數</div>
      <div class="stockout-kpi-value momo-mono">{{ stats.total | number_format }}</div>
      <div class="stockout-kpi-sub momo-mono">目前清單 {{ total_items | number_format }} 筆</div>
    </div>
    <div class="stockout-kpi">
      <div class="stockout-kpi-label momo-mono">待發送</div>
      <div class="stockout-kpi-value momo-mono is-danger">{{ stats.pending | number_format }}</div>
      <div class="stockout-kpi-sub momo-mono">含未標記狀態</div>
    </div>
    <div class="stockout-kpi">
      <div class="stockout-kpi-label momo-mono">已發送</div>
      <div class="stockout-kpi-value momo-mono is-success">{{ stats.sent | number_format }}</div>
      <div class="stockout-kpi-sub momo-mono">通知完成記錄</div>
    </div>
    <div class="stockout-kpi">
      <div class="stockout-kpi-label momo-mono">失敗</div>
      <div class="stockout-kpi-value momo-mono is-danger">{{ stats.failed | number_format }}</div>
      <div class="stockout-kpi-sub momo-mono">需人工檢查</div>
    </div>
    <div class="stockout-kpi">
      <div class="stockout-kpi-label momo-mono">來源廠商</div>
      <div class="stockout-kpi-value momo-mono">{{ stats.vendor_count | number_format }}</div>
      <div class="stockout-kpi-sub momo-mono">重複 {{ stats.duplicate | number_format }} 筆</div>
    </div>
  </section>

  <section class="stockout-filter-card" aria-label="缺貨清單篩選">
    <form class="stockout-filter-form" method="GET" action="{{ url_for('vendor.list_page') }}">
      <input type="hidden" name="ui" value="v2">
      {% if current_status and current_status != 'all' %}
        <input type="hidden" name="status" value="{{ current_status }}">
      {% endif %}
      <input class="stockout-input" type="search" name="q" value="{{ search_query }}" placeholder="搜尋廠商、商品名稱或編號">
      <select class="stockout-select momo-mono" name="batch">
        <option value="">全部批次</option>
        {% for batch in batches %}
          <option value="{{ batch.batch_id }}" {% if current_batch == batch.batch_id %}selected{% endif %}>
            {{ batch.batch_id }} ({{ batch.record_count }})
          </option>
        {% endfor %}
      </select>
      <select class="stockout-select momo-mono" name="sort">
        <option value="created_desc" {% if current_sort == 'created_desc' %}selected{% endif %}>最新建立</option>
        <option value="created_asc" {% if current_sort == 'created_asc' %}selected{% endif %}>最舊建立</option>
        <option value="vendor_asc" {% if current_sort == 'vendor_asc' %}selected{% endif %}>廠商代碼</option>
        <option value="stockout_days_desc" {% if current_sort == 'stockout_days_desc' %}selected{% endif %}>缺貨天數</option>
      </select>
      <select class="stockout-select momo-mono" name="page_size" aria-label="每頁筆數">
        {% for size in [30, 50, 100] %}
          <option value="{{ size }}" {% if page_size == size %}selected{% endif %}>每頁 {{ size }} 筆</option>
        {% endfor %}
      </select>
      <button class="stockout-action is-primary" type="submit">
        <i class="fas fa-filter"></i>套用
      </button>
    </form>
  </section>

  <nav class="stockout-status-tabs" aria-label="缺貨狀態篩選">
    <a class="stockout-tab {% if current_status == 'all' %}is-active{% endif %}"
       href="{{ url_for('vendor.list_page', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">全部</a>
    <a class="stockout-tab {% if current_status == 'pending' %}is-active{% endif %}"
       href="{{ url_for('vendor.list_page', status='pending', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">待發送</a>
    <a class="stockout-tab {% if current_status == 'sent' %}is-active{% endif %}"
       href="{{ url_for('vendor.list_page', status='sent', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">已發送</a>
    <a class="stockout-tab {% if current_status == 'failed' %}is-active{% endif %}"
       href="{{ url_for('vendor.list_page', status='failed', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">失敗</a>
    <a class="stockout-tab {% if current_status == 'duplicate' %}is-active{% endif %}"
       href="{{ url_for('vendor.list_page', status='duplicate', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">重複</a>
  </nav>

  <section class="stockout-table-card" aria-label="缺貨資料表">
    <div class="stockout-table-head">
      <div>
        <span class="stockout-table-title">缺貨資料</span>
        <span class="stockout-table-meta momo-mono">第 {{ current_page }} / {{ total_pages }} 頁</span>
      </div>
      <span class="stockout-table-meta momo-mono">{{ total_items | number_format }} 筆</span>
    </div>

    {% if records %}
      <div class="stockout-table-wrap">
        <table class="stockout-table">
          <thead>
            <tr>
              <th class="momo-mono">狀態</th>
              <th class="momo-mono">商品</th>
              <th class="momo-mono">廠商</th>
              <th class="momo-mono">批次</th>
              <th class="momo-mono">庫存</th>
              <th class="momo-mono">缺貨日期</th>
              <th class="momo-mono">缺貨天數</th>
              <th class="momo-mono">30 日業績</th>
              <th class="momo-mono">建立時間</th>
            </tr>
          </thead>
          <tbody>
            {% for record in records %}
              {% set record_status = record.status or 'pending' %}
              {% set status_class = record_status if record_status in status_labels else 'unknown' %}
              <tr>
                <td data-label="狀態">
                  <span class="stockout-chip is-{{ status_class }} momo-mono">
                    {{ status_labels.get(record_status, record_status) }}
                  </span>
                  {% if record.is_duplicate %}
                    <div class="stockout-product-code momo-mono">重複 {{ record.duplicate_count or 0 }}</div>
                  {% endif %}
                </td>
                <td data-label="商品">
                  <div class="stockout-product-name" title="{{ record.product_name }}">{{ record.product_name }}</div>
                  <div class="stockout-product-code momo-mono">{{ record.product_code }}</div>
                </td>
                <td data-label="廠商">
                  <div class="stockout-vendor-name" title="{{ record.vendor_name }}">{{ record.vendor_name }}</div>
                  <div class="stockout-vendor-code momo-mono">{{ record.vendor_code }}</div>
                </td>
                <td class="momo-mono" data-label="批次">{{ record.batch_id }}</td>
                <td class="momo-mono" data-label="庫存">{{ record.current_stock if record.current_stock is not none else '—' }}</td>
                <td class="momo-mono" data-label="缺貨日期">{{ record.stockout_date.strftime('%Y-%m-%d') if record.stockout_date else '—' }}</td>
                <td class="momo-mono" data-label="缺貨天數">{{ record.stockout_days if record.stockout_days is not none else '—' }}</td>
                <td class="momo-mono" data-label="30 日業績">
                  {% if record.monthly_sales_amount is not none %}
                    ${{ record.monthly_sales_amount | int | number_format }}
                  {% else %}—{% endif %}
                </td>
                <td class="momo-mono" data-label="建立時間">{{ record.created_at.strftime('%Y-%m-%d %H:%M') if record.created_at else '—' }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="stockout-empty momo-mono">
        目前沒有符合條件的缺貨資料；請調整篩選條件，或先匯入真實缺貨清單。
      </div>
    {% endif %}

    <div class="stockout-pagination">
      {% if current_page > 1 %}
        <a class="stockout-page-link" href="{{ url_for('vendor.list_page', page=current_page - 1, page_size=page_size, status=current_status, q=search_query, batch=current_batch, sort=current_sort) }}">上一頁</a>
      {% endif %}
      <span class="stockout-page-link momo-mono">{{ current_page }} / {{ total_pages }}</span>
      {% if current_page < total_pages %}
        <a class="stockout-page-link" href="{{ url_for('vendor.list_page', page=current_page + 1, page_size=page_size, status=current_status, q=search_query, batch=current_batch, sort=current_sort) }}">下一頁</a>
      {% endif %}
    </div>
  </section>

</div>
{% endblock %}