{% extends "ewoooc_base.html" %}

{% block title %}PChome 商品比價決策台 - EwoooC{% endblock %}

{% block extra_css %}
<style>
.price-tool-page {
    color: var(--momo-text-primary);
}

.price-tool-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
    gap: 18px;
    align-items: stretch;
    padding: var(--momo-space-4) var(--momo-space-5);
    background: var(--momo-bg-surface);
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
}

.price-tool-head h2 {
    margin: 0;
    color: var(--momo-text-primary);
    font-family: var(--momo-font-display);
    font-size: var(--momo-text-headline);
    font-weight: 800;
    letter-spacing: 0;
}

.price-tool-head p,
.price-tool-page .text-muted {
    color: var(--momo-text-secondary) !important;
}

.price-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.price-hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.price-hero-kpi {
    min-height: 92px;
    padding: 12px;
    border: 1px solid rgba(42, 37, 32, 0.1);
    border-radius: var(--momo-radius-md);
    background: rgba(250, 247, 240, 0.72);
}

.price-hero-kpi strong {
    display: block;
    color: var(--momo-text-primary);
    font-family: var(--momo-font-mono, monospace);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
}

.price-hero-kpi span {
    display: block;
    margin-top: 7px;
    color: var(--momo-text-secondary);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.35;
}

.price-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: var(--momo-space-4);
    margin-bottom: var(--momo-space-4);
}

.price-next-action,
.price-readiness-panel,
.price-result-panel {
    background: var(--momo-bg-surface);
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
}

.price-next-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: rgba(242, 178, 90, 0.16);
    border-color: rgba(172, 92, 58, 0.2);
}

.price-next-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(172, 92, 58, 0.14);
    color: var(--momo-warm-rust);
}

.price-next-title {
    display: block;
    color: var(--momo-text-primary);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.price-next-reason {
    display: block;
    margin-top: 3px;
    color: var(--momo-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
}

.price-readiness-panel,
.price-result-panel {
    padding: 14px;
}

.price-decision-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: var(--momo-space-4);
}

.price-decision-card {
    display: grid;
    gap: 8px;
    min-height: 126px;
    padding: 13px;
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--momo-shadow-soft);
}

.price-decision-card.is-active {
    border-color: rgba(172, 92, 58, 0.34);
    background: rgba(242, 178, 90, 0.16);
}

.price-decision-card.is-ready {
    border-color: rgba(46, 125, 91, 0.24);
    background: rgba(235, 248, 241, 0.72);
}

.price-decision-card.is-blocked {
    border-color: rgba(200, 81, 58, 0.24);
    background: rgba(255, 244, 239, 0.78);
}

.price-decision-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--momo-text-secondary);
    font-size: 0.73rem;
    font-weight: 900;
}

.price-decision-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(42, 37, 32, 0.08);
    color: var(--momo-warm-rust);
}

.price-decision-value {
    color: var(--momo-text-primary);
    font-family: var(--momo-font-display);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.3;
}

.price-decision-detail {
    color: var(--momo-text-secondary);
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.42;
}

.price-workflow-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: var(--momo-space-4);
}

.price-workflow-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 70px;
    padding: 11px;
    border: 1px solid rgba(42, 37, 32, 0.1);
    border-radius: var(--momo-radius-md);
    background: rgba(250, 247, 240, 0.6);
}

.price-workflow-step.is-current {
    border-color: rgba(172, 92, 58, 0.34);
    background: rgba(242, 178, 90, 0.16);
}

.price-workflow-step.is-done {
    border-color: rgba(46, 125, 91, 0.24);
    background: rgba(235, 248, 241, 0.72);
}

.price-workflow-step strong {
    display: block;
    color: var(--momo-text-primary);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.25;
}

.price-workflow-step span:last-child {
    display: block;
    margin-top: 2px;
    color: var(--momo-text-secondary);
    font-size: 0.7rem;
    font-weight: 780;
}

.price-workflow-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(172, 92, 58, 0.13);
    color: var(--momo-warm-rust);
    font-family: var(--momo-font-mono, monospace);
    font-size: 0.78rem;
    font-weight: 900;
}

.price-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--momo-text-secondary);
    font-size: 0.78rem;
    font-weight: 900;
}

.price-readiness-row,
.price-risk-row {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.price-readiness-row:last-child,
.price-risk-row:last-child {
    margin-bottom: 0;
}

.price-readiness-meta,
.price-risk-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--momo-text-secondary);
    font-size: 0.78rem;
    font-weight: 850;
}

.price-readiness-track,
.price-risk-track {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(42, 37, 32, 0.08);
}

.price-readiness-bar,
.price-risk-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--momo-warm-caramel);
    transition: width 0.2s ease;
}

.price-readiness-bar.is-pchome,
.price-risk-bar.is-good {
    background: #2e7d5b;
}

.price-readiness-bar.is-momo,
.price-risk-bar.is-watch {
    background: #d19a2a;
}

.price-risk-bar.is-urgent {
    background: #c8513a;
}

.price-operation-card {
    height: 100%;
    background: var(--momo-bg-surface);
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
}

.price-step-head {
    background: var(--momo-bg-paper);
    border-bottom: 1px solid var(--momo-border-light);
    color: var(--momo-text-primary);
    font-family: var(--momo-font-display);
    font-weight: 800;
}

.price-count-badge,
.price-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-sm);
    font-family: var(--momo-font-mono, monospace);
    font-size: var(--momo-text-label);
    font-weight: 800;
    line-height: 1;
}

.price-count-badge.is-muted,
.price-result-badge.is-muted {
    background: var(--momo-tag-muted-bg);
    border-color: var(--momo-tag-muted-border);
    color: var(--momo-tag-muted-text);
}

.price-count-badge.is-pchome,
.price-result-badge.is-pchome {
    background: var(--momo-info-bg);
    border-color: var(--momo-info-border);
    color: var(--momo-info-text);
}

.price-count-badge.is-momo,
.price-result-badge.is-momo {
    background: var(--momo-warning-bg);
    border-color: var(--momo-warning-border);
    color: var(--momo-warning-text);
}

.price-stat-card {
    background: var(--momo-bg-surface);
    border: 1px solid var(--momo-border-light);
}

.price-stat-card h4 {
    color: var(--momo-text-primary);
    font-family: var(--momo-font-mono, monospace);
    font-weight: 800;
}

.price-stat-card.is-pchome h4 {
    color: var(--momo-info-text);
}

.price-stat-card.is-momo h4 {
    color: var(--momo-warning-text);
}

.price-stat-card.is-diff h4 {
    color: var(--momo-text-primary);
}

.price-result-summary-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.35fr);
    gap: 12px;
    margin-bottom: 14px;
}

.price-result-callout {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(172, 92, 58, 0.22);
    border-radius: var(--momo-radius-md);
    background: rgba(242, 178, 90, 0.14);
}

.price-result-callout strong {
    color: var(--momo-text-primary);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
}

.price-result-callout span {
    color: var(--momo-text-secondary);
    font-size: 0.8rem;
    font-weight: 760;
    line-height: 1.45;
}

.price-result-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.price-result-matrix-card {
    min-height: 92px;
    padding: 11px;
    border: 1px solid rgba(42, 37, 32, 0.1);
    border-radius: var(--momo-radius-md);
    background: rgba(255, 255, 255, 0.72);
}

.price-result-matrix-card strong {
    display: block;
    color: var(--momo-text-primary);
    font-family: var(--momo-font-mono, monospace);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.price-result-matrix-card span {
    display: block;
    margin-top: 7px;
    color: var(--momo-text-secondary);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.35;
}

.price-note {
    padding: 10px 12px;
    background: var(--momo-info-bg);
    border: 1px solid var(--momo-info-border);
    border-radius: var(--momo-radius-md);
    color: var(--momo-info-text);
}

.price-note.is-unit {
    background: var(--momo-success-bg);
    border-color: var(--momo-success-border);
    color: var(--momo-success-text);
}

.price-unit-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.price-unit-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(46, 125, 91, 0.2);
    border-radius: var(--momo-radius-sm);
    background: rgba(255, 255, 255, 0.45);
}

.price-unit-name {
    min-width: 0;
    overflow: hidden;
    color: var(--momo-text-primary);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-unit-metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--momo-success-text);
    font-family: var(--momo-font-mono, monospace);
    font-size: var(--momo-text-label);
    font-weight: 900;
    white-space: nowrap;
}

.price-table-head th {
    background: var(--momo-bg-paper) !important;
    color: var(--momo-text-secondary) !important;
    font-family: var(--momo-font-mono, monospace);
    font-size: var(--momo-text-label);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.price-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: var(--momo-radius-sm);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: normal;
}

.price-action-pill.is-urgent {
    background: var(--momo-danger-bg);
    color: var(--momo-danger-text);
    border: 1px solid var(--momo-danger-border);
}

.price-action-pill.is-good {
    background: var(--momo-success-bg);
    color: var(--momo-success-text);
    border: 1px solid var(--momo-success-border);
}

.price-action-pill.is-watch {
    background: var(--momo-info-bg);
    color: var(--momo-info-text);
    border: 1px solid var(--momo-info-border);
}

.price-toast {
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: min(300px, calc(100vw - 40px));
    padding: 12px 14px;
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
    background: var(--momo-bg-elevated);
    color: var(--momo-text-primary);
    font-weight: 700;
}

.price-toast--success {
    background: var(--momo-success-bg);
    border-color: var(--momo-success-border);
    color: var(--momo-success-text);
}

.price-toast--danger {
    background: var(--momo-danger-bg);
    border-color: var(--momo-danger-border);
    color: var(--momo-danger-text);
}

.price-toast--warning {
    background: var(--momo-warning-bg);
    border-color: var(--momo-warning-border);
    color: var(--momo-warning-text);
}

@media (max-width: 760px) {
    .price-tool-head {
        grid-template-columns: 1fr;
        padding: var(--momo-space-4);
    }

    .price-hero-kpis,
    .price-decision-grid,
    .price-workflow-strip,
    .price-result-summary-grid,
    .price-result-matrix {
        grid-template-columns: 1fr;
    }

    .price-command-grid,
    .price-next-action {
        grid-template-columns: 1fr;
    }

    .price-next-action .btn {
        width: 100%;
    }

    .price-unit-item {
        grid-template-columns: 1fr;
    }

    .price-unit-metric {
        justify-content: flex-start;
        white-space: normal;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4 price-tool-page">
    <header class="price-tool-head mb-4">
        <div class="price-hero-copy">
            <h2><i class="fas fa-balance-scale me-2"></i>PChome 商品比價決策台</h2>
            <p class="text-muted mb-0">用 PChome 業績商品反查 MOMO，先找同款，再判斷售價、活動與曝光下一步。</p>
        </div>
        <div class="price-hero-kpis" aria-label="比價核心狀態">
            <div class="price-hero-kpi">
                <strong id="heroPchomeCount">0</strong>
                <span>PChome 商品</span>
            </div>
            <div class="price-hero-kpi">
                <strong id="heroMomoCount">0</strong>
                <span>MOMO 可用候選</span>
            </div>
            <div class="price-hero-kpi">
                <strong id="heroDecisionCount">0</strong>
                <span>已產生決策</span>
            </div>
        </div>
    </header>

    <section class="price-command-grid" aria-label="比價操作總覽">
        <div class="price-next-action">
            <span class="price-next-icon"><i class="fas fa-location-arrow"></i></span>
            <span>
                <strong class="price-next-title" id="priceNextActionTitle">今天先做：選擇要檢查的商品範圍</strong>
                <span class="price-next-reason" id="priceNextActionReason">請先選品牌或輸入關鍵字，系統才知道要抓哪一批 PChome 商品。</span>
            </span>
            <button type="button" class="btn btn-primary btn-sm" id="priceNextActionButton">
                輸入關鍵字
            </button>
        </div>
        <div class="price-readiness-panel" aria-label="資料準備狀態">
            <div class="price-panel-title">
                <span><i class="fas fa-clipboard-check me-1"></i>資料準備狀態</span>
                <span id="priceReadySummary">尚未開始</span>
            </div>
            <div class="price-readiness-row">
                <div class="price-readiness-meta"><span>PChome 商品</span><strong id="pricePchomeReadyText">0 筆</strong></div>
                <div class="price-readiness-track"><span class="price-readiness-bar is-pchome" id="pricePchomeReadyBar"></span></div>
            </div>
            <div class="price-readiness-row">
                <div class="price-readiness-meta"><span>MOMO 商品</span><strong id="priceMomoReadyText">0 筆</strong></div>
                <div class="price-readiness-track"><span class="price-readiness-bar is-momo" id="priceMomoReadyBar"></span></div>
            </div>
        </div>
    </section>

    <section class="price-decision-grid" id="priceDecisionGrid" aria-label="目前卡點與下一步">
        <article class="price-decision-card is-active" id="decisionScopeCard">
            <div class="price-decision-top">
                <span>檢查範圍</span>
                <span class="price-decision-icon"><i class="fas fa-magnifying-glass"></i></span>
            </div>
            <div class="price-decision-value" id="decisionScopeValue">尚未選擇</div>
            <div class="price-decision-detail" id="decisionScopeDetail">先選品牌或輸入商品關鍵字。</div>
        </article>
        <article class="price-decision-card" id="decisionPchomeCard">
            <div class="price-decision-top">
                <span>PChome</span>
                <span class="price-decision-icon"><i class="fas fa-cart-shopping"></i></span>
            </div>
            <div class="price-decision-value" id="decisionPchomeValue">等待商品</div>
            <div class="price-decision-detail" id="decisionPchomeDetail">取得商品後，系統才知道要比哪一批。</div>
        </article>
        <article class="price-decision-card" id="decisionMomoCard">
            <div class="price-decision-top">
                <span>MOMO</span>
                <span class="price-decision-icon"><i class="fas fa-store"></i></span>
            </div>
            <div class="price-decision-value" id="decisionMomoValue">等待候選</div>
            <div class="price-decision-detail" id="decisionMomoDetail">會自動分成同款、單位價、需確認。</div>
        </article>
        <article class="price-decision-card" id="decisionResultCard">
            <div class="price-decision-top">
                <span>比價結果</span>
                <span class="price-decision-icon"><i class="fas fa-chart-simple"></i></span>
            </div>
            <div class="price-decision-value" id="decisionResultValue">尚未判讀</div>
            <div class="price-decision-detail" id="decisionResultDetail">結果會分成檢查售價、主推曝光、觀察賣點。</div>
        </article>
    </section>

    <section class="price-workflow-strip" aria-label="比價流程">
        <div class="price-workflow-step is-current" id="workflowStepScope">
            <span class="price-workflow-index">1</span>
            <span><strong>選範圍</strong><span>品牌或關鍵字</span></span>
        </div>
        <div class="price-workflow-step" id="workflowStepPchome">
            <span class="price-workflow-index">2</span>
            <span><strong>抓 PChome</strong><span>取得主場商品</span></span>
        </div>
        <div class="price-workflow-step" id="workflowStepMomo">
            <span class="price-workflow-index">3</span>
            <span><strong>找 MOMO</strong><span>同款與單位價</span></span>
        </div>
        <div class="price-workflow-step" id="workflowStepResult">
            <span class="price-workflow-index">4</span>
            <span><strong>做決策</strong><span>價格與曝光</span></span>
        </div>
    </section>

    <!-- 操作區 -->
    <div class="row mb-4">
        <!-- 選擇檢查範圍 -->
        <div class="col-lg-4 mb-3">
            <div class="card price-operation-card">
                <div class="card-header price-step-head">
                    <i class="fas fa-tag me-2"></i>選擇要檢查的範圍
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <select class="form-select" id="brandSelect">
                            <option value="">選擇品牌</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">或輸入品牌/關鍵字</label>
                        <input type="text" class="form-control" id="customKeyword" placeholder="如: 理膚寶水、雅漾">
                    </div>
                </div>
            </div>
        </div>

        <!-- 取得 PChome 商品 -->
        <div class="col-lg-4 mb-3">
            <div class="card price-operation-card">
                <div class="card-header price-step-head">
                    <i class="fas fa-shopping-cart me-2"></i>補齊 PChome 商品
                </div>
                <div class="card-body">
                    <button class="btn btn-primary w-100 mb-2" id="fetchPchomeBtn">
                        <i class="fas fa-download me-1"></i>取得 PChome 商品
                    </button>
                    <div class="text-center my-2"><small class="text-muted">或</small></div>
                    <button class="btn btn-outline-info w-100" id="manualPchomeBtn" data-bs-toggle="modal" data-bs-target="#manualInputModal" data-source="pchome">
                        <i class="fas fa-keyboard me-1"></i>手動輸入
                    </button>
                    <div class="mt-3">
                        <span class="price-count-badge is-muted" id="pchomeCount">0 筆商品</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 取得 MOMO 商品 -->
        <div class="col-lg-4 mb-3">
            <div class="card price-operation-card">
                <div class="card-header price-step-head">
                    <i class="fas fa-store me-2"></i>補齊 MOMO 商品
                </div>
                <div class="card-body">
                    <button class="btn btn-primary w-100 mb-2" id="fetchTargetedMomoBtn" disabled>
                        <i class="fas fa-magnifying-glass-dollar me-1"></i>自動找 MOMO 候選
                    </button>
                    <div class="text-center my-2"><small class="text-muted">或</small></div>
                    <button class="btn btn-primary w-100 mb-2" id="uploadMomoBtn" data-bs-toggle="modal" data-bs-target="#uploadModal">
                        <i class="fas fa-file-excel me-1"></i>匯入 MOMO 商品
                    </button>
                    <div class="text-center my-2"><small class="text-muted">或</small></div>
                    <button class="btn btn-outline-warning w-100" id="manualMomoBtn" data-bs-toggle="modal" data-bs-target="#manualInputModal" data-source="momo">
                        <i class="fas fa-keyboard me-1"></i>手動輸入
                    </button>
                    <div class="mt-3">
                        <span class="price-count-badge is-muted" id="momoCount">0 筆商品</span>
                        <span class="price-count-badge is-muted ms-1" id="momoUnitCompareCount">0 筆單位價</span>
                        <span class="price-count-badge is-muted ms-1" id="momoReviewCount">0 筆需確認</span>
                    </div>
                    <div class="price-note is-unit mt-3 py-2" id="momoUnitComparePanel" style="display:none;"></div>
                    <div class="price-note mt-3 py-2" id="momoReviewPanel" style="display:none;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 比價按鈕 -->
    <div class="row mb-4">
        <div class="col text-center">
            <button class="btn btn-lg btn-primary px-5" id="compareBtn" disabled>
                <i class="fas fa-balance-scale me-2"></i>開始檢查價差
            </button>
        </div>
    </div>

    <!-- 進度顯示 -->
    <div class="row mb-4" id="progressSection" style="display: none;">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border text-primary me-3" role="status"></div>
                        <div>
                            <strong id="progressText">處理中...</strong>
                            <br><small class="text-muted" id="progressDetail"></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 比價結果 -->
    <div class="row" id="resultSection" style="display: none;">
        <div class="col">
            <section class="price-result-panel mb-4" aria-label="比價結果判讀">
                <div class="price-panel-title">
                    <span><i class="fas fa-chart-bar me-1"></i>比價結果判讀</span>
                    <span id="priceResultSummary">等待比價結果</span>
                </div>
                <div class="price-result-summary-grid">
                    <div class="price-result-callout">
                        <strong id="priceResultHeadline">尚未產生判讀</strong>
                        <span id="priceResultAdvice">取得 PChome 與 MOMO 商品後，系統會直接整理下一步。</span>
                    </div>
                    <div class="price-result-matrix" aria-label="比價決策分佈">
                        <div class="price-result-matrix-card">
                            <strong id="priceUrgentMetric">0</strong>
                            <span>需檢查售價或活動</span>
                        </div>
                        <div class="price-result-matrix-card">
                            <strong id="priceGoodMetric">0</strong>
                            <span>可主推曝光</span>
                        </div>
                        <div class="price-result-matrix-card">
                            <strong id="priceWatchMetric">0</strong>
                            <span>觀察賣點</span>
                        </div>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-lg-4">
                        <div class="price-risk-row">
                            <div class="price-risk-meta"><span>需檢查價格</span><strong id="priceUrgentText">0 筆</strong></div>
                            <div class="price-risk-track"><span class="price-risk-bar is-urgent" id="priceUrgentBar"></span></div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="price-risk-row">
                            <div class="price-risk-meta"><span>可主推曝光</span><strong id="priceGoodText">0 筆</strong></div>
                            <div class="price-risk-track"><span class="price-risk-bar is-good" id="priceGoodBar"></span></div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="price-risk-row">
                            <div class="price-risk-meta"><span>價格接近</span><strong id="priceWatchText">0 筆</strong></div>
                            <div class="price-risk-track"><span class="price-risk-bar is-watch" id="priceWatchBar"></span></div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 統計卡片 -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card price-stat-card">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="matchedCount">0</h4>
                            <small class="text-muted">找到同款</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card price-stat-card is-pchome">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="pchomeCheaperCount">0</h4>
                            <small>PChome 較便宜</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card price-stat-card is-momo">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="momoCheaperCount">0</h4>
                            <small>MOMO 較便宜</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card price-stat-card is-diff">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="avgPriceDiff">$0</h4>
                            <small>平均價差</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 結果表格 -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="fas fa-list me-2"></i>比價結果</span>
                    <div>
                        <button class="btn btn-sm btn-outline-primary" id="exportResultBtn">
                            <i class="fas fa-file-excel me-1"></i>匯出 Excel
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="price-table-head">
                            <tr>
                                    <th style="width: 120px;">下一步</th>
                                    <th style="width: 35%;">PChome 商品</th>
                                    <th style="width: 35%;">MOMO 商品</th>
                                    <th class="text-center">相似度</th>
                                    <th class="text-end">PChome 價</th>
                                    <th class="text-end">MOMO 價</th>
                                    <th class="text-end">價差</th>
                            </tr>
                            </thead>
                            <tbody id="resultBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 上傳 Excel Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-file-excel me-2"></i>上傳 MOMO 商品 Excel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">選擇 Excel 檔案</label>
                    <input type="file" class="form-control" id="momoExcelFile" accept=".xlsx,.xls,.csv">
                </div>
                <div class="price-note">
                    <i class="fas fa-info-circle me-1"></i>
                    Excel 需包含「商品名稱」和「售價」欄位。可選包含「商品編號」和「連結」。
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="parseExcelBtn">
                    <i class="fas fa-upload me-1"></i>上傳並解析
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 手動輸入 Modal -->
<div class="modal fade" id="manualInputModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-keyboard me-2"></i>手動輸入商品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="price-note py-2">
                    <i class="fas fa-info-circle me-1"></i>
                    <strong>格式說明:</strong> 每行一筆商品，用<strong>逗號</strong>或 <strong>Tab</strong> 分隔<br>
                    <code>商品名稱,價格</code> 或 <code>商品名稱,價格,商品連結(選填)</code>
                </div>
                <div class="mb-3">
                    <label class="form-label">商品資料</label>
                    <textarea class="form-control" id="manualInput" rows="10" placeholder="理膚寶水 多容安舒緩濕潤乳液 40ml,850,https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=12345
理膚寶水 B5全面修復霜 100ml,680
La Roche-Posay 安得利防曬液 50ml,920

也可以直接從 Excel 複製貼上 (Tab 分隔)"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="parseManualBtn">
                    <i class="fas fa-check me-1"></i>確認
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let pchomeProducts = [];
    let momoProducts = [];
    let momoUnitCompareCandidates = [];
    let momoReviewCandidates = [];
    let comparisonResult = null;
    let currentManualSource = null;

    document.addEventListener('DOMContentLoaded', function() {
        loadBrands();
        bindEvents();
        renderPriceCommandDashboard();
    });

    async function loadBrands() {
        try {
            const response = await fetchWithCSRF('/api/price_comparison/brands');
            const data = await response.json();

            if (data.success) {
                const select = document.getElementById('brandSelect');
                for (const brand of data.data.brands) {
                    const option = document.createElement('option');
                    option.value = brand.code;
                    option.textContent = brand.name;
                    select.appendChild(option);
                }
            }
        } catch (error) {
            console.error('載入品牌失敗:', error);
        }
    }

    function bindEvents() {
        // 品牌選擇
        document.getElementById('brandSelect').addEventListener('change', function() {
            const selected = this.options[this.selectedIndex];
            if (selected.value) {
                document.getElementById('customKeyword').value = selected.textContent;
            }
            renderPriceCommandDashboard();
        });

        document.getElementById('customKeyword').addEventListener('input', renderPriceCommandDashboard);

        // 爬取 PChome
        document.getElementById('fetchPchomeBtn').addEventListener('click', fetchPchome);

        // 上傳 Excel
        document.getElementById('parseExcelBtn').addEventListener('click', parseMomoExcel);

        document.getElementById('fetchTargetedMomoBtn').addEventListener('click', fetchTargetedMomoCandidates);

        // 手動輸入來源
        document.querySelectorAll('[data-bs-target="#manualInputModal"]').forEach(btn => {
            btn.addEventListener('click', function() {
                currentManualSource = this.dataset.source;
            });
        });

        // 解析手動輸入
        document.getElementById('parseManualBtn').addEventListener('click', parseManualInput);

        // 比價
        document.getElementById('compareBtn').addEventListener('click', runComparison);

        // 匯出
        document.getElementById('exportResultBtn').addEventListener('click', exportResult);

        document.getElementById('priceNextActionButton').addEventListener('click', runPriceNextAction);
    }

    function getKeyword() {
        const custom = document.getElementById('customKeyword').value.trim();
        if (custom) return custom;

        const select = document.getElementById('brandSelect');
        if (!select.value) return '';
        return select.options[select.selectedIndex]?.textContent || '';
    }

    async function fetchPchome() {
        const keyword = getKeyword();
        if (!keyword) {
            showToast('請先選擇品牌或輸入關鍵字', 'warning');
            return;
        }

        showProgress('取得 PChome 商品中...', `搜尋：${keyword}`);

        try {
            const response = await fetchWithCSRF('/api/price_comparison/fetch_pchome', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ keyword, limit: 100 })
            });

            const data = await response.json();
            hideProgress();

            if (data.success) {
                pchomeProducts = data.data.products;
                momoProducts = [];
                momoUnitCompareCandidates = [];
                momoReviewCandidates = [];
                resetComparisonResult();
                document.getElementById('pchomeCount').textContent = `${pchomeProducts.length} 筆商品`;
                document.getElementById('pchomeCount').className = 'price-count-badge is-pchome';
                document.getElementById('momoCount').textContent = '0 筆同款';
                document.getElementById('momoCount').className = 'price-count-badge is-muted';
                renderMomoUnitComparePanel();
                renderMomoReviewPanel();
                updateCompareButton();
                updateTargetedMomoButton();
                renderPriceCommandDashboard();
                showToast(`成功取得 ${pchomeProducts.length} 筆 PChome 商品`, 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            hideProgress();
            showToast('取得失敗：' + error.message, 'danger');
        }
    }

    async function fetchTargetedMomoCandidates() {
        if (!pchomeProducts.length) {
            showToast('請先取得 PChome 商品，再搜尋 MOMO 候選', 'warning');
            return;
        }

        const btn = document.getElementById('fetchTargetedMomoBtn');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>搜尋中...';
        showProgress('搜尋 MOMO 候選中...', '正在用 PChome 商品名稱找單品與組合候選');

        try {
            const response = await fetchWithCSRF('/api/price_comparison/fetch_momo_for_pchome', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    pchome_products: pchomeProducts,
                    sync_external_offers: true
                })
            });
            const data = await response.json();
            hideProgress();

            const payload = data.data || {};
            momoProducts = Array.isArray(payload.products) ? payload.products : [];
            momoUnitCompareCandidates = Array.isArray(payload.unit_compare_candidates) ? payload.unit_compare_candidates : [];
            momoReviewCandidates = Array.isArray(payload.review_candidates) ? payload.review_candidates : [];
            resetComparisonResult();
            document.getElementById('momoCount').textContent = `${momoProducts.length} 筆同款`;
            document.getElementById('momoCount').className = momoProducts.length ? 'price-count-badge is-momo' : 'price-count-badge is-muted';
            renderMomoUnitComparePanel();
            renderMomoReviewPanel();
            updateCompareButton();
            renderPriceCommandDashboard();

            const syncResult = payload.external_offer_sync || {};
            const syncedCount = Number(syncResult.written_count || 0);
            if (data.success) {
                const syncText = syncedCount ? `，已同步 ${syncedCount} 筆到作戰清單` : '';
                showToast(`MOMO 候選完成：同款 ${momoProducts.length} 筆、單位價 ${momoUnitCompareCandidates.length} 筆、需確認 ${momoReviewCandidates.length} 筆${syncText}`, 'success');
            } else if (momoUnitCompareCandidates.length) {
                showToast(`已自動換算 ${momoUnitCompareCandidates.length} 筆單位價候選`, 'success');
            } else if (momoReviewCandidates.length) {
                showToast(`找到 ${momoReviewCandidates.length} 筆需人工確認候選，暫不進自動比價`, 'warning');
            } else {
                showToast(data.message || '目前沒有找到 MOMO 候選', 'warning');
            }
        } catch (error) {
            hideProgress();
            showToast('搜尋 MOMO 候選失敗：' + error.message, 'danger');
        } finally {
            updateTargetedMomoButton();
            btn.innerHTML = '<i class="fas fa-magnifying-glass-dollar me-1"></i>自動找 MOMO 候選';
        }
    }

    function renderMomoUnitComparePanel() {
        const countBadge = document.getElementById('momoUnitCompareCount');
        const panel = document.getElementById('momoUnitComparePanel');
        countBadge.textContent = `${momoUnitCompareCandidates.length} 筆單位價`;
        countBadge.className = momoUnitCompareCandidates.length
            ? 'price-count-badge is-pchome ms-1'
            : 'price-count-badge is-muted ms-1';

        if (!momoUnitCompareCandidates.length) {
            panel.style.display = 'none';
            panel.replaceChildren();
            return;
        }

        panel.style.display = 'block';
        const heading = document.createElement('strong');
        heading.textContent = `已自動換算 ${momoUnitCompareCandidates.length} 筆單位價`;

        const list = document.createElement('div');
        list.className = 'price-unit-list';
        momoUnitCompareCandidates.slice(0, 3).forEach(item => {
            const evidence = item.target_unit_price_comparison || {};
            const row = document.createElement('div');
            row.className = 'price-unit-item';

            const name = document.createElement('span');
            name.className = 'price-unit-name';
            name.textContent = item.name || item.title || '未命名商品';

            const metric = document.createElement('span');
            metric.className = 'price-unit-metric';
            const gap = Number(evidence.unit_gap_pct ?? item.target_gap_pct ?? 0);
            const unit = evidence.unit_label ? `/${evidence.unit_label}` : '';
            const momoUnitPrice = Number(evidence.momo_unit_price || 0);
            const pchomeUnitPrice = Number(evidence.competitor_unit_price || 0);
            metric.textContent = momoUnitPrice && pchomeUnitPrice
                ? `MOMO $${momoUnitPrice.toFixed(2)}${unit}｜PChome $${pchomeUnitPrice.toFixed(2)}${unit}｜${gap >= 0 ? '+' : ''}${gap.toFixed(1)}%`
                : `${gap >= 0 ? '+' : ''}${gap.toFixed(1)}%`;

            row.append(name, metric);
            list.appendChild(row);
        });

        panel.replaceChildren(heading, list);
    }

    function renderMomoReviewPanel() {
        const countBadge = document.getElementById('momoReviewCount');
        const panel = document.getElementById('momoReviewPanel');
        countBadge.textContent = `${momoReviewCandidates.length} 筆需確認`;
        countBadge.className = momoReviewCandidates.length
            ? 'price-count-badge is-momo ms-1'
            : 'price-count-badge is-muted ms-1';

        if (!momoReviewCandidates.length) {
            panel.style.display = 'none';
            panel.textContent = '';
            return;
        }

        const sampleNames = momoReviewCandidates
            .slice(0, 3)
            .map(item => item.name || item.title || '未命名商品')
            .join('、');
        panel.style.display = 'block';
        panel.textContent = `找到 ${momoReviewCandidates.length} 筆需人工確認候選，可能是單品、組合或單位價差異：${sampleNames}`;
    }

    async function parseMomoExcel() {
        const fileInput = document.getElementById('momoExcelFile');
        if (!fileInput.files.length) {
            showToast('請選擇檔案', 'warning');
            return;
        }

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const response = await fetch('/api/price_comparison/parse_momo_excel', {
                method: 'POST',
                headers: { 'X-CSRFToken': csrfToken },
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                momoProducts = data.data.products;
                momoUnitCompareCandidates = [];
                momoReviewCandidates = [];
                resetComparisonResult();
                document.getElementById('momoCount').textContent = `${momoProducts.length} 筆商品`;
                document.getElementById('momoCount').className = 'price-count-badge is-momo';
                renderMomoUnitComparePanel();
                renderMomoReviewPanel();
                updateCompareButton();
                renderPriceCommandDashboard();
                bootstrap.Modal.getInstance(document.getElementById('uploadModal')).hide();
                showToast(`成功解析 ${momoProducts.length} 筆 MOMO 商品`, 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            showToast('解析失敗: ' + error.message, 'danger');
        }
    }

    function parseManualInput() {
        const input = document.getElementById('manualInput').value.trim();
        if (!input) {
            showToast('請輸入商品資料', 'warning');
            return;
        }

        const lines = input.split('\n');
        const products = [];

        for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            if (!line) continue;

            // 支援逗號或 Tab 分隔
            let parts = line.split(',');
            if (parts.length < 2) {
                parts = line.split('\t');
            }
            if (parts.length < 2) {
                showToast(`第 ${i + 1} 行格式錯誤，請使用「商品名稱,價格」，例如：理膚寶水 B5修復霜,680。`, 'warning');
                return;
            }

            // 驗證價格是否為數字
            const price = parseInt(parts[1].trim());
            if (isNaN(price) || price <= 0) {
                showToast(`第 ${i + 1} 行價格格式錯誤，請輸入數字，例如：680。`, 'warning');
                return;
            }

            const rawUrl = parts[2]?.trim() || '';
            const productId = currentManualSource === 'momo'
                ? extractMomoCodeFromUrl(rawUrl)
                : `manual_${i}`;

            products.push({
                name: parts[0].trim(),
                price: price,
                product_id: productId,
                url: rawUrl
            });
        }

        if (currentManualSource === 'pchome') {
            pchomeProducts = products;
            momoProducts = [];
            momoUnitCompareCandidates = [];
            momoReviewCandidates = [];
            resetComparisonResult();
            document.getElementById('pchomeCount').textContent = `${products.length} 筆商品`;
            document.getElementById('pchomeCount').className = 'price-count-badge is-pchome';
            document.getElementById('momoCount').textContent = '0 筆同款';
            document.getElementById('momoCount').className = 'price-count-badge is-muted';
            renderMomoUnitComparePanel();
            renderMomoReviewPanel();
            updateTargetedMomoButton();
        } else {
            momoProducts = products;
            momoUnitCompareCandidates = [];
            momoReviewCandidates = [];
            resetComparisonResult();
            document.getElementById('momoCount').textContent = `${products.length} 筆商品`;
            document.getElementById('momoCount').className = 'price-count-badge is-momo';
            renderMomoUnitComparePanel();
            renderMomoReviewPanel();
        }

        updateCompareButton();
        renderPriceCommandDashboard();
        bootstrap.Modal.getInstance(document.getElementById('manualInputModal')).hide();
        document.getElementById('manualInput').value = '';
        showToast(`成功新增 ${products.length} 筆商品`, 'success');
    }

    function updateCompareButton() {
        const btn = document.getElementById('compareBtn');
        btn.disabled = !(pchomeProducts.length > 0 && momoProducts.length > 0);
    }

    function updateTargetedMomoButton() {
        const btn = document.getElementById('fetchTargetedMomoBtn');
        if (btn) btn.disabled = pchomeProducts.length === 0;
    }

    function resetComparisonResult() {
        comparisonResult = null;
        document.getElementById('resultSection').style.display = 'none';
        setText('priceResultSummary', '等待比價結果');
        setText('priceResultHeadline', '尚未產生判讀');
        setText('priceResultAdvice', '取得 PChome 與 MOMO 商品後，系統會直接整理下一步。');
        setText('priceUrgentMetric', '0');
        setText('priceGoodMetric', '0');
        setText('priceWatchMetric', '0');
    }

    function renderPriceCommandDashboard() {
        const keyword = getKeyword();
        const pchomeCount = pchomeProducts.length;
        const momoCount = momoProducts.length;
        const unitCount = momoUnitCompareCandidates.length;
        const reviewCount = momoReviewCandidates.length;
        const hasResult = Boolean(comparisonResult && Array.isArray(comparisonResult.matches));
        const matchedCount = hasResult ? comparisonResult.matches.length : 0;
        const stats = comparisonResult?.stats || {};
        const urgentCount = Number(stats.momo_cheaper_count || 0);
        const goodCount = Number(stats.pchome_cheaper_count || 0);
        const watchCount = Math.max(0, matchedCount - urgentCount - goodCount);
        const usableMomoCount = momoCount + unitCount;

        setText('heroPchomeCount', pchomeCount.toLocaleString());
        setText('heroMomoCount', usableMomoCount.toLocaleString());
        setText('heroDecisionCount', matchedCount.toLocaleString());
        setText('pricePchomeReadyText', `${pchomeCount} 筆`);
        setText(
            'priceMomoReadyText',
            reviewCount || unitCount
                ? `${momoCount} 筆同款，${unitCount} 筆單位價，${reviewCount} 筆確認`
                : `${momoCount} 筆`
        );
        setWidth('pricePchomeReadyBar', Math.min(100, pchomeCount));
        setWidth('priceMomoReadyBar', Math.min(100, momoCount + unitCount));
        renderPriceDecisionCards({ keyword, pchomeCount, momoCount, unitCount, reviewCount, matchedCount, urgentCount, goodCount, watchCount });
        renderPriceWorkflow({ keyword, pchomeCount, momoCount, unitCount, matchedCount });

        if (!keyword && !pchomeCount && !momoCount && !unitCount) {
            setText('priceReadySummary', '請先選範圍');
            setNextAction('今天先做：選擇要檢查的商品範圍', '請先選品牌或輸入關鍵字，系統才知道要抓哪一批 PChome 商品。', '輸入關鍵字', 'keyword');
            return;
        }

        if (!pchomeCount) {
            setText('priceReadySummary', '缺 PChome 商品');
            const scopeText = keyword ? `已選「${keyword}」` : '已補 MOMO 商品';
            setNextAction('今天先做：取得 PChome 商品', `${scopeText}，先取得 PChome 商品，才有業績主場可以比。`, keyword ? '取得 PChome 商品' : '輸入關鍵字', keyword ? 'fetch-pchome' : 'keyword');
            return;
        }

        if (!momoCount && unitCount) {
            setText('priceReadySummary', '已有單位價比較');
            setNextAction('今天先看：自動單位價比較', `系統已自動換算 ${unitCount} 筆候選，不需要先人工確認。`, '查看單位價', 'focus-momo-unit');
            return;
        }

        if (!momoCount && reviewCount) {
            setText('priceReadySummary', 'MOMO 候選待確認');
            setNextAction('今天先做：確認 MOMO 單品/組合候選', `已找到 ${reviewCount} 筆可能候選，但需要確認單品、組合或單位價後才能比價。`, '查看候選提醒', 'focus-momo-review');
            return;
        }

        if (!momoCount) {
            setText('priceReadySummary', '缺 MOMO 商品');
            setNextAction('今天先做：自動找 MOMO 候選', 'PChome 商品已準備好，先用 PChome 商品名稱反查 MOMO，同時保留單品與組合候選。', '自動找 MOMO 候選', 'fetch-momo');
            return;
        }

        setText('priceReadySummary', '可以比價');
        if (!hasResult) {
            setNextAction('今天先做：開始檢查價差', `兩邊資料已齊：PChome ${pchomeCount} 筆、MOMO ${momoCount} 筆。`, '開始檢查價差', 'compare');
            return;
        }

        if (urgentCount > 0) {
            setNextAction('今天先做：處理 PChome 價格偏高商品', `已找到 ${urgentCount} 筆 MOMO 較便宜商品，先檢查售價、活動組合或曝光策略。`, '查看需檢查價格', 'focus-results');
            return;
        }

        if (goodCount > 0) {
            setNextAction('今天先做：主推 PChome 有價格優勢商品', `已找到 ${goodCount} 筆 PChome 較便宜商品，適合安排曝光、文案或活動位置。`, '查看可主推商品', 'focus-results');
            return;
        }

        setNextAction('今天先做：檢查商品賣點與活動位置', '目前價格接近，差異不大，下一步看曝光、文案和活動組合。', '查看比價結果', 'focus-results');
    }

    function renderPriceDecisionCards(state) {
        const keyword = state.keyword || '';
        setDecisionCard(
            'decisionScopeCard',
            'decisionScopeValue',
            'decisionScopeDetail',
            keyword ? `檢查「${keyword}」` : '尚未選擇',
            keyword ? '範圍已確認，可以取得 PChome 商品。' : '先選品牌或輸入商品關鍵字。',
            keyword ? 'ready' : 'active'
        );
        setDecisionCard(
            'decisionPchomeCard',
            'decisionPchomeValue',
            'decisionPchomeDetail',
            state.pchomeCount ? `${state.pchomeCount.toLocaleString()} 筆商品` : '等待商品',
            state.pchomeCount ? '已可用這批商品反查 MOMO。' : '取得商品後，系統才知道要比哪一批。',
            state.pchomeCount ? 'ready' : (keyword ? 'active' : '')
        );

        const momoValue = state.momoCount
            ? `${state.momoCount.toLocaleString()} 筆同款`
            : state.unitCount
                ? `${state.unitCount.toLocaleString()} 筆單位價`
                : state.reviewCount
                    ? `${state.reviewCount.toLocaleString()} 筆待確認`
                    : '等待候選';
        const momoDetail = state.momoCount
            ? '同款可直接進入總價比對。'
            : state.unitCount
                ? '單品與組合不同，已改用單位價判讀。'
                : state.reviewCount
                    ? '需要確認單品、組合或容量後再使用。'
                    : '會自動分成同款、單位價、需確認。';
        setDecisionCard(
            'decisionMomoCard',
            'decisionMomoValue',
            'decisionMomoDetail',
            momoValue,
            momoDetail,
            state.momoCount || state.unitCount ? 'ready' : (state.pchomeCount ? 'active' : '')
        );

        const resultValue = state.matchedCount
            ? `${state.matchedCount.toLocaleString()} 筆判讀`
            : '尚未判讀';
        let resultDetail = '結果會分成檢查售價、主推曝光、觀察賣點。';
        let resultState = state.momoCount ? 'active' : '';
        if (state.matchedCount) {
            if (state.urgentCount) {
                resultDetail = `${state.urgentCount.toLocaleString()} 筆需先檢查售價或活動。`;
                resultState = 'blocked';
            } else if (state.goodCount) {
                resultDetail = `${state.goodCount.toLocaleString()} 筆可主推曝光。`;
                resultState = 'ready';
            } else {
                resultDetail = '價格接近，改看賣點、活動位置與庫存。';
                resultState = 'ready';
            }
        }
        setDecisionCard('decisionResultCard', 'decisionResultValue', 'decisionResultDetail', resultValue, resultDetail, resultState);
    }

    function setDecisionCard(cardId, valueId, detailId, value, detail, state) {
        const card = document.getElementById(cardId);
        if (card) {
            card.className = 'price-decision-card' + (
                state === 'ready' ? ' is-ready' :
                state === 'blocked' ? ' is-blocked' :
                state === 'active' ? ' is-active' : ''
            );
        }
        setText(valueId, value);
        setText(detailId, detail);
    }

    function renderPriceWorkflow(state) {
        setWorkflowState('workflowStepScope', state.keyword ? 'done' : 'current');
        setWorkflowState('workflowStepPchome', state.pchomeCount ? 'done' : (state.keyword ? 'current' : ''));
        setWorkflowState('workflowStepMomo', state.momoCount || state.unitCount ? 'done' : (state.pchomeCount ? 'current' : ''));
        setWorkflowState('workflowStepResult', state.matchedCount ? 'done' : (state.momoCount ? 'current' : ''));
    }

    function setWorkflowState(id, state) {
        const el = document.getElementById(id);
        if (!el) return;
        el.className = 'price-workflow-step' + (
            state === 'done' ? ' is-done' :
            state === 'current' ? ' is-current' : ''
        );
    }

    function setNextAction(title, reason, label, action) {
        setText('priceNextActionTitle', title);
        setText('priceNextActionReason', reason);
        const btn = document.getElementById('priceNextActionButton');
        btn.textContent = label;
        btn.dataset.action = action;
    }

    function runPriceNextAction() {
        const action = document.getElementById('priceNextActionButton').dataset.action;
        if (action === 'keyword') {
            document.getElementById('customKeyword').focus();
            return;
        }
        if (action === 'fetch-pchome') {
            fetchPchome();
            return;
        }
        if (action === 'upload-momo') {
            bootstrap.Modal.getOrCreateInstance(document.getElementById('uploadModal')).show();
            return;
        }
        if (action === 'fetch-momo') {
            fetchTargetedMomoCandidates();
            return;
        }
        if (action === 'compare') {
            runComparison();
            return;
        }
        if (action === 'focus-results') {
            document.getElementById('resultSection')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            return;
        }
        if (action === 'focus-momo-unit') {
            document.getElementById('momoUnitComparePanel')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }
        if (action === 'focus-momo-review') {
            document.getElementById('momoReviewPanel')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }

    function setText(id, value) {
        const el = document.getElementById(id);
        if (el) el.textContent = value;
    }

    function setWidth(id, value) {
        const el = document.getElementById(id);
        if (el) el.style.width = `${Math.max(0, Math.min(100, value))}%`;
    }

    async function runComparison() {
        showProgress('檢查價差中...', '正在找兩邊可確認的同款商品');

        try {
            const response = await fetchWithCSRF('/api/price_comparison/quick_compare', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    pchome_products: pchomeProducts,
                    momo_products: momoProducts
                })
            });

            const data = await response.json();
            hideProgress();

            if (data.success) {
                comparisonResult = data.data;
                displayResult(comparisonResult);
                renderPriceCommandDashboard();
                showToast(`比價完成，找到 ${comparisonResult.matched_count} 筆同款`, 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            hideProgress();
            showToast('比價失敗：' + error.message, 'danger');
        }
    }

    function displayResult(result) {
        result = result || {};
        const stats = result.stats || {};
        const matches = Array.isArray(result.matches) ? result.matches : [];
        const urgentCount = Number(stats.momo_cheaper_count || 0);
        const goodCount = Number(stats.pchome_cheaper_count || 0);
        const watchCount = Math.max(0, matches.length - urgentCount - goodCount);

        // 更新統計
        document.getElementById('matchedCount').textContent = result.matched_count || matches.length;
        document.getElementById('pchomeCheaperCount').textContent = goodCount;
        document.getElementById('momoCheaperCount').textContent = urgentCount;
        document.getElementById('avgPriceDiff').textContent = formatMoney(stats.avg_price_diff || 0);
        setText('priceUrgentText', `${urgentCount} 筆`);
        setText('priceGoodText', `${goodCount} 筆`);
        setText('priceWatchText', `${watchCount} 筆`);
        setText('priceUrgentMetric', urgentCount.toLocaleString());
        setText('priceGoodMetric', goodCount.toLocaleString());
        setText('priceWatchMetric', watchCount.toLocaleString());
        setText('priceResultSummary', matches.length ? `共找到 ${matches.length} 筆同款` : '尚未找到同款');
        if (urgentCount > 0) {
            setText('priceResultHeadline', `先處理 ${urgentCount.toLocaleString()} 筆 PChome 價格偏高商品`);
            setText('priceResultAdvice', '建議先檢查售價、折扣、組合內容與活動曝光，避免高業績商品被外部低價壓住。');
        } else if (goodCount > 0) {
            setText('priceResultHeadline', `可主推 ${goodCount.toLocaleString()} 筆 PChome 價格有利商品`);
            setText('priceResultAdvice', '建議安排首頁曝光、搜尋關鍵字、活動文案或 EDM，把價格優勢轉成流量。');
        } else if (matches.length) {
            setText('priceResultHeadline', '價格差距不大，改看內容與曝光');
            setText('priceResultAdvice', '下一步檢查商品頁賣點、圖片、庫存與活動位置，找出非價格因素。');
        } else {
            setText('priceResultHeadline', '尚未找到可判讀同款');
            setText('priceResultAdvice', '請改用更精準的商品名稱、型號或容量搜尋，或先檢查 MOMO 候選。');
        }
        const denominator = Math.max(matches.length, 1);
        setWidth('priceUrgentBar', (urgentCount / denominator) * 100);
        setWidth('priceGoodBar', (goodCount / denominator) * 100);
        setWidth('priceWatchBar', (watchCount / denominator) * 100);

        // 建立表格
        const tbody = document.getElementById('resultBody');
        tbody.innerHTML = '';

        for (const m of matches) {
            const row = document.createElement('tr');

            const similarityClass = m.similarity >= 0.8 ? 'text-success' : (m.similarity >= 0.6 ? 'text-warning' : 'text-danger');
            const actionBadge = getResultActionBadge(m);
            const gapText = formatPriceGap(m);
            const pchomeName = String(m.pchome?.name || '未命名商品');
            const momoName = String(m.momo?.name || '未命名商品');
            const pchomeId = escapeHtml(String(m.pchome?.product_id || ''));
            const momoId = escapeHtml(String(m.momo?.product_id || ''));

            // 處理 URL (可能是 url 或 product_url)
            const pchomeUrl = toSafeUrl(m.pchome?.url || m.pchome?.product_url || '');
            const momoUrl = toSafeUrl(m.momo?.url || m.momo?.product_url || '');

            row.innerHTML = `
                <td>
                    ${actionBadge}
                </td>
                <td>
                    <div class="d-flex align-items-start">
                        <div class="flex-grow-1">
                            <small class="text-truncate d-block" style="max-width: 220px;" title="${escapeHtml(pchomeName)}">
                                ${escapeHtml(pchomeName)}
                            </small>
                            <small class="text-muted">${pchomeId}</small>
                        </div>
                        ${pchomeUrl ? `<a href="${pchomeUrl}" target="_blank" class="btn btn-sm btn-outline-info ms-1" title="前往 PChome 查看"><i class="fas fa-external-link-alt"></i></a>` : ''}
                    </div>
                </td>
                <td>
                    <div class="d-flex align-items-start">
                        <div class="flex-grow-1">
                            <small class="text-truncate d-block" style="max-width: 220px;" title="${escapeHtml(momoName)}">
                                ${escapeHtml(momoName)}
                            </small>
                            <small class="text-muted">${momoId}</small>
                        </div>
                        ${momoUrl ? `<a
                            href="${momoUrl}"
                            target="_blank"
                            class="btn btn-sm btn-outline-warning ms-1 momo-tracked-link"
                            title="前往 MOMO 查看"
                            data-momo-original-url="${momoUrl}"
                            data-track-platform="momo"
                            data-track-source="price-comparison"
                            data-track-product-id="${momoId}"
                            data-track-icode="${momoId}"
                            data-track-product-name="${escapeHtml(momoName)}">
                            <i class="fas fa-external-link-alt"></i>
                        </a>` : ''}
                    </div>
                </td>
                <td class="text-center ${similarityClass}">
                    <strong>${Math.round(m.similarity * 100)}%</strong>
                </td>
                <td class="text-end ${m.cheaper_at === 'pchome' ? 'text-success fw-bold' : ''}">
                    ${formatMoney(m.pchome?.price)}
                </td>
                <td class="text-end ${m.cheaper_at === 'momo' ? 'text-warning fw-bold' : ''}">
                    ${formatMoney(m.momo?.price)}
                </td>
                <td class="text-end ${m.price_diff < 0 ? 'text-success' : (m.price_diff > 0 ? 'text-danger' : '')}">
                    ${gapText}
                </td>
            `;
            tbody.appendChild(row);
        }

        document.getElementById('resultSection').style.display = 'block';
    }

    function getResultActionBadge(match) {
        if (match.cheaper_at === 'momo') {
            return '<span class="price-action-pill is-urgent">檢查售價</span>';
        }
        if (match.cheaper_at === 'pchome') {
            return '<span class="price-action-pill is-good">主推曝光</span>';
        }
        return '<span class="price-action-pill is-watch">觀察賣點</span>';
    }

    function formatPriceGap(match) {
        const diff = Number(match.price_diff || 0);
        const pct = Number(match.price_diff_percent || 0);
        const label = diff > 0 ? 'PChome 貴' : (diff < 0 ? 'PChome 便宜' : '價格相同');
        const amount = diff === 0 ? '$0' : formatMoney(Math.abs(diff));
        const pctText = Number.isFinite(pct) ? `${Math.abs(pct).toFixed(1)}%` : '0.0%';
        return `<strong>${label} ${amount}</strong><br><small>${pctText}</small>`;
    }

    function exportResult() {
        if (!comparisonResult || !comparisonResult.matches.length) {
            showToast('沒有資料可匯出', 'warning');
            return;
        }

        const headers = ['下一步', 'PChome商品', 'MOMO商品', '相似度%', 'PChome價', 'MOMO價', '價差'];
        const rows = comparisonResult.matches.map(m => [
            `"${actionLabelForExport(m).replace(/"/g, '""')}"`,
            `"${m.pchome.name.replace(/"/g, '""')}"`,
            `"${m.momo.name.replace(/"/g, '""')}"`,
            Math.round(m.similarity * 100),
            m.pchome.price,
            m.momo.price,
            m.price_diff,
        ]);

        const csv = '\uFEFF' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
        downloadFile(csv, 'pchome_momo_price_actions.csv', 'text/csv;charset=utf-8');
    }

    function actionLabelForExport(match) {
        if (match.cheaper_at === 'momo') return '檢查 PChome 售價或活動';
        if (match.cheaper_at === 'pchome') return '安排 PChome 曝光或文案';
        return '觀察賣點與活動位置';
    }

    function showProgress(title, detail) {
        document.getElementById('progressText').textContent = title;
        document.getElementById('progressDetail').textContent = detail;
        document.getElementById('progressSection').style.display = 'block';
    }

    function hideProgress() {
        document.getElementById('progressSection').style.display = 'none';
    }

    function downloadFile(content, filename, type) {
        const blob = new Blob([content], { type });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.click();
        URL.revokeObjectURL(url);
    }

    function formatMoney(value) {
        const number = Number(value || 0);
        return `$${Math.round(number).toLocaleString('zh-TW')}`;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function toSafeUrl(value) {
        const target = String(value || '').trim();
        if (!target) return '';
        try {
            const parsed = new URL(target, location.origin);
            if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
                return escapeHtml(parsed.href);
            }
        } catch (error) {
            return '';
        }
        return '';
    }

    function extractMomoCodeFromUrl(url) {
        const target = (url || '').trim();
        if (!target) {
            return '';
        }
        try {
            const parsed = new URL(target, location.origin);
            const iCode = parsed.searchParams.get('i_code');
            if (iCode) {
                return iCode.trim();
            }
        } catch (error) {
            // ignore
        }
        const match = /[?&]i_code=([^&#]+)/i.exec(target);
        return match ? decodeURIComponent(match[1] || '').trim() : '';
    }

    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `price-toast price-toast--${type} position-fixed`;
        const closeButton = document.createElement('button');
        closeButton.type = 'button';
        closeButton.className = 'btn-close float-end';
        closeButton.addEventListener('click', () => toast.remove());
        const text = document.createElement('span');
        text.textContent = message;
        toast.appendChild(closeButton);
        toast.appendChild(text);
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 5000);
    }
</script>
{% endblock %}