{% extends "admin_base.html" %}

{% block title %}Send Newsletter{% endblock %}

{% block content %}
{% load static %}
<!-- Load CKEditor from static files -->
<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<script src="{% static 'ckeditor/ckeditor-init.js' %}"></script>

<style>
  /* [Previous CSS remains exactly the same] */
</style>

<div class="max-w-4xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
  <!-- Page Header -->
  <div class="mb-8 text-center">
    <h1 class="text-3xl font-bold text-gray-900 mb-2">Send Newsletter</h1>
    <div class="flex items-center justify-center">
      <div class="w-2 h-2 rounded-full {% if subscriber_count > 0 %}bg-green-500{% else %}bg-red-500{% endif %} mr-2"></div>
      <p class="text-gray-600">
        <span class="font-semibold">{{ subscriber_count }}</span> active subscribers
      </p>
    </div>
  </div>
  
  <!-- Previous Results Alert -->
  {% if previous_result %}
  <div class="mb-8 results-card p-4">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 w-full">
        <h3 class="text-sm font-medium text-blue-800">Previous Newsletter Results</h3>
        <div class="mt-2 text-sm text-blue-700">
          <div class="grid grid-cols-3 gap-4 mt-2">
            <div class="stat-card text-center">
              <div class="text-2xl font-bold text-blue-600">{{ previous_result.successful }}</div>
              <div class="text-xs uppercase tracking-wider">Successful</div>
            </div>
            <div class="stat-card text-center">
              <div class="text-2xl font-bold text-amber-600">{{ previous_result.failed }}</div>
              <div class="text-xs uppercase tracking-wider">Failed</div>
            </div>
            <div class="stat-card text-center">
              <div class="text-2xl font-bold text-indigo-600">{{ previous_result.total }}</div>
              <div class="text-xs uppercase tracking-wider">Total</div>
            </div>
          </div>
          {% if previous_result.errors %}
          <div class="mt-4">
            <h4 class="text-sm font-medium text-blue-800">Failed Deliveries:</h4>
            <ul class="mt-2 text-xs text-blue-700 space-y-1">
              {% for error in previous_result.errors %}
              <li class="truncate">{{ error }}</li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  
  <!-- Newsletter Form -->
  <div class="newsletter-form-container">
    <div class="px-6 py-5 border-b border-gray-200 form-header">
      <h2 class="text-xl font-semibold text-white">Create Newsletter</h2>
    </div>
    
    <!-- Django Messages -->
    {% if messages %}
    <div class="px-6 py-3">
      {% for message in messages %}
      <div class="p-4 mb-4 rounded-md {% if message.tags == 'success' %}bg-green-50 text-green-800 border border-green-200{% elif message.tags == 'error' %}bg-red-50 text-red-800 border border-red-200{% elif message.tags == 'warning' %}bg-yellow-50 text-yellow-800 border border-yellow-200{% else %}bg-blue-50 text-blue-800 border border-blue-200{% endif %}">
        {{ message }}
      </div>
      {% endfor %}
    </div>
    {% endif %}
    
    <form id="newsletterForm" method="POST" action="{% url 'mimansha_main:send_newsletter' %}" class="px-6 py-4 space-y-6">
      {% csrf_token %}
      
      <!-- Subject Field -->
      <div>
        <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject Line</label>
        <input type="text" name="subject" id="subject" required
               class="fancy-input w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="Enter newsletter subject" maxlength="100">
        <div class="mt-1 text-sm text-gray-500 flex justify-between">
          <span>Make it compelling to improve open rates</span>
          <span class="character-count"><span id="subjectCount">0</span>/100</span>
        </div>
      </div>
      
      <!-- Message Field with CKEditor -->
      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message Content</label>
        <textarea name="message" id="message" rows="10" required
                  class="w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 hidden"
                  placeholder="Write your newsletter content here..."></textarea>
        <div id="editor"></div>
        <div class="mt-1 text-sm text-gray-500">
          <span>Use the editor toolbar for rich text formatting</span>
        </div>
      </div>
      
      <!-- Preview Section -->
      <div>
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-sm font-medium text-gray-700">Preview</h3>
          <button type="button" id="refreshPreview" class="text-sm text-blue-600 hover:text-blue-800 flex items-center transform transition-transform hover:scale-105">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Refresh Preview
          </button>
        </div>
        <div class="preview-container p-4 min-h-[200px]">
          <div id="previewContainer" class="prose max-w-none">
            <p class="text-gray-400 italic">Preview will appear here...</p>
          </div>
        </div>
      </div>
      
      <!-- Redesigned Progress Bar -->
      <div id="progressContainer" class="progress-container hidden bg-gray-50 rounded-lg p-4 border border-gray-200 shadow-sm">
        <div class="flex items-center justify-between mb-3">
          <h3 class="text-sm font-medium text-gray-800">Sending Progress</h3>
          <span id="progressPercentage" class="progress-percentage text-sm font-semibold bg-blue-100 text-blue-800 py-1 px-2 rounded-full">0%</span>
        </div>
        <div class="progress-bar h-3 bg-gray-200 rounded-full overflow-hidden relative">
          <div id="progressFill" class="h-full rounded-full bg-gradient-to-r from-blue-400 to-blue-600 transition-all duration-300 ease-out" style="width: 0%"></div>
        </div>
        <div id="progressText" class="progress-text flex justify-between mt-3 text-sm text-gray-600">
          <div class="flex items-center">
            <span id="statusBadge" class="inline-block w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
            <span>Status: <span id="statusText" class="font-medium">Ready to send</span></span>
          </div>
          <span>Sent: <span id="sentCount" class="font-medium">0</span>/<span id="totalCount" class="font-medium">{{ subscriber_count }}</span></span>
        </div>
      </div>
      
      <div id="errorContainer" class="error-container hidden bg-red-50 border border-red-200 rounded-lg p-4">
        <h4 class="font-medium text-red-800 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
          </svg>
          Errors occurred during sending:
        </h4>
        <ul id="errorList" class="mt-2 text-sm space-y-1 text-red-700 pl-7 list-disc"></ul>
      </div>
      
      <div class="flex flex-col sm:flex-row items-center justify-between pt-2">
        <div class="w-full sm:w-auto mb-4 sm:mb-0">
          <button
            type="submit"
            id="sendButton"
            class="w-full sm:w-auto inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-base font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700"
          >
            <span id="normalState" class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
              </svg>
              Send Newsletter
            </span>
            <span id="sendingState" class="hidden flex items-center">
              <svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              Sending...
            </span>
          </button>
        </div>
      
        <div class="text-sm text-gray-500">
          Will be sent to <span class="font-semibold">{{ subscriber_count }}</span> subscribers
        </div>
      </div>
    </form>
  </div>
  
  <!-- Help Card -->
  <div class="mt-8 tips-card p-6">
    <h3 class="text-lg font-medium text-gray-900 mb-4">Tips for Effective Newsletters</h3>
    <ul class="space-y-3 text-sm text-gray-600">
      <li class="flex items-start">
        <svg class="h-5 w-5 text-green-500 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        <span>Use a compelling subject line that creates curiosity or adds value</span>
      </li>
      <li class="flex items-start">
        <svg class="h-5 w-5 text-green-500 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        <span>Keep your content concise and focused on a single topic</span>
      </li>
      <li class="flex items-start">
        <svg class="h-5 w-5 text-green-500 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        <span>Include a clear call-to-action so readers know what to do next</span>
      </li>
      <li class="flex items-start">
        <svg class="h-5 w-5 text-green-500 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        <span>Test your newsletter by sending a test copy to yourself first</span>
      </li>
    </ul>
  </div>
</div>


<script>

document.addEventListener('DOMContentLoaded', function() {
  // Initialize CKEditor
  const editor = CKEDITOR.replace('editor', {
    toolbar: [
      { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
      { name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Blockquote'] },
      { name: 'links', items: ['Link', 'Unlink'] },
      { name: 'styles', items: ['Styles', 'Format'] },
      { name: 'colors', items: ['TextColor', 'BGColor'] },
      { name: 'document', items: ['Source'] }
    ],
    height: 300,
    removePlugins: 'resize',
    extraPlugins: 'autogrow',
    autoGrow_minHeight: 300,
    autoGrow_maxHeight: 600,
    autoGrow_bottomSpace: 50
  });
  
  // Prevent CKEditor 4 error notifications
  CKEDITOR.on('dialogDefinition', function(ev) {
    // Remove the default notification area
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    
    if (dialogDefinition.onShow) {
      var originalOnShow = dialogDefinition.onShow;
      dialogDefinition.onShow = function() {
        originalOnShow.call(this);
        if (CKEDITOR.dialog._.currentTop) {
          var dialog = CKEDITOR.dialog._.currentTop;
          // Hide error notifications if they appear
          if (dialog.parts && dialog.parts.contents) {
            var errorElements = dialog.parts.contents.getElementsByClassName('cke_dialog_ui_labeled_content');
            for (var i = 0; i < errorElements.length; i++) {
              if (errorElements[i].textContent.includes('error')) {
                errorElements[i].style.display = 'none';
              }
            }
          }
        }
      };
    }
  });
  
  // Elements
  const form = document.getElementById('newsletterForm');
  const subject = document.getElementById('subject');
  const message = document.getElementById('message');
  const subjectCount = document.getElementById('subjectCount');
  const sendButton = document.getElementById('sendButton');
  const normalState = document.getElementById('normalState');
  const sendingState = document.getElementById('sendingState');
  const previewContainer = document.getElementById('previewContainer');
  const refreshPreview = document.getElementById('refreshPreview');
  const progressContainer = document.getElementById('progressContainer');
  const progressFill = document.getElementById('progressFill');
  const progressPercentage = document.getElementById('progressPercentage');
  const statusText = document.getElementById('statusText');
  const statusBadge = document.getElementById('statusBadge');
  const sentCount = document.getElementById('sentCount');
  const totalCount = document.getElementById('totalCount');
  const errorContainer = document.getElementById('errorContainer');
  const errorList = document.getElementById('errorList');
  
  // Sync CKEditor content with textarea
  editor.on('change', function() {
    message.value = editor.getData();
    updatePreview();
  });
  
  // Character counter for subject
  subject.addEventListener('input', function() {
    const count = this.value.length;
    subjectCount.textContent = count;
    
    if (count > 100) {
      subjectCount.parentElement.classList.add('text-red-600');
      subjectCount.parentElement.classList.remove('text-gray-500', 'text-yellow-600');
    } else if (count > 80) {
      subjectCount.parentElement.classList.add('text-yellow-600');
      subjectCount.parentElement.classList.remove('text-gray-500', 'text-red-600');
    } else {
      subjectCount.parentElement.classList.remove('text-yellow-600', 'text-red-600');
      subjectCount.parentElement.classList.add('text-gray-500');
    }
  });
  
  // Preview functionality
  function updatePreview() {
    const messageContent = message.value;
    if (!messageContent.trim()) {
      previewContainer.innerHTML = '<p class="text-gray-400 italic">Preview will appear here...</p>';
    } else {
      previewContainer.innerHTML = messageContent;
    }
  }
  
  refreshPreview.addEventListener('click', updatePreview);
  
  // Form submission
  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // Validate form
    if (!subject.value.trim()) {
      showError('Subject is required!');
      subject.focus();
      return;
    }
    
    if (!message.value.trim()) {
      showError('Message content is required!');
      return;
    }
    
    // Show sending state
    normalState.classList.add('hidden');
    sendingState.classList.remove('hidden');
    sendButton.disabled = true;
    progressContainer.classList.remove('hidden');
    errorContainer.classList.add('hidden');
    errorList.innerHTML = '';
    statusText.textContent = 'Starting...';
    statusBadge.classList.remove('bg-green-500', 'bg-red-500');
    statusBadge.classList.add('bg-blue-500');
    
    try {
      const formData = new FormData(form);
      
      const response = await fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
      });
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const data = await response.json();
      
      if (data.error) {
        showError(data.error);
        resetForm();
        return;
      }
      
      if (data.task_id) {
        // Task-based progress tracking
        statusText.textContent = 'Sending emails...';
        pollProgress(data.task_id);
      } else if (data.status === 'started') {
        // Alternative progress tracking
        pollProgress(data.task_id || data.id);
      } else {
        // Immediate completion (small lists)
        updateProgress(data.sent || data.successful_sends, data.total || data.total_subscribers);
        statusText.textContent = 'Completed!';
        statusBadge.classList.remove('bg-blue-500');
        statusBadge.classList.add('bg-green-500');
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      }
    } catch (error) {
      showError('Failed to send newsletter: ' + error.message);
      resetForm();
    }
  });
  
  // Poll for progress updates
  function pollProgress(taskId) {
    // Fixed URL to match Django URL pattern
    const progressUrl = `/newsletter-progress/${taskId}/`;
    
    function checkProgress() {
      fetch(progressUrl)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          if (data.completed) {
            // Final update
            updateProgress(data.total, data.total);
            statusText.textContent = 'Completed!';
            statusBadge.classList.remove('bg-blue-500');
            statusBadge.classList.add('bg-green-500');
            
            if (data.errors && data.errors.length > 0) {
              showErrors(data.errors);
            }
            
            setTimeout(() => {
              window.location.reload();
            }, 2000);
          } else if (data.error) {
            statusText.textContent = 'Error occurred';
            statusBadge.classList.remove('bg-blue-500');
            statusBadge.classList.add('bg-red-500');
            showError(data.error);
            resetForm();
          } else {
            // Update progress
            updateProgress(data.sent, data.total);
            statusText.textContent = data.status || 'Sending...';
            
            // Continue polling if not completed
            if (!data.completed) {
              setTimeout(checkProgress, 1000);
            }
          }
        })
        .catch(error => {
          statusText.textContent = 'Connection error';
          statusBadge.classList.remove('bg-blue-500');
          statusBadge.classList.add('bg-red-500');
          showError('Failed to get progress updates: ' + error.message);
          resetForm();
        });
    }
    
    checkProgress();
  }
  
  // Update progress display
  function updateProgress(sent, total) {
    const percentage = Math.round((sent / total) * 100);
    progressFill.style.width = `${percentage}%`;
    progressPercentage.textContent = `${percentage}%`;
    sentCount.textContent = sent;
    totalCount.textContent = total;
    
    // Change progress bar color based on completion percentage
    if (percentage < 30) {
      progressFill.className = 'h-full rounded-full bg-gradient-to-r from-blue-300 to-blue-500 transition-all duration-300 ease-out';
    } else if (percentage < 70) {
      progressFill.className = 'h-full rounded-full bg-gradient-to-r from-blue-400 to-blue-600 transition-all duration-300 ease-out';
    } else {
      progressFill.className = 'h-full rounded-full bg-gradient-to-r from-blue-500 to-blue-700 transition-all duration-300 ease-out';
    }
    
    // Animate percentage text when it changes
    progressPercentage.classList.add('scale-110');
    setTimeout(() => {
      progressPercentage.classList.remove('scale-110');
    }, 200);
  }
  
  // Show errors
  function showErrors(errors) {
    errorContainer.classList.remove('hidden');
    errorList.innerHTML = '';
    
    const maxErrorsToShow = 5;
    const errorsToShow = errors.slice(0, maxErrorsToShow);
    
    errorsToShow.forEach(error => {
      const li = document.createElement('li');
      li.textContent = error;
      errorList.appendChild(li);
    });
    
    if (errors.length > maxErrorsToShow) {
      const li = document.createElement('li');
      li.textContent = `...and ${errors.length - maxErrorsToShow} more errors`;
      errorList.appendChild(li);
    }
  }
  
  function showError(message) {
    showErrors([message]);
  }
  
  // Reset form state
  function resetForm() {
    normalState.classList.remove('hidden');
    sendingState.classList.add('hidden');
    sendButton.disabled = false;
  }
  
  // Initialize preview
  updatePreview();
});
</script>

{% endblock %}