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

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

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-5">
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">API Playground</h1>
    <p class="text-sm text-gray-600 mt-1">Test Location API requests directly from the dashboard.</p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-lg border border-gray-200 p-5">
      <h2 class="text-lg font-semibold mb-5">Request</h2>

      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1.5">Endpoint</label>
          <select id="endpointSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            {% for ep in playground_endpoints %}
            <option value="{{ ep.id }}" {% if ep.id == selected_ep %}selected{% endif %}>{{ ep.name }} ({{ ep.method }})</option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1.5">Method</label>
          <select id="methodSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></select>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1.5">URL</label>
          <input id="urlInput" type="text" readonly class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm bg-gray-50 text-gray-700">
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1.5">API Key (optional)</label>
          <select id="apiKeySelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <option value="">No key</option>
            {% for key in api_keys %}
            <option value="{{ key.key }}" data-testing="{{ key.is_testing|yesno:'true,false' }}">{{ key.name }}{% if key.is_testing %} (test){% endif %}</option>
            {% endfor %}
          </select>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
          <label class="flex items-center gap-2 text-gray-700"><input type="checkbox" id="includeApiKey" checked> Include <code>X-API-Key</code></label>
          <label class="flex items-center gap-2 text-gray-700"><input type="checkbox" id="allowTestingHeader"> Include <code>X-ALLOW-TESTING: 1</code></label>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1.5">Query Params (one per line: <code>key=value</code>)</label>
          <textarea id="queryParams" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="location=Lilongwe&#10;category=hospital&#10;radius=5000"></textarea>
        </div>

        <div id="fileSection" class="hidden">
          <label class="block text-sm font-medium text-gray-700 mb-1.5">File Upload</label>
          <input id="fileInput" type="file" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white">
        </div>

        <div id="jsonSection">
          <label class="block text-sm font-medium text-gray-700 mb-1.5">JSON Body</label>
          <textarea id="jsonBody" rows="8" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder='{"key":"value"}'></textarea>
        </div>

        <button id="sendBtn" class="w-full bg-black text-white py-2.5 px-4 rounded-lg hover:bg-gray-800 text-sm font-medium">Send Request</button>
      </div>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 p-5">
      <h2 class="text-lg font-semibold mb-5">Response</h2>

      <div class="mb-3 text-sm text-gray-700">
        <div><strong>Status:</strong> <span id="statusText">—</span></div>
        <div><strong>Duration:</strong> <span id="durationText">—</span></div>
      </div>

      <div class="mb-3">
        <h3 class="text-sm font-medium text-gray-700 mb-1">Response Headers</h3>
        <pre id="headersOutput" class="bg-gray-50 border border-gray-200 rounded p-3 text-xs font-mono overflow-x-auto min-h-[80px]">—</pre>
      </div>

      <div>
        <h3 class="text-sm font-medium text-gray-700 mb-1">Response Body</h3>
        <pre id="bodyOutput" class="bg-gray-900 text-green-300 rounded p-3 text-xs font-mono overflow-x-auto min-h-[320px]">No response yet.</pre>
      </div>
    </div>
  </div>
</div>

{{ playground_endpoints|json_script:"playground-endpoints-data" }}
<script>
(function () {
  const endpointData = JSON.parse(document.getElementById('playground-endpoints-data').textContent);
  const endpointSelect = document.getElementById('endpointSelect');
  const methodSelect = document.getElementById('methodSelect');
  const urlInput = document.getElementById('urlInput');
  const apiKeySelect = document.getElementById('apiKeySelect');
  const includeApiKey = document.getElementById('includeApiKey');
  const allowTestingHeader = document.getElementById('allowTestingHeader');
  const queryParams = document.getElementById('queryParams');
  const jsonBody = document.getElementById('jsonBody');
  const jsonSection = document.getElementById('jsonSection');
  const fileSection = document.getElementById('fileSection');
  const fileInput = document.getElementById('fileInput');
  const sendBtn = document.getElementById('sendBtn');
  const statusText = document.getElementById('statusText');
  const durationText = document.getElementById('durationText');
  const headersOutput = document.getElementById('headersOutput');
  const bodyOutput = document.getElementById('bodyOutput');

  function getEndpoint(id) {
    return endpointData.find(ep => ep.id === id) || endpointData[0];
  }

  function getCsrfToken() {
    const name = 'csrftoken=';
    const parts = document.cookie.split(';');
    for (let part of parts) {
      part = part.trim();
      if (part.startsWith(name)) return decodeURIComponent(part.slice(name.length));
    }
    return '';
  }

  function parseParams(text) {
    const params = new URLSearchParams();
    text.split('\n').forEach(line => {
      const s = line.trim();
      if (!s) return;
      const idx = s.indexOf('=');
      if (idx < 0) return;
      const k = s.slice(0, idx).trim();
      const v = s.slice(idx + 1).trim();
      if (k) params.append(k, v);
    });
    return params;
  }

  function prettyPrintJson(obj) {
    try {
      return JSON.stringify(obj, null, 2);
    } catch (_) {
      return String(obj);
    }
  }

  function selectedKeyIsTesting() {
    const option = apiKeySelect.options[apiKeySelect.selectedIndex];
    return !!(option && option.dataset && option.dataset.testing === 'true');
  }

  function updateUiForEndpoint() {
    const ep = getEndpoint(endpointSelect.value);
    methodSelect.innerHTML = '';
    const methods = ep.method === 'GET/POST' ? ['GET', 'POST'] : [ep.method];
    methods.forEach(m => {
      const opt = document.createElement('option');
      opt.value = m;
      opt.textContent = m;
      methodSelect.appendChild(opt);
    });

    if (ep.id === 'find-locations') {
      jsonBody.value = '{\n  "location": "Lilongwe",\n  "category": "hospital"\n}';
    } else {
      jsonBody.value = '{}';
    }

    const base = "{{ base_url }}";
    urlInput.value = `${base}${ep.endpoint}`;

    const isFile = !!ep.file_upload;
    fileSection.classList.toggle('hidden', !isFile);
    jsonSection.classList.toggle('hidden', isFile);
  }

  endpointSelect.addEventListener('change', updateUiForEndpoint);
  apiKeySelect.addEventListener('change', function () {
    if (selectedKeyIsTesting()) {
      allowTestingHeader.checked = true;
    }
  });

  sendBtn.addEventListener('click', async function () {
    const ep = getEndpoint(endpointSelect.value);
    const method = methodSelect.value;
    const params = parseParams(queryParams.value);
    let url = `${urlInput.value}`;
    const query = params.toString();
    if (query) url += `?${query}`;

    const headers = {};
    if (includeApiKey.checked && apiKeySelect.value) {
      headers['X-API-Key'] = apiKeySelect.value;
    }
    if (selectedKeyIsTesting()) {
      headers['X-ALLOW-TESTING'] = '1';
      allowTestingHeader.checked = true;
    } else if (allowTestingHeader.checked) {
      headers['X-ALLOW-TESTING'] = '1';
    }

    const csrf = getCsrfToken();
    if (csrf) headers['X-CSRFToken'] = csrf;

    const opts = { method, headers };

    if (ep.file_upload) {
      if (!fileInput.files || !fileInput.files[0]) {
        bodyOutput.textContent = 'Select a file first.';
        return;
      }
      const fd = new FormData();
      fd.append(ep.file_field || 'file', fileInput.files[0]);
      opts.body = fd;
    } else if (method === 'POST') {
      let payload = {};
      const raw = jsonBody.value.trim();
      if (raw) {
        try {
          payload = JSON.parse(raw);
        } catch (err) {
          bodyOutput.textContent = `Invalid JSON: ${err.message}`;
          return;
        }
      }
      headers['Content-Type'] = 'application/json';
      opts.body = JSON.stringify(payload);
    }

    statusText.textContent = 'Loading...';
    durationText.textContent = '...';
    headersOutput.textContent = '...';
    bodyOutput.textContent = 'Sending request...';

    const t0 = performance.now();
    try {
      const res = await fetch(url, opts);
      const t1 = performance.now();
      statusText.textContent = `${res.status} ${res.statusText}`;
      durationText.textContent = `${Math.round(t1 - t0)} ms`;

      const headersObj = {};
      res.headers.forEach((v, k) => { headersObj[k] = v; });
      headersOutput.textContent = prettyPrintJson(headersObj);

      const contentType = (res.headers.get('content-type') || '').toLowerCase();
      if (contentType.includes('application/json')) {
        const data = await res.json();
        bodyOutput.textContent = prettyPrintJson(data);
      } else {
        const text = await res.text();
        bodyOutput.textContent = text || '(empty response)';
      }
    } catch (err) {
      statusText.textContent = 'Request error';
      durationText.textContent = '—';
      headersOutput.textContent = '—';
      bodyOutput.textContent = String(err);
    }
  });

  updateUiForEndpoint();
})();
</script>
{% endblock %}