{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="bg-[#f4f2ef] min-h-screen py-12 px-4 sm:px-6 lg:px-8">
  
  <div class="max-w-3xl mx-auto p-5">
    <div class="bg-white rounded-2xl shadow-xl p-6 overflow-hidden">
      <!-- Header -->
      <div class="bg-red-950 px-6 py-8">
        <h1 class="text-3xl font-bold text-white text-center">
          {% if existing_author %}Submit New Article{% else %}Contribute Your Work{% endif %}
        </h1>
        <p class="text-center text-white mt-2">
          Share your knowledge with our community
        </p>
      </div>

      <div class="px-8">
        {% if messages %}
          <div class="mb-8 space-y-3">
            {% for message in messages %}
              {% if 'submit_articles' in message.extra_tags %}
                {% with message_level=message.tags|default:""|stringformat:"s" %}
                <div class="relative p-4 rounded-lg border-l-4 flex items-start
                      {% if 'success' in message_level %}bg-green-50 text-green-800 border-green-500
                      {% elif 'info' in message_level %}bg-blue-50 text-blue-800 border-blue-500
                      {% elif 'error' in message_level %}bg-red-50 text-red-800 border-red-500
                      {% else %}bg-gray-50 text-gray-800 border-gray-500
                      {% endif %}">
                  
                  <i class="fas text-lg mt-0.5 mr-3
                    {% if 'success' in message_level %}fa-check-circle text-green-600
                    {% elif 'info' in message_level %}fa-info-circle text-blue-600
                    {% elif 'error' in message_level %}fa-exclamation-circle text-red-600
                    {% else %}fa-info-circle text-gray-600
                    {% endif %}"></i>
                  
                  <div class="flex-1">
                    <p class="text-xl font-medium uppercase">{{ message }}</p>
                  </div>
                  
                  <button class="ml-2 text-gray-500 hover:text-gray-700 focus:outline-none" 
                          onclick="this.parentElement.remove()">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                {% endwith %}
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}
      </div>


        <!-- Lookup Section -->
        <div id="lookupSection" class="{% if existing_author or show_blog_form %}hidden{% endif %}">
          <div class="text-center mb-8">
            <h2 class="text-xl font-semibold text-red-900 mb-4">Returning Author?</h2>
            <button type="button" onclick="toggleLookup()" 
                    class="bg-red-50 text-red-900 px-6 py-2 rounded-full hover:bg-red-100 transition-colors border border-red-200">
              <i class="fas fa-search mr-2"></i>Find My Account
            </button>
          </div>

          <form method="post" class="hidden" id="lookupForm">
            {% csrf_token %}
            <div class="space-y-4">
              {{ lookup_form.phone }}
              <button type="submit" name="lookup_author" 
                      class="w-full bg-red-900 text-white py-3 rounded-lg hover:bg-red-800 transition-colors">
                Retrieve My Profile
              </button>
            </div>
          </form>
        </div>

        <!-- Author Form -->
        <div class="{% if existing_author or show_blog_form %}hidden{% endif %}" id="authorForm">
          <div class="border-b border-red-200 pb-4 mb-6">
            <h3 class="text-xl font-semibold text-red-900">Author Registration</h3>
            <p class="text-red-700 mt-1 text-sm">
              Please provide your professional details for attribution
            </p>
          </div>
          <form method="post" enctype="multipart/form-data" id="newAuthorForm">
            {% csrf_token %}
            <div class="grid gap-6 md:grid-cols-2 mb-8">
              {% for field in author_form %}
                <div class="space-y-2 {% if field.name == 'description' %}md:col-span-2{% endif %}">
                  <label class="block text-sm font-medium text-red-900">{{ field.label }}</label>
                  {{ field }}
                  {% if field.errors %}
                    <div class="text-red-700 text-sm mt-1">{{ field.errors }}</div>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
            <div id="image-preview-container" class="mt-4 flex justify-center {% if not form.instance.meta_image %}hidden{% endif %}"></div>

            <div class="flex justify-center">
              <button type="submit" name="submit_new_author" 
                      class="bg-red-900 text-white px-8 py-3 rounded-lg hover:bg-green-700 hover:cursor-pointer  transition-colors">
                Continue to Article <i class="fas fa-arrow-right ml-2"></i>
              </button>
            </div>
          </form>
        </div>

        <!-- Blog Form -->
        <div class="{% if not show_blog_form %}hidden{% endif %}" id="blogForm">
          <div class="border-b border-red-200 pb-4 mb-6">
            <h3 class="text-xl font-semibold text-red-900">Article Submission</h3>
            <p class="text-black text-sm mt-1">
              {% if existing_author %}Writing as {{ existing_author.name }}{% else %}Provide detailed article content using the rich text editor below{% endif %}
            </p>
            <p class="text-blue-600 text-sm italic mt-1">
             Please mention name of co-author at the top of your article, if you have any.
            </p>
          </div>
          
          <form method="post" id="articleForm">
            {% csrf_token %}
            <div class="space-y-6">
              <!-- Title Field -->
              <div class="space-y-2">
                <label class="block text-sm font-medium text-red-900">Article Title</label>
                {{ blog_form.title }}
                {% if blog_form.title.errors %}
                  <div class="text-red-700 text-sm mt-1">{{ blog_form.title.errors }}</div>
                {% endif %}
              </div>

              <!-- Content Field -->
              <div class="space-y-2">
                <label class="block text-sm font-medium text-red-900">Article Content</label>
                <div class="prose-editor border rounded-lg p-4">
                  {{ blog_form.content }}
                </div>
                {% if blog_form.content.errors %}
                  <div class="text-red-700 text-sm mt-1">{{ blog_form.content.errors }}</div>
                {% endif %}
              </div>

              <!-- Control Buttons -->
              <div class="mt-8 flex justify-between items-center">
                <button type="button" onclick="clearSession()" 
                        class="text-red-900 hover:text-red-700 font-medium">
                  <i class="fas fa-arrow-left mr-2"></i>
                  {% if existing_author %}Not {{ existing_author.name }}?{% else %}Back to Author Info{% endif %}
                </button>
                <button type="submit" name="submit_article" 
                        class="bg-red-900 text-white px-8 py-3 rounded-lg hover:bg-red-800 transition-colors">
                  Submit Article
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}

<script>
  function toggleLookup() {
    document.getElementById('lookupForm').classList.toggle('hidden');
  }

  function clearSession() {
    fetch('{% url "mimansha_main:clear_author_session" %}', {
      method: 'POST',
      headers: {
        'X-CSRFToken': '{{ csrf_token }}',
        'Content-Type': 'application/json'
      }
    }).then(() => window.location.reload());
  }
</script>

<!-- CKEditor Configuration -->
<script src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<style>
  .django-ckeditor-widget {
    width: 100% !important;
  }
  .cke_chrome {
    border-radius: 0.5rem !important;
    border-color: #e5e7eb !important;
  }
  .cke_top {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
  }
</style>

<!-- Image compression library -->
<script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.min.js"></script>

<!-- Image uploader utility -->
<script src="{% static 'js/image_processor.js' %}"></script>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    new ImageUploader({
      inputSelector: '#id_image',
      previewSelector: '#image-preview-container',
      slugifyFrom: '#id_name', // Optional
      maxSizeMB: 1,                   // Optional
      maxWidth: 1200                  // Optional
    });
  });
</script>
{% endblock %}