{% extends 'ewoooc_base.html' %}
{% block title %}營運成長報表 - EwoooC{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-growth.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-growth-bem.css') }}">
{% endblock %}

{% block ewooo_content %}
<div class="momo-app" data-page-group="analytics">
  <div class="growth-analysis-page">
    {% include 'components/_analysis_report_tabs.html' %}

    {# ── Page head ──────────────────────────────────── #}
    <header class="ga-page-head">
      <div class="ga-page-head__title">
        <i class="fas fa-rocket ga-page-head__icon"></i>
        <h1 class="ga-page-head__h1">營運成長策略報表</h1>
      </div>
      <span class="ga-page-head__meta">
        數據更新至 <strong>{{ chart_data.labels[-1] if chart_data.labels else '-' }}</strong>
      </span>
    </header>

    {% if is_empty_state|default(false) %}
      <section class="ga-empty-state">
        <i class="fas fa-chart-line" aria-hidden="true"></i>
        <h2>尚未匯入可分析的業績資料</h2>
        <p>{{ empty_message|default('匯入月度業績資料後，這裡會顯示 YTD、AOV、訂單數與成長趨勢。') }}</p>
      </section>
    {% endif %}

    {# ── KPI Row (3 cards) ──────────────────────────── #}
    <section class="ga-kpi-row">
      <article class="ga-kpi ga-kpi--revenue">
        <div class="ga-kpi__label">YTD 本年度累計業績 ({{ kpi.current_year }})</div>
        <div class="ga-kpi__value">${{ "{:,.0f}".format(kpi.ytd_revenue) }}</div>
        <div class="ga-kpi__delta">
          <span class="ga-kpi__chip">YoY Growth</span>
          <span class="ga-kpi__yoy {{ 'is-up' if kpi.ytd_growth >= 0 else 'is-down' }}">
            <i class="fas fa-{{ 'arrow-up' if kpi.ytd_growth >= 0 else 'arrow-down' }}"></i>
            {{ "{:+.1f}%".format(kpi.ytd_growth) }}
          </span>
          <span class="ga-kpi__hint">vs 去年同期</span>
        </div>
        <i class="fas fa-chart-line ga-kpi__icon-bg"></i>
      </article>

      <article class="ga-kpi ga-kpi--aov">
        <div class="ga-kpi__label">最新月平均單價</div>
        <div class="ga-kpi__value">${{ "{:,.0f}".format(kpi.recent_aov) }}</div>
        <div class="ga-kpi__hint">月結銷售額 ÷ 銷量</div>
        <i class="fas fa-shopping-cart ga-kpi__icon-bg"></i>
      </article>

      <article class="ga-kpi ga-kpi--orders">
        <div class="ga-kpi__label">總銷量</div>
        <div class="ga-kpi__value">{{ "{:,.0f}".format(kpi.total_orders) }}</div>
        <div class="ga-kpi__hint">全時期累計件數</div>
        <i class="fas fa-receipt ga-kpi__icon-bg"></i>
      </article>
    </section>

    {# ── Charts Row 1 ──────────────────────────────── #}
    <section class="ga-chart-row ga-chart-row--8-4">
      <article class="ga-chart-card">
        <header class="ga-chart-card__head">
          <span class="ga-chart-card__title"><i class="fas fa-chart-bar"></i> 月營收與年增率 (Revenue & YoY)</span>
        </header>
        <div class="ga-chart-card__body" style="--ga-chart-h: 350px;">
          <canvas id="revenueChart"></canvas>
        </div>
      </article>

      <article class="ga-chart-card">
        <header class="ga-chart-card__head">
          <span class="ga-chart-card__title"><i class="fas fa-percentage"></i> 月增率分析 (MoM)</span>
        </header>
        <div class="ga-chart-card__body" style="--ga-chart-h: 350px;">
          <canvas id="momChart"></canvas>
        </div>
      </article>
    </section>

    {# ── Charts Row 2 ──────────────────────────────── #}
    <section class="ga-chart-row ga-chart-row--6-6">
      <article class="ga-chart-card">
        <header class="ga-chart-card__head">
          <span class="ga-chart-card__title"><i class="fas fa-wallet"></i> 平均單價趨勢</span>
        </header>
        <div class="ga-chart-card__body" style="--ga-chart-h: 300px;">
          <canvas id="aovChart"></canvas>
        </div>
      </article>

      <article class="ga-chart-card">
        <header class="ga-chart-card__head">
          <span class="ga-chart-card__title"><i class="fas fa-hand-holding-usd"></i> 獲利能力分析 (Gross Margin %)</span>
        </header>
        <div class="ga-chart-card__body" style="--ga-chart-h: 300px;">
          <canvas id="marginChart"></canvas>
        </div>
      </article>
    </section>
  </div>
</div>
{% endblock %}

{% block extra_js %}
  <template id="chart-data">{{ chart_data | tojson }}</template>
  <script src="{{ url_for('static', filename='js/analysis-chart-theme.js') }}"></script>
  <script src="{{ url_for('static', filename='js/page-growth.js') }}"></script>
{% endblock %}