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

{% block title %}Local Data Enrichment Playground{% endblock %}
{% block breadcrumb %}Local Enrichment Playground{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-6">
  <div class="flex flex-col lg:flex-row gap-6">
    <section class="lg:w-1/2">
      <div class="fluent-card p-5">
        <h1 class="text-title mb-2">Local Data Enrichment Playground</h1>
        <p class="text-body text-gray-600 mb-4">Test district, T/A, village, postal-area, and phone lookup endpoints.</p>

        <div class="mb-4">
          <label class="form-label">API Key</label>
          <select id="apiKey" class="fluent-input w-full">
            <option value="">Select an API 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 %} (playground){% endif %} ({{ key.key|slice:":6" }}...)</option>
            {% endfor %}
          </select>
          <div id="apiKeyHint" class="form-hint">Testing keys automatically include the playground header.</div>
        </div>

        <div class="mb-4">
          <label class="form-label">Endpoint</label>
          <select id="endpointSelect" class="fluent-input w-full">
            <option value="/api/local/districts/" data-method="GET">Districts (GET)</option>
            <option value="/api/local/traditional-authorities/" data-method="GET">Traditional Authorities (GET)</option>
            <option value="/api/local/villages/" data-method="GET">Villages (GET)</option>
            <option value="/api/local/postal-areas/" data-method="GET">Postal Areas (GET)</option>
            <option value="/api/local/lookup/" data-method="GET">Hierarchy Lookup (GET)</option>
            <option value="/api/local/phone/validate/" data-method="POST">Phone Validation (POST)</option>
            <option value="/api/local/bulk/search/" data-method="POST">Bulk Search (POST)</option>
          </select>
        </div>

        <div class="mb-4">
          <label class="form-label">Query Params (for GET)</label>
          <input id="queryParams" class="fluent-input w-full" placeholder="e.g. q=Lilongwe&district=LLW" />
          <div class="form-hint">Leave blank for defaults. Example: <code>district=Lilongwe</code>.</div>
        </div>

        <div class="mb-4">
          <label class="form-label">JSON Body (for POST)</label>
          <textarea id="jsonBody" class="fluent-input w-full" rows="6">{"phone": "+265 99 123 4567"}</textarea>
          <div class="form-hint">Used for POST endpoints like phone validation or bulk search.</div>
        </div>

        <div class="flex gap-2">
          <button id="sendBtn" type="button" class="fluent-btn fluent-btn-primary">Send Request</button>
          <button id="sampleBtn" type="button" class="fluent-btn">Load Sample</button>
        </div>
      </div>
    </section>

    <section class="lg:w-1/2">
      <div class="fluent-card p-5">
        <h2 class="text-subtitle mb-2">Response</h2>
        <div class="mb-3 text-sm text-gray-700 space-y-1">
          <div><strong>Status:</strong> <span id="statusOutput">—</span></div>
          <div><strong>Duration:</strong> <span id="durationOutput">—</span></div>
        </div>

        <div class="mb-3">
          <h3 class="text-sm font-medium text-gray-700 mb-2">Response Headers</h3>
          <div class="code-block" style="min-height: 120px; max-height: 220px; overflow: auto;">
            <pre id="headersOutput" class="line">—</pre>
          </div>
        </div>

        <div class="mb-3">
          <h3 class="text-sm font-medium text-gray-700 mb-2">Response Body</h3>
          <div class="code-block" style="min-height: 320px; max-height: 520px; overflow: auto;">
            <pre id="responseOutput" class="line">No response yet.</pre>
          </div>
        </div>

        <div>
          <h3 class="text-sm font-medium text-gray-700 mb-2">HTTP Transcript</h3>
          <div class="code-block" style="min-height: 240px; max-height: 520px; overflow: auto;">
            <pre id="httpTranscriptOutput" class="line">No response yet.</pre>
          </div>
        </div>
      </div>

      <div class="fluent-card p-5 mt-5">
        <h2 class="text-subtitle mb-2">Quick Examples</h2>
        <ul class="text-body text-gray-700 space-y-1">
          <li><code class="font-mono">GET /api/local/districts/?q=Blantyre</code></li>
          <li><code class="font-mono">GET /api/local/traditional-authorities/?district=Lilongwe</code></li>
          <li><code class="font-mono">GET /api/local/villages/?ta=Kalumbu</code></li>
          <li><code class="font-mono">GET /api/local/postal-areas/?q=Area&type=township</code></li>
          <li><code class="font-mono">POST /api/local/phone/validate/</code></li>
          <li><code class="font-mono">POST /api/local/bulk/search/</code></li>
        </ul>
      </div>
    </section>
  </div>
</main>

<script>
  const baseUrl = "{{ base_url }}";
  const endpointSelect = document.getElementById('endpointSelect');
  const queryParams = document.getElementById('queryParams');
  const jsonBody = document.getElementById('jsonBody');
  const apiKey = document.getElementById('apiKey');
  const apiKeyHint = document.getElementById('apiKeyHint');
  const responseOutput = document.getElementById('responseOutput');
  const headersOutput = document.getElementById('headersOutput');
  const httpTranscriptOutput = document.getElementById('httpTranscriptOutput');
  const statusOutput = document.getElementById('statusOutput');
  const durationOutput = document.getElementById('durationOutput');
  const sendBtn = document.getElementById('sendBtn');
  const sampleBtn = document.getElementById('sampleBtn');

  const samples = {
    "/api/local/districts/": { method: "GET", params: "q=Lilongwe", body: "{}" },
    "/api/local/traditional-authorities/": { method: "GET", params: "district=Lilongwe", body: "{}" },
    "/api/local/villages/": { method: "GET", params: "ta=Kalumbu", body: "{}" },
    "/api/local/postal-areas/": { method: "GET", params: "q=Area&type=township", body: "{}" },
    "/api/local/lookup/": { method: "GET", params: "district=Lilongwe&ta=Kalumbu", body: "{}" },
    "/api/local/phone/validate/": { method: "POST", params: "", body: "{\"phone\": \"+265 99 123 4567\"}" },
    "/api/local/bulk/search/": { method: "POST", params: "", body: "{\"districts\":[\"Lilongwe\"],\"traditional_authorities\":[\"Kalumbu\"],\"villages\":[\"Area 10\"],\"postal_areas\":[\"Ndirande\"],\"limit\":5}" },
  };

  function updateSample() {
    const endpoint = endpointSelect.value;
    const sample = samples[endpoint];
    if (!sample) return;
    queryParams.value = sample.params;
    jsonBody.value = sample.body;
  }

  function prettyPrint(value) {
    if (typeof value === 'string') return value;
    try {
      return JSON.stringify(value, null, 2);
    } catch (err) {
      return String(value);
    }
  }

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

  function updateApiKeyHint() {
    apiKeyHint.textContent = selectedKeyIsTesting()
      ? 'Playground key selected. The testing header will be sent automatically.'
      : 'Live keys send a normal authenticated request.';
  }

  function buildHttpTranscript(res, responseHeaders, payload) {
    const statusLine = `HTTP ${res.status} ${res.statusText}`.trim();
    const headerLines = Object.entries(responseHeaders).map(([name, value]) => `${name}: ${value}`);
    const body = typeof payload === 'string' ? payload : prettyPrint(payload);
    return [statusLine, ...headerLines, '', body].join('\n');
  }

  endpointSelect.addEventListener('change', updateSample);
  sampleBtn.addEventListener('click', updateSample);
  apiKey.addEventListener('change', updateApiKeyHint);

  sendBtn.addEventListener('click', async () => {
    const endpoint = endpointSelect.value;
    const method = endpointSelect.options[endpointSelect.selectedIndex].dataset.method || 'GET';
    const key = apiKey.value;

    if (!key) {
      statusOutput.textContent = 'Missing API key';
      durationOutput.textContent = '—';
      headersOutput.textContent = '—';
      httpTranscriptOutput.textContent = '—';
      responseOutput.textContent = JSON.stringify({ error: "Select an API key" }, null, 2);
      return;
    }

    let url = baseUrl + endpoint;
    if (method === 'GET' && queryParams.value.trim()) {
      url += "?" + queryParams.value.trim();
    }

    const options = {
      method,
      headers: {
        'X-API-Key': key,
        'Content-Type': 'application/json',
      }
    };

    if (selectedKeyIsTesting()) {
      options.headers['X-ALLOW-TESTING'] = '1';
    }

    if (method !== 'GET') {
      try {
        options.body = JSON.stringify(JSON.parse(jsonBody.value || '{}'));
      } catch (err) {
        statusOutput.textContent = 'Invalid request';
        durationOutput.textContent = '—';
        headersOutput.textContent = '—';
        httpTranscriptOutput.textContent = '—';
        responseOutput.textContent = JSON.stringify({ error: "Invalid JSON body" }, null, 2);
        return;
      }
    }

    statusOutput.textContent = 'Loading...';
    durationOutput.textContent = '...';
    headersOutput.textContent = '...';
    httpTranscriptOutput.textContent = '...';
    responseOutput.textContent = "Sending request...";
    const start = performance.now();
    try {
      const res = await fetch(url, options);
      const duration = Math.round(performance.now() - start);
      const contentType = res.headers.get('content-type') || '';
      const responseHeaders = {};
      res.headers.forEach((value, name) => {
        responseHeaders[name] = value;
      });
      let payload;
      if (contentType.includes('application/json')) {
        payload = await res.json();
      } else {
        payload = await res.text();
      }
      statusOutput.textContent = `${res.status} ${res.statusText}`;
      durationOutput.textContent = `${duration} ms`;
      headersOutput.textContent = prettyPrint(responseHeaders);
      responseOutput.textContent = prettyPrint(payload);
      httpTranscriptOutput.textContent = buildHttpTranscript(res, responseHeaders, payload);
    } catch (err) {
      statusOutput.textContent = 'Request error';
      durationOutput.textContent = '—';
      headersOutput.textContent = '—';
      httpTranscriptOutput.textContent = '—';
      responseOutput.textContent = JSON.stringify({ error: err.message }, null, 2);
    }
  });

  updateSample();
  updateApiKeyHint();
</script>
{% endblock %}