<!-- cspell:ignore MOMO datatables Treemap -->
<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>業績分析 - WOOO TECH</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
    <!-- V-New: Flatpickr 日期選擇器 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
    <!-- V-Fix: 使用 Chart.js v3.9.1 以確保與 Treemap v2.0.2 相容 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@2.0.2/dist/chartjs-chart-treemap.min.js"></script>
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f4f6f9;
            padding-top: 70px;
        }

        .navbar-dark.bg-primary {
            background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        }

        .navbar-dark .navbar-brand {
            color: #ffffff !important;
            font-weight: 600;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            transition: all 0.3s;
        }

        .navbar-dark .navbar-nav .nav-link:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 6px;
        }

        .navbar-dark .navbar-nav .nav-link.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 6px;
            font-weight: 600;
        }

        .navbar-dark .navbar-text {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        .navbar {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
        }

        /* V-Fix: 防止導航列 dropdown 展開時背景變黑 */
        .navbar-dark .nav-link.active,
        .navbar-dark .nav-link.show,
        .navbar-dark .nav-link:focus {
            background-color: transparent !important;
        }

        .navbar-dark .dropdown-toggle.active::after,
        .navbar-dark .dropdown-toggle.show::after {
            color: #fff !important;
        }

        /* V-Opt: 現代化卡片風格 */
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            background: #fff;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }

        .card-header {
            background-color: transparent;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-weight: 700;
            color: #2c3e50;
            padding: 1.25rem;
        }

        /* V-Opt: 表單控制項優化 */
        .form-label {
            font-weight: 600;
            font-size: 0.85rem;
            color: #6c757d;
            margin-bottom: 0.4rem;
        }

        .input-group-text {
            background-color: #f8f9fa;
            border-color: #dee2e6;
            color: #6c757d;
        }

        .form-control,
        .form-select {
            border-color: #dee2e6;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-size: 0.95rem;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
        }

        .btn {
            border-radius: 8px;
            padding: 0.6rem 1.2rem;
            font-weight: 600;
            transition: all 0.2s;
        }

        /* V-Fix: 確保下拉選單能正確顯示並在所有內容之上 */
        .dropdown-menu {
            z-index: 1050 !important;
        }

        .kpi-card {
            position: relative;
            overflow: hidden;
            border: none;
        }

        .kpi-card .icon-bg {
            position: absolute;
            right: -15px;
            bottom: -15px;
            font-size: 6rem;
            opacity: 0.15;
            transform: rotate(-15deg);
            pointer-events: none;
        }

        .kpi-value {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 0.2rem;
        }

        .kpi-label {
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.9;
        }

        .table th {
            font-weight: 600;
            color: #495057;
            background-color: #f8f9fa;
        }

        .text-truncate-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Loading Overlay */
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 245, 255, 0.95) 100%);
            z-index: 9999;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 25px;
            backdrop-filter: blur(8px);
        }

        /* LOGO 動畫容器 */
        #loadingOverlay .loading-logo-container {
            position: relative;
            width: 160px;
            height: 160px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #loadingOverlay .loading-logo {
            z-index: 3;
            animation: cloud-float 3s ease-in-out infinite;
            /* V-Fix: 極簡設計 - 純漸層文字 */
            font-size: 2.5rem;
            font-weight: 800;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 4px;
            filter: drop-shadow(0 4px 15px rgba(79, 70, 229, 0.4));
        }


        /* V-New: 雲端飄動動畫 - 上下+左右微移動 */
        @keyframes cloud-float {

            0%,
            100% {
                transform: translateY(0) translateX(0) scale(1);
            }

            25% {
                transform: translateY(-15px) translateX(5px) scale(1.02);
            }

            50% {
                transform: translateY(-8px) translateX(-3px) scale(1);
            }

            75% {
                transform: translateY(-20px) translateX(3px) scale(1.01);
            }
        }

        @keyframes logo-float {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            25% {
                transform: translateY(-8px) rotate(2deg);
            }

            50% {
                transform: translateY(-12px) rotate(0deg);
            }

            75% {
                transform: translateY(-8px) rotate(-2deg);
            }
        }

        /* 外層旋轉光環 */
        #loadingOverlay .logo-ring {
            position: absolute;
            width: 150px;
            height: 150px;
            border: 4px solid transparent;
            border-top-color: #4F46E5;
            border-right-color: #7C3AED;
            border-radius: 50%;
            animation: ring-spin 2s linear infinite;
        }

        /* 內層反向旋轉光環 */
        #loadingOverlay .logo-ring-inner {
            position: absolute;
            width: 120px;
            height: 120px;
            border: 3px solid transparent;
            border-bottom-color: #EC4899;
            border-left-color: #F59E0B;
            border-radius: 50%;
            animation: ring-spin-reverse 1.5s linear infinite;
        }

        /* 脈衝光暈 */
        #loadingOverlay .logo-pulse {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(79, 70, 229, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            animation: pulse-expand 2s ease-out infinite;
        }

        @keyframes ring-spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes ring-spin-reverse {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }

        @keyframes pulse-expand {
            0% {
                transform: scale(0.8);
                opacity: 1;
            }

            100% {
                transform: scale(1.8);
                opacity: 0;
            }
        }

        /* 環繞粒子 */
        #loadingOverlay .orbit-particles {
            position: absolute;
            width: 160px;
            height: 160px;
            animation: orbit-rotate 4s linear infinite;
        }

        #loadingOverlay .orbit-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, #4F46E5, #7C3AED);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(79, 70, 229, 0.8);
        }

        #loadingOverlay .orbit-particle:nth-child(1) {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        #loadingOverlay .orbit-particle:nth-child(2) {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

        #loadingOverlay .orbit-particle:nth-child(3) {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        #loadingOverlay .orbit-particle:nth-child(4) {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        @keyframes orbit-rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 閃爍星星 */
        #loadingOverlay .sparkles {
            position: absolute;
            width: 180px;
            height: 180px;
        }

        #loadingOverlay .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #FCD34D;
            border-radius: 50%;
            animation: sparkle-twinkle 1.5s ease-in-out infinite;
        }

        #loadingOverlay .sparkle:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }

        #loadingOverlay .sparkle:nth-child(2) {
            top: 5%;
            right: 25%;
            animation-delay: 0.3s;
        }

        #loadingOverlay .sparkle:nth-child(3) {
            bottom: 15%;
            right: 15%;
            animation-delay: 0.6s;
        }

        #loadingOverlay .sparkle:nth-child(4) {
            bottom: 10%;
            left: 25%;
            animation-delay: 0.9s;
        }

        #loadingOverlay .sparkle:nth-child(5) {
            top: 30%;
            left: 5%;
            animation-delay: 1.2s;
        }

        #loadingOverlay .sparkle:nth-child(6) {
            top: 25%;
            right: 5%;
            animation-delay: 0.4s;
        }

        @keyframes sparkle-twinkle {

            0%,
            100% {
                transform: scale(0);
                opacity: 0;
            }

            50% {
                transform: scale(1);
                opacity: 1;
            }
        }

        #loadingOverlay .loading-text {
            font-size: 1.2rem;
            color: #4F46E5;
            font-weight: 600;
            text-align: center;
            letter-spacing: 0.5px;
        }

        #loadingOverlay .loading-hint {
            font-size: 0.85rem;
            color: #6b7280;
            text-align: center;
            max-width: 300px;
        }

        #loadingOverlay .loading-progress {
            width: 200px;
            height: 4px;
            background: rgba(79, 70, 229, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }

        #loadingOverlay .loading-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #4F46E5, #7C3AED, #4F46E5);
            background-size: 200% 100%;
            animation: progress-flow 1.5s linear infinite;
            width: 100%;
        }

        @keyframes progress-flow {
            0% {
                background-position: 100% 0;
            }

            100% {
                background-position: -100% 0;
            }
        }

        /* V-New: Flatpickr 樣式優化 */
        .flatpickr-input {
            cursor: pointer;
        }

        .flatpickr-calendar {
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
            border: none !important;
        }

        .flatpickr-day.selected {
            background: #3498db !important;
            border-color: #3498db !important;
        }

        .flatpickr-day.selected:hover {
            background: #2980b9 !important;
        }

        .flatpickr-day:hover {
            background: #ecf0f1;
            border-color: #ecf0f1;
        }

        .flatpickr-months .flatpickr-month {
            background: #3498db;
            color: white;
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months {
            background: #3498db;
        }

        .flatpickr-current-month .numInputWrapper {
            color: white;
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
            background: #2980b9;
        }

        /* Custom Dark Gray Navbar */
        .navbar.bg-custom-dark {
            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .navbar.bg-custom-dark .navbar-brand {
            color: #ffffff;
            font-weight: 600;
        }

        .navbar.bg-custom-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
        }

        .navbar.bg-custom-dark .navbar-nav .nav-link:hover {
            color: #ffffff;
        }

        .navbar.bg-custom-dark .navbar-nav .nav-link.active {
            color: #ffffff;
            font-weight: 600;
        }

        .navbar.bg-custom-dark .navbar-text {
            color: rgba(255, 255, 255, 0.75);
        }
    </style>
</head>

<body class="bg-body-tertiary">
    {% include 'components/_navbar.html' %}

    <!-- Loading Overlay -->
    <div id="loadingOverlay">
        <div class="loading-logo-container">
            <!-- 脈衝光暈 -->
            <div class="logo-pulse"></div>
            <!-- 外層旋轉光環 -->
            <div class="logo-ring"></div>
            <!-- 內層反向旋轉光環 -->
            <div class="logo-ring-inner"></div>
            <!-- 環繞粒子 -->
            <div class="orbit-particles">
                <div class="orbit-particle"></div>
                <div class="orbit-particle"></div>
                <div class="orbit-particle"></div>
                <div class="orbit-particle"></div>
            </div>
            <!-- 閃爍星星 -->
            <div class="sparkles">
                <div class="sparkle"></div>
                <div class="sparkle"></div>
                <div class="sparkle"></div>
                <div class="sparkle"></div>
                <div class="sparkle"></div>
                <div class="sparkle"></div>
            </div>
            <!-- LOGO (CSS 雲朵外框版) -->
            <div class="loading-logo">WOOO</div>
        </div>
        <div class="loading-text" id="loadingText">
            <i class="fas fa-chart-bar me-2"></i>正在載入數據...
        </div>
        <div class="loading-progress">
            <div class="loading-progress-bar"></div>
        </div>
        <div class="loading-hint" id="loadingHint">
            大量資料可能需要較長時間，請稍候
        </div>
    </div>

    <div class="container-fluid px-4">
        <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
            <div class="d-flex align-items-center gap-3">
                <h4 class="mb-0 fw-bold text-dark"><i class="fas fa-chart-pie me-2 text-primary"></i>業績分析儀表板</h4>
                {% if db_data_range %}
                <span class="badge bg-secondary" style="font-size: 0.85rem; font-weight: normal;">
                    <i class="fas fa-calendar-alt me-1"></i>資料期間: {{ db_data_range }}
                </span>
                {% endif %}
            </div>
            <div class="text-end">
                {% if not no_filter %}
                <span class="badge bg-success">
                    <i class="fas fa-database me-1"></i>
                    {% if start_date or end_date %}
                    {% if start_date and end_date %}
                    {{ start_date }} ~ {{ end_date }}
                    {% elif start_date %}
                    {{ start_date }} 起
                    {% else %}
                    {{ end_date }} 止
                    {% endif %}
                    {% elif data_range_months == 0 %}全部資料
                    {% else %}最近 {{ data_range_months }} 個月
                    {% endif %}
                    | {{ "{:,}".format(total_records) }} 筆
                </span>
                {% endif %}
            </div>
        </div>

        {% if error %}
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>{{ error }}
            <div class="mt-2">
                <a href="/settings" class="btn btn-sm btn-outline-dark">前往匯入資料</a>
            </div>
        </div>
        {% else %}

        <!-- V-New: 控制面板 (篩選器) -->
        <div class="card mb-4 shadow-sm" style="z-index: 100; transform: none !important; transition: none;">
            <div class="card-header bg-gradient"
                style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 text-white"><i class="fas fa-sliders-h me-2"></i>進階篩選與分析</h5>
                    <!-- V-New: 分析維度切換（更顯眼的設計） -->
                    <div class="btn-group shadow-sm" role="group">
                        <input type="radio" class="btn-check" name="metric" id="metricAmount" value="amount"
                            autocomplete="off" onchange="setFilter('metric', 'amount')" {% if selected_metric=='amount'
                            %}checked{% endif %}>
                        <label class="btn btn-sm btn-light fw-bold" for="metricAmount">
                            <i class="fas fa-dollar-sign me-1"></i>依金額分析
                        </label>

                        <input type="radio" class="btn-check" name="metric" id="metricQty" value="qty"
                            autocomplete="off" onchange="setFilter('metric', 'qty')" {% if selected_metric=='qty'
                            %}checked{% endif %}>
                        <label class="btn btn-sm btn-light fw-bold" for="metricQty">
                            <i class="fas fa-box me-1"></i>依銷售量分析
                        </label>

                        {% if cols.cost or cols.profit %}
                        <input type="radio" class="btn-check" name="metric" id="metricProfit" value="profit"
                            autocomplete="off" onchange="setFilter('metric', 'profit')" {% if selected_metric=='profit'
                            %}checked{% endif %}>
                        <label class="btn btn-sm btn-light fw-bold" for="metricProfit">
                            <i class="fas fa-chart-line me-1"></i>依毛利分析
                        </label>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="card-body pt-4 pb-4" style="background-color: #f8f9fa;">
                <form method="GET" action="/sales_analysis" class="row g-3">
                    <!-- 隱藏欄位：保留 metric 狀態 -->
                    <input type="hidden" name="metric" value="{{ selected_metric }}">

                    <!-- ═══════ 第一區：資料範圍 ═══════ -->
                    <div class="col-12">
                        <div class="bg-white rounded-3 p-3 shadow-sm">
                            <h6 class="text-secondary mb-3 fw-bold border-bottom pb-2">
                                <i class="fas fa-calendar-check me-2 text-primary"></i>資料範圍設定
                            </h6>
                            <div class="row g-2">
                                <!-- 資料載入範圍 -->
                                <div class="col-md-3">
                                    <label class="form-label"><i
                                            class="fas fa-database me-1 text-primary"></i>資料載入範圍</label>
                                    <select name="data_range" class="form-select"
                                        onchange="handleDataRangeChange(this)">
                                        <option value="" {% if not request.args.get('data_range') %}selected{% endif %}>
                                            -- 請選擇 --</option>
                                        <option value="1" {% if request.args.get('data_range')=='1' %}selected{% endif
                                            %}>最近 1 個月 (推薦)</option>
                                        <option value="3" {% if request.args.get('data_range')=='3' %}selected{% endif
                                            %}>最近 3 個月</option>
                                        <option value="6" {% if request.args.get('data_range')=='6' %}selected{% endif
                                            %}>最近 6 個月</option>
                                        <option value="12" {% if request.args.get('data_range')=='12' %}selected{% endif
                                            %}>最近 12 個月</option>
                                        <option value="0" {% if request.args.get('data_range')=='0' %}selected{% endif
                                            %}>全部資料</option>
                                    </select>
                                </div>

                                <!-- 開始日期 -->
                                <div class="col-md-3">
                                    <label class="form-label"><i class="fas fa-calendar-alt me-1 text-success"></i>開始日期
                                        <small class="text-muted">(選填)</small></label>
                                    <input type="text" id="start_date" name="start_date"
                                        class="form-control flatpickr-input" placeholder="選擇開始日期"
                                        value="{{ request.args.get('start_date', '') }}" readonly="readonly">
                                </div>

                                <!-- 結束日期 -->
                                <div class="col-md-3">
                                    <label class="form-label"><i
                                            class="fas fa-calendar-check me-1 text-success"></i>結束日期 <small
                                            class="text-muted">(選填)</small></label>
                                    <div class="input-group">
                                        <input type="text" id="end_date" name="end_date"
                                            class="form-control flatpickr-input" placeholder="選擇結束日期"
                                            value="{{ request.args.get('end_date', '') }}" readonly="readonly">
                                        {% if request.args.get('start_date') or request.args.get('end_date') %}
                                        <button type="button" class="btn btn-outline-danger" onclick="clearDateRange()"
                                            title="清除日期範圍">
                                            <i class="fas fa-times"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- 操作按鈕 -->
                                <div class="col-md-3 d-flex align-items-end gap-2">
                                    <a href="/sales_analysis" class="btn btn-outline-secondary flex-fill">
                                        <i class="fas fa-redo me-1"></i>重置
                                    </a>
                                    <button type="submit" class="btn btn-primary flex-fill">
                                        <i class="fas fa-search me-1"></i>查詢
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ═══════ 第二區：商品屬性篩選 ═══════ -->
                    <div class="col-12">
                        <div class="bg-white rounded-3 p-3 shadow-sm">
                            <h6 class="text-secondary mb-3 fw-bold border-bottom pb-2">
                                <i class="fas fa-tags me-2 text-info"></i>商品屬性篩選
                            </h6>
                            <div class="row g-2">
                                <!-- 商品分類 -->
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-layer-group me-1"></i>商品分類</label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-layer-group me-2 text-muted"></i>
                                            {{ selected_category if selected_category != 'all' else '全部分類' }}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="max-height: 300px; overflow-y: auto; transform: none !important; top: 100% !important; left: 0 !important; right: auto !important;">
                                            <li class="px-2 py-1">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="搜尋..." onkeyup="filterDropdown(this)">
                                            </li>
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('category', 'all')">全部分類</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            {% for cat in all_categories %}
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('category', '{{ cat }}')">{{ cat }}</a>
                                            </li>
                                            {% endfor %}
                                        </ul>
                                        <input type="hidden" name="category" value="{{ selected_category }}">
                                    </div>
                                </div>

                                <!-- 品牌 -->
                                {% if all_brands %}
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-tag me-1"></i>品牌</label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-tag me-2 text-muted"></i>
                                            {{ selected_brand if selected_brand != 'all' else '全部品牌' }}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="max-height: 300px; overflow-y: auto; transform: none !important; top: 100% !important; left: 0 !important; right: auto !important;">
                                            <li class="px-2 py-1">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="搜尋..." onkeyup="filterDropdown(this)">
                                            </li>
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('brand', 'all')">全部品牌</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            {% for b in all_brands %}
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('brand', '{{ b }}')">{{ b }}</a></li>
                                            {% endfor %}
                                        </ul>
                                        <input type="hidden" name="brand" value="{{ selected_brand }}">
                                    </div>
                                </div>
                                {% endif %}

                                <!-- 供應商 -->
                                {% if all_vendors %}
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-truck me-1"></i>供應商</label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-truck me-2 text-muted"></i>
                                            {{ selected_vendor if selected_vendor != 'all' else '全部廠商' }}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="max-height: 300px; overflow-y: auto; transform: none !important; top: 100% !important; left: 0 !important; right: auto !important;">
                                            <li class="px-2 py-1">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="搜尋..." onkeyup="filterDropdown(this)">
                                            </li>
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('vendor', 'all')">全部廠商</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            {% for v in all_vendors %}
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('vendor', '{{ v }}')">{{ v }}</a></li>
                                            {% endfor %}
                                        </ul>
                                        <input type="hidden" name="vendor" value="{{ selected_vendor }}">
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- ═══════ 第三區：行銷與付款（選填） ═══════ -->
                    {% if all_activities or all_payments %}
                    <div class="col-12">
                        <div class="bg-white rounded-3 p-3 shadow-sm">
                            <h6 class="text-secondary mb-3 fw-bold border-bottom pb-2">
                                <i class="fas fa-bullhorn me-2 text-warning"></i>行銷與付款
                            </h6>
                            <div class="row g-2">
                                <!-- 行銷活動 -->
                                {% if all_activities %}
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-bullhorn me-1"></i>行銷活動</label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-bullhorn me-2 text-muted"></i>
                                            {{ selected_activity if selected_activity != 'all' else '全部活動' }}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="max-height: 300px; overflow-y: auto; transform: none !important; top: 100% !important; left: 0 !important; right: auto !important;">
                                            <li class="px-2 py-1">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="搜尋..." onkeyup="filterDropdown(this)">
                                            </li>
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('activity', 'all')">全部活動</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            {% for a in all_activities %}
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('activity', '{{ a }}')">{{ a }}</a></li>
                                            {% endfor %}
                                        </ul>
                                        <input type="hidden" name="activity" value="{{ selected_activity }}">
                                    </div>
                                </div>
                                {% endif %}

                                <!-- 付款方式 -->
                                {% if all_payments %}
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-credit-card me-1"></i>付款方式</label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-credit-card me-2 text-muted"></i>
                                            {{ selected_payment if selected_payment != 'all' else '全部付款方式' }}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="max-height: 300px; overflow-y: auto; transform: none !important; top: 100% !important; left: 0 !important; right: auto !important;">
                                            <li class="px-2 py-1">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="搜尋..." onkeyup="filterDropdown(this)">
                                            </li>
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('payment', 'all')">全部付款方式</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            {% for p in all_payments %}
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('payment', '{{ p }}')">{{ p }}</a></li>
                                            {% endfor %}
                                        </ul>
                                        <input type="hidden" name="payment" value="{{ selected_payment }}">
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- ═══════ 第四區：時間維度（選填） ═══════ -->
                    {% if cols.date %}
                    <div class="col-12">
                        <div class="bg-white rounded-3 p-3 shadow-sm">
                            <h6 class="text-secondary mb-3 fw-bold border-bottom pb-2">
                                <i class="fas fa-clock me-2 text-danger"></i>時間維度篩選
                            </h6>
                            <div class="row g-2">
                                <!-- 月份 -->
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-calendar-alt me-1"></i>月份
                                        <!-- V-Debug: 總數 {{ all_months|length }} --></label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-calendar-alt me-2 text-muted"></i>
                                            {{ selected_month if selected_month != 'all' else '全部月份' }}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="max-height: 300px; overflow-y: auto; z-index: 1060;">
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('month', 'all')">全部月份</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            {% for m in all_months %}
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('month', '{{ m }}')">{{ m }}</a></li>
                                            {% endfor %}
                                        </ul>
                                        <input type="hidden" name="month" value="{{ selected_month }}">
                                    </div>
                                </div>

                                <!-- 星期 -->
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-calendar-day me-1"></i>星期</label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-calendar-day me-2 text-muted"></i>
                                            {% if selected_dow == 'all' %}全部星期
                                            {% elif selected_dow == '0' %}週一
                                            {% elif selected_dow == '1' %}週二
                                            {% elif selected_dow == '2' %}週三
                                            {% elif selected_dow == '3' %}週四
                                            {% elif selected_dow == '4' %}週五
                                            {% elif selected_dow == '5' %}週六
                                            {% elif selected_dow == '6' %}週日
                                            {% endif %}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="transform: none !important; top: 100% !important; left: 0 !important; right: auto !important;">
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('dow', 'all')">全部星期</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li><a class="dropdown-item" href="javascript:setFilter('dow', '0')">週一</a>
                                            </li>
                                            <li><a class="dropdown-item" href="javascript:setFilter('dow', '1')">週二</a>
                                            </li>
                                            <li><a class="dropdown-item" href="javascript:setFilter('dow', '2')">週三</a>
                                            </li>
                                            <li><a class="dropdown-item" href="javascript:setFilter('dow', '3')">週四</a>
                                            </li>
                                            <li><a class="dropdown-item" href="javascript:setFilter('dow', '4')">週五</a>
                                            </li>
                                            <li><a class="dropdown-item" href="javascript:setFilter('dow', '5')">週六</a>
                                            </li>
                                            <li><a class="dropdown-item" href="javascript:setFilter('dow', '6')">週日</a>
                                            </li>
                                        </ul>
                                        <input type="hidden" name="dow" value="{{ selected_dow }}">
                                    </div>
                                </div>

                                <!-- 時段 -->
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-clock me-1"></i>時段</label>
                                    <div class="btn-group w-100">
                                        <button type="button"
                                            class="btn btn-outline-secondary dropdown-toggle w-100 text-start text-truncate"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-clock me-2 text-muted"></i>
                                            {{ selected_hour + ':00' if selected_hour != 'all' else '全部時段' }}
                                        </button>
                                        <ul class="dropdown-menu w-100"
                                            style="max-height: 300px; overflow-y: auto; transform: none !important; top: 100% !important; left: 0 !important; right: auto !important;">
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('hour', 'all')">全部時段</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            {% for h in range(24) %}
                                            <li><a class="dropdown-item"
                                                    href="javascript:setFilter('hour', '{{ h }}')">{{ "%02d"|format(h)
                                                    }}:00</a></li>
                                            {% endfor %}
                                        </ul>
                                        <input type="hidden" name="hour" value="{{ selected_hour }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- ═══════ 第五區：數值與關鍵字（選填） ═══════ -->
                    <div class="col-12">
                        <div class="bg-white rounded-3 p-3 shadow-sm">
                            <h6 class="text-secondary mb-3 fw-bold border-bottom pb-2">
                                <i class="fas fa-search me-2 text-success"></i>數值與關鍵字篩選
                            </h6>
                            <div class="row g-2">
                                <!-- 單價區間 -->
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-dollar-sign me-1"></i>單價區間 ($)</label>
                                    <div class="input-group">
                                        <input type="number" name="min_price" class="form-control" placeholder="Min"
                                            value="{{ min_price }}">
                                        <span
                                            class="input-group-text bg-white border-start-0 border-end-0 text-muted">~</span>
                                        <input type="number" name="max_price" class="form-control" placeholder="Max"
                                            value="{{ max_price }}">
                                    </div>
                                </div>

                                <!-- 毛利率區間 -->
                                {% if cols.cost or cols.profit %}
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-percentage me-1"></i>毛利率區間 (%)</label>
                                    <div class="input-group">
                                        <input type="number" name="min_margin" class="form-control" placeholder="Min"
                                            value="{{ min_margin }}">
                                        <span
                                            class="input-group-text bg-white border-start-0 border-end-0 text-muted">~</span>
                                        <input type="number" name="max_margin" class="form-control" placeholder="Max"
                                            value="{{ max_margin }}">
                                    </div>
                                </div>
                                {% endif %}

                                <!-- 關鍵字搜尋 -->
                                <div class="col-md-4">
                                    <label class="form-label"><i class="fas fa-search me-1"></i>關鍵字搜尋</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white"><i class="fas fa-search"></i></span>
                                        <input type="text" name="keyword" class="form-control border-start-0"
                                            placeholder="輸入商品名稱..." value="{{ keyword }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- V-New: 引導訊息區域（首次進入時顯示） -->
        {% if no_filter %}
        <div class="row justify-content-center mt-5">
            <div class="col-md-8">
                <div class="card border-0 shadow-lg">
                    <div class="card-body text-center py-5">
                        <div class="mb-4">
                            <i class="fas fa-chart-line" style="font-size: 5rem; color: #0d6efd; opacity: 0.3;"></i>
                        </div>
                        <h3 class="text-primary mb-3">
                            <i class="fas fa-hand-point-up me-2"></i>開始分析您的業績數據
                        </h3>
                        <p class="text-muted mb-4" style="font-size: 1.1rem;">
                            請在上方<strong>「進階篩選」</strong>區域選擇以下任一條件開始分析：
                        </p>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <div class="card bg-light border-primary h-100">
                                    <div class="card-body">
                                        <h5 class="text-primary mb-2">
                                            <i class="fas fa-database me-2"></i>資料載入範圍
                                        </h5>
                                        <p class="small text-muted mb-0">快速選擇最近 1/3/6/12 個月或全部資料</p>
                                        <p class="small text-success mb-0 mt-2"><i class="fas fa-star me-1"></i>推薦新手使用
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-light border-success h-100">
                                    <div class="card-body">
                                        <h5 class="text-success mb-2">
                                            <i class="fas fa-calendar-alt me-2"></i>自訂日期區間
                                        </h5>
                                        <p class="small text-muted mb-0">精確指定開始/結束日期進行分析</p>
                                        <p class="small text-info mb-0 mt-2"><i class="fas fa-clock me-1"></i>適合特定區間分析
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info d-inline-block">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>提示：</strong>選擇任一條件後，系統將自動載入並顯示詳細的圖表與數據分析
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% else %}

        <!-- KPI 區塊 -->
        <div class="row mb-4">
            <!-- 1. 總業績 (最重要) -->
            <div class="col-md-2">
                <div class="card kpi-card bg-primary text-white h-100 shadow-sm">
                    <div class="card-body p-3">
                        <div class="kpi-label text-white-50">總業績 (Revenue)</div>
                        <div class="kpi-value">${{ "{:,.0f}".format(kpi.revenue) }}</div>
                        <i class="fas fa-coins icon-bg"></i>
                    </div>
                </div>
            </div>

            <!-- 2. 總成本 (若有) -->
            {% if cols.cost or cols.profit %}
            <div class="col-md-2">
                <div class="card kpi-card bg-danger text-white h-100 shadow-sm">
                    <div class="card-body p-3">
                        <div class="kpi-label text-white-50">總成本 (Cost)</div>
                        <div class="kpi-value">${{ "{:,.0f}".format(kpi.cost) }}</div>
                        <i class="fas fa-file-invoice-dollar icon-bg"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card kpi-card bg-success text-white h-100 shadow-sm">
                    <div class="card-body p-3">
                        <div class="kpi-label text-white-50">毛利額 (Profit)</div>
                        <div class="kpi-value">${{ "{:,.0f}".format(kpi.gross_margin) }}</div>
                        <i class="fas fa-hand-holding-usd icon-bg"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card kpi-card bg-success text-white h-100 shadow-sm"
                    style="background-color: #20c997 !important;">
                    <div class="card-body p-3">
                        <div class="kpi-label text-white-50">毛利率 (%)</div>
                        <div class="kpi-value">{{ "{:.1f}%".format(kpi.gross_margin_rate) }}</div>
                        <i class="fas fa-percentage icon-bg"></i>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="col-md-2">
                <div class="card kpi-card bg-info text-white h-100 shadow-sm">
                    <div class="card-body p-3">
                        <div class="kpi-label text-white-50">總銷量 (Qty)</div>
                        <div class="kpi-value">{{ "{:,.0f}".format(kpi.qty) }}</div>
                        <i class="fas fa-boxes icon-bg"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card kpi-card bg-warning text-dark h-100 shadow-sm">
                    <div class="card-body p-3">
                        <div class="kpi-label text-black-50">商品數 (SKU)</div>
                        <div class="kpi-value">{{ "{:,}".format(kpi.sku_count|default(kpi.count, true)) }}</div>
                        <i class="fas fa-tags icon-bg"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- V-New: ABC 分析 (Pareto Analysis) -->
        {% if abc_stats %}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm" style="background: linear-gradient(to right, #f8f9fa, #fff);">
                    <div class="card-body py-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <h6 class="mb-0 fw-bold text-dark"><i
                                    class="fas fa-sort-amount-down me-2 text-primary"></i>ABC 分析 (80/20 法則)</h6>
                            <span class="badge bg-light text-dark border ms-2">點擊類別查看詳情</span>
                        </div>
                        <div class="row mt-3 text-center">
                            <div class="col-md-4 border-end p-2 abc-card"
                                style="cursor: pointer; transition: background 0.2s;"
                                onclick="window.open('/abc_analysis/detail?class=A&{{ request.query_string.decode() }}', '_blank')"
                                onmouseover="this.style.background='#fff5f5'"
                                onmouseout="this.style.background='transparent'">
                                <h5 class="text-danger fw-bold mb-1">A 類 (核心)</h5>
                                <div class="small text-muted">營收佔比: {{ "{:.1f}%".format(abc_stats['A']['pct_rev']) }}
                                </div>
                                <div class="small fw-bold">{{ abc_stats['A']['count'] }} SKU ({{
                                    "{:.1f}%".format(abc_stats['A']['pct_sku']) }})</div>
                                <div class="progress mt-2" style="height: 4px;">
                                    <div class="progress-bar bg-danger" data-width="{{ abc_stats['A']['pct_rev'] }}%">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 border-end p-2 abc-card"
                                style="cursor: pointer; transition: background 0.2s;"
                                onclick="window.open('/abc_analysis/detail?class=B&{{ request.query_string.decode() }}', '_blank')"
                                onmouseover="this.style.background='#fff9e6'"
                                onmouseout="this.style.background='transparent'">
                                <h5 class="text-warning fw-bold mb-1">B 類 (次要)</h5>
                                <div class="small text-muted">營收佔比: {{ "{:.1f}%".format(abc_stats['B']['pct_rev']) }}
                                </div>
                                <div class="small fw-bold">{{ abc_stats['B']['count'] }} SKU ({{
                                    "{:.1f}%".format(abc_stats['B']['pct_sku']) }})</div>
                                <div class="progress mt-2" style="height: 4px;">
                                    <div class="progress-bar bg-warning" data-width="{{ abc_stats['B']['pct_rev'] }}%">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 p-2 abc-card" style="cursor: pointer; transition: background 0.2s;"
                                onclick="window.open('/abc_analysis/detail?class=C&{{ request.query_string.decode() }}', '_blank')"
                                onmouseover="this.style.background='#f0fff4'"
                                onmouseout="this.style.background='transparent'">
                                <h5 class="text-success fw-bold mb-1">C 類 (長尾)</h5>
                                <div class="small text-muted">營收佔比: {{ "{:.1f}%".format(abc_stats['C']['pct_rev']) }}
                                </div>
                                <div class="small fw-bold">{{ abc_stats['C']['count'] }} SKU ({{
                                    "{:.1f}%".format(abc_stats['C']['pct_sku']) }})</div>
                                <div class="progress mt-2" style="height: 4px;">
                                    <div class="progress-bar bg-success" data-width="{{ abc_stats['C']['pct_rev'] }}%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- V-New: 年度對比 (Year-over-Year Comparison) -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="mb-0 fw-bold text-dark">
                                <i class="fas fa-chart-line me-2 text-info"></i>年度對比 (YoY Comparison)
                            </h6>
                            <div class="d-flex align-items-center gap-2">
                                <select id="yoy-year1" class="form-select form-select-sm" style="width: 100px;">
                                    <option value="2025" selected>2025</option>
                                    <option value="2024">2024</option>
                                    <option value="2023">2023</option>
                                </select>
                                <span class="text-muted">vs</span>
                                <select id="yoy-year2" class="form-select form-select-sm" style="width: 100px;">
                                    <option value="2026" selected>2026</option>
                                    <option value="2025">2025</option>
                                    <option value="2024">2024</option>
                                </select>
                                <select id="yoy-metric" class="form-select form-select-sm" style="width: 120px;">
                                    <option value="revenue" selected>銷售金額</option>
                                    <option value="qty">銷售數量</option>
                                    <option value="profit">毛利金額</option>
                                </select>
                                <button class="btn btn-sm btn-outline-primary" onclick="loadYoYData()">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                            </div>
                        </div>

                        <!-- YoY Summary Cards -->
                        <div class="row mb-3" id="yoy-summary">
                            <div class="col-md-4">
                                <div class="card bg-light border-0">
                                    <div class="card-body text-center py-3">
                                        <small class="text-muted" id="yoy-year1-label">2024年</small>
                                        <h4 class="mb-0 fw-bold text-secondary" id="yoy-year1-value">$0</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card bg-light border-0">
                                    <div class="card-body text-center py-3">
                                        <small class="text-muted" id="yoy-year2-label">2025年</small>
                                        <h4 class="mb-0 fw-bold text-primary" id="yoy-year2-value">$0</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card border-0" id="yoy-growth-card" style="background: #e8f5e9;">
                                    <div class="card-body text-center py-3">
                                        <small class="text-muted">成長率</small>
                                        <h4 class="mb-0 fw-bold" id="yoy-growth-value">
                                            <i class="fas fa-arrow-up text-success"></i> 0%
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- YoY Monthly Chart -->
                        <div style="height: 250px;">
                            <canvas id="yoy-chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- V-New: 廠商獲利能力排行 (Vendor Ranking) -->
        {% if vendor_stats %}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-industry me-2"></i>廠商獲利能力排行 (Top 100)</span>
                        <a href="/api/export/excel/vendor?{{ request.query_string.decode() }}"
                            class="btn btn-sm btn-outline-success"><i class="fas fa-file-excel me-1"></i>匯出報表</a>
                    </div>
                    <div class="card-body">
                        <!-- V-Opt: 限制高度並允許垂直捲動，節省版面 -->
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-hover table-sm align-middle mb-0">
                                <thead class="table-light" style="position: sticky; top: 0; z-index: 1;">
                                    <tr>
                                        <th class="text-center" style="width: 60px;">排名</th>
                                        <th>廠商名稱</th>
                                        <th class="text-end">總業績</th>
                                        <th class="text-end">佔比(%)</th> <!-- V-New -->
                                        <th class="text-end">總銷量</th> <!-- V-New -->
                                        <th class="text-end">平均客單(ASP)</th> <!-- V-New -->
                                        {% if cols.cost or cols.profit %}<th class="text-end">毛利額</th>{% endif %}
                                        {% if cols.cost or cols.profit %}<th class="text-end">毛利率</th>{% endif %}
                                        <th class="text-end">商品數 (SKU)</th>
                                        <th class="text-end">平均單品產值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for v in vendor_stats %}
                                    <tr>
                                        <td class="text-center text-muted">{{ loop.index }}</td>
                                        <td class="fw-bold">
                                            <a href="javascript:setFilter('vendor', '{{ v.name }}')"
                                                class="text-decoration-none text-dark" title="點擊篩選此廠商商品">
                                                {{ v.name }} <i
                                                    class="fas fa-filter text-muted small ms-1 opacity-50"></i>
                                            </a>
                                        </td>
                                        <td class="text-end">${{ "{:,.0f}".format(v.revenue) }}</td>
                                        <td class="text-end small text-muted">{{ "{:.1f}%".format(v.share) }}</td>
                                        <td class="text-end">{{ "{:,.0f}".format(v.qty) }}</td>
                                        <td class="text-end">${{ "{:,.0f}".format(v.asp) }}</td>
                                        {% if cols.cost or cols.profit %}<td class="text-end text-success">${{
                                            "{:,.0f}".format(v.profit) }}</td>{% endif %}
                                        {% if cols.cost or cols.profit %}
                                        <td class="text-end">
                                            <span
                                                class="badge {{ 'bg-success' if v.margin_rate >= 30 else ('bg-warning text-dark' if v.margin_rate >= 15 else 'bg-danger') }}">
                                                {{ "{:.1f}%".format(v.margin_rate) }}
                                            </span>
                                        </td>
                                        {% endif %}
                                        <td class="text-end">{{ v.sku_count }}</td>
                                        <td class="text-end">${{ "{:,.0f}".format(v.revenue / v.sku_count if v.sku_count
                                            > 0 else 0) }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- V-New: 商業洞察 (Business Insights) -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-primary">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-lightbulb me-2"></i>商業洞察 (Top 3 Highlights)
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- 業績 Top 3 -->
                            <div class="col-md-4 border-end">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="text-primary fw-bold mb-0">🏆 業績貢獻王 (Revenue)</h6>
                                    <button class="btn btn-sm btn-outline-primary"
                                        onclick="showTopDetail('revenue', 'amount')">
                                        <i class="fas fa-list me-1"></i>詳細
                                    </button>
                                </div>
                                <small class="text-muted d-block mb-2">分類 Top 3:</small>
                                <ul class="list-unstyled small mb-3">
                                    {% for item in insights.rev_cats %}
                                    <li><span class="badge bg-primary me-2">{{ loop.index }}</span>{{ item.name }} <span
                                            class="float-end fw-bold">${{ "{:,.0f}".format(item.value) }}</span></li>
                                    {% endfor %}
                                </ul>
                                <small class="text-muted d-block mb-2">商品 Top 3:</small>
                                <ul class="list-unstyled small">
                                    {% for item in insights.rev_prods %}
                                    <li class="mb-1 text-truncate"><span class="badge bg-primary me-2">{{ loop.index
                                            }}</span>{{ item.name }} <span class="float-end fw-bold">${{
                                            "{:,.0f}".format(item.value) }}</span></li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <!-- 毛利 Top 3 -->
                            {% if cols.cost or cols.profit %}
                            <div class="col-md-4 border-end">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="text-success fw-bold mb-0">💰 獲利金雞母 (Gross Margin)</h6>
                                    <button class="btn btn-sm btn-outline-success"
                                        onclick="showTopDetail('margin', 'profit')">
                                        <i class="fas fa-list me-1"></i>詳細
                                    </button>
                                </div>
                                <small class="text-muted d-block mb-2">分類 Top 3:</small>
                                <ul class="list-unstyled small mb-3">
                                    {% for item in insights.margin_cats %}
                                    <li><span class="badge bg-success me-2">{{ loop.index }}</span>{{ item.name }} <span
                                            class="float-end fw-bold">${{ "{:,.0f}".format(item.value) }}</span></li>
                                    {% endfor %}
                                </ul>
                                <small class="text-muted d-block mb-2">商品 Top 3:</small>
                                <ul class="list-unstyled small">
                                    {% for item in insights.margin_prods %}
                                    <li class="mb-1 text-truncate"><span class="badge bg-success me-2">{{ loop.index
                                            }}</span>{{ item.name }} <span class="float-end fw-bold">${{
                                            "{:,.0f}".format(item.value) }}</span></li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% else %}
                            <div
                                class="col-md-4 border-end d-flex align-items-center justify-content-center text-muted">
                                <div><i class="fas fa-info-circle me-2"></i>無成本/毛利資料</div>
                            </div>
                            {% endif %}
                            <!-- 銷量 Top 3 -->
                            <div class="col-md-4">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="text-info fw-bold mb-0">📦 人氣引流款 (Sales Qty)</h6>
                                    <button class="btn btn-sm btn-outline-info"
                                        onclick="showTopDetail('quantity', 'qty')">
                                        <i class="fas fa-list me-1"></i>詳細
                                    </button>
                                </div>
                                <small class="text-muted d-block mb-2">分類 Top 3:</small>
                                <ul class="list-unstyled small mb-3">
                                    {% for item in insights.qty_cats %}
                                    <li><span class="badge bg-info me-2">{{ loop.index }}</span>{{ item.name }} <span
                                            class="float-end fw-bold">{{ "{:,.0f}".format(item.value) }}</span></li>
                                    {% endfor %}
                                </ul>
                                <small class="text-muted d-block mb-2">商品 Top 3:</small>
                                <ul class="list-unstyled small">
                                    {% for item in insights.qty_prods %}
                                    <li class="mb-1 text-truncate"><span class="badge bg-info me-2">{{ loop.index
                                            }}</span>{{ item.name }} <span class="float-end fw-bold">{{
                                            "{:,.0f}".format(item.value) }}</span></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 圖表區塊 -->
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-bar me-2"></i>Top 20 熱銷排行 ({{ '銷售金額' if selected_metric == 'amount' else
                        '銷售數量' }})
                    </div>
                    <div class="card-body">
                        <div style="height: 600px; position: relative;">
                            <canvas id="barChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-pie me-2"></i>全站類別分佈 (Top 12)
                    </div>
                    <div class="card-body">
                        <div style="height: 400px; position: relative;">
                            <canvas id="categoryChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- V-New: 板塊圖 (Treemap) -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header"><i class="fas fa-th-large me-2"></i>業績板塊分佈 (分類 -> 商品)</div>
                    <div class="card-body">
                        <div style="height: 400px;"><canvas id="treemapChart"></canvas></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- V-New: 第二排圖表 (價格分析) -->
        <div class="row mt-4">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-column me-2"></i>價格帶業績貢獻 (Price Range)
                    </div>
                    <div class="card-body">
                        <div style="height: 350px; position: relative;">
                            <canvas id="priceDistChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-braille me-2"></i>價格 vs 銷量分佈 (Scatter Plot)
                    </div>
                    <div class="card-body">
                        <div style="height: 350px; position: relative;">
                            <canvas id="scatterChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- V-New: BCG 矩陣 (商品策略) -->
        {% if cols.cost or cols.profit %}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header"><i class="fas fa-chess-board me-2"></i>商品策略 BCG 矩陣 (波士頓矩陣)</div>
                    <div class="card-body">
                        <p class="text-muted small mb-2"><i class="fas fa-info-circle me-1"></i> X軸: 銷量 (市場份額) | Y軸: 毛利率
                            (獲利能力) | 十字線: 中位數閾值</p>
                        <div style="height: 500px;"><canvas id="bcgChart"></canvas></div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- V-New: 淡旺季熱力圖 (Seasonality) - TODO #10 -->
        {% if seasonality_data %}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header"><i class="fas fa-sun me-2"></i>淡旺季熱力圖 (Seasonality Heatmap) - Top 10 分類
                    </div>
                    <div class="card-body">
                        <div style="height: 400px;"><canvas id="seasonalityChart"></canvas></div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- V-New 2026-01-15: 行銷活動業績貢獻 (Marketing Contributions) -->
        {% if marketing_data %}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-bullhorn me-2"></i>行銷活動業績貢獻 (Marketing Campaign Contribution)</span>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-success" onclick="exportMarketingExcel('all')">
                                <i class="fas fa-file-excel me-1"></i>匯出全部
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- 折扣活動 -->
                            <div class="col-lg-6 mb-4">
                                <h6 class="text-primary fw-bold mb-3"><i class="fas fa-tags me-2"></i>折扣活動排行 (Discount
                                    Campaigns)</h6>
                                <div style="height: 350px;">
                                    <canvas id="mktDiscountChart"></canvas>
                                </div>
                            </div>
                            <!-- 折價券活動 -->
                            <div class="col-lg-6 mb-4">
                                <h6 class="text-success fw-bold mb-3"><i class="fas fa-ticket-alt me-2"></i>折價券活動排行
                                    (Coupon Campaigns)</h6>
                                <div style="height: 350px;">
                                    <canvas id="mktCouponChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- V-New: 第三排圖表 (時間分析) -->
        {% if cols.date %}
        <div class="row mt-4">
            <!-- V-Adj: 將長週期趨勢 (月/週) 放在第一排，並加大寬度 -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-calendar-alt me-2"></i>每月業績趨勢 (Monthly Trend)
                    </div>
                    <div class="card-body">
                        <div style="height: 300px; position: relative;">
                            <canvas id="monthlyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-line me-2"></i>每週業績趨勢 (全年度)
                    </div>
                    <div class="card-body">
                        <div style="height: 300px; position: relative;">
                            <canvas id="weeklyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- V-Adj: 將短週期規律 (日/時/熱點) 放在第二排 -->
        <div class="row mt-4">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-calendar-week me-2"></i>每日業績趨勢 (週一至週日)
                    </div>
                    <div class="card-body">
                        <div style="height: 300px; position: relative;">
                            <canvas id="dowChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-clock me-2"></i>每小時業績熱點 (00:00 - 23:00)
                    </div>
                    <div class="card-body">
                        <div style="height: 300px; position: relative;">
                            <canvas id="hourlyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-th me-2"></i>多維度熱點 (星期 x 小時) <i class="fas fa-info-circle text-muted ms-1"
                            data-bs-toggle="tooltip" title="此圖表用於識別每週的「黃金銷售時段」。顏色越紅代表該時段業績越好。"></i>
                    </div>
                    <div class="card-body">
                        <div style="height: 300px; position: relative;">
                            <canvas id="heatmapChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- 資料表區塊 -->
        <div class="card mt-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-list-ol me-2"></i>詳細數據列表 (Top 1000)</span>
            </div>
            <div class="card-body">
                <table id="dataTable" class="table table-hover align-middle mb-0" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 60px;">排名</th>
                            <th style="width: 100px;">商品ID</th>
                            <th style="width: 25%;">商品名稱</th>
                            {% if cols.brand %}<th>品牌</th>{% endif %} <!-- V-New -->
                            {% if cols.vendor %}<th>廠商名稱</th>{% endif %}
                            {% if cols.cat %}<th>商品館 (分類)</th>{% endif %}
                            {% if cols.qty %}<th>平均單價</th>{% endif %} <!-- V-New -->
                            {% if cols.cost or cols.profit %}<th>毛利率</th>{% endif %}
                            {% if cols.return_qty %}<th>退貨率</th>{% endif %} <!-- V-New -->
                            {% if cols.date %}<th>銷售月份</th>{% endif %}
                            {% if cols.qty %}<th class="text-end">銷售數量</th>{% endif %}
                            <th class="text-end">銷售金額</th>
                        </tr>
                    </thead>
                    <!-- V-Opt: 內容將由 DataTables AJAX 自動填入 -->
                    <tbody></tbody>
                </table>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>

    {% endif %}

    {% if not error %}
    <!-- V-New: JSON Data Block for Data Injection -->
    <script id="sales-data" type="application/json">
    {
        "barData": {
            "labels": {{ bar_data.labels | tojson }},
            "values": {{ bar_data.chart_values | tojson }},
            "metricLabel": {{ bar_data.metric_label | tojson }}
        },
        "catData": {
            "labels": {{ cat_data.labels | tojson }},
            "values": {{ cat_data.chart_values | tojson }}
        },
        "priceDistData": {
            "labels": {{ price_dist_data.labels | tojson }},
            "values": {{ price_dist_data.chart_values | tojson }}
        },
        "scatterData": {{ scatter_data | tojson }},
        "bcgData": {{ bcg_data | tojson }},
        "seasonalityData": {{ seasonality_data | tojson }},
        "dowData": {% if cols.date %}{
            "labels": {{ dow_data.labels | tojson }},
            "values": {{ dow_data.chart_values | tojson }}
        }{% else %}null{% endif %},
        "monthlyData": {% if cols.date %}{
            "labels": {{ monthly_data.labels | tojson }},
            "values": {{ monthly_data.chart_values | tojson }}
        }{% else %}null{% endif %},
        "weeklyData": {% if cols.date %}{
            "labels": {{ weekly_data.labels | tojson }},
            "values": {{ weekly_data.chart_values | tojson }}
        }{% else %}null{% endif %},
        "hourlyData": {% if cols.date %}{
            "labels": {{ hourly_data.labels | tojson }},
            "values": {{ hourly_data.chart_values | tojson }}
        }{% else %}null{% endif %},
        "heatmapData": {% if cols.date %}{{ heatmap_data | tojson }}{% else %}null{% endif %},
        "treemapData": {{ treemap_data | tojson }},
        "selectedMetric": {{ selected_metric | tojson }},
        "cols": {
            "brand": {{ cols.brand | tojson }},
            "vendor": {{ cols.vendor | tojson }},
            "cat": {{ cols.cat | tojson }},
            "qty": {{ cols.qty | tojson }},
            "cost": {{ cols.cost | tojson }},
            "profit": {{ cols.profit | tojson }},
            "return_qty": {{ cols.return_qty | tojson }},
            "date": {{ cols.date | tojson }}
        },
        "marketingData": {{ marketing_data | tojson | safe }}
    }
    </script>
    {% endif %}

    <script>
        function setFilter(name, value) {
            const form = document.querySelector('form[action="/sales_analysis"]');
            const input = form.querySelector(`input[name="${name}"]`);
            if (input) {
                input.value = value;

                // V-Fix (2026-01-23): 更新下拉按鈕顯示文字（不自動提交）
                const btnGroup = input.closest('.btn-group');
                if (btnGroup) {
                    const btn = btnGroup.querySelector('.dropdown-toggle');
                    if (btn) {
                        // 定義各篩選項的預設顯示文字
                        const defaultTexts = {
                            'category': '全部分類',
                            'brand': '全部品牌',
                            'vendor': '全部廠商',
                            'activity': '全部活動',
                            'payment': '全部付款方式'
                        };
                        const displayText = (value === 'all') ? (defaultTexts[name] || '全部') : value;
                        // 保留圖示，只更新文字
                        const icon = btn.querySelector('i');
                        if (icon) {
                            btn.innerHTML = '';
                            btn.appendChild(icon);
                            btn.appendChild(document.createTextNode(' ' + displayText));
                        } else {
                            btn.textContent = displayText;
                        }
                    }
                }

                // V-Fix (2026-01-23): 移除自動提交，改為手動點擊查詢按鈕才執行
                // document.getElementById('loadingOverlay').style.display = 'flex';
                // form.submit();
            }
        }

        // V-New: 當選擇自訂日期時，清除預設的資料範圍選項（但不自動提交）
        function clearDataRange() {
            const form = document.querySelector('form[action="/sales_analysis"]');
            const startDate = form.querySelector('input[name="start_date"]').value;
            const endDate = form.querySelector('input[name="end_date"]').value;

            // 如果有任一日期被填寫，就清除 data_range（但不自動提交，讓用戶選完兩個日期後手動點擊查詢）
            if (startDate || endDate) {
                form.querySelector('select[name="data_range"]').value = '';
            }
        }

        // V-New: 清除日期區間
        function clearDateRange() {
            // V-Updated: 清除 Flatpickr 日期選擇器的值
            if (window.startDatePicker) {
                window.startDatePicker.clear();
            }
            if (window.endDatePicker) {
                window.endDatePicker.clear();
            }

            const form = document.querySelector('form[action="/sales_analysis"]');
            form.querySelector('input[name="start_date"]').value = '';
            form.querySelector('input[name="end_date"]').value = '';
            document.getElementById('loadingOverlay').style.display = 'flex';
            form.submit();
        }

        // V-New: 處理資料載入範圍改變
        function handleDataRangeChange(selectElement) {
            const form = document.querySelector('form[action="/sales_analysis"]');
            // 當選擇資料載入範圍時，清除自訂日期（但不自動提交，等用戶按查詢按鈕）
            if (selectElement.value) {
                form.querySelector('input[name="start_date"]').value = '';
                form.querySelector('input[name="end_date"]').value = '';
                if (window.startDatePicker) {
                    window.startDatePicker.clear();
                }
                if (window.endDatePicker) {
                    window.endDatePicker.clear();
                }
            }
            // V-Fix (2026-01-23): 移除自動提交，改為手動點擊查詢按鈕才執行
            // document.getElementById('loadingOverlay').style.display = 'flex';
            // form.submit();
        }

        // V-New: 下拉選單搜尋過濾功能
        function filterDropdown(input) {
            const filter = input.value.toLowerCase();
            const items = input.closest('.dropdown-menu').querySelectorAll('li:not(:first-child)'); // 跳過搜尋框所在的 li

            items.forEach(item => {
                const text = item.textContent || item.innerText;
                // 保留分隔線 (hr)
                if (item.querySelector('hr') || text.toLowerCase().indexOf(filter) > -1) {
                    item.style.display = "";
                } else {
                    item.style.display = "none";
                }
            });
        }

        // 綁定表單提交事件以顯示 Loading
        document.querySelector('form[action="/sales_analysis"]').addEventListener('submit', function () {
            document.getElementById('loadingOverlay').style.display = 'flex';
        });

        // V-New: 為字串生成穩定顏色的函式 (用於 Treemap)
        function getColorForString(str) {
            let hash = 0;
            for (let i = 0; i < str.length; i++) {
                hash = str.charCodeAt(i) + ((hash << 5) - hash);
            }
            const hue = Math.abs(hash % 360);
            // V-Adj: 調整為較深的顏色 (亮度 45%)，以確保白色文字清晰可見
            return `hsla(${hue}, 70%, 45%, 0.9)`;
        }

        // V-New 2026-01-15: 行銷活動 Excel 匯出
        function exportMarketingExcel(type) {
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('type', type);
            window.location.href = `/daily_sales/export_marketing?${urlParams.toString()}`;
        }
    </script>

    {% if not error %}
    <script>
        // V-New: Data Injection via JSON script tag to avoid syntax errors
        const salesData = JSON.parse(document.getElementById('sales-data').textContent);

        const barData = salesData.barData;
        const catData = salesData.catData;
        const priceDistData = salesData.priceDistData;
        const scatterDataPoints = salesData.scatterData;
        const bcgData = salesData.bcgData;
        const seasonalityData = salesData.seasonalityData;

        // Conditional data
        const dowData = salesData.dowData;
        const monthlyData = salesData.monthlyData;
        const weeklyData = salesData.weeklyData;
        const hourlyData = salesData.hourlyData;
        const heatmapDataPoints = salesData.heatmapData;
        const treemapDataPoints = salesData.treemapData;
        const cols = salesData.cols;
        const selectedMetric = salesData.selectedMetric;

        // 1. 橫向長條圖 (Horizontal Bar Chart) - 更易讀
        const ctxBar = document.getElementById('barChart').getContext('2d');
        new Chart(ctxBar, {
            type: 'bar',
            data: {
                labels: barData.labels,
                datasets: [{
                    label: barData.metricLabel,
                    data: barData.values,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                indexAxis: 'y', // 轉為橫向
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { beginAtZero: true }
                }
                ,
                // V-New: 圖表連動 - 點擊商品長條自動搜尋該商品
                onClick: (evt, elements) => {
                    if (elements.length > 0) {
                        const index = elements[0].index;
                        const label = barData.labels[index];
                        setFilter('keyword', label); // 將商品名稱帶入搜尋框
                    }
                }
            }
        });

        // 2. 圓餅圖 (類別佔比)
        const ctxCat = document.getElementById('categoryChart').getContext('2d');
        new Chart(ctxCat, {
            type: 'doughnut',
            data: {
                labels: catData.labels,
                datasets: [{
                    data: catData.values,
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#C9CBCF']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                onClick: (evt, elements) => {
                    if (elements.length > 0) {
                        const index = elements[0].index;
                        const label = catData.labels[index];
                        // V-Fix: 允許點擊 '其他'，後端已實作對應邏輯
                        window.location.href = `/sales_analysis?category=${encodeURIComponent(label)}&metric=${selectedMetric}`;
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                let label = context.label || '';
                                let value = context.parsed;
                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                let percentage = Math.round((value / total) * 100) + '%';
                                if (label) { label += ': '; }
                                label += '$' + value.toLocaleString() + ' (' + percentage + ')';
                                return label;
                            }
                        }
                    }
                }
            }
        });

        // 3. 價格帶分佈圖 (Bar Chart)
        const ctxPrice = document.getElementById('priceDistChart').getContext('2d');
        new Chart(ctxPrice, {
            type: 'bar',
            data: {
                labels: priceDistData.labels,
                datasets: [{
                    label: '區間總業績 ($)',
                    data: priceDistData.values,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: true } },
                // V-New: 圖表連動 - 點擊價格區間自動篩選
                onClick: (evt, elements) => {
                    if (elements.length > 0) {
                        const index = elements[0].index;
                        const label = priceDistData.labels[index];
                        // 解析標籤 (例如 "1,000-1,999" 或 "10,000+")
                        let min = '', max = '';
                        if (label.includes('+')) {
                            min = label.replace(/,/g, '').replace('+', '');
                        } else {
                            const parts = label.split('-');
                            if (parts.length === 2) {
                                min = parts[0].replace(/,/g, '');
                                max = parts[1].replace(/,/g, '');
                            }
                        }
                        setPriceFilter(min, max);
                    }
                }
            }
        });

        // 4. 散佈圖 (Scatter Plot)
        const ctxScatter = document.getElementById('scatterChart').getContext('2d');
        new Chart(ctxScatter, {
            type: 'scatter',
            data: {
                datasets: [{
                    label: '商品分佈',
                    data: scatterDataPoints,
                    backgroundColor: 'rgba(255, 99, 132, 0.6)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { title: { display: true, text: '單價 ($)' }, beginAtZero: true },
                    y: { title: { display: true, text: '銷售數量' }, beginAtZero: true }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                const p = context.raw;
                                return p.name + ': $' + p.x + ' / ' + p.y + '個 (總額: $' + p.amt.toLocaleString() + ')';
                            }
                        }
                    }
                }
            }
        });

        // V-New 2026-01-15: 初始化行銷活動圖表
        if (salesData.marketingData) {
            const mkt = salesData.marketingData;
            const currentMetric = salesData.selectedMetric || 'amount';

            // 根據選取的維度決定標籤與數據 Key
            const metricKey = currentMetric === 'amount' ? 'revenue' : (currentMetric === 'qty' ? 'qty' : 'profit');
            const metricLabel = currentMetric === 'amount' ? '營收貢獻' : (currentMetric === 'qty' ? '銷量貢獻' : '毛利貢獻');
            const prefix = currentMetric === 'qty' ? '' : '$';

            // 1. 折扣活動排行
            if (mkt.discount && mkt.discount.length > 0) {
                const ctxMktDisc = document.getElementById('mktDiscountChart');
                if (ctxMktDisc) {
                    new Chart(ctxMktDisc.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: mkt.discount.map(i => i.name.length > 20 ? i.name.substr(0, 20) + '...' : i.name),
                            datasets: [{
                                label: metricLabel,
                                data: mkt.discount.map(i => i[metricKey] || 0),
                                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    callbacks: {
                                        label: function (ctx) { return prefix + ctx.raw.toLocaleString(); }
                                    }
                                }
                            },
                            scales: { x: { beginAtZero: true } },
                            onClick: () => exportMarketingExcel('discount')
                        }
                    });
                }
            }

            // 2. 折價券活動排行
            if (mkt.coupon && mkt.coupon.length > 0) {
                const ctxMktCoupon = document.getElementById('mktCouponChart');
                if (ctxMktCoupon) {
                    new Chart(ctxMktCoupon.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: mkt.coupon.map(i => i.name.length > 20 ? i.name.substr(0, 20) + '...' : i.name),
                            datasets: [{
                                label: metricLabel,
                                data: mkt.coupon.map(i => i[metricKey] || 0),
                                backgroundColor: 'rgba(75, 192, 192, 0.7)',
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    callbacks: {
                                        label: function (ctx) { return prefix + ctx.raw.toLocaleString(); }
                                    }
                                }
                            },
                            scales: { x: { beginAtZero: true } },
                            onClick: () => exportMarketingExcel('coupon')
                        }
                    });
                }
            }
        }

        // 4.5 BCG 矩陣 (Scatter Chart) - V-New
        if (bcgData && bcgData.datasets.length > 0) {
            const ctxBcg = document.getElementById('bcgChart').getContext('2d');

            // 自定義插件：繪製象限閾值線
            const quadrantLinePlugin = {
                id: 'quadrantLines',
                beforeDraw: (chart) => {
                    const { ctx, chartArea: { top, bottom, left, right }, scales: { x, y } } = chart;
                    const xVal = x.getPixelForValue(bcgData.thresholds.x);
                    const yVal = y.getPixelForValue(bcgData.thresholds.y);

                    ctx.save();
                    ctx.strokeStyle = 'rgba(100, 100, 100, 0.5)';
                    ctx.lineWidth = 2;
                    ctx.setLineDash([5, 5]);

                    // 繪製垂直線 (銷量中位數)
                    if (xVal >= left && xVal <= right) {
                        ctx.beginPath();
                        ctx.moveTo(xVal, top);
                        ctx.lineTo(xVal, bottom);
                        ctx.stroke();
                    }

                    // 繪製水平線 (毛利中位數)
                    if (yVal >= top && yVal <= bottom) {
                        ctx.beginPath();
                        ctx.moveTo(left, yVal);
                        ctx.lineTo(right, yVal);
                        ctx.stroke();
                    }
                    ctx.restore();
                }
            };

            new Chart(ctxBcg, {
                type: 'scatter',
                data: { datasets: bcgData.datasets },
                plugins: [quadrantLinePlugin],
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: { title: { display: true, text: '銷售數量 (Qty)' }, beginAtZero: true },
                        y: { title: { display: true, text: '毛利率 (%)' }, beginAtZero: true }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    const p = context.raw;
                                    return p.name + ': ' + p.y + '% / ' + p.x + '個 ($' + p.amt.toLocaleString() + ')';
                                }
                            }
                        }
                    },
                    // V-New: BCG 矩陣連動 - 點擊商品氣泡自動搜尋
                    onClick: (evt, elements) => {
                        if (elements.length > 0) {
                            const index = elements[0].index;
                            const datasetIndex = elements[0].datasetIndex;
                            const p = bcgData.datasets[datasetIndex].data[index];
                            if (p && p.name) {
                                setFilter('keyword', p.name);
                            }
                        }
                    }
                }
            });
        }

        // 4.6 淡旺季熱力圖 (Seasonality Chart) - V-New
        if (seasonalityData) {
            const ctxSeason = document.getElementById('seasonalityChart').getContext('2d');
            new Chart(ctxSeason, {
                type: 'bubble',
                data: {
                    datasets: [{
                        label: '淡旺季分佈',
                        data: seasonalityData.datasets[0].data,
                        backgroundColor: function (context) {
                            const r = context.raw.r;
                            // 顏色越紅代表業績越高
                            const intensity = Math.max(0, Math.min(1, (r - 3) / 25));
                            const hue = (1 - intensity) * 240; // 240(藍) -> 0(紅)
                            return `hsla(${hue}, 70%, 50%, 0.7)`;
                        },
                        borderColor: 'rgba(0,0,0,0.1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            type: 'category',
                            labels: seasonalityData.xLabels,
                            title: { display: true, text: '月份' }
                        },
                        y: {
                            type: 'category',
                            labels: seasonalityData.yLabels,
                            title: { display: true, text: '商品分類' },
                            reverse: true // 讓排名第一的分類在最上方
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                generateLabels: function () {
                                    return [
                                        {
                                            text: '🔴 旺季 (業績高)',
                                            fillStyle: 'rgba(255, 0, 0, 0.7)',
                                            hidden: false,
                                            index: 0
                                        },
                                        {
                                            text: '🔵 淡季 (業績低)',
                                            fillStyle: 'rgba(0, 0, 255, 0.7)',
                                            hidden: false,
                                            index: 1
                                        }
                                    ];
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    const d = context.raw;
                                    // V-Fix: 改善 tooltip 可讀性，使用多行顯示
                                    return [
                                        `📅 月份: ${d.m}`,
                                        `🏷️ 分類: ${d.c}`,
                                        `💰 累積業績: $${Math.round(d.v).toLocaleString()}`,
                                        `💡 氣泡越大、顏色越紅表示業績越好`,
                                        `👉 點擊可篩選此分類`
                                    ];
                                }
                            }
                        }
                    },
                    // V-Fix: onClick 應該在 options 根層級，不是 plugins 內
                    // V-Fix 2026-01-16: 改為連動篩選分類，而非匯出 Excel
                    onClick: (evt, elements) => {
                        if (elements.length > 0) {
                            const index = elements[0].index;
                            const d = seasonalityData.datasets[0].data[index];
                            // 篩選該分類
                            setFilter('category', d.c);
                        }
                    }
                }
            });
        }

        if (dowData) {
            // 5. 星期分析圖 (Bar Chart)
            const ctxDow = document.getElementById('dowChart').getContext('2d');
            new Chart(ctxDow, {
                type: 'bar',
                data: {
                    labels: dowData.labels,
                    datasets: [{
                        label: '當日總業績 ($)',
                        data: dowData.values,
                        backgroundColor: 'rgba(255, 159, 64, 0.6)',
                        borderColor: 'rgba(255, 159, 64, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true } },
                    // V-New: 圖表連動 - 點擊星期長條自動篩選
                    onClick: (evt, elements) => {
                        if (elements.length > 0) {
                            const index = elements[0].index;
                            setFilter('dow', index.toString());
                        }
                    }
                }
            });

            // 5.5 每月趨勢圖 (Bar Chart) - V-New
            const ctxMonthly = document.getElementById('monthlyChart').getContext('2d');
            new Chart(ctxMonthly, {
                type: 'bar',
                data: {
                    labels: monthlyData.labels,
                    datasets: [{
                        label: '月總業績 ($)',
                        data: monthlyData.values,
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true } },
                    // V-New: 圖表連動 - 點擊月份長條自動篩選
                    onClick: (evt, elements) => {
                        if (elements.length > 0) {
                            const index = elements[0].index;
                            const label = monthlyData.labels[index];
                            setFilter('month', label);
                        }
                    }
                }
            });

            // 7. 每週趨勢圖 (Line Chart) - V-New
            const ctxWeekly = document.getElementById('weeklyChart').getContext('2d');
            new Chart(ctxWeekly, {
                type: 'line',
                data: {
                    labels: weeklyData.labels,
                    datasets: [{
                        label: '週總業績 ($)',
                        data: weeklyData.values,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true } },
                    // V-New: 週趨勢圖連動 - 點擊週次自動排除其他日期範圍
                    onClick: (evt, elements) => {
                        if (elements.length > 0) {
                            const index = elements[0].index;
                            const label = weeklyData.labels[index]; // 格式: "2025-W03"
                            // 將 ISO 週次轉換為日期區間 (簡易版: 只顯示該週)
                            // TODO: 實作精確的週次到日期轉換
                            console.log('Clicked week:', label);
                            // 暫時使用月份範圍近似 (待後端支援 week 範圍篩選)
                            if (label && label.includes('-W')) {
                                const [year, week] = label.split('-W');
                                // 簡化處理: 顯示 alert 提示該週次
                                alert(`已選取: ${year}年第${week}週\n未來將支援週次範圍篩選`);
                            }
                        }
                    }
                }
            });

            // 6. 小時分析圖 (Line Chart)
            const ctxHourly = document.getElementById('hourlyChart').getContext('2d');
            new Chart(ctxHourly, {
                type: 'line',
                data: {
                    labels: hourlyData.labels,
                    datasets: [{
                        label: '時段總業績 ($)',
                        data: hourlyData.values,
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.3 // 平滑曲線
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true } },
                    // V-New: 圖表連動 - 點擊小時節點自動篩選
                    onClick: (evt, elements) => {
                        if (elements.length > 0) {
                            const index = elements[0].index;
                            setFilter('hour', index.toString());
                        }
                    }
                }
            });

            // 8. 多維度熱力圖 (Bubble Chart 模擬 Heatmap) - V-New
            const ctxHeatmap = document.getElementById('heatmapChart').getContext('2d');
            new Chart(ctxHeatmap, {
                type: 'bubble',
                data: {
                    datasets: [{
                        label: '業績熱點',
                        data: heatmapDataPoints,
                        // V-Opt: 動態熱力著色 (藍->紅)
                        backgroundColor: function (context) {
                            const r = context.raw.r;
                            // 正規化半徑範圍約 3-25，將其映射到 0-1
                            const intensity = Math.max(0, Math.min(1, (r - 3) / 22));
                            // HSL: 240(藍) -> 0(紅)
                            const hue = (1 - intensity) * 240;
                            return `hsla(${hue}, 70%, 50%, 0.7)`;
                        },
                        borderColor: 'rgba(0,0,0,0.1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: { padding: 10 },
                    scales: {
                        x: {
                            min: 0, max: 23,
                            title: { display: true, text: '小時 (0-23)' },
                            ticks: { stepSize: 2 }
                        },
                        y: {
                            reverse: true, // V-Opt: 反轉 Y 軸，讓週一在上方
                            min: 0, max: 6,
                            title: { display: true, text: '星期 (0=週一, 6=週日)' },
                            ticks: {
                                callback: function (value) {
                                    const days = ['週一', '週二', '週三', '週四', '週五', '週六', '週日'];
                                    return days[value];
                                },
                                stepSize: 1
                            }
                        }
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    const d = context.raw;
                                    // V-Fix: 正確顯示星期和小時，而非月份和分類
                                    const dayNames = ['週一', '週二', '週三', '週四', '週五', '週六', '週日'];
                                    const dayName = dayNames[d.y] || `星期${d.y}`;
                                    const hourStr = String(d.x).padStart(2, '0') + ':00';
                                    return [
                                        `📅 ${dayName}`,
                                        `🕐 ${hourStr}`,
                                        `💰 業績: $${Math.round(d.v).toLocaleString()}`,
                                        `👉 點擊可篩選此時段`
                                    ];
                                }
                            }
                        }
                    },
                    onClick: (evt, elements, chart) => {
                        // V-Fix: Chart.js 的 evt 是包裝對象，不需要 preventDefault
                        console.log('Heatmap onClick triggered', { elements });

                        if (elements && elements.length > 0) {
                            const index = elements[0].index;
                            const point = heatmapDataPoints[index];
                            console.log('Clicked point:', point);
                            if (point && typeof point.y !== 'undefined' && typeof point.x !== 'undefined') {
                                setDowHourFilter(point.y.toString(), point.x.toString());
                            } else {
                                console.error('Invalid point data:', point);
                            }
                        } else {
                            console.log('No elements clicked');
                        }
                    }
                }
            });

        }

        // 9. 板塊圖 (Treemap) - V-New
        const ctxTreemap = document.getElementById('treemapChart').getContext('2d');


        new Chart(ctxTreemap, {
            type: 'treemap',
            data: {
                datasets: [{
                    tree: treemapDataPoints,
                    key: 'value',
                    groups: ['category', 'product'], // 定義層級：先分類，再商品
                    spacing: 2, // V-New: 增加區塊間距
                    borderWidth: 0,
                    borderRadius: 4, // V-New: 圓角
                    backgroundColor: (ctx) => {
                        if (ctx.type !== 'data') return 'transparent';
                        // V-Fix: 優先使用後端傳來的顏色 (若有)，確保與分類顏色一致且為深色系 (TODO 5)
                        if (ctx.raw._data && ctx.raw._data.color) {
                            return ctx.raw._data.color;
                        }

                        let keyName = '';
                        if (ctx.raw._data && ctx.raw._data.product) {
                            keyName = ctx.raw._data.product; // 商品層級：用商品名
                        } else if (ctx.raw._data && ctx.raw._data.category) {
                            keyName = ctx.raw._data.category; // 分類層級
                        } else if (ctx.raw.g) {
                            keyName = ctx.raw.g;
                        }
                        return getColorForString(keyName || 'unknown');
                    },
                    labels: {
                        display: true,
                        formatter: (ctx) => {
                            // 只在空間足夠時顯示文字
                            if (!ctx.raw) return "";
                            const name = ctx.raw.g === 'product' ? ctx.raw._data.product : ctx.raw.g;
                            const val = Math.round(ctx.raw.v).toLocaleString();
                            return name + '\n$' + val;
                        },
                        align: 'center',
                        color: 'white',
                        font: { size: 13, weight: 'bold' } // V-New: 加粗字體
                    }
                }]
            },
            options: {
                maintainAspectRatio: false,
                plugins: { legend: { display: false }, tooltip: { enabled: true } }
                ,
                // V-New: 圖表連動 - 點擊板塊自動篩選分類
                onClick: (evt, elements) => {
                    if (elements.length > 0) {
                        const data = elements[0].element.$context.raw._data;
                        if (data && data.category) {
                            setFilter('category', data.category);
                        }
                    }
                }
            }
        });

        // 3. 初始化 DataTables (分頁、搜尋、排序)
        $(document).ready(function () {
            // V-Opt: 動態構建 columns 陣列，避免 Jinja2 語法干擾編輯器
            const tableColumns = [
                {
                    "data": "rank",
                    "className": "text-center",
                    "render": function (data) {
                        // V-New: 前三名使用獎牌徽章，其他使用普通數字
                        if (data === 1) return '<span class="badge bg-warning text-dark" style="font-size: 0.9rem;"><i class="fas fa-trophy me-1"></i>1</span>';
                        if (data === 2) return '<span class="badge bg-secondary" style="font-size: 0.9rem;"><i class="fas fa-medal me-1"></i>2</span>';
                        if (data === 3) return '<span class="badge bg-secondary" style="font-size: 0.9rem;"><i class="fas fa-medal me-1"></i>3</span>';
                        return `<span class="text-muted fw-bold" style="font-size: 0.95rem;">${data}</span>`;
                    }
                },
                {
                    "data": "product_id",
                    "className": "font-monospace",
                    "render": function (data, type, row) {
                        return `<div class="d-flex align-items-center">
                            <code class="small me-2">${data || '-'}</code>
                            <button class="btn btn-sm btn-outline-secondary py-0 px-1" onclick="copyToClipboard('${data}', this)" title="複製商品ID">
                                <i class="fas fa-copy" style="font-size: 0.7rem;"></i>
                            </button>
                        </div>`;
                    }
                },
                {
                    "data": "name",
                    "render": function (data, type, row) {
                        return `<div class="text-truncate-2 fw-semibold text-dark" title="${data}" style="font-size: 0.95rem; line-height: 1.4;">${data}</div>`;
                    }
                }
            ];

            if (cols.brand) tableColumns.push({
                "data": "brand",
                "className": "text-secondary",
                "render": function (data) { return `<span style="font-size: 0.9rem;">${data || '-'}</span>`; }
            });
            if (cols.vendor) tableColumns.push({
                "data": "vendor",
                "className": "text-secondary",
                "render": function (data) { return `<span style="font-size: 0.9rem;">${data || '-'}</span>`; }
            });
            if (cols.cat) {
                tableColumns.push({
                    "data": "category",
                    "render": function (data) { return `<span class="badge bg-light text-dark border" style="font-size: 0.85rem;">${data}</span>`; }
                });
            }
            if (cols.qty) {
                tableColumns.push({
                    "data": "avg_price",
                    "className": "text-end",
                    "render": function (data) { return '<span style="font-size: 0.95rem; color: #495057;">$' + parseFloat(data).toLocaleString(undefined, { maximumFractionDigits: 0 }) + '</span>'; }
                });
            }
            if (cols.cost || cols.profit) {
                tableColumns.push({
                    "data": "margin_rate",
                    "className": "text-center",
                    "render": function (data) {
                        let colorClass = data >= 30 ? 'text-success' : (data < 10 ? 'text-danger' : 'text-warning');
                        let bgClass = data >= 30 ? 'bg-success' : (data < 10 ? 'bg-danger' : 'bg-warning');
                        return `<span class="badge ${bgClass} bg-opacity-10 ${colorClass}" style="font-size: 0.9rem; font-weight: 600;">${parseFloat(data).toFixed(1)}%</span>`;
                    }
                });
            }
            if (cols.return_qty) {
                tableColumns.push({
                    "data": "return_rate",
                    "className": "text-end",
                    "render": function (data) {
                        let color = data > 5 ? '#dc3545' : (data > 2 ? '#fd7e14' : '#6c757d');
                        return `<span style="font-size: 0.9rem; color: ${color};">${parseFloat(data).toFixed(1)}%</span>`;
                    }
                });
            }
            if (cols.date) tableColumns.push({
                "data": "month_str",
                "className": "text-muted",
                "render": function (data) { return `<span style="font-size: 0.85rem;">${data}</span>`; }
            });
            if (cols.qty) tableColumns.push({
                "data": "qty",
                "className": "text-end fw-semibold text-primary",
                "render": function (data) { return '<span style="font-size: 1rem;">' + parseFloat(data).toLocaleString(undefined, { maximumFractionDigits: 0 }) + '</span>'; }
            });

            // 最後加入金額欄位
            tableColumns.push({
                "data": "amount",
                "className": "text-end fw-bold text-danger",
                "render": function (data) { return '<span style="font-size: 1.05rem;">$' + parseFloat(data).toLocaleString() + '</span>'; }
            });

            $('#dataTable').DataTable({
                // V-Opt: 改為 AJAX 載入，大幅提升初始頁面渲染速度
                "ajax": {
                    "url": "/api/sales_analysis/table_data?" + window.location.search.substring(1) + "&_t=" + new Date().getTime(),
                    "dataSrc": "data",
                    "cache": false,  // V-Fix: 禁用快取以確保篩選條件立即生效
                    "error": function(xhr, error, thrown) {
                        console.error('DataTables AJAX Error:', error, thrown);
                        console.error('Response:', xhr.responseText ? xhr.responseText.substring(0, 500) : 'empty');
                        // 隱藏載入中覆蓋層
                        var overlay = document.getElementById('loadingOverlay');
                        if (overlay) overlay.style.display = 'none';
                        alert('載入數據失敗: ' + (thrown || error));
                    }
                },
                "columns": tableColumns,
                "language": { "url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/zh-HANT.json" },
                "pageLength": 25,
                "order": [], // 取消預設排序，由後端控制
                "deferRender": true, // 優化渲染效能
                "processing": true   // 顯示處理中提示
            });

            // 初始化 Bootstrap Tooltips (用於集中度說明)
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })

            // V-Fix: 初始化進度條寬度 (解決 CSS 語法檢查錯誤)
            document.querySelectorAll('.progress-bar[data-width]').forEach(function (bar) {
                bar.style.width = bar.getAttribute('data-width');
            });
        });

        // V-New: 輔助函式 - 設定價格區間並提交
        function setPriceFilter(min, max) {
            const form = document.querySelector('form[action="/sales_analysis"]');
            if (min) form.querySelector('input[name="min_price"]').value = min;
            if (max) form.querySelector('input[name="max_price"]').value = max;
            // 清空其他可能衝突的篩選以確保精確
            document.getElementById('loadingOverlay').style.display = 'flex';
            form.submit();
        }

        // V-New: 輔助函式 - 設定星期與小時並提交 (用於熱力圖)
        function setDowHourFilter(dow, hour) {
            const form = document.querySelector('form[action="/sales_analysis"]');
            const dowInput = form.querySelector('input[name="dow"]');
            const hourInput = form.querySelector('input[name="hour"]');

            if (dowInput) dowInput.value = dow;
            if (hourInput) hourInput.value = hour;

            document.getElementById('loadingOverlay').style.display = 'flex';
            form.submit();
        }

        // V-New: 複製文字到剪貼簿
        function copyToClipboard(text, button) {
            if (!text || text === '-') {
                return;
            }

            // 使用 Clipboard API
            navigator.clipboard.writeText(text).then(function () {
                // 改變按鈕圖示和顏色表示成功
                const icon = button.querySelector('i');
                const originalClass = icon.className;
                icon.className = 'fas fa-check';
                button.classList.remove('btn-outline-secondary');
                button.classList.add('btn-success');

                // 2秒後恢復原狀
                setTimeout(function () {
                    icon.className = originalClass;
                    button.classList.remove('btn-success');
                    button.classList.add('btn-outline-secondary');
                }, 2000);
            }).catch(function (err) {
                console.error('複製失敗:', err);
                alert('複製失敗，請手動複製');
            });
        }
    </script>
    {% endif %}

    <!-- V-New: Top Detail Modal -->
    <div class="modal fade" id="topDetailModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="topDetailModalTitle">詳細列表</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <button class="btn btn-sm btn-outline-secondary" id="showCategoryBtn"
                                onclick="toggleTopType('category')">
                                <i class="fas fa-layer-group me-1"></i>分類排行
                            </button>
                            <button class="btn btn-sm btn-outline-secondary ms-2" id="showProductBtn"
                                onclick="toggleTopType('product')">
                                <i class="fas fa-box me-1"></i>商品排行
                            </button>
                        </div>
                        <button class="btn btn-sm btn-success" onclick="exportTopDetail()">
                            <i class="fas fa-file-excel me-1"></i>匯出 Excel
                        </button>
                    </div>
                    <div id="topDetailContent">
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">載入中...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentTopType = 'revenue';
        let currentMetric = 'amount';
        let currentViewType = 'product'; // 'category' or 'product'
        let topDetailData = null;

        // 顯示 Top 詳細資料
        function showTopDetail(type, metric) {
            currentTopType = type;
            currentMetric = metric;
            currentViewType = 'product';

            // 更新 Modal 標題
            const titles = {
                'revenue': '🏆 業績貢獻王 - 詳細排行',
                'margin': '💰 獲利金雞母 - 詳細排行',
                'quantity': '📦 人氣引流款 - 詳細排行'
            };
            document.getElementById('topDetailModalTitle').textContent = titles[type];

            // 顯示 Modal
            const modal = new bootstrap.Modal(document.getElementById('topDetailModal'));
            modal.show();

            // 載入資料
            loadTopDetail();
        }

        // 載入 Top 詳細資料
        function loadTopDetail() {
            const params = new URLSearchParams(window.location.search);
            params.set('type', currentTopType);
            params.set('metric', currentMetric);
            params.set('view', currentViewType);

            fetch(`/api/sales_analysis/top_detail?${params}`)
                .then(response => response.json())
                .then(data => {
                    topDetailData = data;
                    renderTopDetail(data);
                })
                .catch(error => {
                    document.getElementById('topDetailContent').innerHTML =
                        '<div class="alert alert-danger">載入失敗：' + error.message + '</div>';
                });
        }

        // 渲染 Top 詳細資料
        function renderTopDetail(data) {
            const contentDiv = document.getElementById('topDetailContent');

            // 更新按鈕狀態
            document.getElementById('showCategoryBtn').classList.toggle('active', currentViewType === 'category');
            document.getElementById('showProductBtn').classList.toggle('active', currentViewType === 'product');

            if (!data || !data.items || data.items.length === 0) {
                contentDiv.innerHTML = '<div class="alert alert-info">無資料</div>';
                return;
            }

            let html = '<div class="table-responsive"><table class="table table-hover table-sm">';
            html += '<thead class="table-light"><tr>';
            html += '<th width="60">排名</th>';

            if (currentViewType === 'product') {
                html += '<th width="120">商品ID</th>';
                html += '<th>商品名稱</th>';
                html += '<th width="120">品牌</th>';
                html += '<th width="120">廠商</th>';
                html += '<th width="100">分類</th>';
            } else {
                html += '<th>分類名稱</th>';
            }

            if (currentMetric === 'qty') {
                html += '<th width="100" class="text-end">數量</th>';
            } else if (currentMetric === 'profit') {
                html += '<th width="120" class="text-end">毛利金額</th>';
                html += '<th width="100" class="text-end">毛利率</th>';
            } else {
                html += '<th width="120" class="text-end">業績金額</th>';
            }

            html += '</tr></thead><tbody>';

            data.items.forEach((item, index) => {
                html += '<tr>';
                html += `<td><span class="badge bg-secondary">${index + 1}</span></td>`;

                if (currentViewType === 'product') {
                    html += `<td>
                    <div class="d-flex align-items-center">
                        <code class="small me-2">${item.product_id || 'N/A'}</code>
                        <button class="btn btn-sm btn-outline-secondary py-0 px-1" onclick="copyToClipboard('${item.product_id || ''}', this)" title="複製商品ID">
                            <i class="fas fa-copy" style="font-size: 0.7rem;"></i>
                        </button>
                    </div>
                </td>`;
                    html += `<td class="small">${item.name}</td>`;
                    html += `<td class="small text-muted">${item.brand || '-'}</td>`;
                    html += `<td class="small text-muted">${item.vendor || '-'}</td>`;
                    html += `<td class="small text-muted">${item.category || '-'}</td>`;
                } else {
                    html += `<td>${item.name}</td>`;
                }

                if (currentMetric === 'qty') {
                    html += `<td class="text-end fw-bold">${Number(item.value).toLocaleString()}</td>`;
                } else if (currentMetric === 'profit') {
                    html += `<td class="text-end fw-bold text-success">$${Number(item.value).toLocaleString()}</td>`;
                    html += `<td class="text-end">${item.margin_rate ? item.margin_rate.toFixed(1) + '%' : '-'}</td>`;
                } else {
                    html += `<td class="text-end fw-bold text-primary">$${Number(item.value).toLocaleString()}</td>`;
                }

                html += '</tr>';
            });

            html += '</tbody></table></div>';
            contentDiv.innerHTML = html;
        }

        // 切換檢視類型（分類/商品）
        function toggleTopType(type) {
            currentViewType = type;
            loadTopDetail();
        }

        // 匯出 Excel
        function exportTopDetail() {
            if (!topDetailData || !topDetailData.items || topDetailData.items.length === 0) {
                alert('無資料可匯出');
                return;
            }

            const params = new URLSearchParams(window.location.search);
            params.set('type', currentTopType);
            params.set('metric', currentMetric);
            params.set('view', currentViewType);

            window.location.href = `/api/sales_analysis/export_top_detail?${params}`;
        }

        // ================= V-New: Year-over-Year Comparison =================
        let yoyChart = null;

        function loadYoYData() {
            const year1 = document.getElementById('yoy-year1').value;
            const year2 = document.getElementById('yoy-year2').value;
            const metric = document.getElementById('yoy-metric').value;

            fetch(`/api/sales_analysis/yoy_comparison?year1=${year1}&year2=${year2}&metric=${metric}`)
                .then(res => res.json())
                .then(data => {
                    if (data.error) {
                        console.error('YoY API Error:', data.error);
                        return;
                    }

                    // Update summary cards
                    document.getElementById('yoy-year1-label').textContent = data.year1.label;
                    document.getElementById('yoy-year2-label').textContent = data.year2.label;
                    document.getElementById('yoy-year1-value').textContent = formatCurrency(data.year1.total);
                    document.getElementById('yoy-year2-value').textContent = formatCurrency(data.year2.total);

                    // Update growth rate
                    const growthEl = document.getElementById('yoy-growth-value');
                    const growthCard = document.getElementById('yoy-growth-card');
                    const isPositive = data.growth_rate >= 0;
                    growthEl.innerHTML = `<i class="fas ${isPositive ? 'fa-arrow-up text-success' : 'fa-arrow-down text-danger'}"></i> ${isPositive ? '+' : ''}${data.growth_rate.toFixed(1)}%`;
                    growthCard.style.background = isPositive ? '#e8f5e9' : '#ffebee';

                    // Update chart
                    updateYoYChart(data, year1, year2);
                })
                .catch(err => console.error('YoY Fetch Error:', err));
        }

        function formatCurrency(value) {
            if (value >= 100000000) {
                return `$${(value / 100000000).toFixed(2)}億`;
            } else if (value >= 10000) {
                return `$${(value / 10000).toFixed(1)}萬`;
            } else {
                return `$${Math.round(value).toLocaleString()}`;
            }
        }

        function updateYoYChart(data, year1, year2) {
            const ctx = document.getElementById('yoy-chart').getContext('2d');

            const labels = data.monthly_breakdown.map(m => m.month_label);
            const year1Data = data.monthly_breakdown.map(m => m.year1_value);
            const year2Data = data.monthly_breakdown.map(m => m.year2_value);

            if (yoyChart) {
                yoyChart.destroy();
            }

            yoyChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: `${year1}年`,
                            data: year1Data,
                            backgroundColor: 'rgba(108, 117, 125, 0.6)',
                            borderColor: 'rgba(108, 117, 125, 1)',
                            borderWidth: 1
                        },
                        {
                            label: `${year2}年`,
                            data: year2Data,
                            backgroundColor: 'rgba(79, 70, 229, 0.6)',
                            borderColor: 'rgba(79, 70, 229, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    return `${context.dataset.label}: ${formatCurrency(context.raw)}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function (value) {
                                    return formatCurrency(value);
                                }
                            }
                        }
                    }
                }
            });
        }

        // Auto-load YoY data on page load
        if (document.getElementById('yoy-chart')) {
            loadYoYData();
        }
    </script>

    <!-- Footer -->
    <footer class="text-center text-muted small py-4 mt-5" style="border-top: 1px solid rgba(0,0,0,0.05);">
        <p class="mb-1">&copy; 2026 WOOO TECH. 版權所有。</p>
        <p class="mb-0">以 AI 科技守護家庭與事業，提供最精準的決策支持。</p>
    </footer>

    <!-- V-New: Flatpickr 日期選擇器 JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/l10n/zh-tw.js"></script>
    <script>
        // V-New: 初始化 Flatpickr 日期選擇器
        document.addEventListener('DOMContentLoaded', function () {
            const startDateInput = document.getElementById('start_date');
            const endDateInput = document.getElementById('end_date');

            // 配置選項
            const flatpickrConfig = {
                locale: flatpickr.l10ns['zh_tw'],  // 使用繁體中文
                dateFormat: 'Y-m-d',  // 格式：YYYY-MM-DD
                allowInput: false,  // 禁止手動輸入
                clickOpens: true,  // 點擊即開啟
                monthSelectorType: 'dropdown',  // 月份使用下拉選單
                yearSelectorType: 'dropdown',  // 年份使用下拉選單（更好的 UX）
                showMonths: 1,
                onChange: function () {
                    clearDataRange();  // 清除資料範圍選項
                },
                onClose: function () {
                    // 關閉日期選擇器後不自動提交，讓用戶完成選擇後手動點擊查詢
                }
            };

            // 初始化開始日期選擇器
            const startPicker = flatpickr(startDateInput, {
                ...flatpickrConfig,
                maxDate: endDateInput.value || null,  // 開始日期不能晚於結束日期
                onChange: function (selectedDates, dateStr) {
                    clearDataRange();
                    // 更新結束日期的最小日期限制
                    if (endPicker && dateStr) {
                        endPicker.set('minDate', dateStr);
                    }
                }
            });

            // 初始化結束日期選擇器
            const endPicker = flatpickr(endDateInput, {
                ...flatpickrConfig,
                minDate: startDateInput.value || null,  // 結束日期不能早於開始日期
                onChange: function (selectedDates, dateStr) {
                    clearDataRange();
                    // 更新開始日期的最大日期限制
                    if (startPicker && dateStr) {
                        startPicker.set('maxDate', dateStr);
                    }
                }
            });

            // 將 picker 實例儲存到全域，供 clearDateRange 函式使用
            window.startDatePicker = startPicker;
            window.endDatePicker = endPicker;
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>