{% extends "base.html" %} {% block title %}ROAS — Analytics{% endblock
%} {% block content %}
<section class="roas-section">
  <!-- Headline -->
  <h1 class="roas-track">{{ title_track or 'Unknown Track' }}</h1>
  <p class="roas-artist">{{ title_artist or 'Unknown Artist'}}</p>

  <!-- Campaign Metadata -->
  <div class="roas-submeta">
    <p>
      <strong>Campaign:</strong> {{ start_str }} - {% if stop_str %} {{ stop_str
      }}{% endif %}
    </p>
    {% if budget %}
    <p><strong>Budget:</strong> {{ budget }}</p>
    {% endif %} {% if audience_target %}
    <p><strong>Audience:</strong> {{ audience_target }}</p>
    {% endif %} {% if objective %}
    <p><strong>Objective:</strong> {{ objective }}</p>
    {% endif %} {% if recommended_date %}
    <p><strong>Recommended Action Date:</strong> {{ recommended_date }}</p>
    {% endif %}
  </div>

  <!-- DID Result Box -->
  <div
    class="roas-did-box {{ 'positive' if did_coef|float >= 0 else 'negative' }}"
    title="Difference-in-Differences estimate"
  >
    <div class="did-value">
      {% set v = did_coef|default(0)|float %} {{ ('+' if v >= 0 else '') ~
      ('{:,.0f}'.format(v)) }} <strong>LF Streams</strong>
      {% if did_stat_sig %}
      <span class="did-star" title="p < 0.05">*</span>
      {% endif %}
    </div>
    <div class="did-label">Incremental Streams Estimate (7 days)</div>
  </div>

  <!-- Blurb box -->
  <div class="roas-card roas-blurb">
    <div class="blurb-title">
      {{ ('Real-time Campaign Summary' if stop_str == '' else 'Campaign
      Summary') }}
    </div>
    <ul>
      {% for point in summary_text.split('. ') %} {% if point.strip() %}
      <li>{{ point.strip() }}{% if not point.endswith('.') %}.{% endif %}</li>
      {% endif %} {% endfor %}
    </ul>
    <div class="blurb-title" style="margin-top: 1em">
      {{ ('Recommended Actions' if stop_str == '' else 'Key Drivers &
      Takeaways') }}
    </div>
    {% if driver_text_parts.intro %}
    <p><strong>{{ driver_text_parts.intro }}:</strong></p>
    <ul>
      {% for point in driver_text_parts.after.split('. ') %} {% if point %}
      <li>{{ point }}</li>
      {% endif %} {% endfor %}
    </ul>
    {% else %}
    <ul>
      {% for point in driver_text.split('. ') %} {% if point.strip() %}
      <li>{{ point.strip() }}{% if not point.endswith('.') %}.{% endif %}</li>
      {% endif %} {% endfor %}
    </ul>
    {% endif %}
  </div>

  <!-- Timeseries: Treatment vs Control -->
  {% set _labels = ts_labels|default([]) %} {% set _treat = ts_treat|default([])
  %} {% set _control = ts_control|default([]) %} {% if _labels and (_treat or
  _control) %}
  <div class="roas-card roas-chart-card">
    <h3 style="margin: 0 0 10px; display: flex; align-items: center; gap: 4px">
      LF Streams (
      <img
        src="{{ url_for('static', filename='roas/spotify_icon.png') }}"
        alt="Spotify"
        style="height: 20px"
      />+
      <img
        src="{{ url_for('static', filename='roas/apple_icon.png') }}"
        alt="Apple"
        style="height: 20px"
      />)
    </h3>
    <canvas id="tsChart" height="90"></canvas>
  </div>

  <!-- Chart.js -->
  <script
    src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"
    crossorigin="anonymous"
  ></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js"
    crossorigin="anonymous"
  ></script>
  <script>
    const labels = {{ _labels|tojson }};
    const tData  = {{ _treat|tojson }};
    const cData  = {{ _control|tojson }};

    const ctx = document.getElementById('tsChart').getContext('2d');

    const eventStartDate = "{{ start_dt|default('', true) }}";
    const eventStopDate = "{{ stop_dt|default('', true) }}";
    // Calculate eventStartDate - 1 day and eventStartDate + 1 day
    const eventStart = new Date(eventStartDate);
    const eventStop = new Date(eventStopDate);
    const eventMinus1 = new Date(eventStart);
    eventMinus1.setDate(eventStart.getDate() - 1);
    const eventPlus1 = new Date(eventStart);
    eventPlus1.setDate(eventStart.getDate() + 1);
    const eventMax = new Date(eventStop);
    eventMax.setDate(eventStop.getDate());
    // Add excluded from analysis region annotation
    const shadedRegion = {
      type: 'box',
      xMin: eventMinus1.toISOString().slice(0, 10),
      xMax: eventPlus1.toISOString().slice(0, 10),
      yScaleID: 'y',
      backgroundColor: 'rgba(16,16,16,0.5)', // dark grey
      borderWidth: 0
    };

    // Add campaign period region annotation
    const campaignShadedRegion = {
      type: 'box',
      xMin: eventPlus1.toISOString().slice(0, 10),
      xMax: eventMax.toISOString().slice(0, 10),
      yScaleID: 'y',
      backgroundColor: 'rgba(168, 85, 247, 0.15)',
      borderWidth: 0
    };

    Chart.register(window['chartjs-plugin-annotation']);

    new Chart(ctx, {
      type: 'line',
      data: {
        labels,
        datasets: [
          {
            label: 'Treatment',
            data: tData,
            tension: 0.25,
            borderWidth: 2,
            pointRadius: 2,
            borderColor: '#3b82f6', // light blue
            backgroundColor: '#3b82f6',
            fill: false
          },
          {
            label: 'Control',
            data: cData,
            tension: 0.25,
            borderWidth: 2,
            pointRadius: 2,
            borderDash: [4, 4],
            borderColor: '#fca5a5', // light pink
            backgroundColor: '#fca5a5',
            fill: false
          },
          {
            label: 'Campaign Start',
            data: [],
            borderColor: '#1e3a8a', // navy dotted line
            borderDash: [6, 3],
            borderWidth: 2,
            pointStyle: 'line',
            fill: false
          },
          {
            label: 'Excluded from Analysis',
            data: [],
            backgroundColor: 'rgba(16,16,16,0.5)', // grey
            borderColor: 'rgba(16,16,16,0.6)',
            fill: true,
            pointStyle: 'rect',
            borderWidth: 1
          },
          {
            label: 'Campaign Period',
            data: [],
            backgroundColor: 'rgba(168, 85, 247, 0.25)', // light purple
            borderColor: 'rgba(168, 85, 247, 0.6)',
            fill: true,
            pointStyle: 'rect',
            borderWidth: 1
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        layout: { padding: { bottom: 24 } },
        plugins: {
          legend: {
            position: 'top',
            labels: { usePointStyle: true }
          },
          tooltip: {
            callbacks: {
              label: (ctx) => {
                if (ctx.dataset.data.length === 0) return null;
                const v = Number(ctx.parsed.y || 0);
                return ` ${ctx.dataset.label}: ${v.toLocaleString()}`;
              }
            }
          },
          annotation: {
            clip: false,
            annotations: {
              eventLine: {
                type: 'line',
                xMin: eventStartDate,
                xMax: eventStartDate,
                borderColor: '#1e3a8a',
                borderWidth: 2,
                borderDash: [6, 3]
              },
              shadedRegion: shadedRegion,
              campaignShadedRegion: campaignShadedRegion
            }
          }
        },
        scales: {
          x: {
            type: 'time',
            time: { unit: 'week' },
            grid: { color: '#eef2ff' },
            title: {
              display: true,
              text: 'Date',
              color: '#333',
              font: { weight: 'bold', size: 14 },
              padding: { top: 10 }
            }
          },
          y: {
            beginAtZero: false,
            grid: { color: '#eef2ff' },
            title: {
              display: true,
              text: 'Streams',
              color: '#333',
              font: { weight: 'bold', size: 14 },
              padding: { bottom: 10 }
            }
          }
        },
        elements: {
          line: { borderJoinStyle: 'round', capBezierPoints: true },
          point: { hoverRadius: 4 }
        }
      }
    });
  </script>

  {% endif %}
</section>

<!-- Platform Metric Timeseries -->
{% if metrics_all and (tt_series or mt_series) %}
<div class="roas-card" style="margin-top: 14px">
  <!-- Metric multi-select -->
  <div class="roas-dd" id="metric-dd" style="margin-bottom: 12px">
    <button
      type="button"
      class="roas-dd-toggle"
      aria-haspopup="listbox"
      aria-expanded="false"
    >
      <span class="roas-dd-label">Metrics</span>
      <span class="roas-dd-count" id="metric-count"></span>
      <svg width="14" height="14" viewBox="0 0 20 20" aria-hidden="true">
        <path d="M5 8l5 5 5-5" fill="currentColor" />
      </svg>
    </button>
    <div class="roas-dd-menu" role="listbox" aria-multiselectable="true">
      <div class="roas-dd-search">
        <input id="metric-filter" placeholder="Search metrics…" />
      </div>
      <ul class="roas-dd-list" id="metric-options">
        {% for m in metrics_all %}
        <li>
          <label>
            <input type="checkbox" class="metric-check" value="{{ m }}" {% if m
            in ['spend','impressions','views','vtr'] %}checked{% endif %}/>
            <span>{{ m.replace('_', ' ') }}</span>
          </label>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <!-- Two columns (left:TikTok, right:Meta); metric cards rendered in roas.js -->
  <div class="roas-grid">
    <div>
      <h3 class="platform-title">
        <img
          src="{{ url_for('static', filename='roas/tiktok_icon.png') }}"
          alt="TikTok"
          style="height: 20px; vertical-align: middle; margin-right: 6px"
        />TikTok
      </h3>
      <div id="ttMetricCol"></div>
    </div>
    <div>
      <h3 class="platform-title">
        <img
          src="{{ url_for('static', filename='roas/meta_icon.png') }}"
          alt="Meta"
          style="height: 20px; vertical-align: middle; margin-right: 6px"
        />Meta
      </h3>
      <div id="mtMetricCol"></div>
    </div>
  </div>

  <!-- Data consumed by roas.js -->
  <script id="roas-platform-data" type="application/json">
    {{ {
      "tt_labels": tt_labels or [],
      "tt_series": tt_series or {},
      "mt_labels": mt_labels or [],
      "mt_series": mt_series or {},
      "metrics_all": metrics_all or [],
      "default_metrics": ['spend','impressions','views','vtr']
    }|tojson }}
  </script>
  {% endif %}

  <!-- Analytics Table -->
  <section class="analytics-table" style="margin-top: 2rem">
    <h3 style="font-weight: 600; margin-bottom: 0.5rem">
      Campaign Analytics (Campaign Period)
    </h3>
    <div style="overflow-x: auto">
      <table
        style="
          width: 100%;
          border-collapse: collapse;
          border-radius: 8px;
          overflow: hidden;
        "
      >
        <thead style="background-color: #f3f4f6; text-align: left">
          <tr>
            {% for col in ca_columns %}
            <th
              style="
                padding: 10px;
                font-weight: 600;
                font-size: 14px;
                color: #374151;
                border-bottom: 1px solid #e5e7eb;
              "
            >
              {{ col | capitalize }}
            </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in ca_rows %}
          <tr
            style="background-color: {% if loop.index0 % 2 == 0 %}#ffffff{% else %}#f9fafb{% endif %};"
          >
            {% for col in ca_columns %}
            <td
              style="
                padding: 10px;
                font-size: 14px;
                color: #111827;
                border-bottom: 1px solid #e5e7eb;
              "
            >
              {% if col == 'platform' %} {% if row[col]|lower == 'meta' %}
              <img
                src="{{ url_for('static', filename='roas/meta_icon.png') }}"
                alt="Meta"
                style="height: 16px; vertical-align: middle; margin-right: 6px"
              />
              {% elif row[col]|lower == 'tiktok' %}
              <img
                src="{{ url_for('static', filename='roas/tiktok_icon.png') }}"
                alt="TikTok"
                style="height: 16px; vertical-align: middle; margin-right: 6px"
              />
              {% endif %} {{ row[col] }} {% else %} {{ row[col] }} {% endif %}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <!-- Uplift Comparison Table -->
  <section class="uplift-table" style="margin-top: 2rem">
    <h3 style="font-weight: 600; margin-bottom: 0.5rem">
      Streaming Uplifts (7 Day Prior vs Post)
    </h3>
    <div style="overflow-x: auto">
      <table
        style="
          width: 100%;
          border-collapse: collapse;
          border-radius: 8px;
          overflow: hidden;
        "
      >
        <thead style="background-color: #f3f4f6; text-align: left">
          <tr>
            {% for col in uplift_columns %}
            <th
              style="
                padding: 10px;
                font-weight: 600;
                font-size: 14px;
                color: #374151;
                border-bottom: 1px solid #e5e7eb;
              "
            >
              {{ col | capitalize }}
            </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in uplift_rows %}
          <tr
            style="
            background-color: {% if loop.index0 == 0 %}#fef9c3{% elif loop.index0 % 2 == 0 %}#ffffff{% else %}#f9fafb{% endif %};
          "
          >
            {% for col in uplift_columns %}
            <td
              style="
                padding: 10px;
                font-size: 14px;
                color: #111827;
                border-bottom: 1px solid #e5e7eb;
              "
            >
              {{ row[col] }}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  {% endblock %}
</div>