{% extends 'ewoooc_base.html' %}

{% block title %}EwoooC 廠商缺貨{% endblock %}

{% block extra_css %}
<style>
    .vendor-v2-stack {
        display: grid;
        gap: 24px;
    }

    .vendor-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
        gap: 12px;
    }

    .vendor-hero-panel,
    .vendor-card,
    .vendor-table-card {
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
    }

    .vendor-hero-panel {
        display: flex;
        min-height: 228px;
        flex-direction: column;
        justify-content: space-between;
        padding: 24px;
    }

    .vendor-eyebrow {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        padding: 4px 10px;
        color: var(--momo-accent-strong);
        background: var(--momo-accent-soft);
        border-radius: var(--momo-radius-pill);
        font-size: 11px;
        font-weight: 800;
    }

    .vendor-title {
        margin: 0;
        color: var(--momo-text-primary);
        font-size: 34px;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.12;
    }

    .vendor-subtitle {
        max-width: 680px;
        margin: 10px 0 0;
        color: var(--momo-text-secondary);
        font-size: 14px;
        line-height: 1.8;
    }

    .vendor-actions {
        display: flex;
        gap: 8px;
        margin-top: 22px;
        flex-wrap: wrap;
    }

    .vendor-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        padding: 8px 14px;
        color: var(--momo-text-primary);
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: 4px;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        transition: var(--momo-transition-base);
    }

    .vendor-action:hover {
        color: var(--momo-text-primary);
        border-color: var(--momo-border-strong);
        transform: translateY(-1px);
    }

    .vendor-action.is-primary {
        color: var(--momo-text-inverse);
        background: var(--momo-ink);
        border-color: var(--momo-ink);
    }

    .vendor-pulse {
        display: grid;
        align-content: stretch;
        padding: 18px;
        background: var(--momo-ink);
        border: 1px solid var(--momo-ink);
        border-radius: 8px;
    }

    .vendor-pulse-label {
        color: rgba(250, 247, 240, 0.62);
        font-size: 11px;
        font-weight: 800;
    }

    .vendor-pulse-value {
        margin-top: 8px;
        color: var(--momo-text-inverse);
        font-size: 34px;
        font-weight: 800;
        line-height: 1;
    }

    .vendor-pulse-meta {
        margin-top: 12px;
        color: rgba(250, 247, 240, 0.7);
        font-size: 12px;
        line-height: 1.7;
    }

    .vendor-kpi-grid,
    .vendor-flow-grid {
        display: grid;
        gap: 12px;
    }

    .vendor-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vendor-flow-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .vendor-card {
        padding: 18px;
    }

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

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

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

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

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

    .vendor-section-label {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 12px;
    }

    .vendor-section-label .num {
        color: var(--momo-text-tertiary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

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

    .vendor-flow-card {
        display: flex;
        min-height: 138px;
        flex-direction: column;
        justify-content: space-between;
        padding: 16px;
        color: var(--momo-text-primary);
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
        text-decoration: none;
        transition: var(--momo-transition-base);
    }

    .vendor-flow-card:hover {
        color: var(--momo-text-primary);
        border-color: var(--momo-border-strong);
        transform: translateY(-1px);
    }

    .vendor-flow-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: var(--momo-accent-strong);
        background: var(--momo-accent-soft);
        border-radius: 6px;
    }

    .vendor-flow-title {
        margin-top: 14px;
        font-size: 14px;
        font-weight: 800;
    }

    .vendor-flow-meta {
        margin-top: 4px;
        color: var(--momo-text-tertiary);
        font-size: 11px;
        line-height: 1.5;
    }

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

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

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

    .vendor-summary-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .vendor-summary-item {
        min-height: 120px;
        padding: 18px;
        border-right: 1px solid var(--momo-border-light);
    }

    .vendor-summary-item:last-child {
        border-right: 0;
    }

    .vendor-summary-title {
        margin-top: 8px;
        color: var(--momo-text-primary);
        font-size: 16px;
        font-weight: 800;
        line-height: 1.4;
    }

    .vendor-summary-meta {
        margin-top: 8px;
        color: var(--momo-text-secondary);
        font-size: 12px;
        line-height: 1.7;
    }

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

    @media (max-width: 1180px) {
        .vendor-hero,
        .vendor-kpi-grid,
        .vendor-flow-grid,
        .vendor-summary-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 720px) {
        .vendor-hero,
        .vendor-kpi-grid,
        .vendor-flow-grid,
        .vendor-summary-grid {
            grid-template-columns: 1fr;
        }

        .vendor-title {
            font-size: 28px;
        }

        .vendor-summary-item {
            border-right: 0;
            border-bottom: 1px solid var(--momo-border-light);
        }
    }
</style>
{% 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>
                    VENDOR STOCKOUT
                </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">來源：vendor_stockout / vendor_list / vendor_emails / email_send_log</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>
                        vendor_id {{ stats.latest_email_vendor_id }}
                    </div>
                {% else %}
                    <div class="vendor-summary-title">尚無郵件紀錄</div>
                    <div class="vendor-summary-meta momo-mono">email_send_log 目前沒有資料</div>
                {% endif %}
            </div>
        </div>
        {% if stats.total_stockouts == 0 %}
            <div class="vendor-empty momo-mono">
                目前沒有匯入的缺貨資料；請先使用既有 Excel 匯入流程建立真實批次。
            </div>
        {% endif %}
    </section>
</div>
{% endblock %}
