{% extends "django_meta_whatsapp/base.html" %}

{% block title %}{% if object %}Edit{% else %}New{% endif %} Template{% endblock %}
{% block page_title %}{% if object %}Edit Template{% else %}New Template{% endif %}{% endblock %}

{% block extra_head %}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<style>
.ts-control {
  border-radius: 0.75rem !important;
  padding: 0.625rem 1rem !important;
  border-color: #e5e7eb !important;
  background-color: rgba(249, 250, 251, 0.5) !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
  min-height: 46px;
  display: flex;
  align-items: center;
}
.ts-control.focus {
  border-color: #10b981 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}
.ts-dropdown {
  border-radius: 0.75rem !important;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb !important;
  margin-top: 4px;
}
</style>
{% endblock %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
  <!-- Form Section -->
  <div class="lg:col-span-7 bg-white rounded-2xl border border-gray-100 shadow-sm p-6 lg:p-8">
    <form method="post" id="templateForm">
      {% csrf_token %}
      
      <!-- Hidden fields for JSON data -->
      <input type="hidden" name="header" id="header_hidden" value="{{ form.header.value|default_if_none:'' }}">
      <input type="hidden" name="buttons" id="buttons_hidden" value="{{ form.buttons.value|default_if_none:'' }}">
      
      <div class="space-y-6">
        <!-- Basic Info -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Template Name <span class="text-red-500">*</span></label>
            <input type="text" name="name" id="id_name" value="{{ form.name.value|default_if_none:'' }}" required
                   class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all outline-none bg-gray-50/50 focus:bg-white text-sm"
                   placeholder="e.g. welcome_message">
            {% if form.name.errors %}<p class="text-xs text-red-500 mt-1.5">{{ form.name.errors|join:", " }}</p>{% endif %}
          </div>
          
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Category <span class="text-red-500">*</span></label>
            <select name="category" id="id_category" required
                    class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all outline-none bg-gray-50/50 focus:bg-white text-sm">
              {% for val, label in form.category.field.choices %}
              <option value="{{ val }}" {% if form.category.value == val %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Language <span class="text-red-500">*</span></label>
            <select name="language" id="id_language" required class="w-full">
              <option value="">Select language...</option>
              <option value="af">Afrikaans</option>
              <option value="sq">Albanian</option>
              <option value="ar">Arabic</option>
              <option value="ar_EG">Arabic (EGY)</option>
              <option value="ar_AE">Arabic (UAE)</option>
              <option value="ar_LB">Arabic (LBN)</option>
              <option value="ar_MA">Arabic (MAR)</option>
              <option value="ar_QA">Arabic (QAT)</option>
              <option value="az">Azerbaijani</option>
              <option value="be_BY">Belarusian</option>
              <option value="bn">Bengali</option>
              <option value="bn_IN">Bengali (IND)</option>
              <option value="bg">Bulgarian</option>
              <option value="ca">Catalan</option>
              <option value="zh_CN">Chinese (CHN)</option>
              <option value="zh_HK">Chinese (HKG)</option>
              <option value="zh_TW">Chinese (TAI)</option>
              <option value="hr">Croatian</option>
              <option value="cs">Czech</option>
              <option value="da">Danish</option>
              <option value="prs_AF">Dari</option>
              <option value="nl">Dutch</option>
              <option value="nl_BE">Dutch (BEL)</option>
              <option value="en">English</option>
              <option value="en_GB">English (UK)</option>
              <option value="en_US">English (US)</option>
              <option value="en_AE">English (UAE)</option>
              <option value="en_AU">English (AUS)</option>
              <option value="en_CA">English (CAN)</option>
              <option value="en_GH">English (GHA)</option>
              <option value="en_IE">English (IRL)</option>
              <option value="en_IN">English (IND)</option>
              <option value="en_JM">English (JAM)</option>
              <option value="en_MY">English (MYS)</option>
              <option value="en_NZ">English (NZL)</option>
              <option value="en_QA">English (QAT)</option>
              <option value="en_SG">English (SGP)</option>
              <option value="en_UG">English (UGA)</option>
              <option value="en_ZA">English (ZAF)</option>
              <option value="et">Estonian</option>
              <option value="fil">Filipino</option>
              <option value="fi">Finnish</option>
              <option value="fr">French</option>
              <option value="fr_BE">French (BEL)</option>
              <option value="fr_CA">French (CAN)</option>
              <option value="fr_CH">French (CHE)</option>
              <option value="fr_CI">French (CIV)</option>
              <option value="fr_MA">French (MAR)</option>
              <option value="ka">Georgian</option>
              <option value="de">German</option>
              <option value="de_AT">German (AUT)</option>
              <option value="de_CH">German (CHE)</option>
              <option value="el">Greek</option>
              <option value="gu">Gujarati</option>
              <option value="ha">Hausa</option>
              <option value="he">Hebrew</option>
              <option value="hi">Hindi</option>
              <option value="hu">Hungarian</option>
              <option value="id">Indonesian</option>
              <option value="ga">Irish</option>
              <option value="it">Italian</option>
              <option value="ja">Japanese</option>
              <option value="kn">Kannada</option>
              <option value="kk">Kazakh</option>
              <option value="rw_RW">Kinyarwanda</option>
              <option value="ko">Korean</option>
              <option value="ky_KG">Kyrgyz (Kyrgyzstan)</option>
              <option value="lo">Lao</option>
              <option value="lv">Latvian</option>
              <option value="lt">Lithuanian</option>
              <option value="mk">Macedonian</option>
              <option value="ms">Malay</option>
              <option value="ml">Malayalam</option>
              <option value="mr">Marathi</option>
              <option value="nb">Norwegian</option>
              <option value="ps_AF">Pashto</option>
              <option value="fa">Persian</option>
              <option value="pl">Polish</option>
              <option value="pt_BR">Portuguese (BR)</option>
              <option value="pt_PT">Portuguese (POR)</option>
              <option value="pa">Punjabi</option>
              <option value="ro">Romanian</option>
              <option value="ru">Russian</option>
              <option value="sr">Serbian</option>
              <option value="si_LK">Sinhala</option>
              <option value="sk">Slovak</option>
              <option value="sl">Slovenian</option>
              <option value="es">Spanish</option>
              <option value="es_AR">Spanish (ARG)</option>
              <option value="es_CL">Spanish (CHL)</option>
              <option value="es_CO">Spanish (COL)</option>
              <option value="es_CR">Spanish (CRI)</option>
              <option value="es_DO">Spanish (DOM)</option>
              <option value="es_EC">Spanish (ECU)</option>
              <option value="es_HN">Spanish (HND)</option>
              <option value="es_MX">Spanish (MEX)</option>
              <option value="es_PA">Spanish (PAN)</option>
              <option value="es_PE">Spanish (PER)</option>
              <option value="es_ES">Spanish (SPA)</option>
              <option value="es_UY">Spanish (URY)</option>
              <option value="sw">Swahili</option>
              <option value="sv">Swedish</option>
              <option value="ta">Tamil</option>
              <option value="te">Telugu</option>
              <option value="th">Thai</option>
              <option value="tr">Turkish</option>
              <option value="uk">Ukrainian</option>
              <option value="ur">Urdu</option>
              <option value="uz">Uzbek</option>
              <option value="vi">Vietnamese</option>
              <option value="zu">Zulu</option>
            </select>
          </div>
          
        </div>

        <hr class="border-gray-100">

        <!-- Header Builder -->
        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-1.5">Header (Optional)</label>
          <div class="flex flex-col sm:flex-row gap-3">
            <select id="headerTypeSelect" class="w-full sm:w-1/3 px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 outline-none text-sm bg-gray-50/50">
              <option value="NONE">None</option>
              <option value="TEXT">Text</option>
              <option value="IMAGE">Image</option>
              <option value="VIDEO">Video</option>
              <option value="DOCUMENT">Document</option>
            </select>
            
            <!-- Dynamic Header Input -->
            <div id="headerInputContainer" class="hidden w-full sm:w-2/3">
              <input type="text" id="headerTextInput" placeholder="Enter header text..." maxlength="60" class="hidden w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 outline-none text-sm bg-white">
              
              <div id="headerMediaInput" class="hidden w-full items-center justify-center w-full">
                <label class="flex flex-col items-center justify-center w-full h-12 border-2 border-dashed border-gray-300 rounded-xl cursor-pointer bg-gray-50 hover:bg-gray-100 hover:border-emerald-400 transition-colors">
                  <div class="flex items-center space-x-2">
                    <i data-lucide="upload-cloud" class="w-4 h-4 text-gray-500"></i>
                    <span class="text-sm text-gray-500 font-medium">Select file for verification (Preview only)</span>
                  </div>
                  <input id="headerMediaFile" type="file" class="hidden" accept="image/*,video/*,application/pdf" />
                </label>
              </div>
            </div>
          </div>
          <p class="text-[11px] text-gray-400 mt-1">Note: Media files are required during campaign creation. This is just for preview.</p>
        </div>

        <!-- Body Text -->
        <div>
          <div class="flex justify-between items-end mb-1.5">
            <label class="block text-sm font-semibold text-gray-700">Body Text <span class="text-red-500">*</span></label>
            <div class="flex items-center gap-1 bg-gray-50 p-1 rounded-lg border border-gray-200">
              <button type="button" class="format-btn w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:bg-white hover:text-gray-800 hover:shadow-sm transition-all" data-format="bold" title="Bold (*text*)"><b>B</b></button>
              <button type="button" class="format-btn w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:bg-white hover:text-gray-800 hover:shadow-sm transition-all italic" data-format="italic" title="Italic (_text_)">I</button>
              <button type="button" class="format-btn w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:bg-white hover:text-gray-800 hover:shadow-sm transition-all line-through" data-format="strikethrough" title="Strikethrough (~text~)">S</button>
              <button type="button" class="format-btn w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:bg-white hover:text-gray-800 hover:shadow-sm transition-all font-mono text-xs" data-format="monospace" title="Monospace (```text```)">M</button>
              <div class="w-px h-4 bg-gray-300 mx-1"></div>
              <button type="button" id="insertVarBtn" class="px-2 h-6 flex items-center justify-center rounded text-xs font-medium text-emerald-600 hover:bg-emerald-50 hover:shadow-sm transition-all" title="Insert Variable">Add {{var}}</button>
            </div>
          </div>
          <textarea name="body_text" id="id_body_text" rows="5" required
                    class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all outline-none bg-gray-50/50 focus:bg-white text-sm resize-y"
                    placeholder="Enter your message here...">{{ form.body_text.value|default_if_none:'' }}</textarea>
          {% if form.body_text.errors %}<p class="text-xs text-red-500 mt-1">{{ form.body_text.errors|join:", " }}</p>{% endif %}
        </div>

        <!-- Footer Text -->
        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-1.5">Footer Text (Optional)</label>
          <input type="text" name="footer_text" id="id_footer_text" value="{{ form.footer_text.value|default_if_none:'' }}" maxlength="60"
                 class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all outline-none bg-gray-50/50 focus:bg-white text-sm text-gray-500"
                 placeholder="e.g. Reply STOP to unsubscribe">
        </div>

        <hr class="border-gray-100">

        <!-- Buttons Builder -->
        <div>
          <div class="flex justify-between items-center mb-3">
            <label class="block text-sm font-semibold text-gray-700">Buttons (Max 10)</label>
            <button type="button" id="addButtonBtn" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-50 text-emerald-600 hover:bg-emerald-100 rounded-lg text-xs font-semibold transition-colors">
              <i data-lucide="plus" class="w-3 h-3"></i> Add Button
            </button>
          </div>
          
          <div id="buttonsContainer" class="space-y-3">
            <!-- Buttons will be rendered here by JS -->
          </div>
          <div id="emptyButtonsState" class="text-center py-6 border-2 border-dashed border-gray-200 rounded-xl bg-gray-50 text-gray-400 text-sm">
            No buttons added yet.
          </div>
        </div>

      </div>

      <div class="mt-8 flex gap-3 pt-6 border-t border-gray-100">
        <button type="submit" id="saveTemplateBtn" class="inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold px-6 py-2.5 rounded-xl transition-all hover:shadow-lg hover:shadow-emerald-500/30">
          <i data-lucide="save" class="w-4 h-4"></i> Save Template
        </button>
        <a href="{% url 'django_meta_whatsapp:template_list' %}" class="inline-flex items-center justify-center gap-2 bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 text-sm font-semibold px-6 py-2.5 rounded-xl transition-colors">
          Cancel
        </a>
      </div>
    </form>
  </div>

  <!-- Live Preview Section -->
  <div class="lg:col-span-5 lg:sticky lg:top-8">
    <div class="bg-[#efeae2] rounded-[2rem] border-[8px] border-gray-900 shadow-xl overflow-hidden relative h-[600px] flex flex-col">
      <!-- WhatsApp Header -->
      <div class="bg-[#00a884] text-white px-4 py-3 flex items-center gap-3 z-10 shadow-sm">
        <i data-lucide="arrow-left" class="w-5 h-5"></i>
        <div class="w-9 h-9 bg-gray-300 rounded-full flex items-center justify-center overflow-hidden">
          <i data-lucide="user" class="w-5 h-5 text-gray-500"></i>
        </div>
        <div>
          <h3 class="font-medium text-[15px] leading-tight" id="previewBusinessName">Business Name</h3>
          <p class="text-[11px] opacity-80">bot</p>
        </div>
      </div>

      <!-- Chat Background Pattern (optional subtle overlay) -->
      <div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: url('data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22%23000000%22 fill-opacity=%221%22 fill-rule=%22evenodd%22%3E%3Ccircle cx=%223%22 cy=%223%22 r=%223%22/%3E%3Ccircle cx=%2213%22 cy=%2213%22 r=%223%22/%3E%3C/g%3E%3C/svg%3E');"></div>

      <!-- Chat Area -->
      <div class="flex-1 p-4 overflow-y-auto flex flex-col items-start space-y-4">
        <div class="bg-[#e1fdf4] text-gray-800 p-2 rounded-xl text-xs self-center shadow-sm text-center">
          <i data-lucide="lock" class="w-3 h-3 inline mr-1 text-gray-500"></i>
          Messages and calls are end-to-end encrypted.
        </div>
        
        <!-- Message Bubble -->
        <div class="bg-white rounded-xl rounded-tl-none shadow-sm max-w-[90%] flex flex-col overflow-hidden w-full relative">
          <!-- Header Preview -->
          <div id="previewHeader" class="hidden">
            <div id="previewHeaderText" class="px-3 pt-2 font-bold text-[15px]"></div>
            <div id="previewHeaderMedia" class="w-full bg-gray-200 aspect-video flex items-center justify-center relative group">
              <i id="previewHeaderIcon" data-lucide="image" class="w-8 h-8 text-gray-400"></i>
              <img id="previewHeaderImg" src="" class="hidden w-full h-full object-cover">
            </div>
          </div>
          
          <!-- Body Text -->
          <div class="px-3 py-2 text-[15px] leading-snug whitespace-pre-wrap word-break-words" id="previewBody">
            <!-- Body goes here -->
          </div>
          
          <!-- Footer -->
          <div class="px-3 pb-2 text-[11px] text-gray-500" id="previewFooter"></div>
          
          <!-- Timestamp -->
          <div class="px-3 pb-1 text-[10px] text-gray-400 text-right w-full block">12:00 PM</div>
          
          <!-- Buttons Preview -->
          <div id="previewButtons" class="border-t border-gray-100 flex flex-col bg-white w-full hidden">
            <!-- Buttons go here -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  // Initialize searchable language dropdown
  new TomSelect('#id_language',{
    create: false,
    sortField: {
      field: "text",
      direction: "asc"
    }
  });
  
  const savedLanguage = "{{ form.language.value|default_if_none:'en' }}";
  if (savedLanguage) {
    document.getElementById('id_language').tomselect.setValue(savedLanguage);
  }

  // Initialize state from existing data if editing
  let headerData = null;
  let buttonsData = [];
  
  try {
    const rawHeader = document.getElementById('header_hidden').value;
    if (rawHeader) headerData = JSON.parse(rawHeader);
  } catch (e) {}
  
  try {
    const rawButtons = document.getElementById('buttons_hidden').value;
    if (rawButtons) buttonsData = JSON.parse(rawButtons);
  } catch (e) {}

  // --- DOM Elements ---
  const headerTypeSelect = document.getElementById('headerTypeSelect');
  const headerInputContainer = document.getElementById('headerInputContainer');
  const headerTextInput = document.getElementById('headerTextInput');
  const headerMediaInput = document.getElementById('headerMediaInput');
  const headerMediaFile = document.getElementById('headerMediaFile');
  
  const bodyTextarea = document.getElementById('id_body_text');
  const footerInput = document.getElementById('id_footer_text');
  
  const buttonsContainer = document.getElementById('buttonsContainer');
  const emptyButtonsState = document.getElementById('emptyButtonsState');
  const addButtonBtn = document.getElementById('addButtonBtn');
  
  const form = document.getElementById('templateForm');

  // --- Preview Elements ---
  const previewHeader = document.getElementById('previewHeader');
  const previewHeaderText = document.getElementById('previewHeaderText');
  const previewHeaderMedia = document.getElementById('previewHeaderMedia');
  const previewHeaderIcon = document.getElementById('previewHeaderIcon');
  const previewHeaderImg = document.getElementById('previewHeaderImg');
  const previewBody = document.getElementById('previewBody');
  const previewFooter = document.getElementById('previewFooter');
  const previewButtons = document.getElementById('previewButtons');

  // --- Header Logic ---
  function updateHeaderVisibility() {
    const type = headerTypeSelect.value;
    if (type === 'NONE') {
      headerInputContainer.classList.add('hidden');
      headerTextInput.classList.add('hidden');
      headerMediaInput.classList.add('hidden');
    } else if (type === 'TEXT') {
      headerInputContainer.classList.remove('hidden');
      headerTextInput.classList.remove('hidden');
      headerMediaInput.classList.add('hidden');
    } else {
      headerInputContainer.classList.remove('hidden');
      headerTextInput.classList.add('hidden');
      headerMediaInput.classList.remove('hidden');
      headerMediaInput.classList.add('flex');
    }
    updatePreview();
  }

  headerTypeSelect.addEventListener('change', () => {
    headerTextInput.value = '';
    headerMediaFile.value = '';
    previewHeaderImg.src = '';
    updateHeaderVisibility();
  });
  
  headerTextInput.addEventListener('input', updatePreview);

  headerMediaFile.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        previewHeaderImg.src = e.target.result;
        updatePreview();
      };
      reader.readAsDataURL(file);
    }
  });

  // --- Body & Footer Logic ---
  bodyTextarea.addEventListener('input', updatePreview);
  footerInput.addEventListener('input', updatePreview);

  // Formatting helpers
  let varCount = 1;
  document.getElementById('insertVarBtn').addEventListener('click', () => {
    insertAtCursor(bodyTextarea, '{' + '{' + varCount + '}' + '}');
    varCount++;
    updatePreview();
  });

  document.querySelectorAll('.format-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const format = btn.getAttribute('data-format');
      let prefix = '', suffix = '';
      if (format === 'bold') { prefix = '*'; suffix = '*'; }
      if (format === 'italic') { prefix = '_'; suffix = '_'; }
      if (format === 'strikethrough') { prefix = '~'; suffix = '~'; }
      if (format === 'monospace') { prefix = '```'; suffix = '```'; }
      insertAtCursor(bodyTextarea, prefix, suffix);
      updatePreview();
    });
  });

  function insertAtCursor(myField, prefix, suffix = '') {
    if (document.selection) {
      myField.focus();
      sel = document.selection.createRange();
      sel.text = prefix + sel.text + suffix;
    } else if (myField.selectionStart || myField.selectionStart == '0') {
      var startPos = myField.selectionStart;
      var endPos = myField.selectionEnd;
      myField.value = myField.value.substring(0, startPos) + prefix + myField.value.substring(startPos, endPos) + suffix + myField.value.substring(endPos, myField.value.length);
      myField.selectionStart = startPos + prefix.length;
      myField.selectionEnd = startPos + prefix.length + (endPos - startPos);
    } else {
      myField.value += prefix + suffix;
    }
  }

  // --- Buttons Logic ---
  function renderButtonsUI() {
    buttonsContainer.innerHTML = '';
    if (buttonsData.length === 0) {
      emptyButtonsState.classList.remove('hidden');
    } else {
      emptyButtonsState.classList.add('hidden');
      buttonsData.forEach((btn, index) => {
        const btnEl = document.createElement('div');
        btnEl.className = 'bg-white border border-gray-200 rounded-xl p-4 shadow-sm relative group';
        
        let extraFields = '';
        if (btn.type === 'URL') {
          extraFields = `<input type="url" value="${btn.url || ''}" class="btn-url w-full px-3 py-2 mt-2 rounded-lg border border-gray-200 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none" placeholder="https://example.com" required>`;
        } else if (btn.type === 'PHONE_NUMBER') {
          extraFields = `<input type="text" value="${btn.phone_number || ''}" class="btn-phone w-full px-3 py-2 mt-2 rounded-lg border border-gray-200 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none" placeholder="+1234567890" required>`;
        } else if (btn.type === 'COPY_CODE') {
          extraFields = `<input type="text" value="${btn.example || ''}" class="btn-example w-full px-3 py-2 mt-2 rounded-lg border border-gray-200 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none" placeholder="Code to copy (e.g. SAVE20)" required>`;
        }

        btnEl.innerHTML = `
          <div class="flex gap-3 items-start">
            <div class="w-1/3">
              <select class="btn-type w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none bg-gray-50">
                <option value="QUICK_REPLY" ${btn.type==='QUICK_REPLY'?'selected':''}>Quick Reply</option>
                <option value="URL" ${btn.type==='URL'?'selected':''}>URL</option>
                <option value="PHONE_NUMBER" ${btn.type==='PHONE_NUMBER'?'selected':''}>Call Phone</option>
                <option value="COPY_CODE" ${btn.type==='COPY_CODE'?'selected':''}>Copy Code</option>
                <option value="CALL_REQUEST" ${btn.type==='CALL_REQUEST'?'selected':''}>Call Request</option>
              </select>
            </div>
            <div class="w-2/3">
              <input type="text" value="${btn.text || ''}" class="btn-text w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none" placeholder="Button text" maxlength="25" required>
              ${extraFields}
            </div>
          </div>
          <button type="button" class="remove-btn absolute -top-2 -right-2 bg-white text-red-500 rounded-full p-1 border border-gray-200 shadow-sm hover:bg-red-50 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100">
            <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="M6 18L18 6M6 6l12 12"></path></svg>
          </button>
        `;

        // Event listeners for this button row
        const typeSelect = btnEl.querySelector('.btn-type');
        typeSelect.addEventListener('change', (e) => {
          buttonsData[index].type = e.target.value;
          renderButtonsUI();
          updatePreview();
        });

        const textInput = btnEl.querySelector('.btn-text');
        textInput.addEventListener('input', (e) => {
          buttonsData[index].text = e.target.value;
          updatePreview();
        });

        const urlInput = btnEl.querySelector('.btn-url');
        if (urlInput) {
          urlInput.addEventListener('input', (e) => { buttonsData[index].url = e.target.value; });
        }

        const phoneInput = btnEl.querySelector('.btn-phone');
        if (phoneInput) {
          phoneInput.addEventListener('input', (e) => { buttonsData[index].phone_number = e.target.value; });
        }

        const exampleInput = btnEl.querySelector('.btn-example');
        if (exampleInput) {
          exampleInput.addEventListener('input', (e) => { buttonsData[index].example = e.target.value; });
        }

        const removeBtn = btnEl.querySelector('.remove-btn');
        removeBtn.addEventListener('click', () => {
          buttonsData.splice(index, 1);
          renderButtonsUI();
          updatePreview();
        });

        buttonsContainer.appendChild(btnEl);
      });
    }

    if (buttonsData.length >= 10) {
      addButtonBtn.classList.add('hidden');
    } else {
      addButtonBtn.classList.remove('hidden');
    }
  }

  addButtonBtn.addEventListener('click', () => {
    if (buttonsData.length < 10) {
      buttonsData.push({ type: 'QUICK_REPLY', text: '' });
      renderButtonsUI();
      updatePreview();
    }
  });

  // --- Preview Rendering ---
  function updatePreview() {
    // 1. Header
    const hType = headerTypeSelect.value;
    previewHeader.classList.add('hidden');
    previewHeaderText.classList.add('hidden');
    previewHeaderMedia.classList.add('hidden');
    previewHeaderImg.classList.add('hidden');

    if (hType === 'TEXT' && headerTextInput.value) {
      previewHeader.classList.remove('hidden');
      previewHeaderText.classList.remove('hidden');
      previewHeaderText.textContent = headerTextInput.value;
    } else if (['IMAGE', 'VIDEO', 'DOCUMENT'].includes(hType)) {
      previewHeader.classList.remove('hidden');
      previewHeaderMedia.classList.remove('hidden');
      previewHeaderMedia.classList.add('flex');
      
      const iconMap = { 'IMAGE': 'image', 'VIDEO': 'video', 'DOCUMENT': 'file-text' };
      previewHeaderIcon.setAttribute('data-lucide', iconMap[hType]);
      if (typeof lucide !== 'undefined') lucide.createIcons();

      if (hType === 'IMAGE' && previewHeaderImg.src && !previewHeaderImg.src.endsWith(window.location.host + '/')) {
        previewHeaderImg.classList.remove('hidden');
        previewHeaderIcon.classList.add('hidden');
      } else {
        previewHeaderIcon.classList.remove('hidden');
      }
    }

    // 2. Body Text (Simple markdown to HTML for preview)
    let body = bodyTextarea.value || ' ';
    // Simple replacements for preview
    body = body.replace(/\*(.*?)\*/g, '<strong>$1</strong>');
    body = body.replace(/_(.*?)_/g, '<em>$1</em>');
    body = body.replace(/~(.*?)~/g, '<del>$1</del>');
    body = body.replace(/```(.*?)```/g, '<code class="bg-gray-100 text-red-600 px-1 rounded text-sm">$1</code>');
    body = body.replace(/\{\{(\d+)\}\}/g, '<span class="text-blue-500 font-semibold">[$1]</span>');
    
    previewBody.innerHTML = body;

    // 3. Footer
    if (footerInput.value) {
      previewFooter.classList.remove('hidden');
      previewFooter.textContent = footerInput.value;
    } else {
      previewFooter.classList.add('hidden');
    }

    // 4. Buttons
    if (buttonsData.length > 0) {
      previewButtons.classList.remove('hidden');
      previewButtons.innerHTML = '';
      buttonsData.forEach(btn => {
        const div = document.createElement('div');
        div.className = 'w-full text-center py-2.5 border-t border-gray-100 text-[15px] text-[#00a884] font-medium cursor-pointer hover:bg-gray-50 flex items-center justify-center gap-1.5';
        
        let icon = '';
        if (btn.type === 'URL') icon = '<i data-lucide="external-link" class="w-3.5 h-3.5"></i>';
        if (btn.type === 'PHONE_NUMBER') icon = '<i data-lucide="phone" class="w-3.5 h-3.5"></i>';
        if (btn.type === 'QUICK_REPLY') icon = '<i data-lucide="corner-down-right" class="w-3.5 h-3.5"></i>';
        
        div.innerHTML = `${icon} <span>${btn.text || 'Button'}</span>`;
        previewButtons.appendChild(div);
      });
      if (typeof lucide !== 'undefined') lucide.createIcons();
    } else {
      previewButtons.classList.add('hidden');
    }
  }

  // --- Form Submit Intercept ---
  form.addEventListener('submit', (e) => {
    // Construct header JSON
    const hType = headerTypeSelect.value;
    let headerJson = null;
    if (hType !== 'NONE') {
      headerJson = { type: hType };
      if (hType === 'TEXT') {
        headerJson.text = headerTextInput.value;
      }
    }
    document.getElementById('header_hidden').value = headerJson ? JSON.stringify(headerJson) : '';
    
    // Construct buttons JSON
    if (buttonsData.length > 0) {
      // Validate
      for (let btn of buttonsData) {
        if (!btn.text) {
          e.preventDefault();
          alert('All buttons must have text.');
          return;
        }
      }
      document.getElementById('buttons_hidden').value = JSON.stringify(buttonsData);
    } else {
      document.getElementById('buttons_hidden').value = '';
    }
  });

  // Initialization from existing data
  if (headerData) {
    headerTypeSelect.value = headerData.type;
    if (headerData.type === 'TEXT') {
      headerTextInput.value = headerData.text || '';
    }
  }
  
  updateHeaderVisibility();
  renderButtonsUI();
  updatePreview();
});
</script>
{% endblock %}