/* ════════════════════════════════════════════════════════
 * page-growth.js — Turn C
 * growth_analysis.html 的 Chart.js 圖表
 * 依賴 analysis-chart-theme.js 統一字型/border/暖色 palette
 * ════════════════════════════════════════════════════════ */
(function () {
  'use strict';

  const data = JSON.parse(document.getElementById('chart-data').textContent);
  const rootStyle = getComputedStyle(document.documentElement);
  const token = (name, fallback) => rootStyle.getPropertyValue(name).trim() || fallback;

  // 與 design system page-group=analytics 對齊的暖色 palette
  const chartPalette = {
    caramel:      token('--momo-page-chart-2', '#c96442'),
    caramelSoft:  token('--momo-warm-caramel-soft', 'rgba(201, 100, 66, 0.58)'),
    honey:        token('--momo-page-accent', '#c89043'),
    honeySoft:    token('--momo-page-accent-soft', 'rgba(200, 144, 67, 0.14)'),
    rust:         token('--momo-danger-text', '#7a3210'),
    rustSoft:     token('--momo-danger-bg', '#efd3c4')
  };

  Chart.defaults.color = token('--momo-text-secondary', '#6b6155');
  Chart.defaults.borderColor = token('--momo-border-light', 'rgba(42, 37, 32, 0.10)');
  Chart.defaults.font.family = token('--momo-font-family', "'Inter', system-ui, sans-serif");

  // 1) Revenue + YoY
  new Chart(document.getElementById('revenueChart'), {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: [
        { label: '月營收 ($)', data: data.revenue,
          backgroundColor: chartPalette.caramelSoft, order: 2 },
        { label: 'YoY 年增率 (%)', data: data.yoy, type: 'line',
          borderColor: chartPalette.rust, borderWidth: 2,
          yAxisID: 'y1', order: 1, tension: 0.3 }
      ]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      scales: {
        y:  { beginAtZero: true, title: { display: true, text: '金額 ($)' } },
        y1: { position: 'right', grid: { drawOnChartArea: false },
              title: { display: true, text: '成長率 (%)' } }
      }
    }
  });

  // 2) MoM
  new Chart(document.getElementById('momChart'), {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: [{
        label: 'MoM 月增率 (%)',
        data: data.mom,
        backgroundColor: ctx => ctx.raw >= 0 ? chartPalette.honeySoft : chartPalette.rustSoft
      }]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false } }
    }
  });

  // 3) AOV
  new Chart(document.getElementById('aovChart'), {
    type: 'line',
    data: {
      labels: data.labels,
      datasets: [{
        label: '平均單價 ($)',
        data: data.aov,
        borderColor: chartPalette.caramel,
        backgroundColor: chartPalette.caramelSoft,
        fill: true, tension: 0.4
      }]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      scales: { y: { beginAtZero: true } }
    }
  });

  // 4) Margin
  new Chart(document.getElementById('marginChart'), {
    type: 'line',
    data: {
      labels: data.labels,
      datasets: [{
        label: '毛利率 (%)',
        data: data.margin_rate,
        borderColor: chartPalette.honey,
        backgroundColor: chartPalette.honeySoft,
        fill: true, tension: 0.4
      }]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      scales: { y: { beginAtZero: true } }
    }
  });
})();