{% extends 'ewoooc_base.html' %}

{% block title %}EwoooC 活動看板{% endblock %}

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

    .campaign-switcher {
        display: inline-flex;
        max-width: 100%;
        padding: 4px;
        gap: 2px;
        overflow-x: auto;
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 6px;
    }

    .campaign-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        color: var(--momo-text-secondary);
        border-radius: 4px;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        transition: var(--momo-transition-base);
    }

    .campaign-tab:hover {
        color: var(--momo-text-primary);
        background: var(--momo-bg-paper);
    }

    .campaign-tab.is-active {
        color: var(--momo-text-inverse);
        background: var(--momo-ink);
    }

    .campaign-tab-count {
        padding: 1px 6px;
        color: var(--momo-text-tertiary);
        background: var(--momo-bg-subtle);
        border-radius: var(--momo-radius-pill);
        font-size: 10px;
        font-weight: 800;
    }

    .campaign-tab.is-active .campaign-tab-count {
        color: var(--momo-text-inverse);
        background: rgba(250, 247, 240, 0.22);
    }

    .campaign-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: 12px;
    }

    .campaign-hero {
        position: relative;
        min-height: 220px;
        overflow: hidden;
        padding: 28px 32px;
        color: var(--momo-text-primary);
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
        --campaign-accent: var(--momo-warm-caramel);
    }

    .campaign-hero.is-edm {
        --campaign-accent: var(--momo-warm-caramel);
    }

    .campaign-hero.is-festival {
        --campaign-accent: var(--momo-warm-honey);
    }

    .campaign-hero.is-mothers-day {
        --campaign-accent: var(--momo-warm-rust);
    }

    .campaign-hero.is-valentine-520 {
        --campaign-accent: var(--momo-warm-mahogany);
    }

    .campaign-hero.is-labor-day {
        --campaign-accent: var(--momo-warm-earth);
    }

    .campaign-hero::before {
        position: absolute;
        inset: 0;
        content: "";
        background-image: radial-gradient(circle, rgba(42, 37, 32, 0.12) 1px, transparent 1px);
        background-size: 8px 8px;
        opacity: 0.6;
    }

    .campaign-hero::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 64px;
        height: 4px;
        content: "";
        background: var(--campaign-accent);
    }

    .campaign-hero-content {
        position: relative;
        display: flex;
        min-height: 172px;
        flex-direction: column;
        gap: 16px;
    }

    .campaign-hero-content::before {
        position: absolute;
        top: -28px;
        left: -32px;
        width: 4px;
        height: 64px;
        content: "";
        background: var(--campaign-accent);
    }

    .campaign-eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .campaign-eyebrow-label {
        padding: 3px 10px;
        color: var(--campaign-accent);
        border: 1px solid var(--campaign-accent);
        border-radius: 2px;
        background: var(--momo-bg-surface);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .campaign-title {
        margin: 0;
        color: var(--momo-text-primary);
        font-family: var(--momo-font-display);
        font-size: 40px;
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.05;
    }

    .campaign-meta-grid {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        font-size: 12px;
    }

    .campaign-meta-label {
        margin-bottom: 2px;
        color: var(--momo-text-tertiary);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.10em;
        text-transform: uppercase;
    }

    .campaign-meta-value {
        color: var(--momo-text-primary);
        font-weight: 800;
    }

    .campaign-actions {
        display: flex;
        gap: 8px;
        margin-top: auto;
        flex-wrap: wrap;
    }

    .campaign-action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 8px 14px;
        color: var(--momo-text-primary);
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 4px;
        font-size: 13px;
        font-weight: 800;
    }

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

    .campaign-kpi-panel {
        display: flex;
        flex-direction: column;
        min-height: 220px;
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
    }

    .campaign-panel-title {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--momo-border-light);
        font-size: 13px;
        font-weight: 800;
    }

    .campaign-kpi-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 0;
        flex: 1;
    }

    .campaign-kpi {
        padding: 20px;
        background: transparent;
        border-right: 1px solid var(--momo-border-light);
        border-bottom: 1px solid var(--momo-border-light);
        border-radius: 0;
    }

    .campaign-kpi:nth-child(2n) {
        border-right: 0;
    }

    .campaign-kpi:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .campaign-kpi-label {
        margin-bottom: 4px;
        color: var(--momo-text-secondary);
        font-family: var(--momo-font-family-mono);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.10em;
        text-transform: uppercase;
    }

    .campaign-kpi-value {
        color: var(--momo-text-primary);
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .campaign-panel-footer {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        color: var(--momo-text-secondary);
        background: var(--momo-bg-paper);
        border-top: 1px solid var(--momo-border-light);
        border-radius: 0 0 8px 8px;
        font-size: 11px;
    }

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

    .campaign-section-label .num {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--momo-text-tertiary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .campaign-section-label .num::after {
        display: inline-block;
        width: 56px;
        height: 6px;
        content: "";
        background-image: radial-gradient(circle, var(--momo-text-tertiary) 1px, transparent 1px);
        background-size: 6px 6px;
        opacity: 0.5;
    }

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

    .campaign-slot-tabs {
        display: flex;
        gap: 8px;
        padding-bottom: 4px;
        overflow-x: auto;
    }

    .campaign-slot-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--momo-text-secondary);
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .campaign-slot-tab.active {
        color: var(--momo-text-inverse);
        background: var(--momo-ink);
        border-color: var(--momo-ink);
    }

    .campaign-slot-count {
        color: inherit;
        font-size: 10px;
    }

    .campaign-table-card {
        overflow: hidden;
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
    }

    .campaign-table-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--momo-border-light);
        flex-wrap: wrap;
    }

    .campaign-stat-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .campaign-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        color: var(--momo-text-secondary);
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: var(--momo-radius-pill);
        font-size: 11px;
        font-weight: 800;
    }

    .campaign-filterbar {
        display: inline-flex;
        padding: 2px;
        gap: 0;
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: 4px;
        flex-wrap: wrap;
    }

    .campaign-filter-chip {
        padding: 5px 10px;
        color: var(--momo-text-secondary);
        background: transparent;
        border: 0;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 800;
    }

    .campaign-filter-chip:hover {
        color: var(--momo-text-primary);
        background: var(--momo-bg-subtle);
    }

    .campaign-filter-chip.is-active {
        color: var(--momo-text-inverse);
        background: var(--momo-ink);
    }

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

    .campaign-table {
        width: 100%;
        min-width: 1080px;
        border-collapse: collapse;
        font-size: var(--momo-font-size-sm);
    }

    .campaign-table th {
        padding: 11px 14px;
        color: var(--momo-text-inverse);
        background: var(--momo-ink);
        border-bottom: 1px solid var(--momo-border-light);
        font-family: var(--momo-font-family-mono);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .campaign-table th a {
        color: inherit;
        text-decoration: none;
    }

    .campaign-table td {
        padding: 14px;
        border-bottom: 1px solid var(--momo-border-light);
        vertical-align: middle;
    }

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

    .campaign-product-cell {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .campaign-product-thumb {
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        object-fit: cover;
        background: var(--momo-bg-paper);
        border: 1px solid var(--momo-border-light);
        border-radius: 6px;
    }

    .campaign-product-name {
        display: -webkit-box;
        overflow: hidden;
        color: var(--momo-text-primary);
        font-weight: 800;
        line-height: 1.35;
        text-decoration: none;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .campaign-product-name:hover {
        color: var(--momo-accent);
    }

    .campaign-product-id {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        color: var(--momo-text-tertiary);
        background: transparent;
        border: 0;
        font-size: 11px;
        font-family: var(--momo-font-family-mono);
        font-weight: 800;
        line-height: 1.4;
    }

    .campaign-product-id:hover {
        color: var(--momo-accent-strong);
    }

    .campaign-product-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        flex-wrap: wrap;
    }

    .campaign-category {
        display: inline-flex;
        max-width: 120px;
        padding: 3px 8px;
        overflow: hidden;
        color: var(--momo-text-primary);
        background: var(--momo-bg-subtle);
        border: 1px solid var(--momo-border-light);
        border-radius: var(--momo-radius-pill);
        font-size: 11px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .campaign-price {
        color: var(--momo-text-primary);
        font-size: 16px;
        font-weight: 800;
    }

    .campaign-history-button {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        width: 100%;
        padding: 0;
        color: var(--momo-text-primary);
        background: transparent;
        border: 0;
        font: inherit;
        text-align: right;
    }

    .campaign-history-button:hover {
        color: var(--momo-accent-strong);
    }

    .campaign-history-button i {
        color: var(--momo-accent-strong);
        font-size: 12px;
    }

    .campaign-old-price {
        color: var(--momo-text-tertiary);
        text-decoration: line-through;
    }

    .campaign-change-up {
        color: var(--momo-danger);
        font-weight: 800;
    }

    .campaign-change-down {
        color: var(--momo-success);
        font-weight: 800;
    }

    .campaign-change-pct {
        margin-left: 4px;
        color: currentColor;
        opacity: 0.72;
        font-size: 11px;
    }

    .campaign-sales-stack,
    .campaign-track-stack {
        display: grid;
        gap: 6px;
    }

    .campaign-sales-main {
        color: var(--momo-text-primary);
        font-size: 14px;
        font-weight: 900;
    }

    .campaign-sales-sub,
    .campaign-track-line {
        color: var(--momo-text-tertiary);
        font-size: 11px;
        font-weight: 800;
    }

    .campaign-tooltip-trigger {
        width: max-content;
        color: var(--momo-accent-strong);
        background: transparent;
        border: 0;
        font-size: 11px;
        font-weight: 900;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .campaign-empty {
        padding: 48px 16px;
        color: var(--momo-text-secondary);
        text-align: center;
    }

    .campaign-filter-empty.is-hidden,
    .campaign-row.is-hidden {
        display: none;
    }

    .campaign-history-modal .modal-content {
        overflow: hidden;
        color: var(--momo-text-primary);
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 8px;
        box-shadow: var(--momo-shadow-lg);
    }

    .campaign-history-modal .modal-header {
        align-items: flex-start;
        gap: 14px;
        padding: 18px 20px;
        background: var(--momo-bg-paper);
        border-bottom: 1px solid var(--momo-border-light);
    }

    .campaign-history-modal .modal-title {
        color: var(--momo-text-primary);
        font-size: 18px;
        font-weight: 800;
        line-height: 1.45;
    }

    .campaign-history-subtitle {
        margin-top: 4px;
        color: var(--momo-text-tertiary);
        font-size: 11px;
        font-weight: 700;
    }

    .campaign-history-range {
        display: inline-flex;
        padding: 2px;
        margin-top: 10px;
        gap: 0;
        background: var(--momo-bg-surface);
        border: 1px solid var(--momo-border-light);
        border-radius: 4px;
    }

    .campaign-history-range button {
        padding: 5px 10px;
        color: var(--momo-text-secondary);
        background: transparent;
        border: 0;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 800;
    }

    .campaign-history-range button.is-active {
        color: var(--momo-text-inverse);
        background: var(--momo-ink);
    }

    .campaign-chart-shell {
        position: relative;
        min-height: 360px;
    }

    .campaign-chart-state {
        display: grid;
        min-height: 360px;
        color: var(--momo-text-secondary);
        place-items: center;
        text-align: center;
    }

    .campaign-chart-state.is-hidden,
    .campaign-chart-canvas.is-hidden {
        display: none;
    }

    .campaign-chart-canvas {
        max-height: 380px;
    }

    @media (max-width: 980px) {
        .campaign-hero-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 640px) {
        .campaign-title {
            font-size: 28px;
        }

        .campaign-kpi-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
</style>
{% endblock %}

{% block ewooo_content %}
{% set current_endpoint = 'edm.' ~ current_promo_page ~ '_dashboard' %}
{% set current_stats = {'new': 0, 'up': 0, 'down': 0, 'delisted_last_run': 0, 'on_shelf': 0} %}
{% if active_tab in slot_stats %}
    {% set current_stats = slot_stats[active_tab] %}
{% elif slot_stats %}
    {% set current_stats = slot_stats.values() | list | first %}
{% endif %}
{% set task_key = 'festival_task' if current_promo_page == 'festival' else 'edm_task' %}
{% set run_list = scheduler_stats.get(task_key, []) %}
{% set latest_run = run_list[0] if run_list else None %}

<div class="campaign-stack">
    <section>
        <div class="campaign-switcher">
            {% for page in promo_pages %}
                <a class="campaign-tab {% if page.id == current_promo_page %}is-active{% endif %}" href="{{ page.url }}">
                    <span>{{ page.name }}</span>
                    {% if page.id == current_promo_page %}
                        <span class="campaign-tab-count momo-mono">{{ total_edm_products | number_format }}</span>
                    {% endif %}
                </a>
            {% endfor %}
        </div>
    </section>

    <section class="campaign-hero-grid">
        <div class="campaign-hero is-{{ current_promo_page|replace('_', '-') }}">
            <div class="campaign-hero-content">
                <div class="campaign-eyebrow">
                    <span class="campaign-eyebrow-label">CAMPAIGN</span>
                    <span class="momo-mono" style="font-size:11px;color:var(--momo-text-tertiary);">ID · {{ current_promo_page|upper }}</span>
                </div>
                <h1 class="campaign-title">{{ page_title }}</h1>
                <div class="campaign-meta-grid momo-mono">
                    <div>
                        <div class="campaign-meta-label">活動時段</div>
                        <div class="campaign-meta-value">{{ activity_time }}</div>
                    </div>
                    <div>
                        <div class="campaign-meta-label">最後更新</div>
                        <div class="campaign-meta-value">{{ last_update }}</div>
                    </div>
                    <div>
                        <div class="campaign-meta-label">商品總數</div>
                        <div class="campaign-meta-value" style="font-size:20px;">{{ total_edm_products | number_format }}</div>
                    </div>
                </div>

                <div class="campaign-actions">
                    {% if current_promo_page == 'edm' %}
                        <button class="campaign-action" type="button" onclick="triggerEdmTask()">
                            <i class="fas fa-rotate"></i> 手動更新
                        </button>
                        <button class="campaign-action is-light" type="button" onclick="triggerNotification()">
                            <i class="fas fa-bell"></i> 發送通知
                        </button>
                    {% elif current_promo_page == 'festival' %}
                        <button class="campaign-action" type="button" onclick="triggerFestivalTask()">
                            <i class="fas fa-rotate"></i> 手動更新
                        </button>
                    {% endif %}
                </div>
            </div>
        </div>

        <aside class="campaign-kpi-panel">
            <div class="campaign-panel-title">
                <i class="fas fa-chart-line"></i>
                <span>活動數據</span>
            </div>
            <div class="campaign-kpi-grid">
                <div class="campaign-kpi">
                    <div class="campaign-kpi-label">上架商品</div>
                    <div class="campaign-kpi-value momo-mono">{{ current_stats.get('on_shelf', 0) | number_format }}</div>
                </div>
                <div class="campaign-kpi">
                    <div class="campaign-kpi-label">新品</div>
                    <div class="campaign-kpi-value momo-mono" style="color:var(--momo-info);">{{ current_stats.get('new', 0) | number_format }}</div>
                </div>
                <div class="campaign-kpi">
                    <div class="campaign-kpi-label">漲價</div>
                    <div class="campaign-kpi-value momo-mono" style="color:var(--momo-danger);">{{ current_stats.get('up', 0) | number_format }}</div>
                </div>
                <div class="campaign-kpi">
                    <div class="campaign-kpi-label">降價</div>
                    <div class="campaign-kpi-value momo-mono" style="color:var(--momo-success);">{{ current_stats.get('down', 0) | number_format }}</div>
                </div>
            </div>
            <div class="campaign-panel-footer momo-mono">
                {% if latest_run %}
                    <span class="momo-live-dot"></span>
                    <span>排程 · {{ latest_run.last_run }}</span>
                    <span>|</span>
                    <span>異動 {{ latest_run.get('changed_records', 0) }} 筆</span>
                {% else %}
                    <span>尚無排程紀錄</span>
                {% endif %}
            </div>
        </aside>
    </section>

    <section>
        <div class="campaign-section-label">
            <span class="num momo-mono">02</span>
            <span class="title">時段</span>
        </div>
        {% if slot_stats %}
            <div class="campaign-slot-tabs" role="tablist">
                {% for slot, stats in slot_stats.items() %}
                    {% set slot_id = slugify(slot) %}
                    <button class="campaign-slot-tab {% if slot == active_tab %}active{% endif %}" id="slot-{{ slot_id }}-tab" data-bs-toggle="tab" data-bs-target="#slot-{{ slot_id }}" type="button" role="tab">
                        <span class="momo-mono">{{ slot }}</span>
                        <span class="campaign-slot-count momo-mono">{{ stats.get('on_shelf', 0) }} 件</span>
                    </button>
                {% endfor %}
            </div>
        {% else %}
            <div class="campaign-table-card">
                <div class="campaign-empty">目前沒有可顯示的活動時段資料</div>
            </div>
        {% endif %}
    </section>

    {% if slot_stats %}
        <section class="tab-content">
            {% for slot, stats in slot_stats.items() %}
                {% set slot_id = slugify(slot) %}
                {% set items = grouped_items.get(slot, []) %}
                <div class="tab-pane fade {% if slot == active_tab %}show active{% endif %}" id="slot-{{ slot_id }}" role="tabpanel">
                    <div class="campaign-table-card">
                        <div class="campaign-table-head">
                            <span class="momo-mono" style="font-size:11px;font-weight:800;color:var(--momo-text-tertiary);letter-spacing:.08em;">03</span>
                            <strong>商品列表</strong>
                            <span class="momo-mono" data-campaign-visible-count style="color:var(--momo-text-tertiary);font-size:12px;">{{ items|length }} 筆</span>
                            <div class="campaign-filterbar" aria-label="{{ slot }} 商品狀態篩選">
                                <button class="campaign-filter-chip is-active" type="button" data-campaign-filter="all">全部 {{ items|length }}</button>
                                <button class="campaign-filter-chip" type="button" data-campaign-filter="new">新品 {{ stats.get('new', 0) }}</button>
                                <button class="campaign-filter-chip" type="button" data-campaign-filter="up">漲價 {{ stats.get('up', 0) }}</button>
                                <button class="campaign-filter-chip" type="button" data-campaign-filter="down">降價 {{ stats.get('down', 0) }}</button>
                                <button class="campaign-filter-chip" type="button" data-campaign-filter="delisted">下架 {{ stats.get('delisted_last_run', 0) }}</button>
                            </div>
                        </div>
                        <div class="campaign-table-wrap">
                            <table class="campaign-table">
                                <thead>
                                    <tr>
                                        <th>分類 / 狀態</th>
                                        <th>
                                            {% set next_order_name = 'asc' if current_sort == 'name' and current_order == 'desc' else 'desc' %}
                                            <a href="{{ url_for(current_endpoint, sort_by='name', order=next_order_name) }}">商品資訊</a>
                                        </th>
                                        <th class="text-end">
                                            {% set next_order_price = 'asc' if current_sort == 'price' and current_order == 'desc' else 'desc' %}
                                            <a href="{{ url_for(current_endpoint, sort_by='price', order=next_order_price) }}">價格</a>
                                        </th>
                                        <th class="text-center">
                                            {% if current_promo_page == 'edm' %}
                                                {% set next_order_qty = 'asc' if current_sort == 'remain_qty' and current_order == 'desc' else 'desc' %}
                                                <a href="{{ url_for(current_endpoint, sort_by='remain_qty', order=next_order_qty) }}">銷售 / 庫存</a>
                                            {% else %}
                                                狀態
                                            {% endif %}
                                        </th>
                                        <th>追蹤資訊</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in items %}
                                        {% set campaign_filter = 'new' if item.status_change == 'NEW' else ('up' if item.status_change == 'PRICE_UP' else ('down' if item.status_change == 'PRICE_DOWN' else ('delisted' if item.status_change in ['DELISTED', 'SLOT_END'] else 'active'))) %}
                                        <tr class="campaign-row" data-campaign-row data-campaign-filter="{{ campaign_filter }}" data-i-code="{{ item.i_code }}" data-product-name="{{ item.name|e }}">
                                            <td>
                                                <span class="campaign-category">{{ item.main_category or '未分類' }}</span>
                                            </td>
                                            <td>
                                                <div class="campaign-product-cell">
                                                    {% if item.image_url %}
                                                        <img class="campaign-product-thumb" src="{{ item.image_url }}" alt="{{ item.name }}" loading="lazy" referrerpolicy="no-referrer">
                                                    {% else %}
                                                        <div class="campaign-product-thumb d-flex align-items-center justify-content-center" style="color:var(--momo-text-tertiary);font-size:11px;">無圖</div>
                                                    {% endif %}
                                                    <div>
                                                        <a class="campaign-product-name momo-tracked-link" href="{{ item.safe_product_url or '#' }}" target="_blank" rel="noopener noreferrer" data-momo-original-url="{{ item.safe_product_url or '#' }}"
                                                            data-track-platform="momo"
                                                            data-track-source="edm-dashboard-v2-table"
                                                            data-track-product-id="{{ item.i_code }}"
                                                            data-track-icode="{{ item.i_code }}"
                                                            data-track-product-name="{{ item.name|e }}">{{ item.name }}</a>
                                                        <button
                                                            class="campaign-product-id"
                                                            type="button"
                                                            data-campaign-copy="{{ item.i_code }}"
                                                            title="複製 MOMO 商品 ID"
                                                        >
                                                            MOMO {{ item.i_code }} <i class="far fa-copy" aria-hidden="true"></i>
                                                        </button>
                                                        <div class="campaign-product-meta">
                                                            {% if item.status_change == 'NEW' %}
                                                                <span class="campaign-badge">NEW</span>
                                                            {% elif item.status_change == 'PRICE_DOWN' %}
                                                                <span class="campaign-badge" style="color:var(--momo-success);">降價</span>
                                                            {% elif item.status_change == 'PRICE_UP' %}
                                                                <span class="campaign-badge" style="color:var(--momo-danger);">漲價</span>
                                                            {% elif item.status_change in ['DELISTED', 'SLOT_END'] %}
                                                                <span class="campaign-badge">下架</span>
                                                            {% endif %}
                                                            {% if item.discount_text %}
                                                                <span class="campaign-badge">{{ item.discount_text }}</span>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-end momo-mono">
                                                {% if item.previous_price and item.price and item.previous_price != item.price %}
                                                    {% set diff = item.price - item.previous_price %}
                                                    {% set percent = ((diff|abs) / item.previous_price * 100) | round(1) %}
                                                    {% if diff < 0 %}
                                                        <div class="campaign-change-down">▼ {{ (diff|abs) | number_format }}<span class="campaign-change-pct">{{ percent }}%</span></div>
                                                    {% else %}
                                                        <div class="campaign-change-up">▲ {{ diff | number_format }}<span class="campaign-change-pct">{{ percent }}%</span></div>
                                                    {% endif %}
                                                    <div><span class="campaign-old-price">${{ item.previous_price | number_format }}</span></div>
                                                    <button
                                                        class="campaign-history-button"
                                                        type="button"
                                                        data-campaign-history-trigger
                                                        data-i-code="{{ item.i_code }}"
                                                        data-product-name="{{ item.name|e }}"
                                                        onclick="event.stopPropagation(); showCampaignHistory(this.dataset.iCode, this.dataset.productName);"
                                                        aria-label="查看 {{ item.name|e }} 的歷史價格圖表"
                                                    >
                                                        <span class="campaign-price">${{ item.price | number_format }}</span>
                                                        <i class="fas fa-chart-line" aria-hidden="true"></i>
                                                    </button>
                                                {% elif item.price is not none %}
                                                    <button
                                                        class="campaign-history-button"
                                                        type="button"
                                                        data-campaign-history-trigger
                                                        data-i-code="{{ item.i_code }}"
                                                        data-product-name="{{ item.name|e }}"
                                                        onclick="event.stopPropagation(); showCampaignHistory(this.dataset.iCode, this.dataset.productName);"
                                                        aria-label="查看 {{ item.name|e }} 的歷史價格圖表"
                                                    >
                                                        <span class="campaign-price">${{ item.price | number_format }}</span>
                                                        <i class="fas fa-chart-line" aria-hidden="true"></i>
                                                    </button>
                                                {% else %}
                                                    <span style="color:var(--momo-text-tertiary);">--</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-center momo-mono">
                                                {% if current_promo_page == 'edm' %}
                                                    <div class="campaign-sales-stack">
                                                        {% if item.remain_qty is not none %}
                                                            <div class="campaign-sales-main">剩 {{ item.remain_qty | number_format }} 組</div>
                                                        {% else %}
                                                            <div class="campaign-sales-main" style="color:var(--momo-text-tertiary);">--</div>
                                                        {% endif %}
                                                        <div class="campaign-sales-sub">已售 {{ item.total_sold | default(0) | number_format }} 組</div>
                                                        {% if item.qty_history and item.qty_history|length > 1 %}
                                                            {% set tooltip_content %}
                                                                <div class='text-start p-1'>
                                                                    <strong>當日銷售歷程</strong><br>
                                                                    {% for h in item.qty_history %}
                                                                        <small>{{ h.time }}</small> &nbsp; 剩 {{ h.qty }} 組<br>
                                                                    {% endfor %}
                                                                </div>
                                                            {% endset %}
                                                            <button
                                                                class="campaign-tooltip-trigger"
                                                                type="button"
                                                                data-bs-toggle="tooltip"
                                                                data-bs-html="true"
                                                                title="{{ tooltip_content }}"
                                                            >銷售歷程</button>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <span class="campaign-badge">{{ item.status_change or '活動中' }}</span>
                                                {% endif %}
                                            </td>
                                            <td class="momo-mono">
                                                <div class="campaign-track-stack">
                                                    <div class="campaign-track-line">上架 {{ item.days_on_shelf | default(1) }} 天</div>
                                                    <div class="campaign-track-line">時段 {{ item.time_slot or slot }}</div>
                                                    <div class="campaign-track-line">
                                                        {% if item.crawled_at %}
                                                            {{ item.crawled_at.strftime('%m/%d %H:%M') }}
                                                        {% else %}
                                                            --
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td colspan="5">
                                                <div class="campaign-empty">此時段目前沒有商品資料</div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    <tr class="campaign-filter-empty is-hidden">
                                        <td colspan="5">
                                            <div class="campaign-empty">此篩選條件目前沒有商品資料</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </section>
    {% endif %}
</div>

<div class="modal fade campaign-history-modal" id="campaignHistoryModal" tabindex="-1" aria-labelledby="campaignHistoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="campaignHistoryModalLabel">歷史價格走勢</h5>
                    <div class="campaign-history-subtitle momo-mono" id="campaignHistoryModalSubtitle">真實價格紀錄</div>
                    <div class="campaign-history-range" aria-label="價格歷史區間">
                        <button type="button" data-campaign-history-range="week">週</button>
                        <button class="is-active" type="button" data-campaign-history-range="month">月</button>
                        <button type="button" data-campaign-history-range="quarter">季</button>
                        <button type="button" data-campaign-history-range="year">年</button>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
            </div>
            <div class="modal-body">
                <div class="campaign-chart-shell">
                    <div class="campaign-chart-state" id="campaignHistoryChartState">載入價格歷史中...</div>
                    <canvas class="campaign-chart-canvas is-hidden" id="campaignPriceChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let campaignPriceChartInstance = null;
    let activeCampaignHistoryRange = 'month';
    let currentCampaignICode = null;
    let currentCampaignProductName = '';

    function getCSRFToken() {
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    }

    function copyCampaignProductId(text, element) {
        if (!text) return;
        const originalHtml = element.innerHTML;
        const showFeedback = () => {
            element.innerHTML = '已複製 <i class="fas fa-check" aria-hidden="true"></i>';
            setTimeout(() => {
                element.innerHTML = originalHtml;
            }, 1200);
        };

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text).then(showFeedback);
            return;
        }

        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        try {
            document.execCommand('copy');
            showFeedback();
        } finally {
            document.body.removeChild(textarea);
        }
    }

    function formatCampaignPriceTick(value) {
        return '$' + Number(value || 0).toLocaleString();
    }

    function setCampaignHistoryChartState(message, showCanvas = false) {
        const state = document.getElementById('campaignHistoryChartState');
        const canvas = document.getElementById('campaignPriceChart');
        if (!state || !canvas) return;
        state.textContent = message;
        state.classList.toggle('is-hidden', showCanvas);
        canvas.classList.toggle('is-hidden', !showCanvas);
    }

    function destroyCampaignPriceChart() {
        if (campaignPriceChartInstance) {
            campaignPriceChartInstance.destroy();
            campaignPriceChartInstance = null;
        }
    }

    function updateCampaignHistoryRangeButtons() {
        document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
            button.classList.toggle('is-active', button.dataset.campaignHistoryRange === activeCampaignHistoryRange);
        });
    }

    function showCampaignHistory(iCode, productName, range = activeCampaignHistoryRange) {
        const modalEl = document.getElementById('campaignHistoryModal');
        const title = document.getElementById('campaignHistoryModalLabel');
        const subtitle = document.getElementById('campaignHistoryModalSubtitle');
        const canvas = document.getElementById('campaignPriceChart');

        if (!modalEl || !title || !subtitle || !canvas) return;

        currentCampaignICode = iCode;
        currentCampaignProductName = productName || '歷史價格走勢';
        activeCampaignHistoryRange = range;
        updateCampaignHistoryRangeButtons();

        title.textContent = currentCampaignProductName;
        subtitle.textContent = `商品 ID ${iCode} · 讀取真實價格紀錄`;
        destroyCampaignPriceChart();
        setCampaignHistoryChartState('載入價格歷史中...');

        const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
        modal.show();

        if (typeof Chart === 'undefined') {
            setCampaignHistoryChartState('圖表元件尚未載入完成，請重新整理後再試。');
            return;
        }

        fetch(`/api/history/i-code/${encodeURIComponent(iCode)}?range=${activeCampaignHistoryRange}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                return response.json();
            })
            .then(payload => {
                const points = payload.data || [];
                if (payload.range_label) {
                    subtitle.textContent = `商品 ID ${iCode} · ${payload.range_label}真實價格紀錄`;
                }

                if (!Array.isArray(points) || points.length === 0) {
                    setCampaignHistoryChartState('目前沒有可顯示的歷史價格紀錄。');
                    return;
                }

                setCampaignHistoryChartState('', true);
                const ctx = canvas.getContext('2d');
                const gradient = ctx.createLinearGradient(0, 0, 0, 380);
                gradient.addColorStop(0, 'rgba(190, 106, 45, 0.26)');
                gradient.addColorStop(1, 'rgba(190, 106, 45, 0.04)');

                campaignPriceChartInstance = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: points.map(point => point.t),
                        datasets: [{
                            label: '價格',
                            data: points.map(point => point.p),
                            borderColor: '#be6a2d',
                            backgroundColor: gradient,
                            borderWidth: 3,
                            fill: true,
                            tension: 0.35,
                            pointRadius: 3,
                            pointHoverRadius: 7,
                            pointBackgroundColor: '#be6a2d',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false
                        },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: 'rgba(55, 45, 35, 0.94)',
                                titleColor: '#faf7f0',
                                bodyColor: '#faf7f0',
                                borderColor: '#be6a2d',
                                borderWidth: 1,
                                displayColors: false,
                                padding: 12,
                                callbacks: {
                                    label: context => '價格 ' + formatCampaignPriceTick(context.parsed.y)
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: false,
                                grid: {
                                    color: 'rgba(71, 61, 49, 0.08)'
                                },
                                ticks: {
                                    color: '#7f715f',
                                    callback: formatCampaignPriceTick
                                }
                            },
                            x: {
                                grid: { display: false },
                                ticks: {
                                    color: '#9b8a77',
                                    maxRotation: 0,
                                    autoSkip: true,
                                    maxTicksLimit: 8
                                }
                            }
                        }
                    }
                });
            })
            .catch(error => {
                console.error('活動商品價格歷史載入失敗:', error);
                setCampaignHistoryChartState('價格歷史載入失敗，請稍後再試。');
            });
    }

    function applyCampaignFilter(card, filter) {
        const rows = Array.from(card.querySelectorAll('[data-campaign-row]'));
        const empty = card.querySelector('.campaign-filter-empty');
        const counter = card.querySelector('[data-campaign-visible-count]');
        let visibleCount = 0;

        rows.forEach(row => {
            const matches = filter === 'all' || row.dataset.campaignFilter === filter;
            row.classList.toggle('is-hidden', !matches);
            if (matches) visibleCount += 1;
        });

        if (empty) {
            empty.classList.toggle('is-hidden', visibleCount !== 0);
        }

        if (counter) {
            counter.textContent = `${visibleCount.toLocaleString()} 筆`;
        }
    }

    document.querySelectorAll('.campaign-table-card').forEach(card => {
        card.querySelectorAll('[data-campaign-filter]').forEach(button => {
            button.addEventListener('click', () => {
                card.querySelectorAll('[data-campaign-filter]').forEach(item => {
                    item.classList.toggle('is-active', item === button);
                });
                applyCampaignFilter(card, button.dataset.campaignFilter);
            });
        });
    });

    document.querySelectorAll('[data-campaign-copy]').forEach(button => {
        button.addEventListener('click', event => {
            event.stopPropagation();
            copyCampaignProductId(button.dataset.campaignCopy, button);
        });
    });

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => {
        bootstrap.Tooltip.getOrCreateInstance(element);
    });

    document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
        button.addEventListener('click', () => {
            if (!currentCampaignICode) return;
            showCampaignHistory(currentCampaignICode, currentCampaignProductName, button.dataset.campaignHistoryRange);
        });
    });

    function triggerEdmTask() {
        if (confirm('確定要手動執行 EDM 爬蟲嗎？')) {
            fetch('/api/run_edm_task', {
                method: 'POST',
                headers: { 'X-CSRFToken': getCSRFToken() }
            })
                .then(response => response.json())
                .then(data => alert(data.message))
                .catch(error => alert('錯誤: ' + error));
        }
    }

    function triggerFestivalTask() {
        if (confirm('確定要手動執行節慶活動爬蟲嗎？')) {
            fetch('/api/run_festival_task', {
                method: 'POST',
                headers: { 'X-CSRFToken': getCSRFToken() }
            })
                .then(response => response.json())
                .then(data => alert(data.message))
                .catch(error => alert('錯誤: ' + error));
        }
    }

    function triggerNotification() {
        if (confirm('確定要發送 EDM 活動通知嗎？')) {
            fetch('/api/trigger_edm_notification', {
                method: 'POST',
                headers: { 'X-CSRFToken': getCSRFToken() }
            })
                .then(response => response.json())
                .then(data => alert(data.message))
                .catch(error => alert('錯誤: ' + error));
        }
    }

    function trackMomoLinkClick(event) {
        const link = event.target.closest('.momo-tracked-link');
        if (!link) {
            return;
        }

        const href = link.getAttribute('href') || '';
        const originalHref = link.dataset.momoOriginalUrl || href;
        if (!href || href === '#') {
            return;
        }

        const payload = {
            url: originalHref,
            page: location.pathname,
            source: link.dataset.trackSource || 'unknown',
            platform: link.dataset.trackPlatform || 'momo',
            product_id: link.dataset.trackProductId || '',
            i_code: link.dataset.trackIcode || '',
            product_name: link.dataset.trackProductName || '',
            label: (link.textContent || '').trim(),
            effective_url: href
        };

        const isBlocked = isBlockedMomoUrl(href);

        if (isBlocked) {
            console.warn('[EDM Dashboard V2] 嘗試打開 MOMO 404 網址', payload);
            event.preventDefault();

            const fallbackUrl = link.dataset.momoFallbackUrl || getSafeMomoFallbackUrl(link);
            if (fallbackUrl && fallbackUrl !== '#' && fallbackUrl !== href) {
                link.dataset.momoFallbackUrl = fallbackUrl;
                link.setAttribute('href', fallbackUrl);
                payload.effective_url = fallbackUrl;
                openMomoUrl(link, fallbackUrl);
                fetch('/api/track_momo_link', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCSRFToken()
                    },
                    body: JSON.stringify(payload)
                }).catch(() => {});
                return;
            }
        }

        fetch('/api/track_momo_link', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCSRFToken()
            },
            body: JSON.stringify(payload)
        }).catch(() => {});
    }

    function getSafeMomoFallbackUrl(link) {
        const iCode = (link.dataset.trackIcode || link.dataset.trackProductId || '').trim();
        if (!isLikelyMomoProductCode(iCode)) {
            return '#';
        }
        return `https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=${encodeURIComponent(iCode)}`;
    }

    function isBlockedMomoUrl(url) {
        const lowered = (url || '').toLowerCase();
        if (lowered.includes('EC404.html') || lowered.includes('ec404')) {
            return true;
        }
        try {
            const parsed = new URL(url, location.origin);
            const path = (parsed.pathname || '').toLowerCase();
            if (!path.includes('goodsdetail')) {
                return false;
            }
            const code = (parsed.searchParams.get('i_code') || '').trim();
            if (code) {
                return !isLikelyMomoProductCode(code);
            }
            return !/\/goodsdetail\/[^/?#]+/i.test(path);
        } catch (error) {
            if (!/goodsdetail\.jsp/i.test(lowered)) {
                return false;
            }
            const hasCode = /[?&]i_code=([^&#]+)/i.test(lowered);
            if (!hasCode) {
                return true;
            }
            const match = /[?&]i_code=([^&#]+)/i.exec(lowered);
            const code = match ? (match[1] || '').trim() : '';
            return !isLikelyMomoProductCode(code);
        }
    }

    function isLikelyMomoProductCode(value) {
        const cleaned = (value || '').trim();
        if (!cleaned) {
            return false;
        }
        const lowered = cleaned.toLowerCase();
        if (lowered === 'nan' || lowered === 'none' || lowered === 'null' || lowered === 'undefined') {
            return false;
        }
        if (lowered.startsWith('momo_') || lowered.startsWith('manual_') || lowered.startsWith('pchome_')) {
            return false;
        }
        return /^[A-Za-z0-9_-]{4,}$/.test(cleaned);
    }

    function openMomoUrl(link, url) {
        if (!url || url === '#') {
            return;
        }

        const target = (link.getAttribute('target') || '_self').toLowerCase();
        if (target === '_blank') {
            window.open(url, '_blank', 'noopener,noreferrer');
            return;
        }

        if (target === '_self' || target === '') {
            window.location.href = url;
            return;
        }

        window.open(url, target);
    }

    document.addEventListener('click', trackMomoLinkClick);
</script>
{% endblock %}
