{% extends "pos/base.html" %}
{% load static %}
{% block title %}WhatsApp Bulk Reminder{% endblock %}

{% block stylesheets %}
<style>
  :root {
    --wa-green: #25D366;
    --wa-dark: #075E54;
    --wa-teal: #128C7E;
  }

  /* ── Server Status ── */
  .wa-server-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
  }
  .wa-server-bar.online  { background: #d4edda; color: #155724; }
  .wa-server-bar.offline { background: #f8d7da; color: #721c24; }
  .wa-server-bar.checking { background: #fff3cd; color: #856404; }
  .wa-server-dot {
    width: 10px; height: 10px; border-radius: 50%;
  }
  .wa-server-bar.online .wa-server-dot { background: var(--wa-green); }
  .wa-server-bar.offline .wa-server-dot { background: #e74c3c; }
  .wa-server-bar.checking .wa-server-dot { background: #f39c12; animation: pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

  /* ── Action Bar ── */
  .wa-action-bar {
    background: linear-gradient(135deg, var(--wa-dark), var(--wa-teal));
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  .wa-action-bar .wa-info {
    color: #fff;
  }
  .wa-action-bar .wa-info h5 {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 18px;
  }
  .wa-action-bar .wa-info p {
    margin: 0;
    opacity: 0.8;
    font-size: 13px;
  }
  .wa-btn-send {
    background: var(--wa-green);
    border: none;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .wa-btn-send:hover { background: #1ebe5d; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,.4); color: #fff; }
  .wa-btn-send:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
  .wa-btn-stop {
    background: #e74c3c;
    border: none;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    display: none;
  }
  .wa-btn-stop:hover { background: #c0392b; color: #fff; }

  /* ── Progress Section ── */
  .wa-progress-section {
    display: none;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
  }
  .wa-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #495057;
  }
  .wa-progress-header .wa-counts span {
    margin-left: 16px;
  }
  .wa-progress-header .sent { color: #155724; font-weight: 600; }
  .wa-progress-header .failed { color: #721c24; font-weight: 600; }
  .wa-progress-bar {
    background: #e9ecef;
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
  }
  .wa-progress-fill {
    background: linear-gradient(90deg, var(--wa-green), #1ebe5d);
    height: 100%;
    width: 0%;
    transition: width .4s ease;
    border-radius: 20px;
  }
  .wa-progress-text {
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    color: #6c757d;
  }

  /* ── Summary Bar ── */
  .wa-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #495057;
  }
  .wa-summary strong { color: #212529; }

  /* ── Table Styles ── */
  #reminderTable tbody tr.row-sent { background: #f0fff4 !important; }
  #reminderTable tbody tr.row-failed { background: #fff5f5 !important; }
  #reminderTable tbody tr.row-sending { background: #fffbeb !important; }

  .wa-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
  }
  .wa-status-badge.pending { background: #f1f3f4; color: #5f6368; }
  .wa-status-badge.sending { background: #fff3cd; color: #856404; }
  .wa-status-badge.sent { background: #d4edda; color: #155724; }
  .wa-status-badge.failed { background: #f8d7da; color: #721c24; }
  .wa-status-badge.skipped { background: #e2e3e5; color: #383d41; }

  .wa-send-single {
    background: var(--wa-green);
    color: #fff;
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s;
  }
  .wa-send-single:hover { transform: scale(1.1); }
  .wa-send-single:disabled { opacity: .4; cursor: not-allowed; }

  /* ── Toast ── */
  .wa-toast {
    position: fixed; top: 20px; right: 20px;
    padding: 14px 24px; border-radius: 10px;
    color: #fff; font-weight: 600; z-index: 99999;
    transform: translateX(400px); transition: transform .3s ease;
    font-size: 14px;
  }
  .wa-toast.show { transform: translateX(0); }
  .wa-toast.success { background: var(--wa-green); }
  .wa-toast.error { background: #e74c3c; }
  .wa-toast.warning { background: #f39c12; }
</style>
{% endblock %}

{% block heading %}
<i class="fab fa-whatsapp mr-2" style="color:#25D366;"></i>WhatsApp Bulk Reminder
{% endblock %}

{% block content %}

<!-- Toast -->
<div class="wa-toast" id="waToast"></div>

<!-- Server Status -->
<div class="wa-server-bar checking" id="waServerBar">
  <div class="wa-server-dot"></div>
  <span id="waServerText">Checking WhatsApp server...</span>
  <button class="btn btn-sm btn-outline-dark ml-auto" onclick="checkWaServer()">
    <i class="fas fa-sync-alt"></i>
  </button>
</div>

<!-- Filters -->
<div class="card mb-3">
  <div class="card-body py-3">
    <form method="get" class="form-inline flex-wrap">
      <div class="form-check mx-2 my-1">
        <input class="form-check-input" type="checkbox" name="filter_name" id="filter_name" {% if params.filter_name %}checked{% endif %}>
        <label class="form-check-label" for="filter_name">Customer</label>
      </div>
      <select id="customer_name" name="customer_name" class="form-control mx-2 my-1" style="width:200px;">
        {% if params.filter_name and params.customer_name %}
          <option selected>{{ params.customer_name }}</option>
        {% endif %}
      </select>

      <div class="form-check mx-2 my-1">
        <input class="form-check-input" type="checkbox" name="filter_booker" id="filter_booker" {% if params.filter_booker %}checked{% endif %}>
        <label class="form-check-label" for="filter_booker">Booker</label>
      </div>
      <select id="order_booker" name="order_booker_ids" class="form-control mx-2 my-1" multiple style="width:200px;">
        {% for b in sel_bookers %}
          <option value="{{ b.t_id }}" selected>{{ b.name }}</option>
        {% endfor %}
      </select>

      <div class="form-check mx-2 my-1">
        <input class="form-check-input" type="checkbox" name="filter_area" id="filter_area" {% if params.filter_area %}checked{% endif %}>
        <label class="form-check-label" for="filter_area">Area</label>
      </div>
      <select id="sale_area" name="sale_area_ids" class="form-control mx-2 my-1" multiple style="width:200px;">
        {% for a in sel_areas %}
          <option value="{{ a.t_id }}" selected>{{ a.area_name }}</option>
        {% endfor %}
      </select>

      <div class="form-check mx-2 my-1">
        <input class="form-check-input" type="checkbox" name="show_all" id="show_all" {% if params.show_all %}checked{% endif %}>
        <label class="form-check-label" for="show_all">All Customers</label>
      </div>

      <button class="btn btn-primary mx-2 my-1"><i class="fas fa-search mr-1"></i>Search</button>
    </form>
  </div>
</div>

<!-- Action Bar -->
<div class="wa-action-bar">
  <div class="wa-info">
    <h5><i class="fab fa-whatsapp mr-2"></i>Send Bulk Reminders</h5>
    <p>Select customers and send payment reminders via WhatsApp</p>
  </div>
  <div>
    <button class="wa-btn-send" id="waBtnSend" onclick="startBulkSend()" disabled>
      <i class="fab fa-whatsapp"></i> Send to Selected (<span id="selectedCount">0</span>)
    </button>
    <button class="wa-btn-stop" id="waBtnStop" onclick="stopBulkSend()">
      <i class="fas fa-stop"></i> Stop
    </button>
  </div>
</div>

<!-- Progress Section -->
<div class="wa-progress-section" id="waProgressSection">
  <div class="wa-progress-header">
    <span id="waProgressLabel">Sending messages...</span>
    <div class="wa-counts">
      <span class="sent"><i class="fas fa-check-circle mr-1"></i><span id="statSent">0</span> Sent</span>
      <span class="failed"><i class="fas fa-times-circle mr-1"></i><span id="statFailed">0</span> Failed</span>
    </div>
  </div>
  <div class="wa-progress-bar">
    <div class="wa-progress-fill" id="waProgressFill"></div>
  </div>
  <div class="wa-progress-text" id="waProgressText">0 / 0</div>
</div>

<!-- Summary -->
<div class="wa-summary">
  <span><strong>{{ rows|length }}</strong> customers</span>
  <span><strong style="color:#155724;">Receivables:</strong> {{ receivables|floatformat:0 }}</span>
  <span><strong style="color:#721c24;">Payables:</strong> {{ payables|floatformat:0 }}</span>
</div>

<!-- Customer Table -->
<div class="card">
  <div class="card-body p-0">
    <table id="reminderTable" class="table table-bordered table-hover mb-0">
      <thead class="thead-light">
        <tr>
          <th style="width:40px;">
            <input type="checkbox" id="selectAll" onclick="toggleSelectAll(this)">
          </th>
          <th>Name</th>
          <th>Mobile</th>
          <th>Balance</th>
          <th>Area</th>
          <th style="width:90px;">Status</th>
          <th style="width:50px;">Send</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr id="row-{{ r.t_id }}"
            data-tid="{{ r.t_id }}"
            data-name="{{ r.name }}"
            data-address="{{ r.address }}"
            data-mobile="{{ r.mobile }}"
            data-balance="{{ r.balance }}"
            data-area="{{ r.area }}">
          <td><input type="checkbox" class="row-check" value="{{ r.t_id }}"></td>
          <td>{{ r.name }}</td>
          <td>{{ r.mobile }}</td>
          <td>
            {% if r.balance > 0 %}
              <span style="color:#155724;font-weight:600;">{{ r.balance }}</span>
            {% elif r.balance < 0 %}
              <span style="color:#721c24;font-weight:600;">{{ r.balance }}</span>
            {% else %}
              <span style="color:#888;">0</span>
            {% endif %}
          </td>
          <td>{{ r.area }}</td>
          <td><span class="wa-status-badge pending" id="status-{{ r.t_id }}">—</span></td>
          <td>
            <button class="wa-send-single" onclick="sendSingle('{{ r.t_id }}')" title="Send">
              <i class="fab fa-whatsapp"></i>
            </button>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center text-muted py-4">No customers found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
(function() {

  const WA_API = 'http://localhost:3000';
  const WA_SIGNATURE = '\n\n━━━━━━━━━━━━━━━\n_Automated Message from Blue Primes Software (blueprimes.com)_';
  
  let isSending = false;
  let stopFlag = false;
  let sentCount = 0;
  let failedCount = 0;
  let serverOnline = false;
  let dataTable = null;
  let defaultTemplate = '';

  // ══════════════ HELPERS ══════════════
  function toast(msg, type) {
    const el = document.getElementById('waToast');
    el.textContent = msg;
    el.className = 'wa-toast ' + (type || 'success');
    setTimeout(() => el.classList.add('show'), 10);
    setTimeout(() => el.classList.remove('show'), 3500);
  }

  function setStatus(tid, status) {
    const badge = document.getElementById('status-' + tid);
    if (!badge) return;
    badge.className = 'wa-status-badge ' + status;
    const labels = { pending: '—', sending: 'Sending…', sent: '✓ Sent', failed: '✗ Failed', skipped: 'Skipped' };
    badge.textContent = labels[status] || status;

    const row = document.getElementById('row-' + tid);
    if (row) {
      row.classList.remove('row-sent', 'row-failed', 'row-sending');
      if (status === 'sent') row.classList.add('row-sent');
      if (status === 'failed') row.classList.add('row-failed');
      if (status === 'sending') row.classList.add('row-sending');
    }
  }

  function updateProgress(current, total) {
    const pct = total > 0 ? Math.round((current / total) * 100) : 0;
    document.getElementById('waProgressFill').style.width = pct + '%';
    document.getElementById('waProgressText').textContent = current + ' / ' + total;
    document.getElementById('statSent').textContent = sentCount;
    document.getElementById('statFailed').textContent = failedCount;
  }

  function updateSelectedCount() {
    const count = document.querySelectorAll('.row-check:checked').length;
    document.getElementById('selectedCount').textContent = count;
    document.getElementById('waBtnSend').disabled = !serverOnline || count === 0 || isSending;
  }

  function formatPhone(mobile) {
    if (!mobile) return '';
    let p = String(mobile).replace(/\D/g, '');
    if (p.startsWith('0')) p = '92' + p.substring(1);
    return p;
  }

  function buildMessage(template, data) {
    return template
      .replace(/\{customer_name\}/gi, data.name || '')
      .replace(/\{name\}/gi, data.name || '')
      .replace(/\{balance\}/gi, Number(data.balance || 0).toLocaleString())
      .replace(/\{remaining\}/gi, Number(data.balance || 0).toLocaleString())
      .replace(/\{mobile\}/gi, data.mobile || '')
      .replace(/\{address\}/gi, data.address || '')
      .replace(/\{area\}/gi, data.area || '')
      .replace(/\{date\}/gi, new Date().toLocaleDateString('en-GB'))
      .replace(/\{amount\}/gi, '')
      .replace(/\{invoice_no\}/gi, '')
      .replace(/\{remarks\}/gi, '');
  }

  function getRandomDelay() {
    // Random delay between 35-50 seconds
    return (35 + Math.floor(Math.random() * 16)) * 1000;
  }

  function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

  // ══════════════ FETCH DEFAULT TEMPLATE ══════════════
  async function fetchDefaultTemplate() {
    try {
      const resp = await fetch("{% url 'pos:whatsapp_template_get_default' 'reminder' %}", {
        method: 'GET',
        credentials: 'same-origin',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const data = await resp.json();
      if (data.ok && data.template_text) {
        defaultTemplate = data.template_text;
        console.log('Loaded template:', data.template_name);
      } else {
        defaultTemplate = getFallbackTemplate();
      }
    } catch (err) {
      console.warn('Template fetch failed:', err);
      defaultTemplate = getFallbackTemplate();
    }
  }

  function getFallbackTemplate() {
    return `*{customer_name}*

📋 Outstanding Balance: *Rs. {remaining}*
📅 Date: {date}

Please clear your dues at the earliest.

Thank you! 🙏`;
  }

  // ══════════════ SERVER CHECK ══════════════
  window.checkWaServer = async function() {
    const bar = document.getElementById('waServerBar');
    const txt = document.getElementById('waServerText');
    bar.className = 'wa-server-bar checking';
    txt.textContent = 'Checking WhatsApp server...';

    try {
      const resp = await fetch(WA_API + '/api/status', { mode: 'cors' });
      const data = await resp.json();
      serverOnline = true;

      if (data.connected) {
        bar.className = 'wa-server-bar online';
        txt.textContent = '✅ WhatsApp connected' + (data.profile ? ' — ' + data.profile.name : '');
      } else {
        bar.className = 'wa-server-bar online';
        txt.textContent = '⚠️ Server online but WhatsApp not connected';
      }
      updateSelectedCount();
    } catch (err) {
      serverOnline = false;
      bar.className = 'wa-server-bar offline';
      txt.textContent = '❌ WhatsApp server not reachable';
      document.getElementById('waBtnSend').disabled = true;
    }
  };

  // ══════════════ SELECT ALL ══════════════
  window.toggleSelectAll = function(master) {
    const rows = dataTable ? dataTable.rows({ search: 'applied' }).nodes() : [];
    $(rows).find('.row-check').prop('checked', master.checked);
    updateSelectedCount();
  };

  // ══════════════ SEND SINGLE ══════════════
  window.sendSingle = async function(tid) {
    if (!serverOnline) { toast('Server not connected!', 'error'); return; }
    if (!defaultTemplate) { await fetchDefaultTemplate(); }

    const row = document.getElementById('row-' + tid);
    if (!row) return;

    const data = {
      name: row.dataset.name,
      mobile: row.dataset.mobile,
      balance: row.dataset.balance,
      address: row.dataset.address,
      area: row.dataset.area,
    };

    const phone = formatPhone(data.mobile);
    if (!phone) { toast('No mobile number!', 'warning'); return; }

    setStatus(tid, 'sending');

    try {
      const msg = buildMessage(defaultTemplate, data) + WA_SIGNATURE;
      const fd = new FormData();
      fd.append('phone', phone);
      fd.append('message', msg);

      const resp = await fetch(WA_API + '/api/send-media', { method: 'POST', body: fd });
      const result = await resp.json();

      if (result.success) {
        setStatus(tid, 'sent');
        toast('✅ Sent to ' + data.name, 'success');
      } else {
        setStatus(tid, 'failed');
        toast('❌ Failed: ' + (result.error || 'Unknown'), 'error');
      }
    } catch (err) {
      setStatus(tid, 'failed');
      toast('❌ Error: ' + err.message, 'error');
    }
  };

  // ══════════════ BULK SEND ══════════════
  window.startBulkSend = async function() {
    const checked = document.querySelectorAll('.row-check:checked');
    if (checked.length === 0) { toast('Select at least one customer!', 'warning'); return; }
    if (!serverOnline) { toast('Server not connected!', 'error'); return; }

    // Fetch template if not loaded
    if (!defaultTemplate) { await fetchDefaultTemplate(); }

    isSending = true;
    stopFlag = false;
    sentCount = 0;
    failedCount = 0;

    document.getElementById('waBtnSend').style.display = 'none';
    document.getElementById('waBtnStop').style.display = 'inline-block';
    document.getElementById('waProgressSection').style.display = 'block';
    document.getElementById('waProgressLabel').textContent = 'Sending messages...';

    // Reset statuses
    checked.forEach(cb => setStatus(cb.value, 'pending'));
    updateProgress(0, checked.length);

    // Build queue
    const queue = [];
    checked.forEach(cb => {
      const row = document.getElementById('row-' + cb.value);
      if (row) {
        queue.push({
          tid: cb.value,
          name: row.dataset.name,
          mobile: row.dataset.mobile,
          balance: row.dataset.balance,
          address: row.dataset.address,
          area: row.dataset.area,
        });
      }
    });

    // Send loop
    for (let i = 0; i < queue.length; i++) {
      if (stopFlag) break;

      const c = queue[i];
      const phone = formatPhone(c.mobile);

      // Skip if no phone or balance <= 0
      if (!phone) {
        setStatus(c.tid, 'skipped');
        failedCount++;
        updateProgress(i + 1, queue.length);
        continue;
      }
      if (Number(c.balance) <= 0) {
        setStatus(c.tid, 'skipped');
        failedCount++;
        updateProgress(i + 1, queue.length);
        continue;
      }

      setStatus(c.tid, 'sending');

      // Scroll to row
      const row = document.getElementById('row-' + c.tid);
      if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' });

      try {
        const msg = buildMessage(defaultTemplate, c) + WA_SIGNATURE;
        const fd = new FormData();
        fd.append('phone', phone);
        fd.append('message', msg);

        const resp = await fetch(WA_API + '/api/send-media', { method: 'POST', body: fd });
        const result = await resp.json();

        if (result.success) {
          setStatus(c.tid, 'sent');
          sentCount++;
        } else {
          setStatus(c.tid, 'failed');
          failedCount++;
        }
      } catch (err) {
        setStatus(c.tid, 'failed');
        failedCount++;
      }

      updateProgress(i + 1, queue.length);

      // Delay before next (35-50 seconds)
      if (i < queue.length - 1 && !stopFlag) {
        const delay = getRandomDelay();
        document.getElementById('waProgressLabel').textContent = `Waiting ${Math.round(delay/1000)}s before next...`;
        await sleep(delay);
        document.getElementById('waProgressLabel').textContent = 'Sending messages...';
      }
    }

    // Done
    isSending = false;
    document.getElementById('waBtnSend').style.display = 'inline-block';
    document.getElementById('waBtnStop').style.display = 'none';
    document.getElementById('waProgressLabel').textContent = stopFlag ? 'Stopped' : 'Complete!';
    updateSelectedCount();

    toast(stopFlag ? `Stopped. Sent: ${sentCount}` : `✅ Complete! Sent: ${sentCount}, Failed: ${failedCount}`, stopFlag ? 'warning' : 'success');
  };

  window.stopBulkSend = function() {
    stopFlag = true;
    document.getElementById('waBtnStop').textContent = 'Stopping...';
  };

  // ══════════════ INIT ══════════════
  $(document).ready(function() {
    $.ajaxSetup({ headers: { 'X-CSRFToken': '{{ csrf_token }}' } });

    // DataTable
    dataTable = $('#reminderTable').DataTable({
      order: [],
      pageLength: 50,
      lengthMenu: [25, 50, 100, 250],
      columnDefs: [{ orderable: false, targets: [0, 5, 6] }]
    });

    // Select2
    $('#customer_name').select2({
      placeholder: 'Search customer', allowClear: true,
      ajax: {
        url: "{% url 'customers:get_customers' %}",
        type: 'POST', delay: 250,
        data: p => ({ term: p.term }),
        processResults: d => ({ results: d }),
      }
    });
    $('#order_booker').select2({
      placeholder: 'Select Booker(s)', multiple: true,
      ajax: {
        url: "{% url 'customers:get_order_bookers' %}",
        type: 'POST', delay: 250,
        data: p => ({ term: p.term }),
        processResults: d => ({ results: d }),
      }
    });
    $('#sale_area').select2({
      placeholder: 'Select Area(s)', multiple: true,
      ajax: {
        url: "{% url 'customers:get_sale_areas' %}",
        type: 'POST', delay: 250,
        data: p => ({ term: p.term }),
        processResults: d => ({ results: d }),
      }
    });

    // Auto-check filter
    $('#customer_name').on('select2:open select2:select', () => $('#filter_name').prop('checked', true));
    $('#order_booker').on('select2:open select2:select', () => $('#filter_booker').prop('checked', true));
    $('#sale_area').on('select2:open select2:select', () => $('#filter_area').prop('checked', true));

    // Checkbox change
    $(document).on('change', '.row-check', updateSelectedCount);

    // Init
    checkWaServer();
    fetchDefaultTemplate();
    updateSelectedCount();
  });

})();
</script>
{% endblock %}