{% extends 'dashboard/base.html' %}
{% load humanize %}

{% block title %}API Keys - Peza API{% endblock %}
{% block breadcrumb %}API Keys{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-5 ">

  <!-- Header -->
  <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
      <h1 class="text-2xl font-bold text-gray-900">API Keys</h1>
      <p class="text-sm text-gray-600 mt-1">Manage access keys for the Peza API</p>
    </div>
    <button onclick="showCreateModal()"
      {% if active_non_testing_keys >= api_key_limit %}disabled title="API key limit reached for your plan"{% endif %}
      class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
      </svg>
      Create Key
    </button>
  </div>
  <p class="text-xs text-gray-500 mb-4">Active keys: {{ active_non_testing_keys }}/{{ api_key_limit }} (based on your current plan)</p>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Main content: API Keys list -->
    <section class="lg:col-span-2">
      <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-200 flex items-center justify-between">
          <h2 class="text-base font-semibold text-gray-900">Your Keys</h2>
          <span class="text-xs text-gray-500">{{ api_keys.count }} key{{ api_keys.count|pluralize }}</span>
        </div>

        {% if api_keys %}
        <div class="divide-y divide-gray-100">
          {% for key in api_keys %}
          <div class="p-4 hover:bg-gray-50 transition-colors">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
              <div class="flex-1 min-w-0">
                <!-- Name + created -->
                <div class="flex items-center gap-3 mb-2.5">
                  <div class="p-1.5 bg-blue-50 rounded">
                    <svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 015.905-.75 1 1 0 001.937-.5A5.002 5.002 0 0010 2z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <h3 class="font-medium text-gray-900 truncate">{{ key.name }}</h3>
                    <p class="text-xs text-gray-500">Created {{ key.created_at|date:"M d, Y" }}</p>
                  </div>
                </div>

                <!-- Key display -->
                <div class="mb-3">
                  <div class="flex justify-between items-center mb-1 text-xs">
                    <span class="font-medium text-gray-700">API Key</span>
                    <div class="flex gap-3">
                      {% if not key.is_testing %}
                      <button onclick="toggleKeyVisibility({{ key.id }})" class="text-blue-600 hover:text-blue-800 text-xs">
                        <i id="eye-icon-{{ key.id }}" class="fas fa-eye"></i> Show
                      </button>
                      <button onclick="copyToClipboard('{{ key.key }}')" class="text-green-600 hover:text-green-800 text-xs">
                        <i class="fas fa-copy"></i> Copy
                      </button>
                      {% else %}
                      <span class="text-xs px-2 py-0.5 bg-yellow-50 text-yellow-800 rounded">Playground only</span>
                      {% endif %}
                    </div>
                  </div>

                  <div class="relative">
                    <input type="{% if key.is_testing %}text{% else %}password{% endif %}"
                           id="key-{{ key.id }}"
                           value="{% if key.is_testing %}{{ key.key|slice:":6" }}...{% else %}{{ key.key }}{% endif %}"
                           readonly
                           class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded font-mono text-sm pr-28 focus:outline-none">
                    <div class="absolute right-2 top-1/2 -translate-y-1/2">
                      <span class="px-2 py-0.5 text-xs rounded-full {% if key.is_active %}bg-green-100 text-green-800{% else %}bg-gray-100 text-gray-700{% endif %}">
                        {{ key.is_active|yesno:"Active,Inactive" }}
                      </span>
                    </div>
                  </div>
                </div>

                <!-- Usage bar -->
                <div class="mb-4 text-xs">
                  {% if key.is_testing %}
                  <div class="flex justify-between text-gray-600 mb-1">
                    <span>Trials used</span>
                    <span>{{ key.testing_used }} / {{ key.testing_limit }}</span>
                  </div>
                  <div class="bg-gray-200 rounded-full h-1.5 overflow-hidden">
                    <div class="bg-yellow-500 h-full rounded-full"
                         style="width: {% widthratio key.testing_used key.testing_limit 100 %}%"></div>
                  </div>
                  {% else %}
                  <div class="flex justify-between text-gray-600 mb-1">
                    <span>Monthly usage</span>
                    <span>{{ total_requests|default:0 }} req</span>
                  </div>
                  <div class="bg-gray-200 rounded-full h-1.5 overflow-hidden">
                    {% if limit %}
                    <div class="bg-blue-500 h-full rounded-full"
                         style="width: {% widthratio total_requests|default:0 limit|default:100 100 %}%"></div>
                    {% else %}
                    <div class="bg-blue-500 h-full rounded-full" style="width: 0%"></div>
                    {% endif %}
                  </div>
                  {% endif %}
                </div>

                <!-- Actions -->
                <div class="flex flex-wrap gap-2">
                  <form method="POST" action="{% url 'api-keys-management' %}" class="inline">
                    {% csrf_token %}
                    <input type="hidden" name="key_id" value="{{ key.id }}">
                    <input type="hidden" name="action" value="toggle">
                    <button type="submit"
                      class="px-3 py-1.5 text-xs font-medium rounded border {% if key.is_active %}border-yellow-400 text-yellow-700 bg-yellow-50 hover:bg-yellow-100{% else %}border-green-400 text-green-700 bg-green-50 hover:bg-green-100{% endif %}">
                      {{ key.is_active|yesno:"Deactivate,Activate" }}
                    </button>
                  </form>

                  <button onclick="showRenameModal('{{ key.id }}', '{{ key.name|escapejs }}')"
                    class="px-3 py-1.5 text-xs font-medium bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded">
                    Rename
                  </button>

                  <form method="POST" action="{% url 'api-keys-management' %}" class="inline">
                    {% csrf_token %}
                    <input type="hidden" name="key_id" value="{{ key.id }}">
                    <input type="hidden" name="action" value="rotate">
                    <button type="submit" class="px-3 py-1.5 text-xs font-medium text-indigo-700 bg-indigo-50 hover:bg-indigo-100 border border-indigo-300 rounded">
                      Rotate
                    </button>
                  </form>

                  <!-- <form method="POST" action="{% url 'api-keys-management' %}" class="inline" onsubmit="return confirm('Revoke this key?');">
                    {% csrf_token %}
                    <input type="hidden" name="key_id" value="{{ key.id }}">
                    <input type="hidden" name="action" value="revoke">
                    <button type="submit" class="px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 hover:bg-red-100 border border-red-300 rounded">
                      Revoke
                    </button>
                  </form> -->

                  <button onclick="confirmDelete('{{ key.id }}', '{{ key.name|escapejs }}')"
                    class="px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 hover:bg-red-100 border border-red-300 rounded">
                    Delete
                  </button>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>

        {% else %}
        <div class="py-12 px-6 text-center">
          <svg class="w-12 h-12 mx-auto mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
          </svg>
          <h3 class="text-base font-medium text-gray-900">No API keys yet</h3>
          <p class="text-sm text-gray-500 mt-1 mb-4">Create your first key to get started</p>
          <button onclick="showCreateModal()" class="px-5 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
            Create Key
          </button>
        </div>
        {% endif %}
      </div>
    </section>

    <!-- Sidebar -->
    <aside class="space-y-5">

      <!-- Usage summary card -->
      <div class="bg-white border border-gray-200 rounded-lg p-5">
        <h3 class="text-base font-semibold mb-3">Usage Summary</h3>
        {% if plan %}
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-500">Plan</span><span class="font-medium text-gray-900">{{ plan.name }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">Limit</span><span class="text-gray-900">{{ limit|intcomma }} req/mo</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">API Keys</span><span class="text-gray-900">{{ active_non_testing_keys }}/{{ api_key_limit }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">Used</span><span class="text-gray-900">{{ total_requests|default:0|intcomma }}</span>
          </div>
        </div>
        <div class="mt-4">
          <div class="text-xs text-gray-500 mb-1">Usage</div>
          <div class="bg-gray-200 rounded-full h-1.5">
            {% if limit %}
            <div class="bg-blue-600 h-1.5 rounded-full"
                 style="width: {% widthratio total_requests|default:0 limit|default:100 100 %}%"></div>
            {% else %}
            <div class="bg-blue-600 h-1.5 rounded-full" style="width: 0%"></div>
            {% endif %}
          </div>
        </div>
        {% else %}
        <div class="text-center">
          <p class="text-gray-500 mb-2">Free Plan</p>
          <p class="text-xl font-bold text-gray-900 mb-3">100 req / month</p>
          <a href="{% url 'billing-subscription' %}" class="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700">
            Upgrade Plan
          </a>
        </div>
        {% endif %}
      </div>

      <!-- Security tips (shortened) -->
      <div class="bg-white border border-gray-200 rounded-lg p-5">
        <h3 class="text-base font-semibold mb-3">Security Tips</h3>
        <ul class="space-y-2.5 text-sm text-gray-600">
          <li class="flex items-start gap-2">
            <svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM5 9l4 4 6-6" clip-rule="evenodd"/>
            </svg>
            Never commit keys to git
          </li>
          <li class="flex items-start gap-2">
            <svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM5 9l4 4 6-6" clip-rule="evenodd"/>
            </svg>
            Store in environment variables
          </li>
          <li class="flex items-start gap-2">
            <svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM5 9l4 4 6-6" clip-rule="evenodd"/>
            </svg>
            Rotate keys regularly
          </li>
        </ul>
      </div>

    </aside>
  </div>

  <!-- Create Modal (more compact) -->
  <div id="createModal" class="fixed inset-0 z-50 hidden overflow-y-auto bg-gray-600/70">
    <div class="flex min-h-screen items-center justify-center p-4">
      <div class="bg-white rounded-lg w-full max-w-md">
        <form method="POST" action="{% url 'api-keys-management' %}">
          {% csrf_token %}
          <div class="p-5">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-semibold text-gray-900">Create API Key</h3>
              <button type="button" onclick="hideCreateModal()" class="text-gray-500 hover:text-gray-700">
                <svg class="w-6 h-6" 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"/>
                </svg>
              </button>
            </div>
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Key Name</label>
                <input type="text" name="name" required placeholder="e.g. Production Server" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
              </div>
              <div class="bg-blue-50 border border-blue-200 rounded p-3 text-sm text-blue-800">
                The key is shown only once. Copy and store it securely.
              </div>
              {% if active_non_testing_keys >= api_key_limit %}
              <div class="bg-red-50 border border-red-200 rounded p-3 text-sm text-red-700">
                You have reached your plan limit for active API keys ({{ api_key_limit }}). Upgrade your plan to create more keys.
              </div>
              {% endif %}
            </div>
          </div>
          <div class="px-5 py-4 bg-gray-50 border-t flex justify-end gap-3">
            <button type="button" onclick="hideCreateModal()" class="px-4 py-2 text-sm text-gray-700 border rounded-lg hover:bg-gray-50">Cancel</button>
            <button type="submit" name="action" value="create" {% if active_non_testing_keys >= api_key_limit %}disabled{% endif %} class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">Create Key</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Rename, success modals + JS remain mostly unchanged -->

</main>
{% endblock %}

{% block extra_js %}


<script>
// Modal Functions
function showCreateModal() {
    document.getElementById('createModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function hideCreateModal() {
    document.getElementById('createModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

function showRenameModal(keyId, currentName) {
    document.getElementById('renameKeyId').value = keyId;
    document.getElementById('renameKeyName').value = currentName;
    document.getElementById('renameModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    setTimeout(() => document.getElementById('renameKeyName').focus(), 100);
}

function hideRenameModal() {
    document.getElementById('renameModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

function hideSuccessModal() {
    const modal = document.getElementById('successModal');
    if (modal) modal.classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Key Visibility Toggle
function toggleKeyVisibility(keyId) {
    const input = document.getElementById(`key-${keyId}`);
    const eyeIcon = document.getElementById(`eye-icon-${keyId}`);
    
    if (input.type === 'password') {
        input.type = 'text';
        eyeIcon.className = 'fas fa-eye-slash';
        eyeIcon.parentElement.textContent = ' Hide';
    } else {
        input.type = 'password';
        eyeIcon.className = 'fas fa-eye';
        eyeIcon.parentElement.textContent = ' Show';
    }
}

// Confirm Delete
function confirmDelete(keyId, keyName) {
    if (confirm(`Are you sure you want to delete "${keyName}"? This action cannot be undone.`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = "{% url 'api-keys-management' %}";
        
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = 'csrfmiddlewaretoken';
        csrf.value = '{{ csrf_token }}';
        form.appendChild(csrf);
        
        const keyIdInput = document.createElement('input');
        keyIdInput.type = 'hidden';
        keyIdInput.name = 'key_id';
        keyIdInput.value = keyId;
        form.appendChild(keyIdInput);
        
        const actionInput = document.createElement('input');
        actionInput.type = 'hidden';
        actionInput.name = 'action';
        actionInput.value = 'delete';
        form.appendChild(actionInput);
        
        document.body.appendChild(form);
        form.submit();
    }
}

// Show success modal if a key was just created
document.addEventListener('DOMContentLoaded', function() {
    {% if messages %}
        {% for message in messages %}
            {% if 'created' in message|lower %}
            document.getElementById('successModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            {% endif %}
        {% endfor %}
    {% endif %}
});
</script>

{% endblock %}