{% 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 %}

{% macro ga_chart_snapshot(labels, values, mode='currency') %}
  <div class="ga-chart-snapshot">
    {% for label in labels %}
      {% set val = values[loop.index0]|default(0) %}
      <span class="ga-chart-snapshot__item">
        <b>{{ label }}</b>
        <strong>
          {% if mode == 'pct' %}{{ "{:+.1f}%".format(val) }}
          {% else %}${{ "{:,.0f}".format(val) }}{% endif %}
        </strong>
      </span>
    {% endfor %}
  </div>
{% endmacro %}

{% block ewooo_content %}
<div
  class="growth-analysis-page"
  data-page-group="analytics"
  data-density-guardrail="compact-growth-analysis-workbench"
  data-benchmark-guardrail="mainstream-growth-analytics-workbench">
    {% 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>
        <div>
          <h1 class="ga-page-head__h1">營運成長策略報表</h1>
          <p class="ga-page-head__brief">用月趨勢評估成長缺口、價差壓力與毛利品質。</p>
          <span class="ga-page-head__meta" aria-label="成長分析模式">
            <strong>成長缺口</strong> / 價差壓力 / 毛利品質
          </span>
        </div>
      </div>
      <span class="ga-page-head__meta">
        分析期間 <strong data-report-period>{{ analysis_period.label }}</strong>
      </span>
    </header>

    <form class="ga-period-filter" method="get" action="/growth_analysis" aria-label="成長分析期間">
      <label>
        <span>開始月份</span>
        <input type="month" name="start_month" value="{{ request.args.get('start_month', request.args.get('month', '')) }}">
      </label>
      <label>
        <span>結束月份</span>
        <input type="month" name="end_month" value="{{ request.args.get('end_month', request.args.get('month', '')) }}">
      </label>
      <button type="submit" class="btn btn-primary btn-sm" title="套用期間">
        <i class="fas fa-filter" aria-hidden="true"></i><span>套用</span>
      </button>
      <a href="/growth_analysis" class="btn btn-outline-secondary btn-sm" title="重置期間">
        <i class="fas fa-rotate-left" aria-hidden="true"></i><span>重置</span>
      </a>
    </form>

    {% 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('先匯入月度業績資料，再評估成長、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">
          {% if period_filtered %}期間業績（{{ analysis_period.label }}）{% else %}YTD 本年度累計業績 ({{ kpi.current_year }}){% endif %}
        </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">{{ '期間末月' if period_filtered else '最新月' }}平均單價</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">{{ '期間' if period_filtered else '全時期' }}總銷量</div>
        <div class="ga-kpi__value">{{ "{:,.0f}".format(kpi.total_orders) }}</div>
        <div class="ga-kpi__hint">{{ analysis_period.label }}累計件數</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 ga-chart-card__body--lg has-html-chart">
          <canvas id="revenueChart"></canvas>
          {{ ga_chart_snapshot(chart_data.labels, chart_data.revenue, 'currency') }}
        </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 ga-chart-card__body--lg has-html-chart">
          <canvas id="momChart"></canvas>
          {{ ga_chart_snapshot(chart_data.labels, chart_data.mom, 'pct') }}
        </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 ga-chart-card__body--md has-html-chart">
          <canvas id="aovChart"></canvas>
          {{ ga_chart_snapshot(chart_data.labels, chart_data.aov, 'currency') }}
        </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 ga-chart-card__body--md has-html-chart">
          <canvas id="marginChart"></canvas>
          {{ ga_chart_snapshot(chart_data.labels, chart_data.margin_rate, 'pct') }}
        </div>
      </article>
    </section>

    <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-scale-balanced"></i> MOMO 低價壓力趨勢</span>
        </header>
        <div class="ga-chart-card__body ga-chart-card__body--md has-html-chart">
          <canvas id="competitorPressureChart"></canvas>
          {{ ga_chart_snapshot(chart_data.labels, chart_data.competitor_gap_pct, 'pct') }}
        </div>
      </article>

      <article class="ga-chart-card">
        <header class="ga-chart-card__head">
          <span class="ga-chart-card__title"><i class="fas fa-bullseye"></i> PChome 價格作戰可用度</span>
        </header>
        <div class="ga-chart-card__body ga-chart-card__body--md ga-chart-card__body--command">
          {% if chart_data.competitor_snapshot_in_period | default(true) %}
          {% set coverage = chart_data.competitor_coverage | default({}) %}
          {% set decision_rate = coverage.decision_support_rate | default(coverage.decision_ready_rate | default(0)) | float %}
          {% set match_rate = coverage.match_rate | default(0) | float %}
          {% set stale_count = coverage.stale_matches | default(0) | int %}
          {% set unknown_freshness_count = coverage.unknown_freshness_matches | default(0) | int %}
          {% set unit_count = coverage.unit_comparable_count | default(0) | int %}
          {% set pending_count = coverage.pending | default(0) | int %}
          {% set review_count = coverage.actionable_review_count | default(coverage.rescore_accepted_count | default(0)) | int %}
          {% set rescore_count = coverage.rescore_accepted_count | default(0) | int %}
          {% set catalog_count = coverage.catalog_comparable_count | default(0) | int %}
          {% set ai_accept_count = coverage.manual_accept_count | default(0) | int %}
          {% set ai_reject_count = coverage.manual_reject_count | default(0) | int %}
          {% set ai_unit_price_count = coverage.manual_unit_price_count | default(0) | int %}
          {% set action_count = pending_count + review_count %}
          <div class="ga-competitor-command">
            <div class="ga-competitor-signal">
              <span>可直接決策</span>
              <strong class="momo-mono">{{ "{:.1f}%".format(decision_rate) }}</strong>
            </div>
            <div class="ga-competitor-signal">
              <span>同款覆蓋</span>
              <strong class="momo-mono">{{ "{:.1f}%".format(match_rate) }}</strong>
            </div>
            <div class="ga-competitor-signal">
              <span>價格需刷新</span>
              <strong class="momo-mono">{{ stale_count | number_format }}</strong>
            </div>
            <div class="ga-competitor-signal">
              <span>待補 / AI 例外</span>
              <strong class="momo-mono">{{ action_count | number_format }}</strong>
            </div>
            <div class="ga-competitor-signal">
              <span>型錄/任選可比</span>
              <strong class="momo-mono">{{ catalog_count | number_format }}</strong>
            </div>
            <div class="ga-competitor-evidence momo-mono">
              <span>單位價 {{ unit_count | number_format }}</span>
              <span>重算待 AI 決策 {{ rescore_count | number_format }}</span>
              <span>freshness 待補 {{ unknown_freshness_count | number_format }}</span>
              <span>未形成有效身份配對 {{ pending_count | number_format }}</span>
              <span>AI 採用 {{ ai_accept_count | number_format }}</span>
              <span>AI 排除 {{ ai_reject_count | number_format }}</span>
              <span>AI 單位價 {{ ai_unit_price_count | number_format }}</span>
            </div>
            <div class="ga-competitor-next">
              <span class="ga-competitor-next__label">下一步</span>
              {% if decision_rate < 30 %}
                <strong>先補齊高業績商品的 MOMO 對應</strong>
                <p>可決策覆蓋偏低，先提高同款覆蓋再判斷價格策略。</p>
              {% elif stale_count > 0 %}
                <strong>先刷新過期價格</strong>
                <p>避免用舊價格誤判，刷新後再看 MOMO 低價壓力。</p>
              {% elif action_count > 0 %}
                <strong>先處理待補與候選確認</strong>
                <p>把候選轉成可用比價，再進入售價、券與組合檢查。</p>
              {% else %}
                <strong>可進入價格策略檢查</strong>
                <p>先防守 MOMO 低價壓力，再放大 PChome 價格優勢。</p>
              {% endif %}
              <a href="/" class="ga-competitor-next__link">
                <i class="fas fa-arrow-right" aria-hidden="true"></i>前往今日作戰
              </a>
            </div>
          </div>
          {% else %}
          <div class="ga-competitor-period-gap" role="status">
            <i class="fas fa-clock-rotate-left" aria-hidden="true"></i>
            <strong>未混入目前即時覆蓋</strong>
            <p>{{ analysis_period.label }} 僅呈現同期價差趨勢；目前比價覆蓋不回填到歷史區間。</p>
          </div>
          {% endif %}
        </div>
      </article>
    </section>
</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 %}