{% extends "base_sidebar.html" %}
{% block title %}Exports & Reports – Dealer Pulse{% endblock %}

{% block topbar %}
<div class="flex items-center gap-4">
  <h1 class="text-lg font-semibold text-dp-ink">Exports & Reports</h1>
</div>
{% endblock %}

{% block content %}
<div x-data="reportsData()">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-xl border border-dp-silver p-6 shadow-card">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-dp-ink">Campaign Overview</h3>
        <span class="text-[10px] uppercase tracking-wide text-gray-500">This Month</span>
      </div>
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-600">Total Customers</span>
          <span class="text-lg font-bold text-dp-ink" x-text="stats.totalCustomers">-</span>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-600">Messages Sent</span>
          <span class="text-lg font-bold text-dp-blue" x-text="stats.messagesSent">-</span>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-600">Response Rate</span>
          <span class="text-lg font-bold text-emerald-600" x-text="stats.responseRate + '%'">-</span>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl border border-dp-silver p-6 shadow-card">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-dp-ink">Engagement Status</h3>
        <span class="text-[10px] uppercase tracking-wide text-gray-500">Active Campaign</span>
      </div>
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
          <span class="text-sm text-gray-600 flex-1">Appointments Booked</span>
          <span class="text-sm font-semibold text-dp-ink" x-text="stats.appointmentsBooked">-</span>
        </div>
        <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-blue-500"></div>
          <span class="text-sm text-gray-600 flex-1">Engaged</span>
          <span class="text-sm font-semibold text-dp-ink" x-text="stats.engaged">-</span>
        </div>
        <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-orange-500"></div>
          <span class="text-sm text-gray-600 flex-1">Awaiting Response</span>
          <span class="text-sm font-semibold text-dp-ink" x-text="stats.awaitingResponse">-</span>
        </div>
        <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-gray-400"></div>
          <span class="text-sm text-gray-600 flex-1">No Response 30+ Days</span>
          <span class="text-sm font-semibold text-dp-ink" x-text="stats.noResponse">-</span>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl border border-dp-silver p-6 shadow-card">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-dp-ink">Conversion Funnel</h3>
        <span class="text-[10px] uppercase tracking-wide text-gray-500">EOT Q1 2025</span>
      </div>
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-indigo-500"></div>
          <span class="text-sm text-gray-600 flex-1">Sold</span>
          <span class="text-sm font-semibold text-emerald-600" x-text="stats.sold">-</span>
        </div>
        <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-red-500"></div>
          <span class="text-sm text-gray-600 flex-1">Declined</span>
          <span class="text-sm font-semibold text-dp-ink" x-text="stats.declined">-</span>
        </div>
        <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
          <span class="text-sm text-gray-600 flex-1">Deferred</span>
          <span class="text-sm font-semibold text-dp-ink" x-text="stats.deferred">-</span>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-white rounded-xl border border-dp-silver p-6 shadow-card mb-8">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-sm font-semibold text-dp-ink">Campaign Stage Breakdown</h3>
      <div class="flex items-center gap-2">
        <select class="text-xs border border-dp-silver rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-dp-blue/50">
          <option>EOT Q1 2025</option>
          <option>EOT Q4 2024</option>
        </select>
      </div>
    </div>
    
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-dp-silver">
            <th class="text-left py-3 px-4 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Stage</th>
            <th class="text-right py-3 px-4 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Customers</th>
            <th class="text-right py-3 px-4 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Contacted</th>
            <th class="text-right py-3 px-4 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Responded</th>
            <th class="text-right py-3 px-4 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Appointments</th>
            <th class="text-right py-3 px-4 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Sold</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="stage in stages" :key="stage.name">
            <tr class="border-b border-dp-silver/50 hover:bg-gray-50">
              <td class="py-3 px-4 font-medium text-dp-ink" x-text="stage.name"></td>
              <td class="py-3 px-4 text-right text-gray-600" x-text="stage.customers"></td>
              <td class="py-3 px-4 text-right text-gray-600" x-text="stage.contacted"></td>
              <td class="py-3 px-4 text-right text-gray-600" x-text="stage.responded"></td>
              <td class="py-3 px-4 text-right text-gray-600" x-text="stage.appointments"></td>
              <td class="py-3 px-4 text-right font-semibold text-emerald-600" x-text="stage.sold"></td>
            </tr>
          </template>
        </tbody>
        <tfoot>
          <tr class="bg-gray-50">
            <td class="py-3 px-4 font-semibold text-dp-ink">Total</td>
            <td class="py-3 px-4 text-right font-semibold text-dp-ink" x-text="totals.customers"></td>
            <td class="py-3 px-4 text-right font-semibold text-dp-ink" x-text="totals.contacted"></td>
            <td class="py-3 px-4 text-right font-semibold text-dp-ink" x-text="totals.responded"></td>
            <td class="py-3 px-4 text-right font-semibold text-dp-ink" x-text="totals.appointments"></td>
            <td class="py-3 px-4 text-right font-bold text-emerald-600" x-text="totals.sold"></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="bg-white rounded-xl border border-dp-silver p-6 shadow-card">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-sm font-semibold text-dp-ink">Export Data</h3>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <a href="/api/lia/export/campaign-report" download class="flex items-center gap-3 px-4 py-3 border border-dp-silver rounded-lg hover:bg-gray-50 transition cursor-pointer">
        <svg class="w-5 h-5 text-dp-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <div class="text-left">
          <p class="text-sm font-medium text-dp-ink">Campaign Report</p>
          <p class="text-xs text-gray-500">Full customer list with status</p>
        </div>
      </a>
      
      <a href="/api/lia/export/appointments" download class="flex items-center gap-3 px-4 py-3 border border-dp-silver rounded-lg hover:bg-gray-50 transition cursor-pointer">
        <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <div class="text-left">
          <p class="text-sm font-medium text-dp-ink">Appointments List</p>
          <p class="text-xs text-gray-500">Upcoming appointments only</p>
        </div>
      </a>
      
      <a href="/api/lia/export/message-history" download class="flex items-center gap-3 px-4 py-3 border border-dp-silver rounded-lg hover:bg-gray-50 transition cursor-pointer">
        <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
        </svg>
        <div class="text-left">
          <p class="text-sm font-medium text-dp-ink">Message History</p>
          <p class="text-xs text-gray-500">All conversations export</p>
        </div>
      </a>
    </div>
  </div>
</div>

<script>
  function reportsData() {
    return {
      loading: true,
      error: null,
      stats: {
        totalCustomers: 0,
        messagesSent: 0,
        responseRate: 0,
        appointmentsBooked: 0,
        engaged: 0,
        awaitingResponse: 0,
        noResponse: 0,
        sold: 0,
        declined: 0,
        deferred: 0
      },
      stages: [],
      
      async init() {
        await this.loadStats();
      },
      
      async loadStats() {
        this.loading = true;
        this.error = null;
        try {
          const response = await fetch('/api/lia/stats');
          if (!response.ok) throw new Error('Failed to load stats');
          const data = await response.json();
          this.stats = data.stats;
          this.stages = data.stages;
        } catch (err) {
          this.error = err.message;
          console.error('Error loading stats:', err);
        } finally {
          this.loading = false;
        }
      },
      
      get totals() {
        return {
          customers: this.stages.reduce((sum, s) => sum + s.customers, 0),
          contacted: this.stages.reduce((sum, s) => sum + s.contacted, 0),
          responded: this.stages.reduce((sum, s) => sum + s.responded, 0),
          appointments: this.stages.reduce((sum, s) => sum + s.appointments, 0),
          sold: this.stages.reduce((sum, s) => sum + s.sold, 0)
        };
      }
    };
  }
</script>
{% endblock %}