@extends('layouts.dash')
@section('title', 'Test API')
@section('content')
<div class="page-head">
  <div><h1>Test API Live</h1><p>Pick a key — its API loads automatically. Each test uses credits.</p></div>
</div>

@if($keys->isEmpty())
<div class="card"><div class="empty"><i class="fa-solid fa-key"></i><b>No keys found</b><br><br><a class="btn btn-primary" href="{{ route('user.keys') }}">Go to Keys</a></div></div>
@else
@php
  $map = [];
  foreach ($keys as $k) { if ($k->service) $map[$k->id] = ['name' => $k->service->name, 'slug' => $k->service->slug, 'credits' => (int) $k->service->credits_per_hit, 'params' => $k->service->paramList()]; }
@endphp
<div class="grid-2" style="grid-template-columns:1fr 1.2fr">
  <div class="card">
    <div class="card-title"><i class="fa-solid fa-sliders"></i>Request Builder</div>
    <form method="POST" action="{{ route('user.test.run') }}">
      @csrf
      <div class="form-group">
        <label>Select API Key</label>
        <select name="key_id" class="form-control" id="keySel" required>
          @foreach($keys as $k)
            <option value="{{ $k->id }}" {{ $selKey == $k->id ? 'selected' : '' }}>{{ $k->service->name ?? $k->label }} — {{ number_format($k->remaining()) }} left</option>
          @endforeach
        </select>
      </div>
      <div class="alert alert-info"><i class="fa-solid fa-plug"></i><div>Endpoint: <span class="mono" id="epLine">—</span></div></div>
      <div id="paramBox"></div>
      <button class="btn btn-primary btn-block btn-lg" type="submit"><i class="fa-solid fa-play"></i>Send Request</button>
    </form>
  </div>
  <div class="card">
    <div class="card-title"><i class="fa-solid fa-terminal"></i>Response</div>
    @if(!$result)
      <div class="empty"><i class="fa-solid fa-paper-plane"></i><b>No request yet</b>Build a request and hit Send.</div>
    @else
      <div class="flex wrap-x gap mb">
        {!! badge($result['ok'] ? 'success' : 'error') !!}
        <span class="mini-tag">HTTP {{ (int) $result['code'] }}</span>
        <span class="mini-tag"><i class="fa-solid fa-stopwatch"></i> {{ (int) $result['ms'] }} ms</span>
        <span class="mini-tag blue">{{ (int) $result['credits'] }} credit used</span>
      </div>
      <div class="code-box"><div class="code-head"><span>JSON</span><button type="button" onclick="copyText(document.getElementById('resBody').innerText, this)">Copy</button></div><pre id="resBody">{{ $result['body'] ?: ($result['err'] ?: '(empty response)') }}</pre></div>
    @endif
  </div>
</div>
@push('scripts')
<script>
var KMAP = @json($map);
var posted = @json($posted);
var keySel = document.getElementById('keySel');
function buildParams() {
  var k = KMAP[keySel.value];
  var box = document.getElementById('paramBox');
  document.getElementById('epLine').textContent = '{{ url('/api') }}/' + k.slug;
  box.innerHTML = '';
  if (!k.params.length) { box.innerHTML = '<div class="alert alert-info"><i class="fa-solid fa-circle-info"></i><div>No parameters needed.</div></div>'; return; }
  k.params.forEach(function (p) {
    var v = posted[p.name] || '';
    var div = document.createElement('div');
    div.className = 'form-group';
    div.innerHTML = '<label>' + esc(p.label || p.name) + (p.required ? ' <span class="req">*</span>' : '') + '</label>' +
      '<input type="text" class="form-control mono" name="p[' + esc(p.name) + ']" placeholder="' + esc(p.placeholder || p.name) + '" value="' + esc(v) + '"' + (p.required ? ' required' : '') + '>';
    box.appendChild(div);
  });
}
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }
keySel.addEventListener('change', function () { posted = {}; buildParams(); });
buildParams();
</script>
@endpush
@endif
@endsection