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

{% block stylesheets %}
<style>
  :root {
    --wa-green: #25D366;
    --wa-dark: #075E54;
    --wa-teal: #128C7E;
    --wa-light: #DCF8C6;
    --wa-bg: #ECE5DD;
    --wa-danger: #e74c3c;
    --wa-warning: #f39c12;
    --wa-blue: #3498db;
  }

  .wa-page { max-width: 900px; margin: 0 auto; }

  /* ── Status Banner ── */
  .wa-status-banner {
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s ease;
    border: 2px solid transparent;
  }
  .wa-status-banner.connected {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    border-color: var(--wa-green);
  }
  .wa-status-banner.disconnected {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    border-color: var(--wa-warning);
  }
  .wa-status-banner.error {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    border-color: var(--wa-danger);
  }
  .wa-status-banner.initializing {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    border-color: var(--wa-blue);
  }

  .wa-status-icon {
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; flex-shrink: 0; color: #fff;
  }
  .connected .wa-status-icon { background: var(--wa-green); }
  .disconnected .wa-status-icon { background: var(--wa-warning); }
  .error .wa-status-icon { background: var(--wa-danger); }
  .initializing .wa-status-icon { background: var(--wa-blue); }

  .wa-status-info { flex: 1; }
  .wa-status-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
  .connected .wa-status-title { color: #155724; }
  .disconnected .wa-status-title { color: #856404; }
  .error .wa-status-title { color: #721c24; }
  .initializing .wa-status-title { color: #0c5460; }
  .wa-status-sub { font-size: 14px; margin: 0; opacity: 0.8; }

  /* ── Profile Card ── */
  .wa-profile-card {
    background: #fff; border-radius: 14px; padding: 24px;
    margin-bottom: 24px; border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .wa-profile-header { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
  .wa-profile-avatar {
    width: 70px; height: 70px; border-radius: 50%; background: var(--wa-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0;
  }
  .wa-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .wa-profile-name { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0; }
  .wa-profile-number { font-size: 16px; color: var(--wa-teal); font-weight: 600; margin: 2px 0 0; }
  .wa-profile-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wa-detail-item { background: #f8f9fa; padding: 12px 16px; border-radius: 10px; }
  .wa-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #888; font-weight: 600; }
  .wa-detail-value { font-size: 15px; font-weight: 600; color: #333; margin-top: 2px; }

  /* ── QR Section ── */
  .wa-qr-section {
    background: #fff; border-radius: 14px; padding: 30px;
    margin-bottom: 24px; border: 1px solid #e0e0e0;
    text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .wa-qr-section h5 { font-weight: 700; margin-bottom: 8px; color: #333; }
  .wa-qr-section p { color: #888; font-size: 14px; margin-bottom: 20px; }
  #waQrImage {
    background: #fff; padding: 12px; border-radius: 12px;
    border: 2px solid var(--wa-green); display: none; margin: 0 auto 20px;
  }
  #waQrImage img { width: 220px; height: 220px; display: block; }

  /* ── Action Buttons ── */
  .wa-actions {
    background: #fff; border-radius: 14px; padding: 24px;
    margin-bottom: 24px; border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .wa-actions h5 { font-weight: 700; margin-bottom: 16px; color: #333; }
  .wa-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wa-btn {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    border-radius: 12px; border: 2px solid #e0e0e0; background: #fff;
    cursor: pointer; transition: all 0.25s ease; text-align: left; font-size: 14px;
  }
  .wa-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
  .wa-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
  .wa-btn i {
    font-size: 22px; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
  }
  .wa-btn-label { font-weight: 700; color: #333; }
  .wa-btn-desc { font-size: 12px; color: #888; margin-top: 2px; }
  .wa-btn.connect i { background: var(--wa-green); }
  .wa-btn.connect:hover { border-color: var(--wa-green); background: #f0faf3; }
  .wa-btn.disconnect i { background: var(--wa-danger); }
  .wa-btn.disconnect:hover { border-color: var(--wa-danger); background: #fef2f2; }
  .wa-btn.reset i { background: var(--wa-warning); }
  .wa-btn.reset:hover { border-color: var(--wa-warning); background: #fffbeb; }
  .wa-btn.refresh i { background: var(--wa-blue); }
  .wa-btn.refresh:hover { border-color: var(--wa-blue); background: #eff6ff; }

  /* ── Server Status ── */
  .wa-server-bar {
    background: #fff; border-radius: 14px; padding: 16px 24px;
    margin-bottom: 24px; border: 1px solid #e0e0e0;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .server-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  .server-dot.online { background: var(--wa-green); box-shadow: 0 0 8px rgba(37,211,102,0.5); }
  .server-dot.offline { background: var(--wa-danger); }
  .server-dot.checking { background: var(--wa-warning); animation: blink 1s infinite; }
  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
  .server-text { flex: 1; }
  .server-text strong { display: block; font-size: 14px; color: #333; }
  .server-text span { font-size: 12px; color: #888; }

  /* ── Log Section ── */
  .wa-log {
    background: #fff; border-radius: 14px; padding: 24px;
    border: 1px solid #e0e0e0; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .wa-log h5 {
    font-weight: 700; margin-bottom: 12px; color: #333;
    display: flex; justify-content: space-between; align-items: center;
  }
  .wa-log-container {
    background: #1a1a2e; border-radius: 10px; padding: 16px;
    max-height: 250px; overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace; font-size: 12px;
  }
  .wa-log-item { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .log-success { color: #2ecc71; }
  .log-error { color: #e74c3c; }
  .log-info { color: #87ceeb; }
  .log-warning { color: #f39c12; }

  /* ── Toast ── */
  .wa-toast {
    position: fixed; top: 20px; right: 20px; padding: 14px 24px;
    border-radius: 12px; color: #fff; font-weight: 600; z-index: 99999;
    transform: translateX(400px); transition: transform 0.4s ease;
    font-size: 14px; max-width: 400px; display: flex; align-items: center; gap: 10px;
  }
  .wa-toast.show { transform: translateX(0); }
  .wa-toast.success { background: linear-gradient(135deg, #25D366, #128C7E); }
  .wa-toast.error { background: linear-gradient(135deg, #e74c3c, #c0392b); }
  .wa-toast.warning { background: linear-gradient(135deg, #f39c12, #e67e22); }
  .wa-toast.info { background: linear-gradient(135deg, #3498db, #2980b9); }

  /* ── Spinner ── */
  .wa-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 3px solid rgba(255,255,255,0.3); border-radius: 50%;
    border-top-color: #fff; animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── No Server Overlay ── */
  .wa-no-server {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    border: 2px solid var(--wa-danger); border-radius: 14px;
    padding: 40px; text-align: center; margin-bottom: 24px;
  }
  .wa-no-server i { font-size: 48px; color: var(--wa-danger); margin-bottom: 16px; }
  .wa-no-server h4 { color: #721c24; font-weight: 700; margin-bottom: 8px; }
  .wa-no-server p { color: #856404; font-size: 14px; margin-bottom: 16px; }
  .wa-no-server code {
    background: rgba(0,0,0,0.1); padding: 8px 16px;
    border-radius: 8px; font-size: 14px; display: inline-block;
  }

  @media (max-width: 576px) {
    .wa-btn-grid { grid-template-columns: 1fr; }
    .wa-profile-details { grid-template-columns: 1fr; }
  }


/* Download Button Enhancement */
.wa-no-server .btn-success {
  background: linear-gradient(135deg, #25D366, #128C7E);
  border: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: all 0.25s ease;
}
.wa-no-server .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
  background: linear-gradient(135deg, #22c55e, #0d9668);
}
.wa-no-server .btn-outline-danger {
  border-width: 2px;
}
.wa-no-server ol {
  margin-bottom: 0;
  padding-left: 20px;
}
.wa-no-server ol li {
  margin-bottom: 4px;
}

  
</style>
{% endblock %}

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

{% block content %}
<div class="wa-page">

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

  <!-- Server Status Bar -->
  <div class="wa-server-bar" id="waServerBar">
    <div class="server-dot checking" id="serverDot"></div>
    <div class="server-text">
      <strong id="serverStatus">Checking server...</strong>
      <span id="serverSub">Trying to Restart Blue Primes WhatsApp</span>
    </div>
    <button class="btn btn-sm btn-outline-secondary" onclick="checkServer()">
      <i class="fas fa-sync-alt"></i>
    </button>
    {% video_help_button 'whatsapp_settings' 'Video Help' 'btn btn-danger' %}
  </div>

<!-- No Server Warning -->
<div class="wa-no-server" id="waNoServer" style="display:none;">
  <i class="fas fa-exclamation-triangle"></i>
  <h4>Blue Primes WhatsApp Not Found</h4>
  <p>The Blue Primes WhatsApp is not running. Download and install it first:</p>
  
  <div class="d-flex justify-content-center align-items-center flex-wrap mt-3" style="gap: 12px;">
    <a href="https://app.blueprimes.com/wp/wp.exe" class="btn btn-success btn-lg" download>
      <i class="fab fa-whatsapp mr-2"></i>Download Blue Primes WhatsApp
    </a>
    <button class="btn btn-outline-danger btn-lg" onclick="checkServer()">
      <i class="fas fa-redo mr-2"></i>Retry Connection
    </button>
  </div>
  
  <div class="mt-3 text-muted" style="font-size: 13px;">
    <p class="mb-1"><strong>Installation Steps:</strong></p>
    <ol class="text-left d-inline-block" style="font-size: 12px;">
      <li>Download <code>wp.exe</code> and run it</li>
      <li>Allow firewall access if prompted</li>
      <li>Click "Retry Connection" above</li>
    </ol>
  </div>
</div>

  <!-- Main Content -->
  <div id="waMainContent">

    <!-- Status Banner -->
    <div class="wa-status-banner disconnected" id="waStatusBanner">
      <div class="wa-status-icon" id="waStatusIcon">
        <i class="fas fa-unlink"></i>
      </div>
      <div class="wa-status-info">
        <p class="wa-status-title" id="waStatusTitle">Disconnected</p>
        <p class="wa-status-sub" id="waStatusSub">Click "Connect" to start WhatsApp</p>
      </div>
    </div>

    <!-- QR Code Section -->
    <div class="wa-qr-section" id="waQrSection" style="display:none;">
      <h5><i class="fas fa-qrcode mr-2"></i>Scan QR Code</h5>
      <p>Open WhatsApp on your phone → Settings → Linked Devices → Link a Device</p>
      <div id="waQrImage"><img id="waQrImg" src="" alt="QR Code" /></div>
      <div id="waQrLoading">
        <div class="wa-spinner" style="border-top-color:var(--wa-green);border-color:rgba(37,211,102,0.2);"></div>
        <p class="mt-2" style="color:#888;">Generating QR code...</p>
      </div>
    </div>

    <!-- Profile Card -->
    <div class="wa-profile-card" id="waProfileCard" style="display:none;">
      <div class="wa-profile-header">
        <div class="wa-profile-avatar" id="waProfileAvatar">?</div>
        <div>
          <p class="wa-profile-name" id="waProfileName">Unknown</p>
          <p class="wa-profile-number" id="waProfileNumber">---</p>
        </div>
      </div>
      <div class="wa-profile-details">
        <div class="wa-detail-item">
          <div class="wa-detail-label">Platform</div>
          <div class="wa-detail-value" id="waProfilePlatform">---</div>
        </div>
        <div class="wa-detail-item">
          <div class="wa-detail-label">Status</div>
          <div class="wa-detail-value" id="waProfileStatus" style="color:var(--wa-green);">Connected</div>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="wa-actions">
      <h5><i class="fas fa-cog mr-2"></i>Actions</h5>
      <div class="wa-btn-grid">
        <button class="wa-btn connect" id="waBtnConnect" onclick="waConnect()">
          <i class="fas fa-plug"></i>
          <div>
            <div class="wa-btn-label">Connect</div>
            <div class="wa-btn-desc">Start WhatsApp session</div>
          </div>
        </button>
        <button class="wa-btn disconnect" id="waBtnDisconnect" onclick="waDisconnect()" disabled>
          <i class="fas fa-power-off"></i>
          <div>
            <div class="wa-btn-label">Disconnect</div>
            <div class="wa-btn-desc">Logout from WhatsApp</div>
          </div>
        </button>
        <button class="wa-btn reset" id="waBtnReset" onclick="waReset()">
          <i class="fas fa-undo"></i>
          <div>
            <div class="wa-btn-label">Reset Session</div>
            <div class="wa-btn-desc">Clear session & scan new QR</div>
          </div>
        </button>

        <a href="{% url 'pos:whatsapp_templates_categories' %}" class="wa-btn refresh" style="text-decoration:none;">
          <i class="fas fa-cog"></i>
          <div>
            <div class="wa-btn-label">WhatsApp Templates</div>
            <div class="wa-btn-desc">Set your Recovery, Sales, Reminder Templates</div>
          </div>
        </a>
      </div>
    </div>

    <!-- Activity Log -->
    <div class="wa-log" style="display:none;">
      <h5>
        <span><i class="fas fa-list-alt mr-2"></i>Activity Log</span>
        <button class="btn btn-sm btn-outline-secondary" onclick="clearLog()">Clear</button>
      </h5>
      <div class="wa-log-container" id="waLogContainer">
        <div class="wa-log-item log-info">[System] WhatsApp Settings loaded</div>
      </div>
    </div>

  </div><!-- /waMainContent -->
</div>

<script>
(function() {
  var WA_SERVER = 'http://localhost:3000';
  var socket = null;
  var serverOnline = false;
  var pollTimer = null;

  // ════════════════ HELPERS ════════════════
  function log(msg, type) {
    var c = document.getElementById('waLogContainer');
    if (!c) return;
    var t = new Date().toLocaleTimeString();
    var el = document.createElement('div');
    el.className = 'wa-log-item log-' + (type || 'info');
    el.textContent = '[' + t + '] ' + msg;
    c.insertBefore(el, c.firstChild);
    if (c.children.length > 100) c.removeChild(c.lastChild);
  }

  function toast(msg, type) {
    var el = document.getElementById('waToast');
    if (!el) return;
    el.textContent = msg;
    el.className = 'wa-toast ' + (type || 'info');
    setTimeout(function() { el.classList.add('show'); }, 10);
    setTimeout(function() { el.classList.remove('show'); }, 4000);
  }

  function setStatus(state, title, sub) {
    var banner = document.getElementById('waStatusBanner');
    var icon = document.getElementById('waStatusIcon');
    var t = document.getElementById('waStatusTitle');
    var s = document.getElementById('waStatusSub');

    if (!banner || !icon || !t || !s) return;

    banner.className = 'wa-status-banner ' + state;
    t.textContent = title;
    s.textContent = sub;

    var icons = {
      connected: 'fa-check-circle',
      disconnected: 'fa-unlink',
      error: 'fa-times-circle',
      initializing: 'fa-spinner fa-spin'
    };
    icon.innerHTML = '<i class="fas ' + (icons[state] || 'fa-question') + '"></i>';

    var isConn = (state === 'connected');
    var btnConn = document.getElementById('waBtnConnect');
    var btnDisc = document.getElementById('waBtnDisconnect');
    if (btnConn) btnConn.disabled = isConn;
    if (btnDisc) btnDisc.disabled = !isConn;

    var prof = document.getElementById('waProfileCard');
    if (prof) prof.style.display = isConn ? 'block' : 'none';
    if (isConn) {
      var qr = document.getElementById('waQrSection');
      if (qr) qr.style.display = 'none';
    }
  }

  function setProfile(p) {
    var card = document.getElementById('waProfileCard');
    if (!p) {
      if (card) card.style.display = 'none';
      return;
    }
    if (card) card.style.display = 'block';

    var el;
    el = document.getElementById('waProfileName');
    if (el) el.textContent = p.name || 'Unknown';
    el = document.getElementById('waProfileNumber');
    if (el) el.textContent = p.number || p.formattedNumber || '---';
    el = document.getElementById('waProfilePlatform');
    if (el) el.textContent = p.platform || '---';

    var av = document.getElementById('waProfileAvatar');
    if (av) {
      if (p.profilePic) {
        av.innerHTML = '<img src="' + p.profilePic + '" />';
      } else {
        av.textContent = (p.name || '?').charAt(0).toUpperCase();
      }
    }
  }

  function setServerUI(online) {
    var dot = document.getElementById('serverDot');
    var txt = document.getElementById('serverStatus');
    var sub = document.getElementById('serverSub');
    var noSrv = document.getElementById('waNoServer');
    var main = document.getElementById('waMainContent');

    if (!dot || !txt || !sub || !noSrv || !main) {
      console.error('WhatsApp Settings: Missing HTML elements. Check element IDs.');
      return;
    }

    if (online) {
      dot.className = 'server-dot online';
      txt.textContent = 'Blue Primes WhatsApp Online';
      sub.textContent =  "Active";//WA_SERVER;
      noSrv.style.display = 'none';
      main.style.display = 'block';
    } else {
      dot.className = 'server-dot offline';
      txt.textContent = 'Blue Primes WhatsApp is not Active.!';
      sub.textContent = 'Cannot reach Blue Primes WhatsApp';
      noSrv.style.display = 'block';
      main.style.display = 'none';
    }
  }

  // ════════════════ API CALLS ════════════════
  function apiCall(endpoint) {
    return fetch(WA_SERVER + endpoint, { mode: 'cors' })
      .then(function(resp) { return resp.json(); });
  }

  window.checkServer = function() {
    var dot = document.getElementById('serverDot');
    if (dot) dot.className = 'server-dot checking';
    var st = document.getElementById('serverStatus');
    if (st) st.textContent = 'Checking...';

    apiCall('/api/status').then(function(data) {
      serverOnline = true;
      setServerUI(true);
      log('Server is online', 'success');

      if (data.connected) {
        setStatus('connected', 'WhatsApp Connected', data.profile ? data.profile.name : 'Ready');
        setProfile(data.profile);
        log('WhatsApp is connected as ' + (data.profile ? data.profile.name : 'Unknown'), 'success');
      } else if (data.initializing) {
        setStatus('initializing', 'Connecting...', 'Please wait or scan QR code');
      } else {
        setStatus('disconnected', 'Disconnected', 'Click "Connect" to start');
      }
      connectSocket();
    }).catch(function(err) {
      serverOnline = false;
      setServerUI(false);
      log('Server not reachable: ' + err.message, 'error');
    });
  };

  window.checkStatus = function() {
    log('Checking status...', 'info');
    apiCall('/api/status').then(function(data) {
      if (data.connected) {
        setStatus('connected', 'WhatsApp Connected', data.profile ? data.profile.name : 'Ready');
        setProfile(data.profile);
        toast('✅ Connected', 'success');
        log('Connected as ' + (data.profile ? data.profile.name : 'Unknown'), 'success');
      } else if (data.initializing) {
        setStatus('initializing', 'Connecting...', 'Waiting for QR scan');
        toast('Initializing...', 'info');
      } else {
        setStatus('disconnected', 'Disconnected', 'Click "Connect" to start');
        setProfile(null);
        toast('Disconnected', 'warning');
      }
    }).catch(function(err) {
      setServerUI(false);
      log('Status check failed: ' + err.message, 'error');
    });
  };

  window.waConnect = function() {
    var btn = document.getElementById('waBtnConnect');
    if (btn) {
      btn.disabled = true;
      var lbl = btn.querySelector('.wa-btn-label');
      if (lbl) lbl.textContent = 'Connecting...';
    }

    log('Starting WhatsApp connection...', 'info');
    apiCall('/api/connect').then(function(data) {
      if (data.status === 'connected') {
        setStatus('connected', 'Already Connected', '');
        toast('Already connected!', 'success');
        log('Already connected', 'success');
        checkStatus();
      } else {
        setStatus('initializing', 'Connecting...', 'Waiting for QR code...');
        var qrSec = document.getElementById('waQrSection');
        var qrLoad = document.getElementById('waQrLoading');
        var qrImg = document.getElementById('waQrImage');
        if (qrSec) qrSec.style.display = 'block';
        if (qrLoad) qrLoad.style.display = 'block';
        if (qrImg) qrImg.style.display = 'none';
        toast('Connecting... scan QR when ready', 'info');
        log('Connection initiated, waiting for QR...', 'info');
      }
    }).catch(function(err) {
      log('Connect failed: ' + err.message, 'error');
      toast('Connect failed!', 'error');
      setStatus('error', 'Connection Failed', err.message);
    }).finally(function() {
      if (btn) {
        btn.disabled = false;
        var lbl = btn.querySelector('.wa-btn-label');
        if (lbl) lbl.textContent = 'Connect';
      }
    });
  };

  window.waDisconnect = function() {
    if (!confirm('Disconnect WhatsApp?')) return;
    var btn = document.getElementById('waBtnDisconnect');
    if (btn) btn.disabled = true;

    log('Disconnecting...', 'warning');
    apiCall('/api/disconnect').then(function() {
      setStatus('disconnected', 'Disconnected', 'Logged out successfully');
      setProfile(null);
      toast('Disconnected', 'warning');
      log('Disconnected successfully', 'success');
    }).catch(function(err) {
      log('Disconnect error: ' + err.message, 'error');
      toast('Disconnect failed', 'error');
    }).finally(function() {
      if (btn) btn.disabled = false;
    });
  };

  window.waReset = function() {
    if (!confirm('Reset session? You will need to scan QR code again.')) return;
    var btn = document.getElementById('waBtnReset');
    if (btn) {
      btn.disabled = true;
      var lbl = btn.querySelector('.wa-btn-label');
      if (lbl) lbl.textContent = 'Resetting...';
    }

    log('Resetting session...', 'warning');
    apiCall('/api/reset').then(function() {
      setStatus('disconnected', 'Session Reset', 'Click "Connect" to scan new QR');
      setProfile(null);
      var qr = document.getElementById('waQrSection');
      if (qr) qr.style.display = 'none';
      toast('Session reset! Connect again.', 'success');
      log('Session reset complete', 'success');
    }).catch(function(err) {
      log('Reset error: ' + err.message, 'error');
      toast('Reset failed', 'error');
    }).finally(function() {
      if (btn) {
        btn.disabled = false;
        var lbl = btn.querySelector('.wa-btn-label');
        if (lbl) lbl.textContent = 'Reset Session';
      }
    });
  };

  window.clearLog = function() {
    var c = document.getElementById('waLogContainer');
    if (c) c.innerHTML = '<div class="wa-log-item log-info">[System] Log cleared</div>';
  };

  // ════════════════ SOCKET.IO ════════════════
  function connectSocket() {
    if (socket) return;

    try {
      if (typeof io === 'undefined') {
        var script = document.createElement('script');
        script.src = WA_SERVER + '/socket.io/socket.io.js';
        script.onload = function() { initSocket(); };
        script.onerror = function() {
          log('Could not load Socket.IO — polling fallback', 'warning');
          startPolling();
        };
        document.head.appendChild(script);
      } else {
        initSocket();
      }
    } catch (e) {
      log('Socket error: ' + e.message, 'error');
      startPolling();
    }
  }

  function initSocket() {
    try {
      socket = io(WA_SERVER, { transports: ['websocket', 'polling'] });

      socket.on('connect', function() {
        log('Real-time connection established', 'success');
        stopPolling();
      });

      socket.on('qr', function(qrDataURL) {
        var qrSec = document.getElementById('waQrSection');
        var qrLoad = document.getElementById('waQrLoading');
        var qrImgDiv = document.getElementById('waQrImage');
        var qrImg = document.getElementById('waQrImg');
        if (qrSec) qrSec.style.display = 'block';
        if (qrLoad) qrLoad.style.display = 'none';
        if (qrImgDiv) qrImgDiv.style.display = 'block';
        if (qrImg) qrImg.src = qrDataURL;
        setStatus('initializing', 'Scan QR Code', 'Open WhatsApp on your phone');
        log('QR Code ready — scan now', 'warning');
        toast('QR Code ready! Scan now.', 'info');
      });

      socket.on('ready', function(data) {
        setStatus('connected', 'WhatsApp Connected!', data.profile ? data.profile.name : '');
        setProfile(data.profile);
        var qr = document.getElementById('waQrSection');
        if (qr) qr.style.display = 'none';
        log('WhatsApp connected!', 'success');
        toast('✅ WhatsApp Connected!', 'success');
      });

      socket.on('authenticated', function() {
        log('Authenticated successfully', 'success');
        setStatus('initializing', 'Authenticated', 'Loading WhatsApp...');
      });

      socket.on('status', function(data) {
        if (data.connected) {
          setStatus('connected', 'Connected', data.profile ? data.profile.name : '');
          setProfile(data.profile);
        } else {
          setStatus('disconnected', 'Disconnected', '');
          setProfile(null);
        }
      });

      socket.on('profileUpdate', function(p) { setProfile(p); });

      socket.on('disconnected', function(data) {
        setStatus('disconnected', 'Disconnected', data.reason || '');
        setProfile(null);
        log('Disconnected: ' + (data.reason || ''), 'warning');
      });

      socket.on('connectionIssue', function(data) {
        setStatus('error', 'Connection Issue', data.message || '');
        log('Issue: ' + data.message, 'error');
        toast(data.message, 'error');
      });

      socket.on('auth_failure', function(data) {
        setStatus('error', 'Auth Failed', data.message || '');
        log('Auth failed: ' + data.message, 'error');
        toast('Auth failed! Try Reset.', 'error');
      });

      socket.on('loading', function(data) {
        setStatus('initializing', 'Loading...', data.percent + '% — ' + (data.message || ''));
      });

      socket.on('disconnect', function() {
        log('Real-time connection lost', 'warning');
        socket = null;
        startPolling();
      });

    } catch (e) {
      log('Socket init failed: ' + e.message, 'error');
      startPolling();
    }
  }

  // ════════════════ POLLING FALLBACK ════════════════
  function startPolling() {
    if (pollTimer) return;
    pollTimer = setInterval(function() {
      if (serverOnline) checkStatus();
    }, 10000);
  }

  function stopPolling() {
    if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
  }

  // ════════════════ INIT ════════════════
  document.addEventListener('DOMContentLoaded', function() {
    checkServer();
  });

})();


document.addEventListener('DOMContentLoaded', () => {
  const waBtn = document.getElementById('saveAndWhatsAppBtn');
  const formEl = document.getElementById('recovery-form');
  if (!waBtn || !formEl) return;
 
  waBtn.addEventListener('click', async function() {
    if (!formEl.checkValidity()) { formEl.reportValidity(); return; }
 
    const origHTML = this.innerHTML;
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Saving…';
 
    const fd = new FormData(formEl);
    fd.set('action', 'save_whatsapp');
 
    let savedOk = false;
    try {
      // Step 1: Save in Django
      const resp = await fetch(window.location.href, {
        method: 'POST', body: fd, credentials: 'same-origin',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const data = await resp.json();
      if (!data.ok) throw new Error('Save failed');
      savedOk = true;
 
      // Step 2: Get default template from database
      let templateText = '';
      try {
        const templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'recovery' %}", {
          method: 'GET',
          credentials: 'same-origin',
          headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        const templateData = await templateResp.json();
        
        if (templateData.ok && templateData.template_text) {
          templateText = templateData.template_text;
        } else {
          // Fallback if no template found
          console.warn('No default template found, using fallback');
          templateText = getFallbackTemplate();
        }
      } catch (templateErr) {
        console.warn('Failed to fetch template, using fallback:', templateErr);
        templateText = getFallbackTemplate();
      }
 
      // Step 3: Replace placeholders in template
      const msg = replacePlaceholders(templateText, {
        customer_name: (data.customer_name || 'Customer').toString().trim(),
        invoice_no: data.invoice_no || '',
        amount: data.amount || '0',
        balance: data.prev_balance || '0',
        remaining: data.cust_balance || '0',
        date: new Date().toLocaleDateString('en-GB'),
        mobile: data.customer_phone || '',
        address: '',  // Add if available in response
        remarks: '',  // Add if available in response
      });
 
      // Step 4: Call WhatsApp API
      const waFD = new FormData();
      waFD.append('phone', data.customer_phone);
      waFD.append('message', msg);
 
      const waResp = await fetch('http://localhost:3000/api/send-media', {
        method: 'POST', body: waFD
      });
      const waData = await waResp.json();
 
      if (waData.success) {
        showSuccessToast('✅ WhatsApp sent to ' + data.customer_name);
      } else {
        alert('Saved but WhatsApp failed: ' + waData.error);
      }
    } catch (err) {
      console.error(err);
      if (!savedOk) alert('Save failed: ' + err.message);
      else alert('Saved but WhatsApp not reachable. Is WhatsApp server running?');
    } finally {
      this.disabled = false;
      this.innerHTML = origHTML;
      if (savedOk) resetRecoveryForm();
    }
  });
 
  // Helper function to replace placeholders
  function replacePlaceholders(template, data) {
    let result = template;
    for (const [key, value] of Object.entries(data)) {
      const placeholder = '{' + key + '}';
      result = result.split(placeholder).join(value || '');
    }
    return result;
  }
 
  // Fallback template if database fetch fails
  function getFallbackTemplate() {
    return `محترم *{customer_name}*,
 
آپ کی ادائیگی کامیابی سے موصول ہو گئی ہے۔
 
*ادائیگی کی تفصیلات:*
━━━━━━━━━━━━━━━
💰 ادا شدہ رقم: *Rs. {amount}*
📝 رسید نمبر: *{invoice_no}*
📊 پچھلا بیلنس: Rs. {balance}
📋 باقی بیلنس: *Rs. {remaining}*
📅 تاریخ: {date}
━━━━━━━━━━━━━━━
 
آپ کی ادائیگی کا شکریہ! 🙏
 
نیک تمنائیں,
*Blue Primes*
📞 03175960388
 
_🤖 یہ ایک خودکار پیغام ہے۔_`;
  }
});
</script>



{% endblock %}