{% extends 'partials/base.html' %} {% load humanize %} {% block content %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="p-3 sm:p-4 lg:p-6 pb-32 overflow-y-auto h-full text-xs sm:text-sm">
  <div class="bg-gradient-to-br from-slate-50 via-orange-50 to-indigo-100 dark:from-gray-900 dark:via-slate-800 dark:to-gray-900 px-2 sm:px-6 lg:px-8 py-6">
    <div class="mx-auto">

      <!-- Header -->
      <div class="flex items-center justify-between mb-4">
        <div>
          <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
            Logs <span class="text-orange-600 dark:text-orange-400">API</span>
          </h1>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
            Browse categories and products, buy logs, and check your balance
          </p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="w-8 h-8 bg-gradient-to-r from-orange-500 to-red-500 rounded-full flex items-center justify-center">
            <span class="text-white text-sm font-medium">T</span>
          </div>
        </div>
      </div>

      <!-- API Key Panel -->
      <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-6 mb-8">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base font-semibold text-gray-900 dark:text-white">Your API Key</h2>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">Active</span>
        </div>

        <div class="flex flex-col sm:flex-row sm:items-center gap-3">
          <div class="flex-1 flex items-center bg-gray-50/50 dark:bg-gray-700/50 border border-gray-200/50 dark:border-gray-700/50 rounded-xl px-4 py-3">
            <code id="apiKey" data-key="{{ api_key }}" class="flex-1 text-sm font-mono text-gray-900 dark:text-white truncate select-all">
              &bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;
            </code>
            <button type="button" id="toggleKey" title="Show / hide"
              class="ml-2 w-8 h-8 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center transition-colors flex-shrink-0">
              <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            </button>
            <button type="button" id="copyKey" title="Copy"
              class="ml-2 w-8 h-8 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center transition-colors flex-shrink-0">
              <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
            </button>
          </div>

          <button type="button" id="regenBtn"
            class="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-5 py-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg flex items-center justify-center space-x-2 flex-shrink-0">
            <svg id="regenIcon" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
            <span class="text-sm font-medium">Regenerate</span>
          </button>
        </div>

        <p class="text-xs text-gray-400 dark:text-gray-500 mt-3">
          Send this key as a header on every request: <code class="font-mono text-orange-600 dark:text-orange-400">Authorization: Bearer &lt;API_KEY&gt;</code>.
          Regenerating immediately invalidates the current key.
        </p>
      </div>

      <!-- Confirm Regenerate Modal -->
      <div id="regenModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
        <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 shadow-xl w-full max-w-sm p-6">
          <div class="w-10 h-10 rounded-xl bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center mb-4">
            <svg class="w-5 h-5 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </div>
          <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-1">Regenerate API key?</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-5">Your current key stops working right away. Any app using it will need the new key.</p>
          <div class="flex space-x-3">
            <button type="button" id="regenCancel" class="flex-1 px-4 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium transition-colors">Cancel</button>
            <button type="button" id="regenConfirm" class="flex-1 px-4 py-2 rounded-xl bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white text-sm font-medium transition-colors">Regenerate</button>
          </div>
        </div>
      </div>

      <!-- Getting Started -->
      <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-6 mb-8">
        <h2 class="text-base font-semibold text-gray-900 dark:text-white mb-3">Getting Started</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
          All endpoints are served under the base URL below. Requests and responses are JSON. Authenticate with your API key in the <code class="font-mono text-orange-600 dark:text-orange-400">Authorization</code> header.
        </p>
        <div class="bg-gray-900 rounded-xl p-4 overflow-x-auto">
          <pre class="text-xs text-gray-100 font-mono"><span class="text-emerald-400">BASE URL</span>  https://{{ request.get_host|default:"api.thespeedkeys.com" }}/api/v1
<span class="text-emerald-400">HEADER</span>    Authorization: Bearer &lt;API_KEY&gt;</pre>
        </div>
      </div>

      <!-- Endpoints -->
      <div class="space-y-4">

        <!-- GET categories -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center space-x-3">
            <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">GET</span>
            <code class="text-sm font-mono text-gray-900 dark:text-white">/categories</code>
            <span class="text-xs text-gray-400 dark:text-gray-500 hidden sm:inline">List all product categories</span>
          </div>
          <div class="p-6 space-y-4">
            <div>
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Response 200</p>
              <div class="bg-gray-900 rounded-xl p-4 overflow-x-auto"><pre class="text-xs text-gray-100 font-mono">{
  "count": 3,
  "results": [
    { "id": 1, "name": "Facebook", "slug": "facebook", "product_count": 42 },
    { "id": 2, "name": "Instagram",        "slug": "instagram",        "product_count": 87 },
    { "id": 3, "name": "Tiktok",        "slug": "tiktok",        "product_count": 25 }
  ]
}</pre></div>
            </div>
          </div>
        </div>

        <!-- GET products -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center space-x-3">
            <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">GET</span>
            <code class="text-sm font-mono text-gray-900 dark:text-white">/products</code>
            <span class="text-xs text-gray-400 dark:text-gray-500 hidden sm:inline">List products, optionally filtered by category</span>
          </div>
          <div class="p-6 space-y-4">
            <div>
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Query Parameters</p>
              <table class="min-w-full text-sm">
                <tbody class="divide-y divide-gray-200/50 dark:divide-gray-700/50">
                  <tr><td class="py-2 pr-4 font-mono text-orange-600 dark:text-orange-400">category</td><td class="py-2 pr-4 text-gray-400">int &middot; optional</td><td class="py-2 text-gray-600 dark:text-gray-300">Filter by category id</td></tr>
                  <tr><td class="py-2 pr-4 font-mono text-orange-600 dark:text-orange-400">in_stock</td><td class="py-2 pr-4 text-gray-400">bool &middot; optional</td><td class="py-2 text-gray-600 dark:text-gray-300">Only products with keys available</td></tr>
                  <tr><td class="py-2 pr-4 font-mono text-orange-600 dark:text-orange-400">page</td><td class="py-2 pr-4 text-gray-400">int &middot; optional</td><td class="py-2 text-gray-600 dark:text-gray-300">Page number (default 1)</td></tr>
                </tbody>
              </table>
            </div>
            <div>
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Response 200</p>
              <div class="bg-gray-900 rounded-xl p-4 overflow-x-auto"><pre class="text-xs text-gray-100 font-mono">{
  "count": 42,
  "results": [
    {
      "id": 128,
      "name": "Facebook 2025",
      "category_id": 1,
      "price": "3500.00",
      "stock": 57,
      "in_stock": true
    }
  ]
}</pre></div>
            </div>
          </div>
        </div>

        <!-- POST buy -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center space-x-3">
            <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">POST</span>
            <code class="text-sm font-mono text-gray-900 dark:text-white">/buy</code>
            <span class="text-xs text-gray-400 dark:text-gray-500 hidden sm:inline">Buy product keys; charges your wallet</span>
          </div>
          <div class="p-6 space-y-4">
            <div>
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Body (JSON)</p>
              <table class="min-w-full text-sm mb-3">
                <tbody class="divide-y divide-gray-200/50 dark:divide-gray-700/50">
                  <tr><td class="py-2 pr-4 font-mono text-orange-600 dark:text-orange-400">product</td><td class="py-2 pr-4 text-gray-400">int</td><td class="py-2 text-gray-600 dark:text-gray-300">Product id to purchase</td></tr>
                  <tr><td class="py-2 pr-4 font-mono text-orange-600 dark:text-orange-400">quantity</td><td class="py-2 pr-4 text-gray-400">int &middot; optional</td><td class="py-2 text-gray-600 dark:text-gray-300">Number of keys (default 1)</td></tr>
                </tbody>
              </table>
              <div class="bg-gray-900 rounded-xl p-4 overflow-x-auto"><pre class="text-xs text-gray-100 font-mono">{
  "product": 128,
  "quantity": 2
}</pre></div>
            </div>
            <div>
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Response 201</p>
              <div class="bg-gray-900 rounded-xl p-4 overflow-x-auto"><pre class="text-xs text-gray-100 font-mono">{
  "order_id": 77213,
  "product": "Facebook 2025",
  "quantity": 2,
  "charge": "7000.00",
  "keys": [
    "XXXXX-XXXXX-XXXXX-XXXXX-11111",
    "XXXXX-XXXXX-XXXXX-XXXXX-22222"
  ]
}</pre></div>
              <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">The purchased keys are returned once, in this response. Store them &mdash; retrieve later from your order history.</p>
            </div>
          </div>
        </div>

        <!-- GET balance -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center space-x-3">
            <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">GET</span>
            <code class="text-sm font-mono text-gray-900 dark:text-white">/balance</code>
            <span class="text-xs text-gray-400 dark:text-gray-500 hidden sm:inline">Check your wallet balance</span>
          </div>
          <div class="p-6 space-y-4">
            <div>
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Response 200</p>
              <div class="bg-gray-900 rounded-xl p-4 overflow-x-auto"><pre class="text-xs text-gray-100 font-mono">{
  "balance": "12500.00",
  "currency": "NGN"
}</pre></div>
            </div>
          </div>
        </div>

        <!-- Errors -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-6">
          <h2 class="text-base font-semibold text-gray-900 dark:text-white mb-3">Error Format</h2>
          <div class="bg-gray-900 rounded-xl p-4 overflow-x-auto mb-4"><pre class="text-xs text-gray-100 font-mono">{
  "error": "insufficient_balance",
  "detail": "Wallet balance is too low for this order."
}</pre></div>
          <table class="min-w-full text-sm">
            <tbody class="divide-y divide-gray-200/50 dark:divide-gray-700/50">
              <tr><td class="py-2 pr-4 font-mono text-rose-600 dark:text-rose-400">401</td><td class="py-2 text-gray-600 dark:text-gray-300">Missing or invalid API key</td></tr>
              <tr><td class="py-2 pr-4 font-mono text-rose-600 dark:text-rose-400">402</td><td class="py-2 text-gray-600 dark:text-gray-300">Insufficient wallet balance</td></tr>
              <tr><td class="py-2 pr-4 font-mono text-rose-600 dark:text-rose-400">404</td><td class="py-2 text-gray-600 dark:text-gray-300">Product or category not found</td></tr>
              <tr><td class="py-2 pr-4 font-mono text-rose-600 dark:text-rose-400">409</td><td class="py-2 text-gray-600 dark:text-gray-300">Out of stock / not enough keys</td></tr>
              <tr><td class="py-2 pr-4 font-mono text-rose-600 dark:text-rose-400">429</td><td class="py-2 text-gray-600 dark:text-gray-300">Rate limit exceeded</td></tr>
            </tbody>
          </table>
        </div>

      </div>

    </div>
  </div>

  <!-- Requires jQuery loaded on the page -->
  <script>
    $(function () {
      var $key = $('#apiKey');
      var realKey = $key.data('key') ? String($key.data('key')) : '';
      var masked = $key.text().trim();
      var revealed = false;

      function csrftoken() {
        var m = document.cookie.match(/csrftoken=([^;]+)/);
        return m ? m[1] : '{{ csrf_token }}';
      }

      $('#toggleKey').on('click', function () {
        revealed = !revealed;
        $key.text(revealed && realKey ? realKey : masked);
      });

      $('#copyKey').on('click', function () {
        var $btn = $(this);
        navigator.clipboard.writeText(realKey || $key.text().trim()).then(function () {
          var html = $btn.html();
          $btn.html('<svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>');
          setTimeout(function () { $btn.html(html); }, 1500);
        });
      });

      var $modal = $('#regenModal');
      $('#regenBtn').on('click', function () { $modal.removeClass('hidden'); });
      $('#regenCancel').on('click', function () { $modal.addClass('hidden'); });
      $modal.on('click', function (e) { if (e.target === this) $modal.addClass('hidden'); });

      $('#regenConfirm').on('click', function () {
        var $btn = $(this).prop('disabled', true).text('Regenerating...');
        $('#regenIcon').addClass('animate-spin');
        $.ajax({
          url: '{% url "api_key_regenerate" %}',
          method: 'POST',
          dataType: 'json',
          headers: { 'X-CSRFToken': csrftoken(), 'X-Requested-With': 'XMLHttpRequest' }
        }).done(function (data) {
          if (data && data.api_key) {
            realKey = String(data.api_key);
            revealed = true;
            $key.text(realKey);
            $modal.addClass('hidden');
          } else {
            alert((data && data.detail) || 'Could not regenerate key.');
          }
        }).fail(function () {
          alert('Could not regenerate key. Try again.');
        }).always(function () {
          $btn.prop('disabled', false).text('Regenerate');
          $('#regenIcon').removeClass('animate-spin');
        });
      });
    });
  </script>
</div>

{% endblock content %}