{% extends "base.html" %}
{% block title %}Dealer Pulse – Loyalty Manager{% endblock %}

{% block content %}
<div x-data="{ tab: 'overview' }" class="space-y-5 md:space-y-6">
  <!-- Page heading + subtle sub-header -->
  <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-2">
    <div>
      <h1 class="text-xl md:text-2xl font-semibold tracking-tight text-dp-ink">Retention Overview</h1>
      <p class="text-xs md:text-sm text-neutral-500 mt-1">
        Monitor contact, reply and retention performance for your loyalty book in one place.
      </p>
      {% raw %}
      <template x-if="true">
        <span class="inline-flex items-center gap-1 mt-2 rounded-full bg-neutral-100 border border-dp-silver px-2.5 py-1 text-[11px] text-neutral-500">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
          <span>Demo data preview</span>
        </span>
      </template>
      {% endraw %}
    </div>
    <div class="flex items-center gap-2 text-[11px] text-neutral-500">
      <span class="inline-flex items-center gap-1 rounded-full border border-dp-silver bg-white px-3 py-1 shadow-sm">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
        <span>Realtime view</span>
      </span>
      <button
        id="logout-btn"
        class="inline-flex items-center gap-1.5 rounded-full border border-dp-silver bg-white px-3 py-1 shadow-sm hover:bg-neutral-50 transition-colors"
      >
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
        </svg>
        <span>Logout</span>
      </button>
    </div>
  </div>

  <!-- Tabs -->
  <nav class="flex gap-2 border-b border-dp-silver/80 text-[12px] md:text-xs font-medium">
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'overview'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'overview'"
    >
      Overview
    </button>
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'campaigns'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'campaigns'"
    >
      Campaigns
    </button>
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'upload'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'upload'"
    >
      Data Upload
    </button>
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'reminders'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'reminders'"
    >
      Reminders
    </button>
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'tco'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'tco'"
    >
      TCO
    </button>
  </nav>

  <!-- Overview Tab -->
  <section x-show="tab === 'overview'" class="space-y-4 md:space-y-6">
    {% if latest %}
      <!-- KPI tiles -->
      <div class="grid md:grid-cols-3 gap-4">
        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Contact Rate</p>
          <p class="mt-2 text-2xl font-semibold text-dp-ink">
            {{ "%.1f" | format(latest.contact_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-neutral-500">
            From {{ latest.total_contacts }} contacts
          </p>
        </div>

        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Reply Rate</p>
          <p class="mt-2 text-2xl font-semibold text-dp-ink">
            {{ "%.1f" | format(latest.reply_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-neutral-500">
            Replies: {{ latest.total_replies }}
          </p>
        </div>

        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Retention Pen</p>
          <p class="mt-2 text-2xl font-semibold text-dp-ink">
            {{ "%.1f" | format(latest.retention_pen_pct or 0) }}%
          </p>
          <p class="mt-1 text-xs text-neutral-500">
            Drop-off total: {{ latest.drop_off_total }}
          </p>
        </div>
      </div>

      <p class="text-[11px] text-neutral-500">
        Latest month: <span class="font-medium text-dp-ink">{{ latest.month_key }}</span>
      </p>

      <!-- Trend + Retention Pen -->
      <div class="grid md:grid-cols-3 gap-4 md:gap-5">
        <!-- Trend chart -->
        <div class="md:col-span-2 bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 flex flex-col gap-3">
          <div class="flex items-center justify-between gap-2">
            <div>
              <h2 class="text-sm font-semibold text-dp-ink">6-Month KPI Trend</h2>
              <p class="text-[11px] text-neutral-500">
                Contact, reply and retention pen performance over time.
              </p>
            </div>
          </div>
          <div class="h-56">
            <canvas id="trend-chart" class="w-full h-full"></canvas>
          </div>
        </div>

        <!-- Retention pen table -->
        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 flex flex-col gap-2">
          <div class="flex items-center justify-between gap-2">
            <h2 class="text-sm font-semibold text-dp-ink">Retention Pen – Next 60 Days</h2>
            <p class="text-[11px] text-neutral-500">Sample view</p>
          </div>
          <div
            id="retention-pen-container"
            class="text-xs text-neutral-700 border border-dp-silver/60 rounded-lg p-2 bg-neutral-50/60 overflow-auto max-h-56"
          >
            Loading…
          </div>
        </div>
      </div>
    {% else %}
      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-5 text-sm text-neutral-600">
        No data yet – upload your first VWFS snapshot to <span class="font-mono text-dp-ink">vwfs_snapshot</span>.
      </div>
    {% endif %}
  </section>

  <!-- Campaigns Tab -->
  <section x-show="tab === 'campaigns'" class="space-y-4 md:space-y-5">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div>
        <h2 class="text-lg font-semibold text-dp-ink">Campaign Loader</h2>
        <p class="text-xs text-neutral-500">
          See live and upcoming campaigns pulled directly from your database.
        </p>
      </div>
      <div class="flex flex-wrap items-end gap-2">
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Status</label>
          <select id="camp-status" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="">All</option>
            <option value="live">Live</option>
            <option value="planned">Planned</option>
            <option value="paused">Paused</option>
          </select>
        </div>
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Type</label>
          <select id="camp-type" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="">All Types</option>
            <option value="renewals">Renewals</option>
            <option value="welcome">Welcome</option>
          </select>
        </div>
        <button
          id="camp-apply"
          class="h-8 px-3 text-xs rounded-full border border-dp-silver bg-white text-dp-ink hover:bg-neutral-50 shadow-sm"
        >
          Filter
        </button>
      </div>
    </div>

    <div id="campaign-loader" class="grid md:grid-cols-2 gap-4 md:gap-5">
      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
        <h3 class="text-sm font-semibold text-dp-ink mb-2">Live Campaigns</h3>
        <ul id="current-campaigns" class="space-y-2 text-sm text-neutral-700">
          <li class="text-xs text-neutral-400">Loading…</li>
        </ul>
      </div>

      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
        <h3 class="text-sm font-semibold text-dp-ink mb-2">Upcoming / Planned</h3>
        <ul id="upcoming-campaigns" class="space-y-2 text-sm text-neutral-700">
          <li class="text-xs text-neutral-400">Loading…</li>
        </ul>
      </div>
    </div>

    <!-- Campaign detail / WhatsApp preview -->
    <div
      id="campaign-detail"
      class="mt-4 bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 text-sm text-neutral-700 hidden"
    >
      <div class="flex items-center justify-between mb-3">
        <h3 class="text-sm font-semibold text-dp-ink">Selected Campaign</h3>
        <button
          type="button"
          id="campaign-detail-close"
          class="text-[11px] text-neutral-500 hover:text-dp-ink"
        >
          Close
        </button>
      </div>

      <div class="grid md:grid-cols-2 gap-4">
        <div class="space-y-2">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Summary</p>
          <p id="campaign-detail-name" class="text-sm font-semibold text-dp-ink">–</p>
          <p id="campaign-detail-meta" class="text-xs text-neutral-500 mt-1">–</p>
          <p id="campaign-detail-notes" class="text-xs text-neutral-500 mt-2">–</p>
        </div>

        <div class="space-y-2">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">WhatsApp Script Preview</p>
          <textarea
            id="campaign-whatsapp-preview"
            class="w-full h-32 bg-neutral-50 border border-dp-silver rounded-lg px-3 py-2 text-xs text-dp-ink"
          ></textarea>
          <p class="mt-1 text-[10px] text-neutral-500">
            Copy and personalise this message in your WhatsApp sender when you're ready to launch.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Reminders Tab -->
  <section x-show="tab === 'reminders'" class="space-y-4 md:space-y-5">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div>
        <h2 class="text-lg font-semibold text-dp-ink">Appointment Reminders</h2>
        <p class="text-xs text-neutral-500">
          See upcoming customer touchpoints and use ready-made scripts to confirm or rebook.
        </p>
      </div>
      <div class="flex flex-wrap items-end gap-2">
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Advisor</label>
          <select id="rem-advisor" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="">All</option>
          </select>
        </div>
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Window</label>
          <select id="rem-window" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="today">Today</option>
            <option value="7">Next 7 days</option>
            <option value="30">Next 30 days</option>
          </select>
        </div>
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Message type</label>
          <select id="rem-script-type" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="reminder">Reminder</option>
            <option value="missed">Missed appointment</option>
            <option value="followup">Follow-up</option>
            <option value="noreply">No-reply nudge</option>
          </select>
        </div>
        <button
          id="rem-apply"
          class="h-8 px-3 text-xs rounded-full border border-dp-silver bg-white text-dp-ink hover:bg-neutral-50 shadow-sm"
        >
          Apply
        </button>
      </div>
    </div>

    <div class="grid md:grid-cols-3 gap-4 md:gap-5">
      <!-- Upcoming list -->
      <div class="md:col-span-2 bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
        <h3 class="text-sm font-semibold text-dp-ink mb-2">Upcoming appointments</h3>
        <ul id="reminders-list" class="space-y-2 text-sm text-neutral-700">
          <li class="text-xs text-neutral-400">Loading…</li>
        </ul>
      </div>

      <!-- Script preview -->
      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 space-y-2">
        <div class="flex items-center justify-between gap-2 mb-1">
          <h3 class="text-sm font-semibold text-dp-ink">Message preview</h3>
          <p class="text-[11px] text-neutral-500" id="rem-selected-label">No appointment selected</p>
        </div>
        <p class="text-[11px] text-neutral-400" id="rem-conversation-status">
          Status: —
        </p>
        <div id="rem-escalation-badge" class="mt-1"></div>
        <textarea
          id="rem-script-preview"
          class="w-full h-40 bg-neutral-50 border border-dp-silver rounded-lg px-3 py-2 text-xs text-dp-ink"
          placeholder="Select an appointment to view the suggested WhatsApp or SMS script."
        ></textarea>
        <div class="mt-2 flex justify-between items-center">
          <button
            id="rem-mark-sent"
            type="button"
            class="px-3 py-1.5 text-xs font-medium rounded-full border border-dp-silver bg-white hover:bg-neutral-50"
          >
            Mark as sent
          </button>
          <span id="rem-mark-status" class="text-[11px] text-neutral-400"></span>
        </div>
        <p class="mt-1 text-[10px] text-neutral-500">
          Copy and personalise this in your WhatsApp, SMS or email sender.
        </p>
        <div class="mt-4 border-t border-neutral-200 pt-3">
          <div class="flex items-center justify-between mb-1">
            <h4 class="text-[11px] font-semibold text-neutral-600 uppercase tracking-wide">
              Conversation history
            </h4>
            <span id="rem-history-meta" class="text-[11px] text-neutral-400"></span>
          </div>
          <div
            id="rem-history"
            class="max-h-48 overflow-y-auto text-[11px] leading-snug space-y-2 pr-1"
          >
            <p class="text-neutral-400">No history for this conversation yet.</p>
          </div>
        </div>
        <div class="mt-4 border-t border-neutral-200 pt-3">
          <div class="flex items-center justify-between mb-1">
            <h4 class="text-[11px] font-semibold text-neutral-600 uppercase tracking-wide">
              TCO preview
            </h4>
            <span id="rem-tco-meta" class="text-[11px] text-neutral-400"></span>
          </div>
          <div id="rem-tco" class="text-[11px] space-y-1 text-neutral-700">
            <p class="text-neutral-400">No TCO data loaded.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- TCO Tab -->
  <section x-show="tab === 'tco'" class="space-y-4 md:space-y-5">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div>
        <h2 class="text-lg font-semibold text-dp-ink">Total Cost of Ownership</h2>
        <p class="text-xs text-neutral-500">
          High-level view of monthly commitment and running costs to support value-based conversations.
        </p>
      </div>
      <div class="flex flex-wrap items-end gap-2">
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Model</label>
          <select id="tco-model" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="">All</option>
          </select>
        </div>
        <button
          id="tco-apply"
          class="h-8 px-3 text-xs rounded-full border border-dp-silver bg-white text-dp-ink hover:bg-neutral-50 shadow-sm"
        >
          Filter
        </button>
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-4 md:gap-5">
      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 space-y-3">
        <h3 class="text-sm font-semibold text-dp-ink">Headline TCO by model</h3>
        <div id="tco-table" class="text-xs text-neutral-700">
          Loading…
        </div>
      </div>

      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 space-y-3">
        <h3 class="text-sm font-semibold text-dp-ink">Talking points</h3>
        <p class="text-xs text-neutral-600" id="tco-talking-points">
          Select a model to see simple, customer-friendly talking points highlighting value, not just monthly payment.
        </p>
      </div>
    </div>
  </section>

  <!-- Data Upload Tab -->
  <section x-show="tab === 'upload'" class="space-y-4 md:space-y-5">
    <div class="bg-white border border-dp-silver rounded-xl shadow-card p-5 md:p-6 space-y-3">
      <h2 class="text-lg font-semibold text-dp-ink">Data Upload</h2>
      <p class="text-sm text-neutral-600">
        Upload the latest VWFS snapshot CSV. Files are stored securely and queued for processing.
      </p>

      <form
        id="upload-form"
        class="mt-2 flex flex-col gap-3 md:flex-row md:items-end md:gap-4"
        enctype="multipart/form-data"
      >
        <div class="flex-1">
          <label class="block text-[11px] text-neutral-500 mb-1">Choose CSV file</label>
          <input
            type="file"
            name="file"
            accept=".csv"
            class="block w-full text-xs text-neutral-700 bg-neutral-50 border border-dp-silver rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-dp-blue/60"
            required
          />
        </div>

        <div class="w-full md:w-48">
          <label class="block text-[11px] text-neutral-500 mb-1">Snapshot month</label>
          <input
            type="month"
            id="book-month"
            class="block w-full text-xs text-neutral-700 bg-neutral-50 border border-dp-silver rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-dp-blue/60"
            required
          />
          <p class="mt-1 text-[10px] text-neutral-500">
            Used for processing (formats as YYYY-MM-01).
          </p>
        </div>

        <div class="flex items-center gap-3 pt-1">
          <button
            type="submit"
            class="inline-flex items-center gap-2 text-xs font-medium rounded-full px-4 py-2 border border-dp-silver bg-dp-ink text-white hover:bg-black/90 shadow-sm"
          >
            Upload &amp; Queue
          </button>
          <p id="upload-status" class="text-[11px] text-neutral-500"></p>
        </div>
      </form>
    </div>
  </section>
</div>

<!-- SCRIPT BLOCK: data loading, charts, campaigns, upload -->
<script>
  const DEMO_MODE = false; // set to false once real data is flowing

  const DEMO_CAMPAIGNS = [
    {
      campaign_id: "demo_eot_18",
      template_key: "eot_18",
      name: "18 Month Heads-Up",
      type: "renewals",
      status: "live",
      starts_on: "2025-11-01",
      ends_on: null,
      target_segment: "Customers around 18 months from the end of their agreement",
      notes: "Early check-in to understand usage, mileage and future plans. No pressure, purely relationship and planning."
    },
    {
      campaign_id: "demo_eot_12",
      template_key: "eot_12",
      name: "End of Term – 12 Month Review",
      type: "renewals",
      status: "live",
      starts_on: "2025-11-01",
      ends_on: null,
      target_segment: "Customers around 12 months from the end of their agreement",
      notes: "First formal end-of-term review. Introduce the idea of options and protecting equity/position."
    },
    {
      campaign_id: "demo_eot_9",
      template_key: "eot_9",
      name: "End of Term – 9 Month Options",
      type: "renewals",
      status: "live",
      starts_on: "2025-12-01",
      ends_on: null,
      target_segment: "Customers around 9 months from the end of their agreement",
      notes: "Move towards a more detailed options conversation and potential test drive."
    },
    {
      campaign_id: "demo_eot_6",
      template_key: "eot_6",
      name: "End of Term – 6 Month Priority",
      type: "renewals",
      status: "live",
      starts_on: "2026-01-01",
      ends_on: null,
      target_segment: "Customers around 6 months from the end of their agreement",
      notes: "Priority review window. Ideal time to order the next Audi and secure pricing/lead times."
    },
    {
      campaign_id: "demo_eot_3",
      template_key: "eot_3",
      name: "End of Term – 3 Month Last Window",
      type: "renewals",
      status: "live",
      starts_on: "2026-02-01",
      ends_on: null,
      target_segment: "Customers around 3 months from the end of their agreement",
      notes: "Final proactive window to change before handback, part-ex or refinance."
    },
    {
      campaign_id: "demo_welcome_12",
      template_key: "welcome_12",
      name: "12 Month Ownership Check-In",
      type: "welcome",
      status: "live",
      starts_on: "2025-11-01",
      ends_on: null,
      target_segment: "Customers around 12 months into ownership (first year anniversary)",
      notes: "Ownership and experience check-in. Confirm mileage vs plan and ensure servicing/finance are set correctly."
    }
  ];

  function buildWhatsAppScript(campaign) {
    const centre = "Lincoln Audi";
    const customerName = "[Customer Name]";
    const advisorName = "[Your Name]";
    const stage = campaign.template_key || campaign.type || "";

    switch (stage) {
      case "eot_18":
        return `Hi ${customerName}, it's ${advisorName} from ${centre}.\n\nI've been reviewing our customers who are around 18 months from the end of their agreement and yours is in that group. This isn't about changing your car today – it's a quick check-in to make sure your Audi still suits your mileage and day-to-day use, and to see how you'd like us to support you as you move towards the end of the plan.\n\nIf you'd like me to keep an eye on suitable offers and protect your position as the market moves, reply YES and I'll do the rest.\n\nThanks,\n${advisorName}\n${centre}`;

      case "eot_12":
        return `Hi ${customerName}, it's ${advisorName} from ${centre}.\n\nYou're now around 12 months from the end of your current agreement, which is the first key review point. From this stage there can be options to change your Audi, protect any equity and keep your monthly payment sensible.\n\nIf you'd like me to prepare a short, no-obligation end-of-term review tailored to your mileage and how you use the car, reply YES and I'll send you a summary of your best options.\n\nThanks,\n${advisorName}\n${centre}`;

      case "eot_9":
        return `Hi ${customerName}, it's ${advisorName} from ${centre}.\n\nYou're roughly 9 months from the end of your agreement, so it's a great time to look at your options in a bit more detail. Depending on how your mileage and equity look, we may be able to move you into your next Audi with a similar or sensible change to your monthly payment.\n\nWould you like me to put together a quick options review for you and, if it helps, arrange a test drive in something suitable? If so, reply YES and I'll come back with a plan.\n\nThanks,\n${advisorName}\n${centre}`;

      case "eot_6":
        return `Hi ${customerName}, it's ${advisorName} from ${centre}.\n\nYou're now around 6 months from the end of your agreement, which is the ideal time to make a decision about your next steps. Ordering your next Audi now can help secure the right car, pricing and delivery timings, while keeping your budget under control.\n\nIf you'd like me to prioritise an end-of-term review and talk you through the options – whether that's changing, keeping or handing the car back – reply YES and I'll get everything lined up for you.\n\nThanks,\n${advisorName}\n${centre}`;

      case "eot_3":
        return `Hi ${customerName}, it's ${advisorName} from ${centre}.\n\nYou're in the final few months of your agreement, so this is the last proactive window to look at your options before the contract ends. Depending on how the numbers look, there may be a chance to change your Audi, protect any equity or set up a smooth handover plan.\n\nIf you'd like a clear view of your options so you can decide what's best, reply YES and I'll send you a simple summary and next steps.\n\nThanks,\n${advisorName}\n${centre}`;

      case "welcome_12":
        return `Hi ${customerName}, it's ${advisorName} from ${centre}.\n\nYou've had your Audi for around 12 months now, so I just wanted to check in and make sure everything is working as it should – from the car itself through to your mileage, servicing and finance plan.\n\nIf you'd like, I can put together a quick ownership review to confirm you're on the right track and highlight anything that might need tweaking for the future.\n\nReply YES if you'd like me to do that and I'll send you a short summary.\n\nThanks,\n${advisorName}\n${centre}`;

      default: {
        const segment = campaign.target_segment || "customers nearing the end of their agreement";
        return `Hi ${customerName}, it's ${advisorName} from ${centre}.\n\nI've been reviewing our ${segment} and there may be options to update your Audi with a sensible change to your monthly budget.\n\nIf you'd like me to prepare a quick, no-obligation review of your options, just reply YES and I'll send you a summary.\n\nThanks,\n${advisorName}\n${centre}`;
      }
    }
  }

  const DEMO_MONTHLY = [
    { month_key: "2025-05-01", contact_rate: 55.2, reply_rate: 21.3, retention_pen_pct: 38.0, total_contacts: 220, total_replies: 47, drop_off_total: 12 },
    { month_key: "2025-06-01", contact_rate: 61.8, reply_rate: 24.1, retention_pen_pct: 42.5, total_contacts: 245, total_replies: 59, drop_off_total: 11 },
    { month_key: "2025-07-01", contact_rate: 64.0, reply_rate: 25.5, retention_pen_pct: 44.2, total_contacts: 260, total_replies: 66, drop_off_total: 10 },
    { month_key: "2025-08-01", contact_rate: 66.5, reply_rate: 26.9, retention_pen_pct: 45.7, total_contacts: 275, total_replies: 74, drop_off_total: 9 },
    { month_key: "2025-09-01", contact_rate: 68.2, reply_rate: 27.8, retention_pen_pct: 47.1, total_contacts: 288, total_replies: 80, drop_off_total: 8 },
    { month_key: "2025-10-01", contact_rate: 70.0, reply_rate: 29.0, retention_pen_pct: 49.0, total_contacts: 300, total_replies: 87, drop_off_total: 7 },
  ];

  const DEMO_RETENTION = [
    { customer_name: "Alex Smith", registration: "FY23 ABC", payments_remaining: 5, payment_month: "2025-11-01", agreement_number: "AG123456" },
    { customer_name: "Jordan Lee", registration: "FY21 XYZ", payments_remaining: 4, payment_month: "2025-11-01", agreement_number: "AG234567" },
    { customer_name: "Sam Taylor", registration: "FY20 QWE", payments_remaining: 3, payment_month: "2025-12-01", agreement_number: "AG345678" },
    { customer_name: "Chris Green", registration: "FY22 RST", payments_remaining: 2, payment_month: "2025-12-01", agreement_number: "AG456789" },
  ];

  // Load campaigns into Campaign Loader
  async function loadCampaigns() {
    const currentList = document.getElementById("current-campaigns");
    const upcomingList = document.getElementById("upcoming-campaigns");
    if (!currentList || !upcomingList) return;

    currentList.innerHTML = '<li class="text-xs text-neutral-400">Loading…</li>';
    upcomingList.innerHTML = '<li class="text-xs text-neutral-400">Loading…</li>';

    try {
      const statusEl = document.getElementById("camp-status");
      const typeEl = document.getElementById("camp-type");
      const params = new URLSearchParams();
      if (statusEl?.value) params.set("status", statusEl.value);
      if (typeEl?.value) params.set("type", typeEl.value);

      const res = await fetch("/api/campaigns" + (params.toString() ? "?" + params.toString() : ""));
      if (!res.ok) throw new Error("Failed to load campaigns");
      const payload = await res.json();
      let campaigns = payload.data || [];

      // If there are no campaigns in the database yet, fall back to our core end-of-term journey
      if (!campaigns.length) {
        campaigns = DEMO_CAMPAIGNS;
      }

      currentList.innerHTML = "";
      upcomingList.innerHTML = "";

      const today = new Date().toISOString().slice(0, 10);

      campaigns.forEach((c) => {
        const li = document.createElement("li");
        li.className = "flex flex-col gap-1 border border-dp-silver/80 rounded-xl px-3 py-3 bg-white cursor-pointer hover:border-dp-blue/40 hover:shadow-card transition";

        const titleRow = document.createElement("div");
        titleRow.className = "flex items-center justify-between gap-2";

        const nameSpan = document.createElement("span");
        nameSpan.className = "font-medium text-sm text-dp-ink";
        nameSpan.textContent = c.name || "Untitled";

        const typePill = document.createElement("span");
        typePill.className =
          "text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full border border-dp-silver bg-neutral-50 text-neutral-600";
        typePill.textContent = c.type || "Generic";

        titleRow.appendChild(nameSpan);
        titleRow.appendChild(typePill);

        const meta = document.createElement("p");
        meta.className = "text-[11px] text-neutral-500";
        meta.textContent = `${c.starts_on || "–"} → ${c.ends_on || "–"} • ${c.target_segment || ""}`;

        const notes = document.createElement("p");
        notes.className = "text-[11px] text-neutral-500";
        notes.textContent = c.notes || "";

        const sendBtn = document.createElement("button");
        sendBtn.className =
          "mt-1 inline-flex items-center gap-1 text-[11px] text-dp-ink border border-dp-silver rounded-full px-3 py-1 bg-white hover:bg-neutral-50";
        sendBtn.textContent = "Prepare WhatsApp blast";

        const openDetail = () => {
          const panel = document.getElementById("campaign-detail");
          const nameEl = document.getElementById("campaign-detail-name");
          const metaEl = document.getElementById("campaign-detail-meta");
          const notesEl = document.getElementById("campaign-detail-notes");
          const waEl = document.getElementById("campaign-whatsapp-preview");

          if (!panel || !nameEl || !metaEl || !notesEl || !waEl) return;

          panel.classList.remove("hidden");
          nameEl.textContent = c.name || "Untitled campaign";

          metaEl.textContent =
            `${c.type || "Generic"} • Status: ${c.status || "unknown"} • ` +
            `${c.starts_on || "–"} → ${c.ends_on || "–"} • Segment: ${c.target_segment || "All"}`;

          notesEl.textContent = c.notes || "No additional notes recorded for this campaign.";

          waEl.value = buildWhatsAppScript(c);
          waEl.scrollTop = 0;
        };

        li.addEventListener("click", openDetail);

        sendBtn.addEventListener("click", async (e) => {
          e.stopPropagation();
          openDetail();
          try {
            const res = await fetch("/api/whatsapp/send", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                contact_id: "segment:" + (c.target_segment || "unknown"),
                campaign_id: c.campaign_id || null,
                message_preview: `Campaign: ${c.name} – ${c.notes || ""}`.slice(0, 200),
              }),
            });
            if (!res.ok) throw new Error("Failed to queue WhatsApp stub");
            alert("WhatsApp campaign queued (stub only – wire to Make/n8n later).");
          } catch (err) {
            alert(err.message);
          }
        });

        li.appendChild(titleRow);
        li.appendChild(meta);
        li.appendChild(notes);
        li.appendChild(sendBtn);

        const isLive =
          c.status === "live" ||
          (c.starts_on && c.starts_on <= today && (!c.ends_on || c.ends_on >= today));

        (isLive ? currentList : upcomingList).appendChild(li);
      });

      if (!currentList.children.length) {
        currentList.innerHTML = '<li class="text-xs text-neutral-400">No live campaigns.</li>';
      }
      if (!upcomingList.children.length) {
        upcomingList.innerHTML = '<li class="text-xs text-neutral-400">No upcoming campaigns.</li>';
      }
    } catch (err) {
      currentList.innerHTML = '<li class="text-xs text-red-500">Error loading campaigns.</li>';
      upcomingList.innerHTML = "";
      console.error(err);
    }
  }

  // 6-Month KPI Trend chart
  async function loadTrendChart() {
    const canvas = document.getElementById("trend-chart");
    if (!canvas || !window.Chart) return;

    try {
      const res = await fetch("/api/monthly-summary");
      if (!res.ok) throw new Error("Failed to load monthly summary");
      const payload = await res.json();
      let rows = payload.data || [];

      // If no rows and demo mode enabled, fall back to demo data
      if ((!rows || !rows.length) && DEMO_MODE) {
        rows = DEMO_MONTHLY;
      }

      if (!rows.length) return;

      // Sort by month so the chart runs left → right by time
      rows.sort((a, b) => (a.month_key || "").localeCompare(b.month_key || ""));

      const labels = rows.map((r) => (r.month_key || "").slice(0, 7)); // YYYY-MM
      const contactRate = rows.map((r) => parseFloat(r.contact_rate) || 0);
      const replyRate = rows.map((r) => parseFloat(r.reply_rate) || 0);
      const retentionPen = rows.map((r) => parseFloat(r.retention_pen_pct) || 0);

      new Chart(canvas, {
        type: "line",
        data: {
          labels,
          datasets: [
            {
              label: "Contact Rate %",
              data: contactRate,
              tension: 0.35,
              borderWidth: 2,
            },
            {
              label: "Reply Rate %",
              data: replyRate,
              tension: 0.35,
              borderWidth: 2,
            },
            {
              label: "Retention Pen %",
              data: retentionPen,
              tension: 0.35,
              borderWidth: 2,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              labels: {
                color: "#6B7280",
                font: { size: 11 },
              },
            },
          },
          scales: {
            x: {
              ticks: { color: "#9CA3AF", font: { size: 10 } },
              grid: { color: "#E5E7EB" },
            },
            y: {
              ticks: { color: "#9CA3AF", font: { size: 10 } },
              grid: { color: "#E5E7EB" },
            },
          },
        },
      });
    } catch (err) {
      console.error("Trend chart error:", err);
    }
  }

  // Retention Pen detail – simple table
  async function loadRetentionPen() {
    const container = document.getElementById("retention-pen-container");
    if (!container) return;

    container.textContent = "Loading…";

    try {
      const res = await fetch("/api/retention-pen");
      if (!res.ok) throw new Error("Failed to load retention pen");
      const payload = await res.json();
      const rows = payload.data || [];

      let dataRows = rows;

      if ((!dataRows || !dataRows.length) && DEMO_MODE) {
        dataRows = DEMO_RETENTION;
      }

      if (!dataRows.length) {
        container.textContent = "No customers currently in the retention pen.";
        return;
      }

      const sample = dataRows.slice(0, 20);

      const table = document.createElement("table");
      table.className = "w-full text-[11px] text-left border-collapse";

      const thead = document.createElement("thead");
      thead.innerHTML = `
        <tr class="border-b border-dp-silver/80 text-neutral-500">
          <th class="py-1 pr-2 font-medium">Customer</th>
          <th class="py-1 pr-2 font-medium">Reg</th>
          <th class="py-1 pr-2 font-medium">Payments Left</th>
          <th class="py-1 pr-2 font-medium">Payment Month</th>
          <th class="py-1 pr-2 font-medium">Agreement</th>
        </tr>
      `;

      const tbody = document.createElement("tbody");

      sample.forEach((row) => {
        const tr = document.createElement("tr");
        tr.className = "border-b border-dp-silver/40";

        const customer = row.customer_name || row.customer || "";
        const reg = row.registration || row.reg || "";
        const paymentsRemaining = row.payments_remaining ?? row.payments_left ?? "";
        const paymentMonth = row.payment_month || row.month_key || "";
        const agreement = row.agreement_number || row.agreement || "";

        tr.innerHTML = `
          <td class="py-1 pr-2">${customer}</td>
          <td class="py-1 pr-2">${reg}</td>
          <td class="py-1 pr-2">${paymentsRemaining}</td>
          <td class="py-1 pr-2">${paymentMonth}</td>
          <td class="py-1 pr-2">${agreement}</td>
        `;

        tbody.appendChild(tr);
      });

      table.appendChild(thead);
      table.appendChild(tbody);

      container.innerHTML = "";
      container.appendChild(table);
    } catch (err) {
      console.error("Retention pen error:", err);
      container.textContent = "Error loading retention pen data.";
    }
  }

  function buildReminderScript(rem, mode) {
    const customer = rem.customer_name || "[Customer Name]";
    const centre = "Lincoln Audi";
    const advisor = "Lia";
    const timeStr = rem.time || "[Time]";
    const model = rem.model || "[Model]";

    switch (mode) {
      case "missed":
        return `Hi ${customer}, it's ${advisor} from ${centre}.\n\nWe missed you for your appointment today – no problem at all, I know things come up.\n\nIf you'd like to rearrange, just let me know a day or time that works best for you and I'll get it sorted.\n\nThanks,\n${advisor}\n${centre}`;

      case "followup":
        return `Hi ${customer}, it's ${advisor} from ${centre}.\n\nJust checking in to see if you still wanted to go ahead with a renewal review. There's no rush – I can work around whatever day or time suits you.\n\nIf you'd like to book something in, just send over a couple of days or times that work for you and I'll get it arranged.\n\nThanks,\n${advisor}\n${centre}`;

      case "noreply":
        return `Hi ${customer}, it's ${advisor} from ${centre}.\n\nI haven't heard back from you, so I didn't want to keep chasing. If you'd still like me to look at some options for you, just send me a quick message and I'll put it together.\n\nIf not, no problem at all – I can close this off for now.\n\nThanks,\n${advisor}\n${centre}`;

      case "reminder":
      default:
        return `Hi ${customer}, it's ${advisor} from ${centre}.\n\nJust wanted to remind you of your appointment tomorrow at ${timeStr}.\n\nIf anything changes, please drop me a message and I can update things for you.\n\nPlease remember to bring your driving licence and your current Audi ${model} so we can carry out a professional valuation.\n\nSo I can prepare some details ahead of your visit, can you confirm your current mileage and the MPG from your car's computer? It will allow me to work out your total cost of ownership so you can compare all your running costs.\n\nThanks,\n${advisor}\n${centre}`;
    }
  }

  // Track the last selected reminder for "Mark as sent" functionality
  let lastSelectedReminder = null;

  async function updateConversationStatus(rem) {
    const statusEl = document.getElementById("rem-conversation-status");
    const badgeEl = document.getElementById("rem-escalation-badge");
    if (!statusEl) return;

    // Clear escalation badge by default
    if (badgeEl) badgeEl.innerHTML = "";

    const convId = rem.conversation_id;
    if (!convId) {
      statusEl.textContent = "Status: Not linked";
      return;
    }

    try {
      const res = await fetch(`/api/conversations/${encodeURIComponent(convId)}/status`);
      if (!res.ok) {
        statusEl.textContent = "Status: Active (no defer set)";
        return;
      }
      const data = await res.json();
      const status = data.status || "active";
      const deferUntil = data.defer_until;
      const reason = data.defer_reason;
      const escalationReason = data.escalation_reason;

      if (status === "paused" && deferUntil) {
        let text = `Status: Paused until ${deferUntil}`;
        if (reason) {
          text += ` – ${reason}`;
        }
        statusEl.textContent = text;
      } else if (status === "paused" && escalationReason) {
        statusEl.textContent = "Status: Paused (escalated)";
      } else {
        statusEl.textContent = "Status: Active";
      }

      // Render escalation badge if present
      if (badgeEl && escalationReason) {
        const badgeConfig = {
          "customer_issue": {
            text: "Customer issue – needs manager",
            classes: "inline-flex items-center px-2 py-[2px] rounded-full text-[11px] font-medium bg-red-100 text-red-700"
          },
          "unrecognised_message": {
            text: "Unrecognised message – review",
            classes: "inline-flex items-center px-2 py-[2px] rounded-full text-[11px] font-medium bg-purple-100 text-purple-700"
          },
          "appointment_confirmation_needed": {
            text: "Appointment confirmation needed",
            classes: "inline-flex items-center px-2 py-[2px] rounded-full text-[11px] font-medium bg-orange-100 text-orange-700"
          }
        };

        const badge = badgeConfig[escalationReason];
        if (badge) {
          badgeEl.innerHTML = `<span class="${badge.classes}">${badge.text}</span>`;
        }
      }
    } catch (err) {
      console.error("Error loading conversation status", err);
      statusEl.textContent = "Status: Active";
      if (badgeEl) badgeEl.innerHTML = "";
    }
  }

  async function loadConversationHistory(rem) {
    const histEl = document.getElementById("rem-history");
    const metaEl = document.getElementById("rem-history-meta");
    if (!histEl || !metaEl) return;

    const convId = rem.conversation_id;
    if (!convId) {
      histEl.innerHTML = `<p class="text-neutral-400">No conversation linked.</p>`;
      metaEl.textContent = "";
      return;
    }

    histEl.innerHTML = `<p class="text-neutral-400">Loading history…</p>`;
    metaEl.textContent = "";

    try {
      const res = await fetch(`/api/messages?conversation_id=${encodeURIComponent(convId)}&limit=50`);
      if (!res.ok) {
        histEl.innerHTML = `<p class="text-neutral-400">No history available.</p>`;
        metaEl.textContent = "";
        return;
      }
      const data = await res.json();
      const msgs = data.messages || [];

      if (!msgs.length) {
        histEl.innerHTML = `<p class="text-neutral-400">No history for this conversation yet.</p>`;
        metaEl.textContent = "";
        return;
      }

      const parts = [];
      for (const m of msgs) {
        const ts = m.created_at ? new Date(m.created_at).toLocaleString() : "";
        const dir = m.direction === "inbound" ? "Customer" : "Lia";
        const mode = m.mode ? ` · ${m.mode}` : "";
        const safeBody = (m.message_body || "").replace(/\n/g, "<br>");

        parts.push(
          `<div class="border border-neutral-200 rounded-lg px-2 py-1.5 bg-neutral-50">
             <div class="flex justify-between mb-0.5">
               <span class="font-medium">${dir}</span>
               <span class="text-[10px] text-neutral-400">${ts}${mode}</span>
             </div>
             <div class="text-[11px] text-neutral-700">${safeBody}</div>
           </div>`
        );
      }

      histEl.innerHTML = parts.join("");
      metaEl.textContent = `${msgs.length} message${msgs.length === 1 ? "" : "s"}`;
    } catch (err) {
      console.error("Error loading history", err);
      histEl.innerHTML = `<p class="text-neutral-400">Could not load history.</p>`;
      metaEl.textContent = "";
    }
  }

  async function loadTcoPreview(rem) {
    const tcoEl = document.getElementById("rem-tco");
    const metaEl = document.getElementById("rem-tco-meta");
    if (!tcoEl || !metaEl) return;

    const convId = rem.conversation_id;
    if (!convId) {
      tcoEl.innerHTML = `<p class="text-neutral-400">No conversation linked.</p>`;
      metaEl.textContent = "";
      return;
    }

    tcoEl.innerHTML = `<p class="text-neutral-400">Loading TCO…</p>`;
    metaEl.textContent = "";

    try {
      const res = await fetch(`/api/tco-preview?conversation_id=${encodeURIComponent(convId)}`);
      if (!res.ok) {
        tcoEl.innerHTML = `<p class="text-neutral-400">No TCO available.</p>`;
        metaEl.textContent = "";
        return;
      }
      const data = await res.json();
      const items = data.items || [];
      const total = data.total_monthly || 0;
      const currency = data.currency || "GBP";

      if (!items.length) {
        tcoEl.innerHTML = `<p class="text-neutral-400">No TCO available.</p>`;
        metaEl.textContent = "";
        return;
      }

      const parts = items.map(it => {
        const amt = typeof it.amount === "number" ? it.amount.toFixed(2) : it.amount;
        return `<div class="flex justify-between">
                  <span>${it.label}</span>
                  <span>${currency} ${amt}</span>
                </div>`;
      });

      const totalStr = typeof total === "number" ? total.toFixed(2) : total;
      parts.push(
        `<div class="flex justify-between mt-1 pt-1 border-t border-neutral-200 font-semibold">
           <span>Total monthly</span>
           <span>${currency} ${totalStr}</span>
         </div>`
      );

      tcoEl.innerHTML = parts.join("");
      metaEl.textContent = "Stubbed example – will be driven by real data.";
    } catch (err) {
      console.error("Error loading TCO preview", err);
      tcoEl.innerHTML = `<p class="text-neutral-400">Could not load TCO preview.</p>`;
      metaEl.textContent = "";
    }
  }

  async function loadReminders() {
    const list = document.getElementById("reminders-list");
    const advisorSel = document.getElementById("rem-advisor");
    const windowSel = document.getElementById("rem-window");
    if (!list) return;

    list.innerHTML = '<li class="text-xs text-neutral-400">Loading…</li>';

    const params = new URLSearchParams();
    if (windowSel?.value && windowSel.value !== "today") {
      params.set("window", windowSel.value);
    }
    if (advisorSel?.value) {
      params.set("advisor", advisorSel.value);
    }

    try {
      const res = await fetch("/api/reminders" + (params.toString() ? "?" + params.toString() : ""));
      if (!res.ok) throw new Error("Failed to load reminders");
      const payload = await res.json();
      const items = payload.data || [];

      list.innerHTML = "";

      if (!items.length) {
        list.innerHTML = '<li class="text-xs text-neutral-400">No upcoming appointments in this window.</li>';
        return;
      }

      const advisorSet = new Set();
      items.forEach((rem) => advisorSet.add(rem.advisor));

      // Populate advisor dropdown from data if empty apart from "All"
      if (advisorSel && advisorSel.options.length <= 1) {
        advisorSet.forEach((name) => {
          const opt = document.createElement("option");
          opt.value = name;
          opt.textContent = name;
          advisorSel.appendChild(opt);
        });
      }

      items.forEach((rem) => {
        const li = document.createElement("li");
        li.className =
          "border border-dp-silver rounded-xl px-3 py-2 bg-white hover:border-dp-blue/40 hover:shadow-card cursor-pointer transition";

        li.innerHTML = `
          <div class="flex items-center justify-between gap-2">
            <div class="text-[11px] text-neutral-500">${rem.date} • ${rem.time || ""}</div>
            <div class="text-[11px] text-neutral-500">${rem.advisor || ""}</div>
          </div>
          <div class="text-sm font-medium text-dp-ink">${rem.customer_name || ""} • ${rem.reg || ""}</div>
          <div class="text-[11px] text-neutral-500 mt-0.5">${rem.reason || ""}</div>
        `;

        li.addEventListener("click", async () => {
          const label = document.getElementById("rem-selected-label");
          const ta = document.getElementById("rem-script-preview");
          const typeSel = document.getElementById("rem-script-type");
          const mode = typeSel?.value || "reminder";
          if (!label || !ta) return;
          label.textContent = `${rem.customer_name || ""} • ${rem.date || ""} ${rem.time || ""}`;
          ta.value = buildReminderScript(rem, mode);
          ta.scrollTop = 0;

          // Track this reminder for "Mark as sent"
          lastSelectedReminder = rem;

          // Update conversation status line
          updateConversationStatus(rem);

          // Load conversation history
          loadConversationHistory(rem);

          // Load TCO preview (stub for now)
          loadTcoPreview(rem);
        });

        list.appendChild(li);
      });
    } catch (e) {
      console.error(e);
      list.innerHTML = '<li class="text-xs text-red-500">Error loading reminders.</li>';
    }
  }

  function getTemplateKeyForMode(mode) {
    // Map message type mode to template key
    switch (mode) {
      case "reminder":
        return "renewal_reminder";
      case "missed":
        return "renewal_missed";
      case "followup":
        return "renewal_followup";
      case "noreply":
        return "renewal_noreply";
      default:
        return "renewal_reminder";
    }
  }

  async function initReminderMarkSent() {
    const btn = document.getElementById("rem-mark-sent");
    const statusEl = document.getElementById("rem-mark-status");
    const typeSel = document.getElementById("rem-script-type");
    const ta = document.getElementById("rem-script-preview");

    if (!btn || !statusEl || !typeSel || !ta) return;

    btn.addEventListener("click", async () => {
      if (!lastSelectedReminder) {
        statusEl.textContent = "Select an appointment first.";
        return;
      }

      const convId = lastSelectedReminder.conversation_id;
      if (!convId) {
        statusEl.textContent = "No conversation linked.";
        return;
      }

      const mode = typeSel.value || "reminder";
      const templateKey = getTemplateKeyForMode(mode);
      const body = ta.value || "";

      if (!body.trim()) {
        statusEl.textContent = "No message to log.";
        return;
      }

      statusEl.textContent = "Logging…";

      try {
        const res = await fetch("/api/messages", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            conversation_id: convId,
            message_body: body,
            mode,
            template_key: templateKey,
            channel: "whatsapp",
            direction: "outbound",
            sender: "lia"
          }),
        });

        if (!res.ok) {
          statusEl.textContent = "Failed to log message.";
          return;
        }

        statusEl.textContent = "Logged ✔";
        setTimeout(() => {
          statusEl.textContent = "";
        }, 2500);
      } catch (err) {
        console.error("Error logging message", err);
        statusEl.textContent = "Failed to log message.";
      }
    });
  }

  async function loadTco() {
    const tableContainer = document.getElementById("tco-table");
    const modelSel = document.getElementById("tco-model");
    const talking = document.getElementById("tco-talking-points");
    if (!tableContainer) return;

    tableContainer.textContent = "Loading…";

    const params = new URLSearchParams();
    if (modelSel?.value) params.set("model", modelSel.value);

    try {
      const res = await fetch("/api/tco" + (params.toString() ? "?" + params.toString() : ""));
      if (!res.ok) throw new Error("Failed to load TCO");
      const payload = await res.json();
      const rows = payload.data || [];

      if (!rows.length) {
        tableContainer.textContent = "No TCO data available yet.";
        if (talking) talking.textContent = "Once TCO data is populated, you'll see simple talking points here for each model.";
        return;
      }

      // Populate model selector on first load
      if (modelSel && modelSel.options.length <= 1) {
        rows.forEach((r) => {
          const opt = document.createElement("option");
          opt.value = r.model;
          opt.textContent = r.model;
          modelSel.appendChild(opt);
        });
      }

      const table = document.createElement("table");
      table.className = "w-full text-[11px] text-left border-collapse";

      const thead = document.createElement("thead");
      thead.innerHTML = `
        <tr class="border-b border-dp-silver/80 text-neutral-500">
          <th class="py-1 pr-2 font-medium">Model</th>
          <th class="py-1 pr-2 font-medium">Finance p/m</th>
          <th class="py-1 pr-2 font-medium">Insurance est.</th>
          <th class="py-1 pr-2 font-medium">Energy / fuel</th>
          <th class="py-1 pr-2 font-medium">Service plan</th>
          <th class="py-1 pr-2 font-medium">Tyres & misc.</th>
        </tr>
      `;

      const tbody = document.createElement("tbody");
      rows.forEach((r) => {
        const tr = document.createElement("tr");
        tr.className = "border-b border-dp-silver/40";

        tr.innerHTML = `
          <td class="py-1 pr-2">${r.model}</td>
          <td class="py-1 pr-2">£${r.monthly_payment}</td>
          <td class="py-1 pr-2">£${r.insurance_est}</td>
          <td class="py-1 pr-2">£${r.energy_fuel}</td>
          <td class="py-1 pr-2">£${r.service_plan}</td>
          <td class="py-1 pr-2">£${r.tyres_misc}</td>
        `;

        tr.addEventListener("click", () => {
          if (!talking) return;
          const total =
            r.monthly_payment +
            r.insurance_est +
            r.energy_fuel +
            r.service_plan +
            r.tyres_misc;

          talking.textContent =
            `For the ${r.model}, the total monthly ownership picture is around £${total.toFixed(
              0
            )}. ` +
            `That includes the finance payment, an estimate for insurance, realistic energy or fuel, the service plan and an allowance for tyres and general wear. ` +
            `Use this to move the conversation away from just "monthly price" and towards overall value, convenience and budget confidence.`;
        });

        tbody.appendChild(tr);
      });

      table.appendChild(thead);
      table.appendChild(tbody);

      tableContainer.innerHTML = "";
      tableContainer.appendChild(table);
    } catch (e) {
      console.error(e);
      tableContainer.textContent = "Error loading TCO data.";
      if (talking) talking.textContent = "Unable to load TCO talking points right now.";
    }
  }

  document.addEventListener("DOMContentLoaded", () => {
    loadCampaigns();
    loadTrendChart();
    loadRetentionPen();
    loadReminders();
    loadTco();
    initReminderMarkSent();

    const uploadForm = document.getElementById("upload-form");
    const uploadStatus = document.getElementById("upload-status");

    if (uploadForm) {
      uploadForm.addEventListener("submit", async (e) => {
        e.preventDefault();
        if (!uploadStatus) return;

        const monthInput = document.getElementById("book-month");
        if (!monthInput || !monthInput.value) {
          uploadStatus.textContent = "❌ Please select the snapshot month.";
          return;
        }

        uploadStatus.textContent = "Uploading…";

        const formData = new FormData(uploadForm);

        const bookMonth = monthInput.value + "-01";
        formData.append("bookMonth", bookMonth);

        try {
          const res = await fetch("/upload-book", {
            method: "POST",
            body: formData,
          });

          const data = await res.json().catch(() => ({}));

          if (!res.ok) {
            const message =
              data.detail ||
              data.error ||
              "Upload failed — please try again.";
            uploadStatus.textContent = `❌ Upload failed: ${message}`;
            return;
          }

          uploadStatus.textContent =
            data.detail || "✅ Upload complete — Book imported";
        } catch (err) {
          uploadStatus.textContent = `❌ ${err.message || "Upload failed"}`;
        }
      });
    }

      const detailPanel = document.getElementById("campaign-detail");
      const detailClose = document.getElementById("campaign-detail-close");
      if (detailPanel && detailClose) {
        detailClose.addEventListener("click", () => {
          detailPanel.classList.add("hidden");
        });
      }


    const campApply = document.getElementById("camp-apply");
    if (campApply) {
      campApply.addEventListener("click", () => loadCampaigns());
    }

    const remApply = document.getElementById("rem-apply");
    if (remApply) {
      remApply.addEventListener("click", () => loadReminders());
    }

    const tcoApply = document.getElementById("tco-apply");
    if (tcoApply) {
      tcoApply.addEventListener("click", () => loadTco());
    }

    const remWindow = document.getElementById("rem-window");
    if (remWindow) {
      remWindow.addEventListener("change", () => loadReminders());
    }

    const logoutBtn = document.getElementById("logout-btn");
    if (logoutBtn) {
      logoutBtn.addEventListener("click", async () => {
        const form = document.createElement("form");
        form.method = "POST";
        form.action = "/logout";
        document.body.appendChild(form);
        form.submit();
      });
    }
  });
</script>
{% endblock %}