@extends('layouts.app')
@section('title', 'API Documentation')
@section('active', 'docs')
@section('content')
<div class="wrap page docs-page">
  <div class="docs-hero">
    <div>
      <span class="docs-eyebrow"><i class="fa-solid fa-book-open"></i> Developer hub</span>
      <h1>Build faster with <span>clear APIs.</span></h1>
      <p>Everything you need to authenticate, send your first request and ship with confidence.</p>
    </div>
    <div class="docs-hero-meta"><span><i class="fa-solid fa-circle-check"></i> Live reference</span><span><i class="fa-solid fa-clock"></i> Updated continuously</span></div>
  </div>

  <div class="card mb docs-quickstart">
    <div class="docs-card-heading"><div><span class="docs-step">01</span><div><div class="card-title"><i class="fa-solid fa-plug"></i>Connect to an API</div><p>Send your API key in the request header and pass only API parameters in the URL.</p></div></div><a class="btn btn-primary btn-sm" href="{{ route('register') }}"><i class="fa-solid fa-key"></i> Get free key</a></div>
    <div class="endpoint-line"><span class="method">GET</span><span>{{ url('/api') }}/{service}?param=value</span>
      <button type="button" class="copy-btn" onclick="copyText('{{ url('/api') }}/{service}?param=value', this)"><i class="fa-solid fa-copy"></i></button>
    </div>
    <div class="alert alert-info mt" style="margin-bottom:0"><i class="fa-solid fa-shield-halved"></i><div><b>Recommended:</b> send your key in <span class="mono">X-API-KEY</span> or <span class="mono">Authorization: Bearer …</span>. Query-string keys remain supported for older clients, but URLs can be recorded in browser history and server access logs.</div></div>
    <div class="grid-3 mt">
      <div class="alert alert-info" style="margin:0"><i class="fa-solid fa-1"></i><div><b>{service}</b> — API slug from the URL below</div></div>
      <div class="alert alert-info" style="margin:0"><i class="fa-solid fa-2"></i><div><b>X-API-KEY</b> — send your key in the request header</div></div>
      <div class="alert alert-info" style="margin:0"><i class="fa-solid fa-3"></i><div><b>params</b> — API parameters listed below</div></div>
    </div>
    <div class="alert alert-warning mt" style="margin-bottom:0"><i class="fa-solid fa-triangle-exclamation"></i><div><b>Rate limit:</b> {{ (int) $rateLimit }} requests/minute per key • {{ (int) setting('api_ip_rate_limit',120) }} req/min per IP • Credit cost shown per API.</div></div>
  </div>

  @if($services->isEmpty())
    <div class="card"><div class="empty"><i class="fa-solid fa-book-open"></i><b>No APIs published yet</b>Please check back soon.</div></div>
  @else
  <button class="docs-sidebar-toggle" type="button" aria-controls="docsSidebar" aria-expanded="false"><i class="fa-solid fa-bars-staggered"></i><span>Browse menu</span><i class="fa-solid fa-chevron-right"></i></button>
  <div class="docs-overlay" data-docs-close></div>
  <div class="docs-layout">
    <aside class="docs-nav" id="docsSidebar" aria-label="Documentation navigation">
      <div class="docs-nav-head"><div><span class="docs-nav-kicker">Contents</span><strong>API reference</strong></div><button type="button" class="docs-nav-close" data-docs-close aria-label="Close API navigation"><i class="fa-solid fa-xmark"></i></button></div>
      <div class="docs-site-menu">
        <div class="docs-menu-label">Site menu</div>
        <a href="{{ route('home') }}"><i class="fa-solid fa-house"></i><span>Home</span></a>
        <a href="{{ route('home') }}#services"><i class="fa-solid fa-layer-group"></i><span>APIs</span></a>
        <a href="{{ route('home') }}#pricing"><i class="fa-solid fa-tags"></i><span>Pricing</span></a>
        <a href="{{ route('docs') }}" class="current"><i class="fa-solid fa-book"></i><span>Docs</span></a>
        <a href="{{ route('status') }}"><i class="fa-solid fa-signal"></i><span>Status</span></a>
        <div class="docs-menu-actions"><a href="{{ route('login') }}" class="btn btn-outline btn-sm"><i class="fa-solid fa-right-to-bracket"></i> Login</a><a href="{{ route('register') }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-rocket"></i> Get Started</a></div>
      </div>
      <div class="side-label" style="padding-top:4px">APIs ({{ $services->count() }})</div>
      @foreach($services as $s)
        <a href="#{{ $s->slug }}" class="docs-nav-link"><i class="fa-solid {{ $s->icon ?: 'fa-plug' }}"></i><span>{{ $s->name }}</span><i class="fa-solid fa-arrow-right nav-link-arrow"></i></a>
      @endforeach
      <hr style="border:none;border-top:1px solid var(--border);margin:14px 0">
      <div class="docs-nav-tip"><i class="fa-solid fa-lightbulb"></i><div><b>Quick tip</b><span>Copy any code sample with one click.</span></div></div>
    </aside>
    <div class="docs-content">
      @foreach($services as $s)
      @php
        $myApiKey = 'YOUR_API_KEY';
      @endphp
      <div class="card doc-sec" id="{{ $s->slug }}">
        <div class="card-title" style="flex-wrap:wrap"><i class="fa-solid {{ $s->icon ?: 'fa-plug' }}"></i>{{ $s->name }}</div>
        <p class="card-sub">{{ $s->description }}</p>
        @if($s->useCaseList())
          <div class="api-use-cases docs-use-cases"><b><i class="fa-solid fa-list-check" style="color:var(--primary)"></i> What this API can do</b><ul>@foreach($s->useCaseList() as $use)<li>{{ $use }}</li>@endforeach</ul></div>
        @endif
        <div class="svc-meta" style="flex-wrap:wrap">
          <span class="mini-tag blue"><i class="fa-solid fa-coins"></i> {{ (int) $s->credits_per_hit }} credit/hit</span>
          <span class="mini-tag">{{ strtoupper($s->method) }}</span>
          <span class="mini-tag"><i class="fa-solid fa-bolt"></i> {{ (int) setting('api_rate_limit',60) }}/min per key</span>
          <span class="mini-tag"><i class="fa-solid fa-stopwatch"></i> ~{{ $s->liveStats()['avg_ms'] }}ms avg</span>
          <span class="mini-tag"><i class="fa-solid fa-circle-check" style="color:var(--success)"></i> Active</span>
          <a class="mini-tag blue" href="{{ route('service.show', $s->slug) }}" style="text-decoration:none"><i class="fa-solid fa-key"></i> Get Key & Pricing →</a>
        </div>
        <div class="alert alert-info"><i class="fa-solid fa-key"></i><div><b>Authentication:</b> use the <span class="mono">X-API-KEY</span> header. Query-string keys are still accepted for compatibility but are not recommended because URLs may be logged. This page never displays account-specific keys.</div></div>

        @php
          $pq = [];
          foreach ($s->paramList() as $p) { $sm = $s->exampleParams()[$p['name']] ?? $p['placeholder'] ?? ''; $pq[] = $p['name'].'='.urlencode(($sm === '' || strlen($sm) > 24) ? '123456' : $sm); }
          $fullUrl = $s->gatewayUrl().($pq ? '?'.implode('&', $pq) : '');
          $isPost = strtoupper($s->method) === 'POST';
        @endphp
        <div class="endpoint-line" style="word-break:break-all"><span class="method{{ $isPost ? ' post' : '' }}">{{ strtoupper($s->method) }}</span><span style="flex:1">{{ $fullUrl }}</span>
          <button type="button" class="copy-btn" onclick="copyText('{{ $fullUrl }}', this)"><i class="fa-solid fa-copy"></i></button>
        </div>
        @if(count($s->paramList()))
        <b>Parameters</b>
        <div class="table-wrap mt" style="margin-top:10px">
          <table class="tbl">
            <tr><th>Name</th><th>Type</th><th>Required</th><th>Example</th><th>Description</th></tr>
            @foreach($s->paramList() as $p)
            <tr>
              <td class="mono"><b>{{ $p['name'] }}</b></td>
              <td class="text-sm">string</td>
              <td>{!! !empty($p['required']) ? badge('yes', 'primary') : badge('optional', 'info') !!}</td>
              <td class="mono">{{ $s->exampleParams()[$p['name']] ?? $p['placeholder'] ?? '—' }}</td>
              <td class="text-sm text-gray">{{ $p['label'] ?? '—' }}</td>
            </tr>
            @endforeach
          </table>
        </div>
        @endif
        @if($s->docsMarkdown())
          <div class="alert alert-info mt"><i class="fa-solid fa-book"></i><div>{!! nl2br(e($s->docsMarkdown())) !!}</div></div>
        @endif
        @if($s->sample_response)
          <div class="alert alert-info mt" style="display:none"></div>
        @endif

        {{-- Code samples – uses logged-in key if available, else placeholder --}}
        @include('partials.code-samples', ['service' => $s, '__apiKey' => $myApiKey])

        <div class="alert alert-success mt"><i class="fa-solid fa-book-open"></i><div><b>Documentation only.</b> Use the request samples above with your own credential in your application. Account keys and live request forms are intentionally kept out of this documentation page.</div></div>

      </div>
      @endforeach
    </div>
  </div>
  @endif
</div>
@push('scripts')
<script>
const docsDrawer = document.getElementById('docsSidebar');
const docsOverlay = document.querySelector('.docs-overlay');
const docsToggle = document.querySelector('.docs-sidebar-toggle');
const docsCloseButtons = document.querySelectorAll('[data-docs-close]');
const docsCloseButton = document.querySelector('.docs-nav-close');
const docsLockedTargets = [document.querySelector('.app-header'), document.querySelector('.docs-page .docs-hero'), document.querySelector('.docs-page .docs-quickstart'), document.querySelector('.docs-page .docs-sidebar-toggle'), document.querySelector('.docs-page .docs-content'), document.querySelector('.site-footer')].filter(Boolean);
let docsScrollY = 0;
function setDocsDrawer(open) {
  if (!docsDrawer || !docsOverlay) return;
  if (open) {
    docsScrollY = window.scrollY;
    document.body.dataset.docsScrollY = String(docsScrollY);
    document.body.style.top = `-${docsScrollY}px`;
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
  } else {
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.width = '';
    window.scrollTo(0, Number(document.body.dataset.docsScrollY || 0));
    delete document.body.dataset.docsScrollY;
  }
  docsDrawer.classList.toggle('is-open', open);
  docsOverlay.classList.toggle('is-open', open);
  document.body.classList.toggle('docs-drawer-open', open);
  if (docsToggle) docsToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  docsLockedTargets.forEach(target => { target.inert = open; target.setAttribute('aria-hidden', open ? 'true' : 'false'); });
  if (open && docsCloseButton) setTimeout(() => docsCloseButton.focus(), 0);
  if (!open && docsToggle) docsToggle.focus();
}
if (docsToggle) docsToggle.addEventListener('click', () => setDocsDrawer(true));
docsCloseButtons.forEach(el => el.addEventListener('click', () => setDocsDrawer(false)));
document.addEventListener('keydown', e => {
  if (!docsDrawer?.classList.contains('is-open')) return;
  if (e.key === 'Escape') { e.preventDefault(); setDocsDrawer(false); return; }
  if (e.key === 'Tab') {
    const focusable = [...docsDrawer.querySelectorAll('a,button')].filter(el => !el.disabled);
    if (!focusable.length) return;
    const first = focusable[0], last = focusable[focusable.length - 1];
    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
  }
});
document.querySelectorAll('.docs-nav-link').forEach(link => link.addEventListener('click', () => setDocsDrawer(false)));
const docsSections = [...document.querySelectorAll('.docs-content .doc-sec')];
const docsLinks = [...document.querySelectorAll('.docs-nav-link')];
if ('IntersectionObserver' in window && docsSections.length) {
  const docsObserver = new IntersectionObserver(entries => entries.forEach(entry => {
    if (entry.isIntersecting) docsLinks.forEach(link => link.classList.toggle('active', link.getAttribute('href') === '#' + entry.target.id));
  }), { rootMargin: '-18% 0px -65% 0px', threshold: 0 });
  docsSections.forEach(section => docsObserver.observe(section));
}
document.querySelectorAll('.docs-try-form').forEach(function(form){
  form.addEventListener('submit', function(e){
    e.preventDefault();
    var btn = form.querySelector('button[type=submit]');
    var orig = btn.innerHTML;
    btn.disabled = true; btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Sending...';
    var fd = new FormData(form);
    fetch(@json(route('docs.try')), {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || document.querySelector('input[name=_token]').value, 'Accept':'application/json' },
      body: fd
    }).then(r => r.json().then(j => ({ok:r.ok, status:r.status, body:j}))).then(res => {
      var wrap = form.nextElementSibling;
      wrap.style.display = 'block';
      var ok = res.body.status === 'success';
      wrap.querySelector('.try-http').textContent = 'HTTP ' + (res.body.http_code || res.status);
      wrap.querySelector('.try-http').className = 'badge ' + (ok ? 'badge-success' : 'badge-danger') + ' try-http';
      wrap.querySelector('.try-latency').textContent = (res.body.latency || 0) + ' ms';
      wrap.querySelector('.try-credits').textContent = (res.body.credits_used || 0) + ' credit • ' + (res.body.credits_left ?? '?') + ' left';
      wrap.querySelector('.try-body').textContent = res.body.body || res.body.message || JSON.stringify(res.body, null, 2);
      wrap.querySelector('.try-copy').onclick = function(){ copyText(wrap.querySelector('.try-body').innerText, this); };
      btn.disabled = false; btn.innerHTML = orig;
      if(!res.ok && res.body.message) toast(res.body.message, 'error');
    }).catch(err => {
      btn.disabled = false; btn.innerHTML = orig;
      toast('Request failed: ' + err.message, 'error');
    });
  });
});
function toast(msg, type){
  var wrap = document.querySelector('.toast-wrap') || (function(){
    var w=document.createElement('div'); w.className='toast-wrap'; document.body.appendChild(w); return w;
  })();
  var t=document.createElement('div'); t.className='toast toast-'+(type||'info'); t.innerHTML='<i class="fa-solid fa-circle-info"></i><span>'+msg+'</span><button class="toast-x" onclick="this.parentElement.remove()"><i class="fa-solid fa-xmark"></i></button>';
  wrap.appendChild(t); setTimeout(()=>t.remove(), 6000);
}
</script>
@endpush
@endsection