{% extends 'base.html' %}
{% block content %}
<section class="container mx-auto py-8">
  <h1 class="text-3xl font-bold mb-4">Campaign Analysis</h1>
  <p class="mb-6">Analyze the performance of your promotions and campaigns to calculate uplift, ROI, and customer engagement.</p>
  <form method="POST" action="{{ url_for('campaign_analysis.upload_files') }}" enctype="multipart/form-data" class="mb-8 bg-white p-6 rounded shadow flex flex-col gap-4">
    <div class="flex flex-col gap-2">
      <label class="font-semibold">Sales Data CSV</label>
      <input type="file" name="sales_file" accept=".csv" required class="file:border file:rounded file:px-3 file:py-1">
    </div>
    <div class="flex flex-col gap-2">
      <label class="font-semibold">Campaign Data CSV</label>
      <input type="file" name="campaign_file" accept=".csv" required class="file:border file:rounded file:px-3 file:py-1">
    </div>
    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">Analyze Campaigns</button>
  </form>

  {% if summary %}
  <div class="bg-white p-6 rounded shadow mb-8">
    <h2 class="text-xl font-bold mb-2">Summary</h2>
    <ul class="list-disc pl-5">
      <li><b>Total Campaigns:</b> {{ summary.total_campaigns }}</li>
      <li><b>Total Campaign Revenue:</b> ${{ "%.2f"|format(summary.total_revenue) }}</li>
      <li><b>Average Campaign Uplift:</b> {{ "%.2f"|format(summary.avg_uplift_pct) }}%</li>
      <li><b>Average ROI:</b> {{ "%.2f"|format(summary.avg_roi) }}%</li>
    </ul>
  </div>
  {% endif %}

  {% if plot_data %}
  <div class="bg-white p-6 rounded shadow mb-8">
    <h2 class="text-xl font-bold mb-4">Campaign Visualizations</h2>
    <div class="flex flex-col gap-8 w-full">
      <div class="w-full">
        <h3 class="font-semibold mb-2 text-blue-600">Uplift % by Campaign</h3>
        <div id="uplift_chart" class="w-full" style="min-height:350px;"></div>
      </div>
      <div class="w-full">
        <h3 class="font-semibold mb-2 text-blue-600">ROI % by Campaign</h3>
        <div id="roi_chart" class="w-full" style="min-height:350px;"></div>
      </div>
      <div class="w-full">
        <h3 class="font-semibold mb-2 text-blue-600">Campaign Revenue Over Time</h3>
        <div id="revenue_chart" class="w-full" style="min-height:350px;"></div>
      </div>
      <div class="w-full">
        <h3 class="font-semibold mb-2 text-blue-600">Campaign Types</h3>
        <div id="type_pie" class="w-full" style="min-height:350px;"></div>
      </div>
      <div class="w-full">
        <h3 class="font-semibold mb-2 text-blue-600">Top Regions</h3>
        <div id="region_pie" class="w-full" style="min-height:350px;"></div>
      </div>
    </div>
  </div>
  <script src="https://cdn.plot.ly/plotly-2.31.1.min.js"></script>
  <script>
    const plots = {{ plot_data|tojson }};
    if (plots && plots.bar_uplift && plots.bar_uplift.x && plots.bar_uplift.x.length) {
      Plotly.newPlot('uplift_chart', [{
        x: plots.bar_uplift.x,
        y: plots.bar_uplift.y,
        type: 'bar',
        marker: {color: '#3b82f6'},
        text: plots.bar_uplift.y.map(v=>v.toFixed(2)+'%')
      }], {title: 'Uplift % by Campaign', margin: {t:30}, width: 900, height: 350});
    }
    if (plots && plots.bar_roi && plots.bar_roi.x && plots.bar_roi.x.length) {
      Plotly.newPlot('roi_chart', [{
        x: plots.bar_roi.x,
        y: plots.bar_roi.y,
        type: 'bar',
        marker: {color: '#10b981'},
        text: plots.bar_roi.y.map(v=>v.toFixed(2)+'%')
      }], {title: 'ROI % by Campaign', margin: {t:30}, width: 900, height: 350});
    }
    if (plots && plots.line_revenue && plots.line_revenue.x && plots.line_revenue.x.length) {
      Plotly.newPlot('revenue_chart', [{
        x: plots.line_revenue.x,
        y: plots.line_revenue.y,
        type: 'scatter',
        mode: 'lines+markers',
        marker: {color: '#6366f1'},
        text: plots.line_revenue.names
      }], {title: 'Revenue by Campaign Start Date', margin: {t:30}, width: 900, height: 350});
    }
    if (plots && plots.pie_type && plots.pie_type.labels && plots.pie_type.labels.length) {
      Plotly.newPlot('type_pie', [{
        labels: plots.pie_type.labels,
        values: plots.pie_type.values,
        type: 'pie'
      }], {title: 'Campaign Type Distribution', margin: {t:30}, width: 900, height: 350});
    }
    if (plots && plots.pie_region && plots.pie_region.labels && plots.pie_region.labels.length) {
      Plotly.newPlot('region_pie', [{
        labels: plots.pie_region.labels,
        values: plots.pie_region.values,
        type: 'pie'
      }], {title: 'Top Regions', margin: {t:30}, width: 900, height: 350});
    }
  </script>
  {% endif %}

</section>
{% endblock %}