{% extends 'ewoooc_base.html' %}

{% block title %}EwoooC 缺貨清單{% endblock %}

{% block extra_css %}
<style>
    .stockout-list-stack {
        display: grid;
        gap: 22px;
    }

    .stockout-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: 22px;
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
    }

    .stockout-eyebrow,
    .stockout-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 800;
    }

    .stockout-eyebrow {
        width: fit-content;
        margin-bottom: 10px;
        padding: 4px 10px;
        color: var(--momo-accent-strong);
        background: var(--momo-accent-soft);
        border-radius: var(--momo-radius-pill);
    }

    .stockout-title {
        margin: 0;
        color: var(--momo-text-primary);
        font-size: 30px;
        font-weight: 800;
        letter-spacing: 0;
    }

    .stockout-subtitle {
        margin: 8px 0 0;
        color: var(--momo-text-secondary);
        font-size: 13px;
        line-height: 1.7;
    }

    .stockout-actions,
    .stockout-status-tabs,
    .stockout-pagination {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .stockout-action,
    .stockout-tab,
    .stockout-page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 34px;
        padding: 8px 13px;
        color: var(--momo-text-primary);
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: 4px;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
        transition: var(--momo-transition-base);
    }

    .stockout-action:hover,
    .stockout-tab:hover,
    .stockout-page-link:hover {
        color: var(--momo-text-primary);
        border-color: var(--momo-border-strong);
        transform: translateY(-1px);
    }

    .stockout-action.is-primary,
    .stockout-tab.is-active {
        color: var(--momo-text-inverse);
        background: var(--momo-ink);
        border-color: var(--momo-ink);
    }

    .stockout-kpi-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .stockout-kpi,
    .stockout-filter-card,
    .stockout-table-card {
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
    }

    .stockout-kpi {
        padding: 16px;
    }

    .stockout-kpi-label {
        color: var(--momo-text-secondary);
        font-size: 11px;
        font-weight: 800;
    }

    .stockout-kpi-value {
        margin-top: 8px;
        color: var(--momo-text-primary);
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
    }

    .stockout-kpi-value.is-danger {
        color: var(--momo-danger);
    }

    .stockout-kpi-value.is-success {
        color: var(--momo-success);
    }

    .stockout-kpi-sub {
        margin-top: 8px;
        color: var(--momo-text-tertiary);
        font-size: 11px;
    }

    .stockout-filter-card {
        padding: 16px;
    }

    .stockout-filter-form {
        display: grid;
        grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.9fr) minmax(160px, 0.8fr) auto;
        gap: 10px;
        align-items: center;
    }

    .stockout-input,
    .stockout-select {
        width: 100%;
        min-height: 38px;
        padding: 8px 11px;
        color: var(--momo-text-primary);
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: 4px;
        font-size: 13px;
        outline: none;
    }

    .stockout-input:focus,
    .stockout-select:focus {
        border-color: var(--momo-accent);
        box-shadow: 0 0 0 3px rgba(198, 111, 58, 0.12);
    }

    .stockout-table-card {
        overflow: hidden;
    }

    .stockout-table-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--momo-border-light);
    }

    .stockout-table-title {
        color: var(--momo-text-primary);
        font-size: 13px;
        font-weight: 800;
    }

    .stockout-table-meta {
        color: var(--momo-text-tertiary);
        font-size: 11px;
    }

    .stockout-table-wrap {
        overflow-x: auto;
    }

    .stockout-table {
        width: 100%;
        min-width: 1120px;
        border-collapse: collapse;
    }

    .stockout-table th {
        padding: 11px 14px;
        color: var(--momo-text-secondary);
        background: var(--momo-bg-paper);
        border-bottom: 1px solid var(--momo-border-light);
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .stockout-table td {
        padding: 13px 14px;
        color: var(--momo-text-primary);
        border-bottom: 1px solid var(--momo-border-light);
        font-size: 13px;
        vertical-align: top;
    }

    .stockout-table tbody tr:hover {
        background: var(--momo-bg-paper);
    }

    .stockout-product-name,
    .stockout-vendor-name {
        max-width: 300px;
        overflow: hidden;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stockout-product-code,
    .stockout-vendor-code {
        margin-top: 3px;
        color: var(--momo-text-tertiary);
        font-size: 11px;
    }

    .stockout-chip {
        min-width: 74px;
        justify-content: center;
        padding: 4px 8px;
        color: var(--momo-text-secondary);
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: var(--momo-radius-pill);
    }

    .stockout-chip.is-pending {
        color: var(--momo-danger);
        background: rgba(214, 83, 68, 0.1);
        border-color: rgba(214, 83, 68, 0.2);
    }

    .stockout-chip.is-sent {
        color: var(--momo-success);
        background: rgba(67, 132, 89, 0.1);
        border-color: rgba(67, 132, 89, 0.2);
    }

    .stockout-chip.is-failed {
        color: var(--momo-danger);
        background: rgba(214, 83, 68, 0.1);
        border-color: rgba(214, 83, 68, 0.2);
    }

    .stockout-empty {
        padding: 34px;
        color: var(--momo-text-secondary);
        background: var(--momo-bg-paper);
        border-top: 1px solid var(--momo-border-light);
        font-size: 13px;
        text-align: center;
    }

    .stockout-pagination {
        justify-content: flex-end;
        padding: 14px 18px;
        background: var(--momo-bg-paper);
    }

    @media (max-width: 1180px) {
        .stockout-kpi-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .stockout-filter-form {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 720px) {
        .stockout-header,
        .stockout-table-head {
            flex-direction: column;
            align-items: stretch;
        }

        .stockout-kpi-grid,
        .stockout-filter-form {
            grid-template-columns: 1fr;
        }

        .stockout-title {
            font-size: 26px;
        }
    }
</style>
{% endblock %}

{% block ewooo_content %}
{% set status_labels = {'pending': '待發送', 'sent': '已發送', 'failed': '失敗'} %}
<div class="stockout-list-stack">
    <section class="stockout-header">
        <div>
            <div class="stockout-eyebrow momo-mono">
                <i class="fas fa-table-list"></i>
                STOCKOUT LIST
            </div>
            <h1 class="stockout-title">缺貨清單</h1>
            <p class="stockout-subtitle">
                依現有缺貨匯入資料呈現，可用批次、廠商、商品與發送狀態篩選；所有數字皆來自 vendor_stockout。
            </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>

    <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">
            <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>
            <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) }}">全部</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) }}">待發送</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) }}">已發送</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) }}">失敗</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) }}">重複</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' %}
                            <tr>
                                <td>
                                    <span class="stockout-chip is-{{ record_status }} 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>
                                    <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>
                                    <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">{{ record.batch_id }}</td>
                                <td class="momo-mono">{{ record.current_stock if record.current_stock is not none else '--' }}</td>
                                <td class="momo-mono">{{ record.stockout_date.strftime('%Y-%m-%d') if record.stockout_date else '--' }}</td>
                                <td class="momo-mono">{{ record.stockout_days if record.stockout_days is not none else '--' }}</td>
                                <td class="momo-mono">
                                    {% if record.monthly_sales_amount is not none %}
                                        ${{ record.monthly_sales_amount | int | number_format }}
                                    {% else %}
                                        --
                                    {% endif %}
                                </td>
                                <td class="momo-mono">{{ 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 %}