/* ════════════════════════════════════════════════════════
 * page-monthly-summary.js — Turn C
 * ────────────────────────────────────────────────────────
 * monthly_summary_analysis.html 的 ECharts + DataTable 邏輯
 *
 * 注意：依賴 analysis-chart-theme.js 對 echarts.init 的攔截，
 * 它會自動把 option.color 換成 .momo-app[data-page-group] 的
 * --momo-page-chart-* 暖色調 palette，因此本檔保留原 itemStyle.color
 * 邏輯時，會被自動覆寫；分類/條件配色（如 BCG 象限）保持顯式指定。
 * ════════════════════════════════════════════════════════ */
(function () {
  'use strict';

  let table;
  let compareChart, yoyTrendChart, vendorRankingChart, divisionDistChart, priceRangeChart;
  let bcgMatrixChart, priceVolumeScatterChart, seasonalityHeatmapChart, areaRankingChart;
  let specialChart, bodyCareChart, makeupFragranceChart, privacyInfantChart;
  let activeFetchController = null;
  let fetchRunId = 0;
  let lastMainData = null;
  const lastSpecialData = new Map();
  const REQUEST_TIMEOUT_MS = 20000;

  const initialParams = new URLSearchParams(window.location.search);
  let currentFilters = {
    year: initialParams.get('year') || '',
    month: initialParams.get('month') || '',
    start_month: initialParams.get('start_month') || '',
    end_month: initialParams.get('end_month') || '',
    area: initialParams.get('area_name') || '',
    vendor: initialParams.get('vendor') || '',
    trade: initialParams.get('trade_type') || ''
  };
  const compactMediaQuery = window.matchMedia('(max-width: 768px)');

  function isCompactViewport() {
    return compactMediaQuery.matches;
  }

  function cssColor(name, fallback) {
    return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
  }

  function decodeText(value) {
    const textarea = document.createElement('textarea');
    textarea.innerHTML = String(value ?? '');
    return textarea.value;
  }

  function safeHtmlText(value) {
    const span = document.createElement('span');
    span.textContent = decodeText(value);
    return span.innerHTML;
  }

  $(function () {
    compareChart            = echarts.init(document.getElementById('compareChart'));
    yoyTrendChart           = echarts.init(document.getElementById('yoyTrendChart'));
    vendorRankingChart      = echarts.init(document.getElementById('vendorRankingChart'));
    divisionDistChart       = echarts.init(document.getElementById('divisionDistChart'));
    priceRangeChart         = echarts.init(document.getElementById('priceRangeChart'));
    bcgMatrixChart          = echarts.init(document.getElementById('bcgMatrixChart'));
    priceVolumeScatterChart = echarts.init(document.getElementById('priceVolumeScatterChart'));
    seasonalityHeatmapChart = echarts.init(document.getElementById('seasonalityHeatmapChart'));
    areaRankingChart        = echarts.init(document.getElementById('areaRankingChart'));
    specialChart            = echarts.init(document.getElementById('specialChart'));
    bodyCareChart           = echarts.init(document.getElementById('bodyCareChart'));
    makeupFragranceChart    = echarts.init(document.getElementById('makeupFragranceChart'));
    privacyInfantChart      = echarts.init(document.getElementById('privacyInfantChart'));

    table = $('#summaryTable').DataTable({
      language: typeof window.EwoooCDataTableLanguage === 'function'
        ? window.EwoooCDataTableLanguage()
        : {},
      autoWidth: false,
      deferRender: true,
      pageLength: 20,
      order: [[0, 'desc'], [7, 'desc']],
      columnDefs: [
        { targets: [7], className: 'text-end fw-bold' },
        { targets: 8, className: 'text-center' }
      ]
    });

    window.addEventListener('resize', () => {
      [compareChart, yoyTrendChart, vendorRankingChart, divisionDistChart, priceRangeChart,
       bcgMatrixChart, priceVolumeScatterChart, seasonalityHeatmapChart, areaRankingChart,
       specialChart, bodyCareChart, makeupFragranceChart, privacyInfantChart]
        .forEach(c => c && c.resize());
    });
    const refreshForViewport = () => {
      if (lastMainData) updateUI(lastMainData);
      lastSpecialData.forEach(({ chart, tbody, payload }) => {
        renderExcelChart(chart, tbody, payload.trend, payload.period);
      });
    };
    if (compactMediaQuery.addEventListener) {
      compactMediaQuery.addEventListener('change', refreshForViewport);
    } else if (compactMediaQuery.addListener) {
      compactMediaQuery.addListener(refreshForViewport);
    }

    fetchData();
  });

  // ── API ───────────────────────────────────────────────
  function buildFilterParams({ limit = '', areaOverride = null } = {}) {
    const params = new URLSearchParams();
    if (limit) params.set('limit', limit);
    ['year', 'month', 'start_month', 'end_month'].forEach(key => {
      if (currentFilters[key]) params.set(key, currentFilters[key]);
    });
    const area = areaOverride === null ? currentFilters.area : areaOverride;
    if (area) params.set('area_name', area);
    if (currentFilters.vendor) params.set('vendor', currentFilters.vendor);
    if (currentFilters.trade) params.set('trade_type', currentFilters.trade);
    return params;
  }

  function syncFilterUrl() {
    const params = buildFilterParams();
    const query = params.toString();
    window.history.replaceState({}, '', `${window.location.pathname}${query ? `?${query}` : ''}`);
  }

  function updateAnalysisTabLinks(period) {
    if (!period || !period.start_date || !period.end_date) return;
    const targets = {
      sales: `/sales_analysis?start_date=${period.start_date}&end_date=${period.end_date}`,
      daily_sales: `/daily_sales?month=${period.end_month}`,
      growth: `/growth_analysis?start_month=${period.start_month}&end_month=${period.end_month}`,
      monthly: `/monthly_summary_analysis?start_month=${period.start_month}&end_month=${period.end_month}`
    };
    Object.entries(targets).forEach(([target, href]) => {
      const link = document.querySelector(`[data-analysis-target="${target}"]`);
      if (link) link.setAttribute('href', href);
    });
  }

  function setReportError(message = '') {
    const state = document.getElementById('monthlyReportErrorState');
    if (!state) return;
    state.hidden = !message;
    const detail = document.getElementById('monthlyReportErrorMessage');
    if (detail) detail.textContent = message;
  }

  async function fetchJson(url, { signal, timeoutMs = REQUEST_TIMEOUT_MS } = {}) {
    const controller = new AbortController();
    const relayAbort = () => controller.abort();
    if (signal) {
      if (signal.aborted) controller.abort();
      else signal.addEventListener('abort', relayAbort, { once: true });
    }
    const timeout = window.setTimeout(() => controller.abort(), timeoutMs);
    try {
      const response = await fetch(url, { signal: controller.signal });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } finally {
      window.clearTimeout(timeout);
      if (signal) signal.removeEventListener('abort', relayAbort);
    }
  }

  async function fetchData() {
    const runId = ++fetchRunId;
    if (activeFetchController) activeFetchController.abort();
    const controller = new AbortController();
    activeFetchController = controller;
    document.documentElement.dataset.monthlyCharts = 'loading';
    setReportError();
    $('#loadingOverlay').css('display', 'flex');
    const url = `/api/monthly_summary_data?${buildFilterParams({ limit: '2000' }).toString()}`;
    const specialPromise = fetchSpecialChartData(controller.signal, runId);

    try {
      const data = await fetchJson(url, { signal: controller.signal });
      if (runId !== fetchRunId) return;
      if (data.status !== 'success') throw new Error(data.message || '月結資料回應失敗');
      lastMainData = data;
      updateUI(data);
      updateFilters(data.filters);
      updateAnalysisTabLinks(data.period);
      document.documentElement.dataset.monthlyCharts = 'ready';
    } catch (error) {
      if (runId !== fetchRunId) return;
      const timedOut = error && error.name === 'AbortError';
      const message = timedOut
        ? '月結資料載入逾時，已停止本次請求；請稍後重新整理。'
        : '月結資料暫時無法載入，圖表已停止更新。';
      setReportError(message);
      document.documentElement.dataset.monthlyCharts = 'error';
      document.documentElement.dataset.monthlyChartsError = error && error.message ? error.message : String(error);
      console.error('[monthly-summary] main data failed', error);
    } finally {
      if (runId === fetchRunId) $('#loadingOverlay').hide();
    }

    await specialPromise;
    if (runId === fetchRunId) {
      activeFetchController = null;
    }
  }

  async function fetchSpecialChartData(signal, runId) {
    document.documentElement.dataset.monthlySpecialCharts = 'loading';
    const pairs = [
      ['開架保養,臉部清潔', specialChart, 'specialChartTableBody'],
      ['身體保養', bodyCareChart, 'bodyCareChartTableBody'],
      ['彩妝/指彩,精油擴香', makeupFragranceChart, 'makeupFragranceChartTableBody'],
      ['私密保養,嬰幼洗沐', privacyInfantChart, 'privacyInfantChartTableBody']
    ];
    await Promise.all(pairs.map(async ([area, chart, tbody]) => {
      const params = buildFilterParams({ areaOverride: area });
      try {
        const payload = await fetchJson(`/api/monthly_summary_trend?${params.toString()}`, {
          signal,
          timeoutMs: 12000
        });
        if (runId !== fetchRunId) return;
        if (payload.status !== 'success') throw new Error(payload.message || '區域趨勢回應失敗');
        lastSpecialData.set(area, { chart, tbody, payload });
        renderExcelChart(chart, tbody, payload.trend, payload.period);
      } catch (error) {
        if (runId !== fetchRunId || (signal && signal.aborted)) return;
        renderChartEmpty(chart, tbody, '此區域趨勢暫時無法載入。');
        console.error('[monthly-summary] special trend failed', area, error);
      }
    }));
    if (runId === fetchRunId) document.documentElement.dataset.monthlySpecialCharts = 'ready';
  }

  // ── Filter ────────────────────────────────────────────
  function selectFilter(type, value) {
    currentFilters[type] = value;
    if (type === 'year' || type === 'month') {
      currentFilters.start_month = '';
      currentFilters.end_month = '';
    }
    const btnMap = { year:'btnYear', month:'btnMonth', area:'btnArea', vendor:'btnVendor', trade:'btnTrade' };
    const defaultMap = { year:'最新年份', month:'全部月份', area:'所有區域', vendor:'所有廠商', trade:'所有類別' };
    $(`#${btnMap[type]}`).text(decodeText(value || defaultMap[type]));
    syncFilterUrl();
    fetchData();
  }
  window.selectFilter = selectFilter;

  function applyMonthRange() {
    const start = document.getElementById('periodStartMonth').value;
    const end = document.getElementById('periodEndMonth').value;
    currentFilters.start_month = start || end;
    currentFilters.end_month = end || start;
    currentFilters.year = '';
    currentFilters.month = '';
    syncFilterUrl();
    fetchData();
  }
  window.applyMonthRange = applyMonthRange;

  function resetMonthRange() {
    currentFilters.year = '';
    currentFilters.month = '';
    currentFilters.start_month = '';
    currentFilters.end_month = '';
    document.getElementById('periodStartMonth').value = '';
    document.getElementById('periodEndMonth').value = '';
    syncFilterUrl();
    fetchData();
  }
  window.resetMonthRange = resetMonthRange;

  function filterList(input) {
    const filter = input.value.toLowerCase();
    const list = input.closest('ul').querySelectorAll('li:not(:first-child)');
    list.forEach(li => {
      const t = (li.textContent || li.innerText).toLowerCase();
      li.style.display = t.indexOf(filter) > -1 ? '' : 'none';
    });
  }
  window.filterList = filterList;

  function updateFilters(f) {
    const populate = (id, list, type) => {
      const el = $(id);
      if (el.children().length > 1) return;
      list.forEach(value => {
        const item = document.createElement('li');
        const link = document.createElement('a');
        link.className = 'dropdown-item';
        link.href = '#';
        link.textContent = decodeText(value);
        link.addEventListener('click', event => {
          event.preventDefault();
          selectFilter(type, value);
        });
        item.appendChild(link);
        el.append(item);
      });
    };
    populate('#listYear',   f.years,                                       'year');
    populate('#listMonth',  f.months.map(String).sort((a,b) => a - b),     'month');
    populate('#listArea',   f.areas,                                       'area');
    populate('#listTrade',  f.trades,                                      'trade');
    populate('#listVendor', f.vendors,                                     'vendor');
    const labels = {
      year: currentFilters.year || '最新年份',
      month: currentFilters.month || '全部月份',
      area: currentFilters.area || '所有區域',
      vendor: currentFilters.vendor || '所有廠商',
      trade: currentFilters.trade || '所有類別'
    };
    $('#btnYear').text(decodeText(labels.year));
    $('#btnMonth').text(decodeText(labels.month));
    $('#btnArea').text(decodeText(labels.area));
    $('#btnVendor').text(decodeText(labels.vendor));
    $('#btnTrade').text(decodeText(labels.trade));
  }

  // ── UI updates ────────────────────────────────────────
  function updateUI(data) {
    const period = data.period || {};
    $('#activeReportPeriod').text(period.label || '全部資料');
    const periodEmpty = Number(data.total_rows || 0) === 0;
    const periodEmptyState = document.getElementById('monthlyPeriodEmptyState');
    if (periodEmptyState) {
      periodEmptyState.hidden = !periodEmpty;
      const periodEmptyLabel = document.getElementById('monthlyPeriodEmptyLabel');
      if (periodEmptyLabel) periodEmptyLabel.textContent = period.label || '所選期間';
    }
    if (!currentFilters.year && !currentFilters.month && !currentFilters.start_month && period.start_month) {
      currentFilters.start_month = period.start_month;
      currentFilters.end_month = period.end_month;
      syncFilterUrl();
    }
    if (period.start_month) document.getElementById('periodStartMonth').value = period.start_month;
    if (period.end_month) document.getElementById('periodEndMonth').value = period.end_month;
    $('#totalRows').text(data.total_rows.toLocaleString());
    $('#totalMonths').text(data.total_months);

    const k = data.kpis || {};
    $('#kpiSales').text('$' + (k.sales || 0).toLocaleString());
    $('#kpiProfit').text('$' + (k.profit || 0).toLocaleString());
    $('#kpiMargin').text(k.margin || '-');
    $('#kpiVol').text((k.vol || 0).toLocaleString());

    if (k.sales_yoa > 0) {
      const yoy = ((k.sales - k.sales_yoa) / k.sales_yoa * 100).toFixed(1);
      const cls = yoy >= 0 ? 'text-danger' : 'text-success';
      $('#kpiSalesYoY').html(`<span class="${cls} fw-bold"><i class="fas fa-caret-up"></i> ${yoy}%</span> vs 去年同期`);
    } else { $('#kpiSalesYoY').text('-'); }

    table.clear();
    (data.rows || []).forEach(row => {
      const sales = row.sales_amt_curr || 0;
      const prevYear = row.sales_amt_yoa || 0;
      let yoyHtml = '-';
      if (prevYear > 0) {
        const yoy = ((sales - prevYear) / prevYear * 100).toFixed(1);
        const cls = yoy >= 0 ? 'text-danger' : 'text-success';
        yoyHtml = `<span class="${cls} fw-bold">${yoy > 0 ? '+' : ''}${yoy}%</span>`;
      }
      table.row.add([
        `${row.year}/${row.month}`, safeHtmlText(row.division), safeHtmlText(row.area_name || '-'), safeHtmlText(row.pm_name || '-'),
        `<span class="text-primary fw-600">${safeHtmlText(row.brand_name)}</span>`,
        `<span class="small text-muted">${safeHtmlText(row.vendor_name)}</span>`,
        `<span class="badge bg-light text-dark border">${safeHtmlText(row.trade_type || '-')}</span>`,
        sales.toLocaleString(), yoyHtml
      ]);
    });
    table.draw();

    renderExcelChart(compareChart, 'compareChartTableBody', data.trend, period);
    updateHighlights(data.highlights);
    renderYoYTrendChart(yoyTrendChart, 'yoyTrendChartTableBody', data.yoy_trend);
    renderVendorRankingChart(vendorRankingChart, 'vendorRankingChartTableBody', data.vendor_ranking, period);
    renderDivisionDistChart(divisionDistChart, 'divisionDistChartTableBody', data.division_dist, period);
    renderPriceRangeChart(priceRangeChart, 'priceRangeChartTableBody', data.price_contribution, period);
    renderBCGMatrixChart(bcgMatrixChart, data.bcg_data);
    renderScatterChart(priceVolumeScatterChart, data.bcg_data);
    renderSeasonalityHeatmap(seasonalityHeatmapChart, data.heatmap_data, period);
    renderAreaRankingChart(areaRankingChart, 'areaRankingChartTableBody', data.area_ranking, period);
  }

  function renderChartEmpty(chart, tableBodyId, message) {
    if (!chart) return;
    chart.clear();
    chart.setOption({
      title: {
        text: '尚無可繪製資料',
        subtext: message,
        left: 'center',
        top: 'middle',
        textStyle: { color: '#3f3a34', fontSize: 15, fontWeight: 700 },
        subtextStyle: { color: '#746b61', fontSize: 12, lineHeight: 18 }
      },
      series: []
    });
    if (tableBodyId) {
      $(`#${tableBodyId}`).html(`<tr><td class="text-muted py-3">${message}</td></tr>`);
    }
  }

  // ── Highlights (Top 3) ────────────────────────────────
  function updateHighlights(h) {
    if (!h || (!h.rev_top.length && !h.profit_top.length)) { $('#highlightsRow').hide(); return; }
    $('#highlightsRow').show();
    const r = (id, list, prefix='') => {
      const t = $(`#${id}`); t.empty();
      list.forEach((it, i) => t.append(`<tr><td class="ps-3"><span class="badge bg-secondary rounded-pill me-2">${i+1}</span>${safeHtmlText(it.name)}</td><td class="text-end pe-3 fw-bold">${prefix}${it.value.toLocaleString()}</td></tr>`));
    };
    r('revHighlightsBody', h.rev_top, '$');
    r('profitHighlightsBody', h.profit_top, '$');
    r('volHighlightsBody', h.vol_top, '');
  }

  // ── Excel-style 主對比圖 ─────────────────────────────
  function renderExcelChart(chart, tableBodyId, trend, period = {}) {
    if (!trend || !trend.length) {
      renderChartEmpty(chart, tableBodyId, '所選期間與去年同期皆無月結資料。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const years = [...new Set(trend.map(t => t.date.split('/')[0]))].sort().reverse();
    const currYear = String(period.current_year || years[0] || new Date().getFullYear());
    const prevYear = String(period.previous_year || (parseInt(currYear) - 1));
    const currentSeriesLabel = period.label || currYear;
    const previousSeriesLabel = period.previous_label || prevYear;
    const hasPeriodRoles = trend.some(t => t.period_role && Number.isInteger(t.slot));
    const slots = hasPeriodRoles
      ? [...new Set(trend.map(t => t.slot))].sort((a, b) => a - b)
      : [...new Set(trend.map(t => parseInt(t.date.split('/')[1], 10)))].sort((a, b) => a - b);
    const months = slots.map(slot => {
      const item = trend.find(t => (hasPeriodRoles ? t.slot : parseInt(t.date.split('/')[1], 10)) === slot);
      return hasPeriodRoles ? item.slot_label : String(slot);
    });
    const currData = new Array(months.length).fill(0);
    const prevData = new Array(months.length).fill(0);
    const yoyData  = new Array(months.length).fill(0);
    trend.forEach(t => {
      const [y, m] = t.date.split('/');
      const slot = hasPeriodRoles ? t.slot : parseInt(m, 10);
      const monthIndex = slots.indexOf(slot);
      if (monthIndex < 0) return;
      if ((hasPeriodRoles && t.period_role === 'current') || (!hasPeriodRoles && y === currYear)) currData[monthIndex] = t.sales;
      if ((hasPeriodRoles && t.period_role === 'previous') || (!hasPeriodRoles && y === prevYear)) prevData[monthIndex] = t.sales;
    });
    for (let i = 0; i < months.length; i++) {
      if (prevData[i] > 0) yoyData[i] = parseFloat(((currData[i] - prevData[i]) / prevData[i] * 100).toFixed(1));
    }

    const C1 = cssColor('--momo-warm-caramel', '#c96442');
    const C2 = cssColor('--momo-warm-olive', '#6f7a4a');
    const CM = cssColor('--momo-text-tertiary', '#94a3b8');

    const tableHtml = `
      <tr><td class="ms-cmp__hd">月份</td>${months.map(m => `<td class="ms-cmp__mh">${m}</td>`).join('')}</tr>
      <tr><td class="text-start ps-2"><span class="ms-cmp__sw" style="background:${C1}"></span>${currentSeriesLabel}</td>${currData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>
      <tr><td class="text-start ps-2"><span class="ms-cmp__sw" style="background:${C2}"></span>${previousSeriesLabel}</td>${prevData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>
      <tr><td class="text-start ps-2"><i class="fas fa-minus" style="color:${CM};margin-right:5px;"></i>YOY</td>${yoyData.map((v, i) => `<td>${(currData[i] > 0 || prevData[i] > 0) ? v + '%' : '-'}</td>`).join('')}</tr>`;
    $(`#${tableBodyId}`).html(tableHtml);

    chart.setOption({
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      legend: { data: [currentSeriesLabel, previousSeriesLabel, 'YOY'], bottom: 0, show: false },
      grid: {
        left: compact ? '42' : '80',
        right: compact ? '16' : '50',
        top: compact ? '26' : '50',
        bottom: compact ? '28' : '20'
      },
      xAxis: {
        type: 'category',
        data: months,
        axisLabel: { show: compact, interval: 0, fontSize: 10 },
        axisTick: { show: true }
      },
      yAxis: [
        { type: 'value', name: compact ? '' : '業績', axisLabel: { formatter: v => compact ? (v/10000).toFixed(0) + '萬' : v.toLocaleString(), fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
        { type: 'value', name: compact ? '' : 'YoY',  axisLabel: { formatter: '{value}%', fontSize: compact ? 10 : 12 }, splitLine: { show: false } }
      ],
      series: [
        { name: currentSeriesLabel, type: 'bar', data: currData, barMaxWidth: compact ? 12 : 20,
          label: { show: !compact, position: 'top', fontSize: 16, fontWeight: 'bold', formatter: p => p.value ? (p.value/10000).toFixed(0) + '萬' : '' } },
        { name: previousSeriesLabel, type: 'bar', data: prevData, barMaxWidth: compact ? 12 : 20,
          label: { show: !compact, position: 'top', fontSize: 16, fontWeight: 'bold', formatter: p => p.value ? (p.value/10000).toFixed(0) + '萬' : '' } },
        { name: 'YOY', type: 'line', yAxisIndex: 1, data: yoyData, smooth: true,
          lineStyle: { width: compact ? 1.5 : 2 }, symbol: 'circle', symbolSize: compact ? 4 : 6,
          label: { show: !compact, position: 'bottom', fontSize: 16, fontWeight: 'bold', formatter: p => p.value ? p.value + '%' : '' } }
      ]
    });
  }

  // ── YoY Trend ─────────────────────────────────────────
  function renderYoYTrendChart(chart, tableId, data) {
    if (!data || !data.length) {
      renderChartEmpty(chart, tableId, '所選期間尚無本期業績，未以其他月份回填。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const dates = data.map(d => d.date.split('/')[1] + '月');
    const currData = data.map(d => d.curr);
    const yoaData  = data.map(d => d.yoa);
    const years = [...new Set(data.map(d => d.date.split('/')[0]))];
    const currYearStr = years[0] || '本期';

    let html = `
      <tr><td class="ms-cmp__hd">月份</td>${dates.map(m => `<td class="ms-cmp__mh">${m}</td>`).join('')}</tr>
      <tr><td class="text-start ps-2"><span class="ms-cmp__sw ms-cmp__sw--accent"></span>${currYearStr}</td>${currData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>
      <tr><td class="text-start ps-2"><span class="ms-cmp__sw ms-cmp__sw--muted"></span>去年同期</td>${yoaData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>`;
    $(`#${tableId}`).html(html);

    chart.setOption({
      tooltip: { trigger: 'axis' },
      grid: { left: compact ? '42' : '60', right: compact ? '14' : '30', top: compact ? '24' : '40', bottom: compact ? '26' : '20' },
      legend: { data: [currYearStr, '去年同期'], bottom: 0, show: !compact },
      xAxis: { type: 'category', data: dates, axisLabel: { fontSize: compact ? 10 : 12 } },
      yAxis: { type: 'value', axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 12 } },
      series: [
        { name: currYearStr, type: 'line', data: currData, lineStyle: { width: 3 }, showSymbol: false, areaStyle: { opacity: 0.12 } },
        { name: '去年同期',   type: 'line', data: yoaData,  lineStyle: { type: 'dashed' }, showSymbol: false }
      ]
    });
  }

  // ── 類別分佈 (雙圓餅) ─────────────────────────────────
  function renderDivisionDistChart(chart, _tableId, data, period = {}) {
    if (!data || !data.length) {
      renderChartEmpty(chart, _tableId, '所選期間與去年同期皆無類別業績。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const previousLabel = period.previous_label || `${period.previous_year || ''} 年`;
    const currentLabel = period.label || `${period.current_year || ''} 年`;
    const pie = key => data.map(d => ({ name: decodeText(d.name), value: d[key] || 0 })).filter(d => d.value > 0);
    chart.setOption({
      title: [
        { text: previousLabel, left: '23%', top: compact ? '2%' : '5%', textAlign: 'center', textStyle: { fontSize: compact ? 12 : 16, fontWeight: 'bold' } },
        { text: currentLabel, left: '73%', top: compact ? '2%' : '5%', textAlign: 'center', textStyle: { fontSize: compact ? 12 : 16, fontWeight: 'bold' } }
      ],
      tooltip: { trigger: 'item', formatter: p => `<strong>${safeHtmlText(p.name)}</strong><br/>業績: ${(p.value/10000).toFixed(0)}萬<br/>佔比: ${p.percent.toFixed(1)}%` },
      legend: { type: 'scroll', orient: 'horizontal', bottom: 0, show: !compact, textStyle: { fontSize: 12, fontWeight: 'bold' } },
      series: [
        { name: previousLabel, type: 'pie', radius: compact ? ['36%', '58%'] : ['30%', '60%'], center: ['25%', compact ? '53%' : '55%'], data: pie('sales_previous'),
          label: { show: !compact, fontSize: 11, fontWeight: 'bold', formatter: p => `${p.name}\n${(p.value/10000).toFixed(0)}萬\n${p.percent.toFixed(1)}%` } },
        { name: currentLabel, type: 'pie', radius: compact ? ['36%', '58%'] : ['30%', '60%'], center: ['75%', compact ? '53%' : '55%'], data: pie('sales_current'),
          label: { show: !compact, fontSize: 11, fontWeight: 'bold', formatter: p => `${p.name}\n${(p.value/10000).toFixed(0)}萬\n${p.percent.toFixed(1)}%` } }
      ]
    });
  }

  // ── 價格帶 ────────────────────────────────────────────
  function renderPriceRangeChart(chart, tableId, data, period = {}) {
    if (!data || !data.length) {
      renderChartEmpty(chart, tableId, '所選期間與去年同期皆無價格帶資料。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const order = ['0-499','500-999','1,000-1,999','2,000-4,999','5,000-9,999','10,000+'];
    data.sort((a,b) => order.indexOf(a.range) - order.indexOf(b.range));
    const previousLabel = period.previous_label || '去年同期';
    const currentLabel = period.label || '本期';
    const previousTotal = data.reduce((s, x) => s + (x.sales_previous || 0), 0);
    const currentTotal = data.reduce((s, x) => s + (x.sales_current || 0), 0);

    chart.setOption({
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
        formatter: ps => safeHtmlText(ps[0].name) + '<br/>' + ps.map(p => {
          const v = p.value || 0;
          const total = p.seriesName === previousLabel ? previousTotal : currentTotal;
          const pct = total > 0 ? (v/total*100).toFixed(1) + '%' : '0.0%';
          return `${p.marker} ${safeHtmlText(p.seriesName)}: ${v.toLocaleString()} (${pct})`;
        }).join('<br/>')
      },
      legend: { data: [previousLabel, currentLabel], bottom: 0, show: !compact, textStyle: { fontSize: 13, fontWeight: 'bold' } },
      grid: { left: compact ? '2%' : '3%', right: compact ? '2%' : '4%', bottom: compact ? '18%' : '12%', top: compact ? '8%' : '15%', containLabel: true },
      xAxis: { type: 'category', data: data.map(d => d.range), axisLabel: { interval: 0, rotate: compact ? 32 : 0, fontSize: compact ? 10 : 13, fontWeight: 'bold' } },
      yAxis: { type: 'value', name: compact ? '' : '銷售額', nameTextStyle: { fontSize: 12, fontWeight: 'bold' },
        axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 12 } },
      series: [
        { label: previousLabel, key: 'sales_previous', total: previousTotal },
        { label: currentLabel, key: 'sales_current', total: currentTotal }
      ].map((series) => ({
        name: series.label, type: 'bar', barWidth: compact ? 13 : 30,
        data: data.map(d => d[series.key] || 0),
        label: { show: !compact, position: 'top', fontSize: 12, fontWeight: 'bold',
          formatter: p => {
            const v = p.value || 0;
            const total = series.total;
            const pct = total > 0 ? (v/total*100).toFixed(1) + '%' : '';
            return pct + '\n' + (v/10000).toFixed(0) + '萬';
          }
        }
      }))
    });
    $(`#${tableId}`).parent().html('');
  }

  // ── BCG 矩陣（4 象限顯式配色） ───────────────────────
  function renderBCGMatrixChart(chart, data) {
    if (!data || !data.length) {
      renderChartEmpty(chart, null, '所選期間尚無可建立品牌策略矩陣的本期資料。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const C_STAR     = cssColor('--momo-warm-olive', '#6f7a4a');
    const C_COW      = cssColor('--momo-warm-honey', '#c89043');
    const C_QUESTION = cssColor('--momo-warm-caramel', '#c96442');
    const C_DOG      = cssColor('--momo-warm-mahogany', '#7a3b2c');
    chart.setOption({
      tooltip: { formatter: p => `<div style="font-weight:bold">${safeHtmlText(p.value[3])}</div><div>毛利率: ${p.value[0]}%</div><div>銷售額: $${p.value[1].toLocaleString()}</div><div>銷量: ${p.value[2].toLocaleString()}</div>` },
      grid: { left: compact ? '46' : '80', right: compact ? '16' : '50', top: compact ? '18' : '30', bottom: compact ? '34' : '30' },
      xAxis: { name: compact ? '' : '毛利率(%)', type: 'value', axisLabel: { fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
      yAxis: { name: compact ? '' : '業績($)',   type: 'value', axisLabel: { formatter: v => compact ? (v/10000).toFixed(0) + '萬' : v.toLocaleString(), fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
      series: [{
        type: 'scatter',
        data: data.map(d => [d.margin, d.sales, d.qty, decodeText(d.name)]),
        symbolSize: d => Math.min(compact ? 52 : 96, Math.max(compact ? 8 : 10, Math.sqrt(Math.max(d[2], 1)) * (compact ? 0.35 : 0.75))),
        itemStyle: {
          color: p => {
            if (p.value[0] >= 30 && p.value[1] >= 500000) return C_STAR;
            if (p.value[0] <  30 && p.value[1] >= 500000) return C_COW;
            if (p.value[0] >= 30 && p.value[1] <  500000) return C_QUESTION;
            return C_DOG;
          },
          opacity: 0.78, borderColor: '#fff8ef', borderWidth: 1
        },
        markLine: { silent: true, data: [
          { xAxis: 30, lineStyle: { color: '#999' }, label: { show: !compact, formatter: '高獲利線 (30%)' } },
          { yAxis: 500000, lineStyle: { color: '#999' }, label: { show: !compact, formatter: '高營收線 ($50萬)' } }
        ] }
      }]
    });
  }

  // ── 散佈圖（價/量） ──────────────────────────────────
  function renderScatterChart(chart, data) {
    if (!data || !data.length) {
      renderChartEmpty(chart, null, '所選期間尚無可比較價格與銷量的本期資料。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const series = data.map(d => {
      const avg = d.qty > 0 ? Math.round(d.sales / d.qty) : 0;
      return [avg, d.qty, d.sales, decodeText(d.name)];
    });
    chart.setOption({
      tooltip: { formatter: p => `<div style="font-weight:bold">${safeHtmlText(p.value[3])}</div><div>均價: $${p.value[0]}</div><div>銷量: ${p.value[1].toLocaleString()}</div><div>業績: $${p.value[2].toLocaleString()}</div>` },
      grid: { left: compact ? '42' : '60', right: compact ? '16' : '50', top: compact ? '18' : '30', bottom: compact ? '32' : '30' },
      xAxis: { name: compact ? '' : '均價($)', type: 'value', axisLabel: { fontSize: compact ? 10 : 12 }, splitLine: { show: false } },
      yAxis: { name: compact ? '' : '銷量',     type: 'value', axisLabel: { fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
      series: [{ type: 'scatter', data: series, symbolSize: d => Math.min(compact ? 36 : 64, Math.max(compact ? 6 : 8, Math.log(Math.max(d[2],1)) * (compact ? 1.35 : 2))), itemStyle: { opacity: 0.65 } }]
    });
  }

  // ── 廠商排行 ──────────────────────────────────────────
  function renderVendorRankingChart(chart, tableId, data, period = {}) {
    if (!data || !data.length) {
      renderChartEmpty(chart, tableId, '所選期間與去年同期皆無廠商業績。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const cd = data.slice().reverse();
    const visibleCount = compact ? 10 : 18;
    const zoomStart = cd.length > visibleCount
      ? Math.max(0, 100 - (visibleCount / cd.length * 100))
      : 0;
    const previousLabel = period.previous_label || '去年同期';
    const currentLabel = period.label || '本期';
    chart.setOption({
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      legend: { data: [previousLabel, currentLabel], bottom: 0, show: !compact, textStyle: { fontSize: 15, fontWeight: 'bold' } },
      grid: { left: compact ? '86' : '160', right: compact ? '34' : '120', top: compact ? '10' : '20', bottom: compact ? '28' : '45' },
      dataZoom: cd.length > visibleCount ? [
        { type: 'inside', yAxisIndex: 0, start: zoomStart, end: 100 },
        { type: 'slider', yAxisIndex: 0, start: zoomStart, end: 100, right: 3, width: 10, showDetail: false }
      ] : [],
      xAxis: { type: 'value', axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
      yAxis: { type: 'category', data: cd.map(d => decodeText(d.name)), axisLabel: { width: compact ? 78 : 150, overflow: 'truncate', interval: 0, fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
      series: [
        { name: previousLabel, type: 'bar', data: cd.map(d => d.sales_previous || 0), barWidth: compact ? 10 : 18, barGap: '0%', barCategoryGap: compact ? '70%' : '75%',
          label: { show: !compact, position: 'insideRight', fontSize: 13, fontWeight: 'bold', color: '#fff8ef', textShadowColor: 'rgba(42,37,32,0.5)', textShadowBlur: 2,
            formatter: p => p.value > 0 ? (p.value/10000).toFixed(0) + '萬' : '' } },
        { name: currentLabel, type: 'bar', data: cd.map(d => d.sales_current || 0), barWidth: compact ? 10 : 18,
          label: { show: !compact, position: 'right', fontSize: 14, fontWeight: 'bold',
            formatter: p => p.value > 0 ? (p.value/10000).toFixed(0) + '萬' : '' } }
      ]
    });

    let html = `<thead class="table-light"><tr>
      <th>排名</th><th>廠商名稱</th><th class="text-end">總銷售額</th><th class="text-end">銷售額 YoY</th>
      <th class="text-end">${previousLabel}</th><th class="text-end">${currentLabel}</th>
      <th class="text-end">總毛利額</th><th class="text-end">毛利額 YoY</th>
      <th class="text-end">${previousLabel}毛利</th><th class="text-end">${currentLabel}毛利</th></tr></thead><tbody>`;
    data.forEach((d, i) => {
      const previousSales = d.sales_previous || 0, currentSales = d.sales_current || 0;
      const previousProfit = d.profit_previous || 0, currentProfit = d.profit_current || 0;
      const sYoY = previousSales > 0 ? ((currentSales-previousSales)/previousSales*100).toFixed(1)+'%' : '-';
      const pYoY = previousProfit > 0 ? ((currentProfit-previousProfit)/previousProfit*100).toFixed(1)+'%' : '-';
      const sCls = previousSales > 0 && (currentSales-previousSales) >= 0 ? 'text-danger' : (previousSales > 0 ? 'text-success' : '');
      const pCls = previousProfit > 0 && (currentProfit-previousProfit) >= 0 ? 'text-danger' : (previousProfit > 0 ? 'text-success' : '');
      html += `<tr>
        <td>${i+1}</td>
        <td class="text-start text-truncate" style="max-width:200px;">${safeHtmlText(d.name)}</td>
        <td class="text-end fw-bold">${d.sales.toLocaleString()}</td>
        <td class="text-end fw-bold ${sCls}">${sYoY}</td>
        <td class="text-end text-muted">${previousSales.toLocaleString()}</td>
        <td class="text-end text-primary fw-bold">${currentSales.toLocaleString()}</td>
        <td class="text-end fw-bold">${d.profit.toLocaleString()}</td>
        <td class="text-end fw-bold ${pCls}">${pYoY}</td>
        <td class="text-end text-muted">${previousProfit.toLocaleString()}</td>
        <td class="text-end text-success fw-bold">${currentProfit.toLocaleString()}</td></tr>`;
    });
    html += `</tbody>`;
    $(`#${tableId}`).parent().html(`<table class="table table-bordered table-hover table-sm text-center mb-0 small" style="white-space:nowrap;">${html}</table>`);
  }

  // ── 季節熱力圖 ────────────────────────────────────────
  function renderSeasonalityHeatmap(chart, data, _period = {}) {
    if (!data || !data.length) {
      renderChartEmpty(chart, null, '所選期間與去年同期皆無季節分佈資料。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    const areaSales = {};
    data.forEach(d => {
      const category = decodeText(d.category);
      areaSales[category] = (areaSales[category] || 0) + d.sales;
    });
    const areas = Object.keys(areaSales).sort((a,b) => areaSales[b] - areaSales[a]);
    const yLabels = [];
    const years = [...new Set(data.map(d => Number(d.year)))].sort((a, b) => b - a);
    years.forEach(y => areas.forEach(a => yLabels.push(`${y} ${a}`)));
    const heatmap = [];
    data.forEach(d => {
      const xi = d.month - 1, yi = yLabels.indexOf(`${d.year} ${decodeText(d.category)}`);
      if (xi >= 0 && xi < 12 && yi >= 0) heatmap.push([xi, yi, d.sales]);
    });
    const max = Math.max(...data.map(d => d.sales), 1);
    chart.setOption({
      tooltip: { position: 'top',
        formatter: p => `<strong>${safeHtmlText(yLabels[p.value[1]])}</strong><br/>${months[p.value[0]]}<br/>業績: <strong>${(p.value[2]/10000).toFixed(0)}萬</strong>` },
      grid: { height: compact ? '72%' : '75%', top: compact ? '3%' : '5%', bottom: compact ? '20%' : '18%', left: compact ? '72' : '15%', right: compact ? '5' : '3%' },
      xAxis: { type: 'category', data: months, splitArea: { show: true }, axisLabel: { fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
      yAxis: { type: 'category', data: yLabels, splitArea: { show: true }, axisLabel: { width: compact ? 66 : 120, overflow: 'truncate', fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
      visualMap: { min: 0, max, calculable: true, orient: 'horizontal', left: 'center', bottom: '0%', textStyle: { fontSize: compact ? 10 : 12 },
        inRange: { color: ['#fef3c7', '#f5c98a', '#e3a560', '#c96442', '#7a3b2c'] } },
      series: [{ type: 'heatmap', data: heatmap,
        label: { show: !compact, fontSize: 12, fontWeight: 'bold', formatter: p => (p.value[2]/10000).toFixed(0) + '萬' },
        emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.45)' } } }]
    });
  }

  // ── 區域排行 ──────────────────────────────────────────
  function renderAreaRankingChart(chart, tableId, data, period = {}) {
    if (!data || !data.length) {
      renderChartEmpty(chart, tableId, '所選期間與去年同期皆無區域業績。');
      return;
    }
    chart.clear();
    const compact = isCompactViewport();
    const previousLabel = period.previous_label || '去年同期';
    const currentLabel = period.label || '本期';
    data.sort((a,b) => b.sales - a.sales);
    chart.setOption({
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
        formatter: ps => safeHtmlText(ps[0].name) + '<br/>' + ps.map(p => `${p.marker} ${safeHtmlText(p.seriesName)}: ${(p.value || 0).toLocaleString()}`).join('<br/>') },
      legend: { data: [previousLabel, currentLabel], bottom: 0, show: !compact, textStyle: { fontSize: 14 } },
      grid: { left: compact ? '2%' : '3%', right: compact ? '2%' : '4%', bottom: compact ? '20%' : '10%', top: compact ? '8%' : '10%', containLabel: true },
      xAxis: { type: 'category', data: data.map(d => decodeText(d.name)), axisLabel: { interval: 0, rotate: compact ? 28 : 0, fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
      yAxis: { type: 'value', name: compact ? '' : '業績', axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 13 } },
      series: [
        { label: previousLabel, key: 'sales_previous' },
        { label: currentLabel, key: 'sales_current' }
      ].map(series => ({
        name: series.label, type: 'bar', data: data.map(d => d[series.key] || 0),
        label: { show: !compact, position: 'top', fontSize: 14, fontWeight: 'bold', formatter: p => (p.value/10000).toFixed(0) + '萬' }
      }))
    });
    let html = `<thead class="table-light"><tr><th>排名</th><th>區名稱</th><th>業績</th></tr></thead><tbody>`;
    data.forEach((d, i) => { html += `<tr><td>${i+1}</td><td class="text-start">${safeHtmlText(d.name)}</td><td class="text-end fw-bold">$${d.sales.toLocaleString()}</td></tr>`; });
    html += `</tbody>`;
    $(`#${tableId}`).parent().html(`<table class="table table-bordered table-hover table-sm text-center mb-0 small">${html}</table>`);
  }

  // 公開 fetchData 給 onclick 使用
  window.fetchData = fetchData;
})();