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

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

{% block content %}
{% 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 %}
<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" enctype="multipart/form-data" id="campaignForm">
      {% csrf_token %}
      
      <!-- Hidden fields for JSON data -->
      <input type="hidden" name="parameter_mappings" id="parameter_mappings_hidden" value="{{ form.parameter_mappings.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">Campaign 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. Summer Promo">
            {% if form.name.errors %}<p class="text-xs text-red-500 mt-1.5">{{ form.name.errors|join:", " }}</p>{% endif %}
          </div>
          

          
          <div class="md:col-span-2">
            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Scheduled At (Optional)</label>
            <input type="datetime-local" name="scheduled_at" id="id_scheduled_at" value="{{ form.scheduled_at.value|date:'Y-m-d\TH:i'|default_if_none:'' }}"
                   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-600">
            {% if form.scheduled_at.errors %}<p class="text-xs text-red-500 mt-1.5">{{ form.scheduled_at.errors|join:", " }}</p>{% endif %}
          </div>
        </div>

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

        <!-- Template Selection & Variables -->
        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-1.5">Template <span class="text-red-500">*</span></label>
          <select name="template" id="id_template" 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">
            <option value="">---------</option>
            {% for val, label in form.template.field.choices %}
              {% if val %}<option value="{{ val }}" {% if form.template.value|stringformat:"s" == val|stringformat:"s" %}selected{% endif %}>{{ label }}</option>{% endif %}
            {% endfor %}
          </select>
          {% if form.template.errors %}<p class="text-xs text-red-500 mt-1.5">{{ form.template.errors|join:", " }}</p>{% endif %}
          
          <!-- Dynamic Parameter Mappings UI -->
          <div id="parameterMappingsContainer" class="mt-4 p-4 bg-emerald-50/50 border border-emerald-100 rounded-xl hidden">
            <h4 class="text-xs font-bold text-emerald-800 uppercase tracking-wider mb-3">Template Variables Map</h4>
            <div id="parameterInputs" class="space-y-3">
              <!-- Inputs generated by JS -->
            </div>
            <p class="text-[11px] text-gray-500 mt-3 leading-relaxed">Map these variables to the columns in your CSV, or attributes on your Contact records (e.g., 'name', 'email').</p>
          </div>
        </div>

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

        <!-- Audience Selection -->
        <div>
          <div class="flex justify-between items-center mb-1.5">
            <label class="block text-sm font-semibold text-gray-700">Audience Type <span class="text-red-500">*</span></label>
            {% if audience_choices %}
            <span class="text-[10px] uppercase font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded">{{ audience_choices|length }} Providers</span>
            {% endif %}
          </div>
          <select name="audience_type" id="id_audience_type" 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 in audience_choices %}
              <option value="{{ val }}" {% if form.audience_type.value == val %}selected{% endif %}>{{ val|title }}</option>
            {% endfor %}
          </select>
          {% if form.audience_type.errors %}<p class="text-xs text-red-500 mt-1.5">{{ form.audience_type.errors|join:", " }}</p>{% endif %}
          
          <!-- Conditional: Audience Filters (for contacts/custom providers) -->
          <div id="audienceFiltersContainer" class="mt-4 space-y-3">
            {% if contact_filters %}
            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-1.5">Filter Preset
                <span class="ml-1 text-[10px] text-blue-500 font-normal">(defined in settings)</span>
              </label>
              <select id="filterPresetSelect" 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">
                <option value="">— No preset (manual JSON) —</option>
                {% for label, filter_json in contact_filters.items %}
                <option value="{{ filter_json|escapejs }}">{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            {% endif %}
            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-1.5">Audience Filters <span class="font-normal text-gray-400">(JSON)</span></label>
              <input type="text" name="audience_filters" id="id_audience_filters" value="{{ form.audience_filters.value|default_if_none:'{}' }}"
                     class="w-full font-mono 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-xs"
                     placeholder='{"labels__name": "VIP"}'>
              <p class="text-[11px] text-gray-400 mt-1.5">Django ORM filter kwargs as JSON — applied to <code>WhatsAppContact</code>. Select a preset above or write your own.</p>
            </div>
          </div>

          <!-- Conditional: CSV File Upload (for csv) -->
          <div id="csvFileContainer" class="mt-4 hidden">
            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Upload CSV File</label>
            <div class="flex items-center justify-center w-full">
              <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-xl cursor-pointer bg-gray-50 hover:bg-gray-100 hover:border-emerald-400 transition-colors relative overflow-hidden group">
                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                  <i data-lucide="file-spreadsheet" class="w-8 h-8 text-gray-400 group-hover:text-emerald-500 mb-2 transition-colors"></i>
                  <p class="mb-1 text-sm text-gray-500"><span class="font-semibold text-emerald-600">Click to upload</span> or drag and drop</p>
                  <p class="text-xs text-gray-400">CSV file containing 'phone' column</p>
                </div>
                <input id="id_csv_file" name="csv_file" type="file" class="hidden" accept=".csv" />
                <!-- File name preview -->
                <div id="csvFileName" class="absolute bottom-0 left-0 right-0 bg-emerald-100 text-emerald-800 text-xs font-medium py-1 px-3 text-center hidden truncate"></div>
              </label>
            </div>
            {% if form.csv_file.value %}
            <div class="mt-2 text-xs text-gray-500 flex items-center gap-1.5 bg-gray-50 p-2 rounded-lg border border-gray-100">
              <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500"></i>
              Currently: <span class="font-medium truncate">{{ form.csv_file.value }}</span>
            </div>
            {% endif %}
            {% if form.csv_file.errors %}<p class="text-xs text-red-500 mt-1.5">{{ form.csv_file.errors|join:", " }}</p>{% endif %}
          </div>
        </div>

      </div>

      <div class="mt-8 flex gap-3 pt-6 border-t border-gray-100">
        <button type="submit" id="saveCampaignBtn" 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 Campaign
        </button>
        <a href="{% url 'django_meta_whatsapp:campaign_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">Template Preview</h3>
          <p class="text-[11px] opacity-80" id="previewLang">Select a template</p>
        </div>
      </div>

      <!-- Chat Background Pattern -->
      <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 id="noTemplateState" class="w-full flex-1 flex flex-col items-center justify-center opacity-50 text-center">
          <i data-lucide="message-square-dashed" class="w-12 h-12 text-gray-500 mb-3"></i>
          <p class="text-sm font-medium text-gray-600">Select a template to view it here.</p>
        </div>

        <!-- Message Bubble -->
        <div id="previewBubble" class="bg-white rounded-xl rounded-tl-none shadow-sm max-w-[90%] flex flex-col overflow-hidden w-full relative hidden">
          <!-- 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">
              <i id="previewHeaderIcon" data-lucide="image" class="w-8 h-8 text-gray-400"></i>
            </div>
          </div>
          
          <!-- Body Text -->
          <div class="px-3 py-2 text-[15px] leading-snug whitespace-pre-wrap word-break-words" id="previewBody"></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"></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', function() {
  new TomSelect('#id_template', {
    create: false,
    sortField: {
      field: "text",
      direction: "asc"
    }
  });

  new TomSelect('#id_audience_type', {
    create: false,
    sortField: {
      field: "text",
      direction: "asc"
    }
  });

  // Wire up filter preset dropdown → JSON field
  const presetSelect = document.getElementById('filterPresetSelect');
  const filterInput = document.getElementById('id_audience_filters');
  if (presetSelect && filterInput) {
    presetSelect.addEventListener('change', function() {
      if (this.value) {
        filterInput.value = this.value;
      } else {
        filterInput.value = '{}';
      }
    });
  }
});

document.addEventListener('DOMContentLoaded', () => {
  // Existing data parsing
  let initialMappings = {};
  try {
    const rawMappings = document.getElementById('parameter_mappings_hidden').value;
    if (rawMappings) initialMappings = JSON.parse(rawMappings);
  } catch(e) {}

  // --- DOM Elements ---
  const templateSelect = document.getElementById('id_template');
  const parameterMappingsContainer = document.getElementById('parameterMappingsContainer');
  const parameterInputsContainer = document.getElementById('parameterInputs');
  
  const audienceSelect = document.getElementById('id_audience_type');
  const audienceFiltersContainer = document.getElementById('audienceFiltersContainer');
  const csvFileContainer = document.getElementById('csvFileContainer');
  const csvFileInput = document.getElementById('id_csv_file');
  const csvFileName = document.getElementById('csvFileName');
  
  const form = document.getElementById('campaignForm');

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

  // State to track variables
  let currentVariables = [];

  // --- CSV File display ---
  csvFileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
      csvFileName.textContent = e.target.files[0].name;
      csvFileName.classList.remove('hidden');
    } else {
      csvFileName.classList.add('hidden');
    }
  });

  // --- Audience Selection Logic ---
  function updateAudienceFields() {
    const audType = audienceSelect.value;
    if (audType === 'csv') {
      csvFileContainer.classList.remove('hidden');
      audienceFiltersContainer.classList.add('hidden');
    } else {
      csvFileContainer.classList.add('hidden');
      audienceFiltersContainer.classList.remove('hidden');
    }
  }
  audienceSelect.addEventListener('change', updateAudienceFields);
  updateAudienceFields(); // Initial call

  // --- Template Fetching & Rendering ---
  function fetchTemplateDetails(templateId) {
    if (!templateId) {
      noTemplateState.classList.remove('hidden');
      previewBubble.classList.add('hidden');
      parameterMappingsContainer.classList.add('hidden');
      previewLang.textContent = 'Select a template';
      return;
    }

    // Call our new API endpoint
    fetch(`/whatsapp/api/templates/${templateId}/`)
      .then(res => res.json())
      .then(data => {
        renderTemplatePreview(data);
        extractAndRenderVariables(data);
      })
      .catch(err => {
        console.error('Failed to fetch template details', err);
      });
  }

  function renderTemplatePreview(data) {
    noTemplateState.classList.add('hidden');
    previewBubble.classList.remove('hidden');
    previewLang.textContent = `Language: ${data.language}`;

    // Header
    previewHeader.classList.add('hidden');
    previewHeaderText.classList.add('hidden');
    previewHeaderMedia.classList.add('hidden');

    if (data.header && data.header.type) {
      const hType = data.header.type;
      if (hType === 'TEXT' && data.header.text) {
        previewHeader.classList.remove('hidden');
        previewHeaderText.classList.remove('hidden');
        previewHeaderText.textContent = data.header.text;
      } else if (['IMAGE', 'VIDEO', 'DOCUMENT'].includes(hType)) {
        previewHeader.classList.remove('hidden');
        previewHeaderMedia.classList.remove('hidden');
        
        const iconMap = { 'IMAGE': 'image', 'VIDEO': 'video', 'DOCUMENT': 'file-text' };
        previewHeaderIcon.setAttribute('data-lucide', iconMap[hType]);
      }
    }

    // Body text formatting
    let bodyText = data.body_text || '';
    bodyText = bodyText.replace(/\*(.*?)\*/g, '<strong>$1</strong>');
    bodyText = bodyText.replace(/_(.*?)_/g, '<em>$1</em>');
    bodyText = bodyText.replace(/~(.*?)~/g, '<del>$1</del>');
    bodyText = bodyText.replace(/```(.*?)```/g, '<code class="bg-gray-100 text-red-600 px-1 rounded text-sm">$1</code>');
    bodyText = bodyText.replace(/\{\{(\d+)\}\}/g, '<span class="text-blue-500 font-semibold bg-blue-50 px-1 rounded">[$1]</span>');
    previewBody.innerHTML = bodyText;

    // Footer
    if (data.footer_text) {
      previewFooter.classList.remove('hidden');
      previewFooter.textContent = data.footer_text;
    } else {
      previewFooter.classList.add('hidden');
    }

    // Buttons
    previewButtons.innerHTML = '';
    if (data.buttons && data.buttons.length > 0) {
      previewButtons.classList.remove('hidden');
      data.buttons.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);
      });
    } else {
      previewButtons.classList.add('hidden');
    }

    if (typeof lucide !== 'undefined') lucide.createIcons();
  }

  function extractAndRenderVariables(data) {
    const varsSet = new Set();
    const regex = /\{\{(\d+)\}\}/g;
    
    // Check body
    let match;
    while ((match = regex.exec(data.body_text || '')) !== null) {
      varsSet.add(match[1]);
    }
    // Check header text
    if (data.header && data.header.type === 'TEXT' && data.header.text) {
      while ((match = regex.exec(data.header.text)) !== null) {
        varsSet.add(match[1]);
      }
    }

    currentVariables = Array.from(varsSet).sort((a, b) => parseInt(a) - parseInt(b));
    parameterInputsContainer.innerHTML = '';

    if (currentVariables.length > 0) {
      parameterMappingsContainer.classList.remove('hidden');
      currentVariables.forEach(v => {
        const row = document.createElement('div');
        row.className = 'flex items-center gap-3';
        const nameAttr = v.match(/^\d+$/) ? `body_${v}` : v;
        const val = initialMappings[v] || '';
        row.innerHTML = `
          <div class="px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 min-w-[120px] text-center">
            ${'{' + '{' + v + '}' + '}'}
          </div>
          <div class="flex-1 space-y-2">→</div>
          <input type="text" data-var="${v}" value="${val}" class="var-input flex-1 px-4 py-2 rounded-lg border border-gray-200 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-sm" placeholder="e.g. name, order_id, etc.">
        `;
        parameterInputsContainer.appendChild(row);
      });
    } else {
      parameterMappingsContainer.classList.add('hidden');
    }
  }

  templateSelect.addEventListener('change', (e) => {
    fetchTemplateDetails(e.target.value);
  });

  // Fetch immediately if a template is already selected
  if (templateSelect.value) {
    fetchTemplateDetails(templateSelect.value);
  }

  // --- Form Submit Intercept ---
  form.addEventListener('submit', (e) => {
    // Build parameter mappings JSON
    const mappings = {};
    document.querySelectorAll('.var-input').forEach(input => {
      mappings[input.getAttribute('data-var')] = input.value.trim();
    });
    document.getElementById('parameter_mappings_hidden').value = JSON.stringify(mappings);
  });
});
</script>
{% endblock %}