{% extends "app_home/tw4/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/tw4/_sidebar.html' %}
{% endblock %}

{% block title %}
<h3>{% translate "Admin tools" %}</h3>
<!-- Bootstrap: text-muted → text-gray-500 -->
<p class="text-gray-500">Dangerous tools ahead !</p>
{% endblock %}


{% block content %}

<hr>

<!-- Bootstrap: row + col-md-2/col-md-10 → flex layout -->
<div class="flex flex-col md:flex-row gap-4 items-stretch mb-4">
  <div class="md:w-1/6 flex items-center justify-center">
    <!-- Bootstrap: btn btn-primary btn-lg w-100 data-bs-toggle="modal" → onclick openModal() -->
    <!-- FA4: fa-refresh → fa-solid fa-arrows-rotate -->
    <button type="button" onclick="openModal('updateBigsetModal')"
            class="w-full px-4 py-3 bg-blue-600 text-white rounded hover:bg-blue-700 text-lg">
      <i class="fa-solid fa-arrows-rotate"></i> {% translate "Counters" %}
    </button>
  </div>
  <div class="md:w-5/6">
    <!-- Bootstrap: alert alert-primary → Tailwind info box -->
    <div class="p-4 rounded bg-blue-50 border border-blue-200 text-blue-800">
      <p>{% translate "Manually update all Schema counters and bigset status." %}</p>
    </div>
  </div>
</div>

<hr>

<div class="flex flex-col md:flex-row gap-4 items-stretch mb-4">
  <div class="md:w-1/6 flex items-center justify-center">
    <!-- FA4: fa-database → fa-solid fa-database -->
    <button type="button" onclick="openModal('eavRefreshModal')"
            class="w-full px-4 py-3 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-lg">
      <i class="fa-solid fa-database"></i> {% translate "EAV Refresh" %}
    </button>
  </div>
  <div class="md:w-5/6">
    <!-- Bootstrap: alert alert-warning → Tailwind warning box -->
    <div class="p-4 rounded bg-yellow-50 border border-yellow-200 text-yellow-800">
      <p>{% translate "Refresh the EAV cache for improved performance with large datasets." %}</p>
    </div>
  </div>
</div>

<hr>

<div class="flex flex-col md:flex-row gap-4 items-stretch mb-4">
  <div class="md:w-1/6 flex items-center justify-center">
    <!-- FA4: fa-trash → fa-solid fa-trash -->
    <button type="button" onclick="openModal('eavPurgeModal')"
            class="w-full px-4 py-3 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-lg">
      <i class="fa-solid fa-trash"></i> {% translate "EAV Purge" %}
    </button>
  </div>
  <div class="md:w-5/6">
    <div class="p-4 rounded bg-yellow-50 border border-yellow-200 text-yellow-800">
      <p>{% translate "Purge the EAV cache to free up storage space. Cache will be rebuilt on next use." %}</p>
    </div>
  </div>
</div>

<hr>

<div class="flex flex-col md:flex-row gap-4 items-stretch mb-4">
  <div class="md:w-1/6 flex items-center justify-center">
    <!-- FA4: fa-history → fa-solid fa-clock-rotate-left -->
    <a href="{% url 'app_home:admintools_revision' %}"
       class="w-full px-4 py-3 bg-cyan-500 text-white rounded hover:bg-cyan-600 text-lg text-center">
      <i class="fa-solid fa-clock-rotate-left"></i> {% translate "Revision" %}
    </a>
  </div>
  <div class="md:w-5/6">
    <div class="p-4 rounded bg-cyan-50 border border-cyan-200 text-cyan-800">
      <p>{% translate "View and manage data revision tracking and history." %}</p>
    </div>
  </div>
</div>

<hr>

<div class="flex flex-col md:flex-row gap-4 items-stretch mb-4">
  <div class="md:w-1/6 flex items-center justify-center">
    <!-- FA4: fa-tools → fa-solid fa-screwdriver-wrench -->
    <button type="button" onclick="openModal('factoryResetModal')"
            class="w-full px-4 py-3 bg-red-600 text-white rounded hover:bg-red-700 text-lg">
      <i class="fa-solid fa-screwdriver-wrench"></i> {% translate "DB Reset" %}
    </button>
  </div>
  <div class="md:w-5/6">
    <!-- Bootstrap: alert alert-danger → Tailwind danger box -->
    <div class="p-4 rounded bg-red-50 border border-red-200 text-red-800">
      <p>{% translate "DANGER ! - Empty database, remove all schemas, fields, instances, users, groups, etc.  ALL DATA IS REMOVED !" %}</p>
    </div>
  </div>
</div>


<!-- MODALS -->
<!-- Bootstrap: modal fade / modal-dialog / modal-content → vanilla JS + Tailwind overlay -->

<!-- Factory Reset Modal -->
<div id="factoryResetModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="bg-white rounded shadow-lg border border-red-600 max-w-md w-full mx-4">
    <div class="flex items-center justify-between px-4 py-3 bg-red-600 text-white rounded-t">
      <h5 class="font-semibold">
        <!-- FA4: fa-exclamation-triangle → fa-solid fa-triangle-exclamation -->
        <i class="fa-solid fa-triangle-exclamation"></i> {% translate "Confirm Factory Reset" %}
      </h5>
      <button type="button" onclick="closeModal('factoryResetModal')"
              class="text-white hover:text-gray-200 text-xl font-bold">&times;</button>
    </div>
    <div class="px-4 py-3">
      <p><strong>{% translate "Warning: This action cannot be undone!" %}</strong></p>
      <p>{% translate "Factory reset will:" %}</p>
      <ul class="list-disc ml-5">
        <li>{% translate "Delete all configuration data" %}</li>
        <li>{% translate "Reset the database to initial state" %}</li>
        <li>{% translate "Remove all user-created content" %}</li>
      </ul>
      <p class="text-red-600 mt-2">{% translate "Are you sure you want to proceed?" %}</p>
    </div>
    <div class="flex justify-end gap-2 px-4 py-3 border-t">
      <button type="button" onclick="closeModal('factoryResetModal')"
              class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
        {% translate "Cancel" %}
      </button>
      <form method="post" action="{% url 'app_home:admintools' %}" class="cv-form-inline">
        {% csrf_token %}
        <input type="hidden" name="action" value="factory_reset">
        <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
          <i class="fa-solid fa-triangle-exclamation"></i> {% translate "Confirm Factory Reset" %}
        </button>
      </form>
    </div>
  </div>
</div>

<!-- Update BigSet Modal -->
<div id="updateBigsetModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="bg-white rounded shadow-lg border border-blue-600 max-w-md w-full mx-4">
    <div class="flex items-center justify-between px-4 py-3 bg-blue-600 text-white rounded-t">
      <h5 class="font-semibold">
        <i class="fa-solid fa-arrows-rotate"></i> {% translate "Update BigSet Cache" %}
      </h5>
      <button type="button" onclick="closeModal('updateBigsetModal')"
              class="text-white hover:text-gray-200 text-xl font-bold">&times;</button>
    </div>
    <div class="px-4 py-3">
      <p><strong>{% translate "This will update Counters/Bigsetvalues for all schemas." %}</strong></p>
      <p>{% translate "This operation may take some time depending on the amount of data." %}</p>
      <p>{% translate "Are you sure you want to proceed?" %}</p>
    </div>
    <div class="flex justify-end gap-2 px-4 py-3 border-t">
      <button type="button" onclick="closeModal('updateBigsetModal')"
              class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
        {% translate "Cancel" %}
      </button>
      <form method="post" action="{% url 'app_home:admintools_updatebigset' %}" class="cv-form-inline">
        {% csrf_token %}
        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          <i class="fa-solid fa-arrows-rotate"></i> {% translate "Update Schema counters" %}
        </button>
      </form>
    </div>
  </div>
</div>

<!-- EAV Refresh Modal -->
<div id="eavRefreshModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="bg-white rounded shadow-lg border border-yellow-500 max-w-md w-full mx-4">
    <div class="flex items-center justify-between px-4 py-3 bg-yellow-500 text-white rounded-t">
      <h5 class="font-semibold">
        <i class="fa-solid fa-database"></i> {% translate "Refresh EAV Cache" %}
      </h5>
      <button type="button" onclick="closeModal('eavRefreshModal')"
              class="text-white hover:text-gray-200 text-xl font-bold">&times;</button>
    </div>
    <div class="px-4 py-3">
      <p><strong>{% translate "This will refresh the EAV cache for all schemas." %}</strong></p>
      <p>{% translate "The EAV (Entity-Attribute-Value) cache stores denormalized data for improved performance." %}</p>
      <p>{% translate "This operation may take some time depending on the amount of data." %}</p>
      <p>{% translate "Are you sure you want to proceed?" %}</p>
    </div>
    <div class="flex justify-end gap-2 px-4 py-3 border-t">
      <button type="button" onclick="closeModal('eavRefreshModal')"
              class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
        {% translate "Cancel" %}
      </button>
      <form method="post" action="{% url 'app_home:admintools_eavrefresh' %}" class="cv-form-inline">
        {% csrf_token %}
        <button type="submit" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">
          <i class="fa-solid fa-database"></i> {% translate "Refresh EAV Cache" %}
        </button>
      </form>
    </div>
  </div>
</div>

<!-- EAV Purge Modal -->
<div id="eavPurgeModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="bg-white rounded shadow-lg border border-yellow-500 max-w-md w-full mx-4">
    <div class="flex items-center justify-between px-4 py-3 bg-yellow-500 text-white rounded-t">
      <h5 class="font-semibold">
        <i class="fa-solid fa-trash"></i> {% translate "Purge EAV Cache" %}
      </h5>
      <button type="button" onclick="closeModal('eavPurgeModal')"
              class="text-white hover:text-gray-200 text-xl font-bold">&times;</button>
    </div>
    <div class="px-4 py-3">
      <p><strong>{% translate "This will purge the EAV cache for all schemas." %}</strong></p>
      <p>{% translate "The EAV cache will be deleted, freeing up storage space." %}</p>
      <p>{% translate "The cache will be automatically rebuilt on next use (performance may be reduced until rebuild completes)." %}</p>
      <p>{% translate "Are you sure you want to proceed?" %}</p>
    </div>
    <div class="flex justify-end gap-2 px-4 py-3 border-t">
      <button type="button" onclick="closeModal('eavPurgeModal')"
              class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
        {% translate "Cancel" %}
      </button>
      <form method="post" action="{% url 'app_home:admintools_eavpurge' %}" class="cv-form-inline">
        {% csrf_token %}
        <button type="submit" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">
          <i class="fa-solid fa-trash"></i> {% translate "Purge EAV Cache" %}
        </button>
      </form>
    </div>
  </div>
</div>

{% endblock %}


{% block script %}
<script>
  function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
  }
  function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
  }
  // Close modal on backdrop click
  document.querySelectorAll('[id$="Modal"]').forEach(function (el) {
    el.addEventListener('click', function (e) {
      if (e.target === el) closeModal(el.id);
    });
  });
</script>
{% endblock %}