{% extends "django_meta_whatsapp/base.html" %}
{% block title %}Chat — {{ phone_number }}{% endblock %}
{% block page_title %}{{ contact.name|default:phone_number }}{% endblock %}
{% block page_subtitle %}<p class="text-xs text-gray-400">{{ phone_number }}</p>{% endblock %}
{% block topbar_actions %}
<button type="button" onclick="document.getElementById('helpModal').classList.remove('hidden')" class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 transition-colors" title="Formatting Help">
  <i data-lucide="help-circle" class="w-5 h-5"></i>
</button>
<a href="{% url 'django_meta_whatsapp:inbox' %}" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition-colors">
  <i data-lucide="arrow-left" class="w-4 h-4"></i> Back
</a>
{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<style>
.bubble-out{background:#dcfce7;border-radius:1rem 1rem 0.25rem 1rem;max-width:70%;padding:.625rem .875rem;margin-left:auto}
.bubble-in{background:#fff;border:1px solid #e5e7eb;border-radius:1rem 1rem 1rem 0.25rem;max-width:70%;padding:.625rem .875rem}
.chat-scroll{height:calc(100vh - 260px);overflow-y:auto;scroll-behavior:smooth}
</style>
{% endblock %}
{% block content %}
<div class="flex flex-col h-full -mt-6 -mx-6">
  <!-- Messages -->
  <div id="chatScroll" class="chat-scroll flex-1 px-6 py-4 space-y-3 bg-gray-50">
    {% for msg in chat_messages %}
    <div class="flex {% if msg.direction == 'outbound' %}justify-end{% else %}justify-start{% endif %}">
      <div class="{% if msg.direction == 'outbound' %}bubble-out{% else %}bubble-in{% endif %} relative group">
        {% if msg.reply_to %}
        <div class="text-xs text-gray-400 border-l-2 border-emerald-400 pl-2 mb-1 italic">↩ {{ msg.reply_to.message_body|truncatechars:60 }}</div>
        {% endif %}
        {% if msg.is_location %}
        <div class="w-64 max-w-full">
          <div id="map-{{ msg.pk }}" class="w-full h-32 rounded-t-lg border border-gray-200 z-0 leaflet-map-preview" data-lat="{{ msg.location_latitude }}" data-lon="{{ msg.location_longitude }}"></div>
          <div class="bg-gray-50/80 p-2 text-sm rounded-b-lg border-x border-b border-gray-200 shadow-sm mt-0">
            {% if msg.location_name %}<p class="font-medium truncate text-gray-800">{{ msg.location_name }}</p>{% endif %}
            {% if msg.location_address %}<p class="text-xs text-gray-500 truncate">{{ msg.location_address }}</p>{% endif %}
            <a href="https://maps.google.com/?q={{ msg.location_latitude }},{{ msg.location_longitude }}" target="_blank" class="text-xs text-emerald-600 hover:underline inline-flex items-center gap-1 mt-1 font-medium"><i data-lucide="external-link" class="w-3 h-3"></i> Open in Maps</a>
          </div>
        </div>
        {% elif msg.message_type == 'image' and msg.media_file %}
        <img src="{{ msg.media_file.url }}" class="max-w-xs rounded-lg" alt="Image">
        {% elif msg.message_type == 'video' and msg.media_file %}
        <video src="{{ msg.media_file.url }}" controls class="max-w-xs rounded-lg"></video>
        {% elif msg.message_type == 'audio' and msg.media_file %}
        <audio src="{{ msg.media_file.url }}" controls class="max-w-xs"></audio>
        {% elif msg.media_file %}
        <a href="{{ msg.media_file.url }}" target="_blank" class="flex items-center gap-2 text-sm text-emerald-700 hover:underline bg-emerald-50 px-3 py-2 rounded-lg">
          <i data-lucide="file-text" class="w-4 h-4"></i>{{ msg.media_filename|default:"Document" }}
        </a>
        {% else %}
        <p class="text-sm text-gray-800 whitespace-pre-wrap msg-body" data-raw="{{ msg.message_body }}"></p>
        {% endif %}
        <div class="flex items-center justify-end gap-1 mt-1">
          <span class="text-xs text-gray-400">{{ msg.timestamp|time:"H:i" }}</span>
          {% if msg.direction == 'outbound' %}
          <span class="text-xs {% if msg.status == 'read' %}text-blue-500{% elif msg.status == 'delivered' %}text-gray-500{% else %}text-gray-300{% endif %}">
            {% if msg.status == 'read' %}✓✓{% elif msg.status == 'delivered' %}✓✓{% else %}✓{% endif %}
          </span>
          {% endif %}
        </div>
        <!-- Actions Dropdown -->
        <div class="absolute top-1 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
          <button type="button" onclick="toggleMsgMenu('menu-{{ msg.pk }}')" class="w-6 h-6 rounded-full bg-white/80 hover:bg-white flex items-center justify-center shadow-sm">
            <i data-lucide="chevron-down" class="w-4 h-4 text-gray-500"></i>
          </button>
          <div id="menu-{{ msg.pk }}" class="hidden absolute right-0 top-7 w-36 bg-white rounded-xl shadow-lg border border-gray-100 py-1 z-10 text-left">
            <button type="button" onclick="replyTo('{{ msg.id }}', '{{ msg.message_body|escapejs }}'); toggleMsgMenu('menu-{{ msg.pk }}')" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reply</button>
            <form method="post" action="{% url 'django_meta_whatsapp:delete_message' msg.pk %}" class="block w-full">
              {% csrf_token %}
              <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-50">Delete message</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    {% empty %}
    <div class="flex-1 flex items-center justify-center py-20">
      <div class="text-center">
        <i data-lucide="message-circle" class="w-12 h-12 text-gray-200 mx-auto mb-3"></i>
        <p class="text-sm text-gray-400">Start the conversation</p>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Send form -->
  <div class="border-t border-gray-200 bg-white px-6 py-4 relative">
    <form method="post" action="{% url 'django_meta_whatsapp:send_message' phone_number %}" enctype="multipart/form-data" id="sendForm">
      {% csrf_token %}
      <input type="hidden" name="reply_to_id" id="replyToId"/>
      <input type="hidden" name="send_location" id="sendLocationFlag" value="0"/>
      <input type="hidden" name="latitude" id="lat"/>
      <input type="hidden" name="longitude" id="lon"/>
      <input type="hidden" name="location_name" id="locName"/>
      <input type="hidden" name="location_address" id="locAddr"/>

      <!-- Reply context preview -->
      <div id="replyPreview" class="hidden mb-3 flex items-start gap-3 bg-blue-50 border-l-4 border-blue-500 rounded-r-lg px-4 py-2 relative">
        <div class="flex-1">
          <p class="text-xs font-semibold text-blue-600 mb-0.5">Replying to message</p>
          <p id="replyPreviewText" class="text-sm text-gray-700 truncate"></p>
        </div>
        <button type="button" onclick="cancelReply()" class="text-gray-400 hover:text-gray-600">
          <i data-lucide="x" class="w-4 h-4"></i>
        </button>
      </div>

      <!-- Location & File preview -->
      <div id="locationPreview" class="hidden mb-3 flex items-center gap-2 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2 text-sm text-emerald-700">
        <i data-lucide="map-pin" class="w-4 h-4 flex-shrink-0"></i>
        <span id="locationLabel">Location selected</span>
        <button type="button" onclick="clearLocation()" class="ml-auto text-emerald-600 hover:text-emerald-800"><i data-lucide="x" class="w-4 h-4"></i></button>
      </div>
      <div id="filePreview" class="hidden mb-3 text-sm text-emerald-700 bg-emerald-50 border border-emerald-200 px-3 py-2 rounded-lg flex items-center gap-2">
        <i data-lucide="paperclip" class="w-4 h-4 flex-shrink-0"></i>
        <span id="fileName" class="font-medium truncate"></span>
        <button type="button" onclick="clearFile()" class="ml-auto text-emerald-600 hover:text-emerald-800"><i data-lucide="x" class="w-4 h-4"></i></button>
      </div>

      <!-- Input Bar -->
      <div class="flex items-end gap-3 relative">
        <!-- Attachment toggle -->
        <button type="button" onclick="toggleAttachmentMenu()" class="w-10 h-10 flex-shrink-0 rounded-xl bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors" title="Attachments (Ctrl+Shift+A)">
          <i data-lucide="paperclip" class="w-4 h-4 text-gray-600"></i>
        </button>

        <!-- Hidden master file input -->
        <input type="file" name="media_file" id="masterMediaInput" class="hidden" onchange="showFilePreview(this)">

        <!-- Attachment Menu Popup -->
        <div id="attachmentMenu" class="hidden absolute bottom-14 left-0 bg-white border border-gray-200 shadow-xl rounded-2xl p-4 flex gap-4 z-20">
          <button type="button" onclick="triggerFileInput('.pdf,.doc,.docx,.xls,.xlsx,.txt')" class="flex flex-col items-center gap-2 group">
            <div class="w-12 h-12 rounded-full bg-purple-100 group-hover:bg-purple-200 flex items-center justify-center transition-colors text-purple-600">
              <i data-lucide="file-text" class="w-5 h-5"></i>
            </div>
            <span class="text-xs font-medium text-gray-600">Document</span>
          </button>
          <button type="button" onclick="triggerFileInput('image/*,video/*')" class="flex flex-col items-center gap-2 group">
            <div class="w-12 h-12 rounded-full bg-blue-100 group-hover:bg-blue-200 flex items-center justify-center transition-colors text-blue-600">
              <i data-lucide="image" class="w-5 h-5"></i>
            </div>
            <span class="text-xs font-medium text-gray-600">Photos & Videos</span>
          </button>
          <button type="button" onclick="triggerFileInput('audio/*')" class="flex flex-col items-center gap-2 group">
            <div class="w-12 h-12 rounded-full bg-orange-100 group-hover:bg-orange-200 flex items-center justify-center transition-colors text-orange-600">
              <i data-lucide="headphones" class="w-5 h-5"></i>
            </div>
            <span class="text-xs font-medium text-gray-600">Audio</span>
          </button>
          <button type="button" onclick="shareLocation()" class="flex flex-col items-center gap-2 group">
            <div class="w-12 h-12 rounded-full bg-green-100 group-hover:bg-green-200 flex items-center justify-center transition-colors text-green-600">
              <i data-lucide="map-pin" class="w-5 h-5"></i>
            </div>
            <span class="text-xs font-medium text-gray-600">Location</span>
          </button>
        </div>

        <div class="flex-1 relative">
          <textarea name="body" id="realMsgBody" class="hidden"></textarea>
          <div id="msgBody" contenteditable="true" aria-placeholder="Type a message…" class="w-full min-h-[44px] max-h-[120px] overflow-y-auto border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white" oninput="syncBody()"></div>
        </div>
        
        <!-- Send -->
        <button type="submit" id="sendBtn" class="w-10 h-10 flex-shrink-0 rounded-xl bg-emerald-600 hover:bg-emerald-700 flex items-center justify-center transition-colors relative">
          <i data-lucide="send" id="sendIcon" class="w-4 h-4 text-white"></i>
          <i data-lucide="loader-2" id="sendLoader" class="w-4 h-4 text-white animate-spin hidden absolute"></i>
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
lucide.createIcons();

// Auto-scroll
const sc = document.getElementById('chatScroll');
if(sc) sc.scrollTop = sc.scrollHeight;

// Markdown parsing for rendering
function parseWhatsAppMarkdown(text) {
  // First escape HTML to prevent XSS and preserve user text
  let html = text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');

  html = html
    // Block code (```)
    .replace(/```([\s\S]*?)```/g, '<code class="bg-gray-100 text-pink-600 px-2 py-1 rounded font-mono text-sm block whitespace-pre overflow-x-auto">$1</code>')
    // Inline code (`)
    .replace(/`([^`]+)`/g, '<code class="bg-gray-100 text-pink-600 px-1 py-0.5 rounded font-mono text-sm inline-block">$1</code>')
    // Bold
    .replace(/\*([^\*]+)\*/g, '<strong>$1</strong>')
    // Italic
    .replace(/_([^_]+)_/g, '<em>$1</em>')
    // Strikethrough
    .replace(/~([^~]+)~/g, '<del>$1</del>')
    // Block quotes (> Quote)
    .replace(/^&gt; (.*)$/gm, '<blockquote class="border-l-4 border-emerald-500 bg-emerald-50 pl-3 py-1 text-gray-700 italic my-1 rounded-r-lg">$1</blockquote>')
    // Bulleted Lists (- Item)
    .replace(/^- (.*)$/gm, '<div class="ml-4 flex items-start gap-2 my-0.5"><span class="text-gray-400 mt-1 flex-shrink-0 text-[10px]">⚫</span><span>$1</span></div>')
    // Numbered Lists (1. Item)
    .replace(/^([0-9]+)\. (.*)$/gm, '<div class="ml-4 flex items-start gap-2 my-0.5"><span class="text-gray-500 font-medium">$1.</span><span>$2</span></div>')
    // Basic link highlight
    .replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank" class="text-blue-600 hover:underline break-all">$1</a>');
  return html;
}

document.querySelectorAll('.msg-body').forEach(el => {
  const raw = el.getAttribute('data-raw');
  el.innerHTML = parseWhatsAppMarkdown(raw);
});

// Initialize Leaflet Maps
document.querySelectorAll('.leaflet-map-preview').forEach(mapEl => {
  const lat = parseFloat(mapEl.getAttribute('data-lat'));
  const lon = parseFloat(mapEl.getAttribute('data-lon'));
  if(!isNaN(lat) && !isNaN(lon)) {
    const map = L.map(mapEl.id, { zoomControl: false, dragging: false, touchZoom: false, scrollWheelZoom: false, doubleClickZoom: false }).setView([lat, lon], 15);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap'
    }).addTo(map);
    L.marker([lat, lon]).addTo(map);
  }
});

// Message dropdown menu
let currentMenu = null;
function toggleMsgMenu(id) {
  const menu = document.getElementById(id);
  if(currentMenu && currentMenu !== menu) currentMenu.classList.add('hidden');
  menu.classList.toggle('hidden');
  currentMenu = menu.classList.contains('hidden') ? null : menu;
}

// Attachment Menu
const attachMenu = document.getElementById('attachmentMenu');
function toggleAttachmentMenu() {
  attachMenu.classList.toggle('hidden');
}

// Trigger master file input
function triggerFileInput(accept) {
  const masterInput = document.getElementById('masterMediaInput');
  masterInput.accept = accept;
  masterInput.click();
}

// Close menus if clicked outside
document.addEventListener('click', (e) => {
  if (!e.target.closest('#attachmentMenu') && !e.target.closest('button[onclick="toggleAttachmentMenu()"]')) {
    attachMenu.classList.add('hidden');
  }
  if (!e.target.closest('[id^="menu-"]') && !e.target.closest('button[onclick^="toggleMsgMenu"]')) {
    if(currentMenu) {
      currentMenu.classList.add('hidden');
      currentMenu = null;
    }
  }
});

// Reply logic
const replyIdInput = document.getElementById('replyToId');
const replyPreview = document.getElementById('replyPreview');
const replyPreviewText = document.getElementById('replyPreviewText');
const msgBody = document.getElementById('msgBody');
const realMsgBody = document.getElementById('realMsgBody');

function replyTo(id, text) {
  replyIdInput.value = id;
  replyPreviewText.textContent = text;
  replyPreview.classList.remove('hidden');
  msgBody.focus();
}
function cancelReply() {
  replyIdInput.value = '';
  replyPreview.classList.add('hidden');
}

// Location and Media Logic
function shareLocation(){
  if(!navigator.geolocation){ alert('Geolocation not supported'); return; }
  attachMenu.classList.add('hidden');
  navigator.geolocation.getCurrentPosition(pos=>{
    document.getElementById('lat').value = pos.coords.latitude;
    document.getElementById('lon').value = pos.coords.longitude;
    document.getElementById('sendLocationFlag').value = '1';
    document.getElementById('locName').value = 'My Location';
    document.getElementById('locationLabel').textContent = `📍 ${pos.coords.latitude.toFixed(5)}, ${pos.coords.longitude.toFixed(5)}`;
    document.getElementById('locationPreview').classList.remove('hidden');
  }, err=>{ alert('Could not get location: '+err.message); });
}
function clearLocation(){
  document.getElementById('sendLocationFlag').value='0';
  document.getElementById('lat').value='';
  document.getElementById('lon').value='';
  document.getElementById('locationPreview').classList.add('hidden');
}
function showFilePreview(input){
  if(input.files.length){
    document.getElementById('fileName').textContent = input.files[0].name;
    document.getElementById('filePreview').classList.remove('hidden');
    attachMenu.classList.add('hidden');
  }
}
function clearFile() {
  document.getElementById('masterMediaInput').value = '';
  document.getElementById('filePreview').classList.add('hidden');
}

// Form state & Shortcuts
const sendForm = document.getElementById('sendForm');
const sendBtn = document.getElementById('sendBtn');
const sendIcon = document.getElementById('sendIcon');
const sendLoader = document.getElementById('sendLoader');

sendForm.addEventListener('submit', () => {
  realMsgBody.value = msgBody.innerText;
  sendBtn.disabled = true;
  sendBtn.classList.add('opacity-75');
  sendIcon.classList.add('hidden');
  sendLoader.classList.remove('hidden');
});

function syncBody() {
  realMsgBody.value = msgBody.innerText;
  // Empty state placeholder handling via CSS empty pseudo-class
  if(msgBody.innerText.trim() === '') {
    msgBody.innerHTML = '';
  }
}

// Prevent rich text paste in contenteditable
msgBody.addEventListener('paste', (e) => {
  e.preventDefault();
  const text = (e.originalEvent || e).clipboardData.getData('text/plain');
  document.execCommand('insertText', false, text);
});

msgBody.addEventListener('keydown', (e) => {
  // Send on Ctrl+Enter
  if (e.ctrlKey && e.key === 'Enter') {
    e.preventDefault();
    sendForm.submit();
  }
  // Attachment shortcut: Ctrl+Shift+A
  if (e.ctrlKey && e.shiftKey && (e.key === 'A' || e.key === 'a')) {
    e.preventDefault();
    toggleAttachmentMenu();
  }

  // Formatting shortcuts (inject markdown chars)
  let prefix = '', suffix = '';
  if (e.ctrlKey && e.key === 'b') { prefix = '*'; suffix = '*'; e.preventDefault(); }
  else if (e.ctrlKey && e.key === 'i') { prefix = '_'; suffix = '_'; e.preventDefault(); }
  else if (e.ctrlKey && e.key === 'u') { prefix = '~'; suffix = '~'; e.preventDefault(); }
  
  if (prefix) {
    let sel = window.getSelection();
    if(sel.rangeCount) {
        let range = sel.getRangeAt(0);
        let selectedText = range.toString();
        document.execCommand("insertText", false, prefix + selectedText + suffix);
    }
  }
});

// Swipe to reply
let touchStartX = 0;
document.querySelectorAll('.bubble-in, .bubble-out').forEach(bubble => {
  bubble.addEventListener('touchstart', e => {
    touchStartX = e.changedTouches[0].screenX;
  }, {passive: true});
  bubble.addEventListener('touchend', e => {
    const touchEndX = e.changedTouches[0].screenX;
    // Swipe left or right
    if (Math.abs(touchEndX - touchStartX) > 60) {
      const replyBtn = bubble.querySelector('button[onclick^="replyTo"]');
      if (replyBtn) replyBtn.click();
    }
  }, {passive: true});
});

function closeHelpModal() {
  document.getElementById('helpModal').classList.add('hidden');
}

// Global escape key handler
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeHelpModal();
    attachMenu.classList.add('hidden');
    if(currentMenu) {
      currentMenu.classList.add('hidden');
      currentMenu = null;
    }
  }
});
</script>

<!-- Help Modal -->
<div id="helpModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" onclick="if(event.target === this) closeHelpModal()">
  <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
      <h3 class="text-lg font-semibold text-gray-800">Formatting Shortcuts</h3>
      <button type="button" onclick="closeHelpModal()" class="text-gray-400 hover:text-gray-600">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>
    <div class="px-6 py-4 max-h-[70vh] overflow-y-auto text-sm text-gray-700 space-y-4">
      <div>
        <h4 class="font-semibold text-gray-900 mb-2">Basic Styling</h4>
        <ul class="space-y-2">
          <li><strong>Bold:</strong> Wrap text in asterisks <code class="bg-gray-100 px-1 rounded">*text*</code> <span class="text-gray-400 ml-2">(Ctrl+B)</span></li>
          <li><strong>Italic:</strong> Wrap text in underscores <code class="bg-gray-100 px-1 rounded">_text_</code> <span class="text-gray-400 ml-2">(Ctrl+I)</span></li>
          <li><strong>Strikethrough:</strong> Wrap text in tildes <code class="bg-gray-100 px-1 rounded">~text~</code> <span class="text-gray-400 ml-2">(Ctrl+U)</span></li>
          <li><strong>Monospace:</strong> Wrap text in triple backticks <code class="bg-gray-100 px-1 rounded">```text```</code></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold text-gray-900 mb-2">Advanced Formatting (2024)</h4>
        <ul class="space-y-2">
          <li><strong>Bulleted Lists:</strong> Start a line with a hyphen and space <code class="bg-gray-100 px-1 rounded">- Item</code></li>
          <li><strong>Numbered Lists:</strong> Start a line with a number, period, and space <code class="bg-gray-100 px-1 rounded">1. Item</code></li>
          <li><strong>Block Quotes:</strong> Start a line with a greater-than sign and space <code class="bg-gray-100 px-1 rounded">&gt; Quote</code></li>
          <li><strong>Inline Code:</strong> Use single backticks <code class="bg-gray-100 px-1 rounded">`code`</code></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold text-gray-900 mb-2">Other Shortcuts</h4>
        <ul class="space-y-2">
          <li><strong>Send Message:</strong> <span class="bg-gray-100 px-1 rounded font-mono">Ctrl + Enter</span></li>
          <li><strong>Open Attachments:</strong> <span class="bg-gray-100 px-1 rounded font-mono">Ctrl + Shift + A</span></li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}