@extends('layouts.dash')
@section('title', 'My API Keys')
@section('content')
@php
  $totalLeft = $keys->sum(fn($k)=> $k->remaining());
  $low = $keys->filter(fn($k)=> $k->remaining() < 50 && $k->remaining() > 0)->count();
  $expired = $keys->filter(fn($k)=> $k->exp_date && \Carbon\Carbon::parse($k->exp_date)->isPast())->count();
@endphp
<div class="page-head" style="align-items:flex-end">
  <div>
    <h1 style="display:flex;gap:10px;align-items:center">My API Keys <span class="badge badge-primary">{{ $keys->count() }}</span></h1>
    <p style="margin-top:6px;max-width:640px">One dedicated key per API — copy once, use anywhere. <b style="color:var(--primary)">{{ number_format($totalLeft) }} credits left</b> across all keys. Keep keys secret — regenerate if leaked.</p>
    @if($low>0)<div class="alert alert-warning mt" style="display:flex;gap:10px;padding:10px 14px"><i class="fa-solid fa-triangle-exclamation"></i><div style="font-size:13px"><b>{{ $low }} key(s) low on credits</b> — top up to avoid interruptions. <a href="{{ route('user.buy') }}" style="font-weight:800;color:inherit;text-decoration:underline">Buy credits →</a></div></div>@endif
  </div>
  <div class="flex gap">
    <div class="card" style="padding:12px 14px;min-width:160px;text-align:center;background:linear-gradient(135deg,#f8fbff,#eef4ff);border-color:#dbeafe">
      <div style="font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--gray)">TOTAL LEFT</div><div style="font-size:22px;font-weight:900;color:var(--primary)">{{ number_format($totalLeft) }}</div><div style="font-size:11px;color:var(--gray)">credits</div>
    </div>
    <a class="btn btn-primary" href="{{ route('user.buy') }}"><i class="fa-solid fa-plus"></i> Buy Credits</a>
  </div>
</div>

<!-- Quick tools -->
<div class="card mb" style="padding:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center">
  <div style="position:relative;flex:1;min-width:200px;max-width:380px">
    <i class="fa-solid fa-magnifying-glass" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gray-light)"></i>
    <input type="text" id="keySearch" class="form-control" placeholder="Search API or key…" style="padding-left:36px">
  </div>
  <select id="keyFilter" class="form-control" style="max-width:180px">
    <option value="all">All keys</option>
    <option value="low">Low credits (&lt; 50)</option>
    <option value="expiring">Expiring &lt; 7 days</option>
    <option value="active">Active</option>
  </select>
  <button type="button" class="btn btn-ghost btn-sm" onclick="document.querySelectorAll('.token-chip[data-key]').forEach(c=>copyText(c.dataset.key,c.querySelector('.key-copy-btn')))" title="Copy every API key"><i class="fa-solid fa-copy"></i> Copy all</button>
  <span class="text-sm text-gray" style="margin-left:auto"><i class="fa-solid fa-shield-halved text-primary"></i> Keys are per-API & isolated</span>
</div>

@if($missing->count())
<div class="card mb" style="border-color:#bbf7d0;background:linear-gradient(135deg,#f0fdf4,#ecfdf5)">
  <div class="card-title"><i class="fa-solid fa-gift" style="color:var(--success)"></i> New APIs — Claim Free Keys <span class="badge badge-success">{{ $missing->count() }} free</span></div>
  <p class="card-sub">You haven’t claimed these yet — one tap, instant bonus credits (no payment).</p>
  <div class="grid-3 mt" style="gap:12px">
    @foreach($missing as $s)
    <form action="{{ route('user.keys.store') }}" method="POST" style="background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px">
      @csrf<input type="hidden" name="service_id" value="{{ $s->id }}">
      <div style="display:flex;gap:10px;align-items:center"><div class="svc-ic" style="width:38px;height:38px"><i class="fa-solid {{ $s->icon ?: 'fa-plug' }}"></i></div><div><div style="font-weight:900">{{ $s->name }}</div><div class="text-sm text-gray">/api/{{ $s->slug }}</div></div><span class="mini-tag blue" style="margin-left:auto">+{{ (int) ($s->free_quota ?? 25) }} free</span></div>
      <div class="text-sm text-gray">{{ $s->description ?: 'Premium API — bonus credits on claim.' }}</div>
      <button class="btn btn-success btn-sm btn-block"><i class="fa-solid fa-plus"></i> Claim Key — Free</button>
    </form>
    @endforeach
  </div>
</div>
@endif

@if($keys->isEmpty())
<div class="card"><div class="empty" style="padding:40px 20px"><div style="width:64px;height:64px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:28px"><i class="fa-solid fa-key"></i></div><b style="font-size:18px">No keys yet</b><p class="text-sm text-gray" style="max-width:460px;margin:6px auto">Your keys will appear here — one per API. Claim a free key above or <a href="{{ route('user.buy') }}" style="color:var(--primary);font-weight:800">buy credits</a> to get started.</p><a href="{{ route('user.buy') }}" class="btn btn-primary mt"><i class="fa-solid fa-rocket"></i> Explore Packages</a></div></div>
@else
<div class="grid-2" id="keysGrid" style="gap:16px">
  @foreach($keys as $k)
  @php
    $pct = $k->usagePercent();
    $left = $k->remaining();
    $isLow = $left < 20 && $left > 0;
    $isEmpty = $left <= 0;
    $exp = $k->exp_date ? \Carbon\Carbon::parse($k->exp_date) : null;
    $daysLeft = $exp ? now()->diffInDays($exp,false) : null;
    $expiringSoon = $exp && $daysLeft !== null && $daysLeft >=0 && $daysLeft < 7;
    $isExpired = $exp && $exp->isPast();
  @endphp
  <div class="card hoverable key-card" data-name="{{ strtolower($k->service?->name ?? $k->label.' '.$k->api_key) }}" data-left="{{ $left }}" data-exp="{{ $daysLeft ?? 999 }}" data-status="{{ $k->status }}">
    <div class="flex between center">
      <div class="flex center gap"><div class="svc-ic" style="width:44px;height:44px;font-size:19px"><i class="fa-solid {{ $k->service?->icon ?? 'fa-plug' }}"></i></div><div><b style="font-size:16.5px;display:flex;gap:8px;align-items:center">{{ $k->service?->name ?? $k->label }} @if($isEmpty)<span class="badge badge-danger" style="font-size:10px">Empty</span>@elseif($isLow)<span class="badge badge-warning" style="font-size:10px">Low</span>@endif @if($expiringSoon)<span class="badge badge-warning" style="font-size:10px"><i class="fa-solid fa-clock"></i> {{ $daysLeft }}d left</span>@endif @if($isExpired)<span class="badge badge-danger" style="font-size:10px">Expired</span>@endif</b><br><small class="mono text-gray">/api/{{ $k->service?->slug ?? '' }} • {{ $k->label ?: 'Primary' }}</small></div></div>
      <div class="flex gap" style="align-items:center">{!! badge($k->status) !!}<button type="button" class="btn btn-ghost btn-xs" title="More" aria-label="More actions" onclick="this.nextElementSibling.classList.toggle('hide')"><i class="fa-solid fa-ellipsis"></i></button><div class="hide key-actions-menu" style="position:absolute;right:18px;margin-top:36px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:5;display:flex;flex-direction:column;gap:4px;min-width:170px"><a class="btn btn-ghost btn-xs" href="{{ ($k->service?->slug ? route('service.show', ['slug' => $k->service->slug]) : route('docs')) }}" style="justify-content:flex-start"><i class="fa-solid fa-book"></i> Docs</a><a class="btn btn-ghost btn-xs" href="{{ route('docs') }}#{{ $k->service?->slug ?? '' }}" style="justify-content:flex-start"><i class="fa-solid fa-code"></i> Code samples</a><button type="button" class="btn btn-ghost btn-xs" style="justify-content:flex-start" onclick="copyText('{{ $k->service?->gatewayUrl() ?? '' }}?api_key={{ $k->api_key }}&uid=123456', this)"><i class="fa-solid fa-link"></i> Copy full URL</button><button type="button" class="btn btn-ghost btn-xs" style="justify-content:flex-start" onclick="renameKey({{ $k->id }}, '{{ str_replace("'", "\\'", $k->label) }}'); this.closest('.key-actions-menu').classList.add('hide')"><i class="fa-solid fa-pen"></i> Rename key</button><form action="{{ route('user.keys.regenerate', $k) }}" method="POST" onsubmit="return confirm('Regenerate? Old key stops immediately — update your app.')">@csrf<button class="btn btn-ghost btn-xs" type="submit" style="justify-content:flex-start;width:100%"><i class="fa-solid fa-rotate"></i> Regenerate key</button></form><form action="{{ route('user.keys.destroy', $k) }}" method="POST" onsubmit="return confirm('Remove this key? You can claim a new key for this API later.')">@csrf @method('DELETE')<button class="btn btn-danger btn-xs" type="submit" style="justify-content:flex-start;width:100%"><i class="fa-solid fa-trash"></i> Remove key</button></form></div></div>
    </div>

    <div class="token-chip mt" data-key="{{ $k->api_key }}" style="max-width:100%;width:100%;background:#f8fafc;border:1px dashed var(--border)">
      <span data-key="{{ $k->api_key }}" style="flex:1;font-size:13px;letter-spacing:.2px">{{ $k->api_key }}</span>
      <button type="button" class="btn btn-primary btn-xs key-copy-btn" onclick="copyText(this.closest('.token-chip').dataset.key, this)"><i class="fa-solid fa-copy"></i> Copy</button>
      <button type="button" class="btn btn-ghost btn-xs" onclick="toggleReveal(this)" data-key="{{ $k->api_key }}" title="Reveal"><i class="fa-solid fa-eye"></i></button>
    </div>
    <div class="text-sm text-gray mt" style="display:flex;gap:8px;flex-wrap:wrap">
      <span class="mini-tag" title="Expiry"><i class="fa-solid fa-calendar"></i> {{ $exp ? fmt_date($exp) : 'No expiry' }} @if($expiringSoon)<b style="color:var(--warning)">• renew soon</b>@endif</span>
      <span class="mini-tag" title="Last used"><i class="fa-solid fa-clock"></i> {{ $k->last_used_at ? $k->last_used_at->diffForHumans() : 'Never used' }}</span>
      @if($k->service)<span class="mini-tag blue"><i class="fa-solid fa-bolt"></i> {{ $k->service->credits_per_hit }} / hit</span>@endif
    </div>

    <div style="margin-top:12px">
      <div class="flex between text-sm"><span class="text-gray">Credits used</span><b style="color:{{ $isEmpty ? 'var(--danger)' : ($isLow ? 'var(--warning)' : 'var(--success)') }}">{{ number_format($k->used_request) }} / {{ number_format($k->total_request) }} • {{ number_format($left) }} left</b></div>
      <div class="progress{{ $pct >= 90 ? ' low' : '' }}" style="margin-top:6px;height:10px"><div style="width:{{ $pct }}%;{{ $isEmpty ? 'background:var(--danger)' : ($isLow ? 'background:var(--warning)' : '') }}"></div></div>
      <div style="display:flex;gap:8px;margin-top:8px;flex-wrap:wrap">
        <span class="text-sm" style="color:var(--gray)">{{ $pct }}% used</span>
        @if($isLow || $isEmpty)<a href="{{ route('user.buy', ['service'=>$k->service_id]) }}" style="margin-left:auto;font-size:13px;font-weight:800;color:var(--primary)"><i class="fa-solid fa-triangle-exclamation"></i> Top up now →</a>@endif
      </div>
    </div>

    <!-- Quick snippet -->
    <details style="margin-top:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px">
      <summary style="font-weight:800;cursor:pointer;font-size:13px;display:flex;gap:8px;align-items:center"><i class="fa-solid fa-code text-primary"></i> Quick copy — cURL <span style="margin-left:auto;font-size:11px;color:var(--gray)">click to expand</span></summary>
      <div class="code-box" style="margin:10px 0 0"><div class="code-head"><span>cURL</span><button type="button" class="quick-copy-btn" data-copy-target="quick-curl-{{ $k->id }}"><i class="fa-solid fa-copy"></i> Copy</button></div><pre id="quick-curl-{{ $k->id }}" style="font-size:11.5px">curl "{{ $k->service?->gatewayUrl() ?? url('/api/'.($k->service?->slug??'')) }}?api_key={{ $k->api_key }}&{{ $k->service?->paramList()[0]['name'] ?? 'uid' }}=123456"</pre></div>
      <div class="flex gap wrap-x mt" style="font-size:12px"><a href="{{ route('user.test', ['key'=>$k->id]) }}" style="color:var(--primary);font-weight:700"><i class="fa-solid fa-flask-vial"></i> Open tester →</a><span style="color:var(--gray-light)">•</span><a href="{{ ($k->service?->slug ? route('service.show', ['slug' => $k->service->slug]) : route('docs')) }}" style="color:var(--primary);font-weight:700">Docs →</a></div>
    </details>

    <div class="key-primary-actions flex gap wrap-x mt" style="border-top:1px solid var(--border);padding-top:12px">
      <a class="btn btn-primary btn-xs" href="{{ route('user.buy', ['service' => $k->service_id]) }}"><i class="fa-solid fa-plus"></i> Top Up</a>
      <a class="btn btn-ghost btn-xs" href="{{ route('user.test', ['key' => $k->id]) }}"><i class="fa-solid fa-flask-vial"></i> Test API</a>
    </div>
  </div>
  @endforeach
</div>
@endif

<div class="modal-bg" id="renameModal"><div class="modal"><h3><i class="fa-solid fa-pen text-primary"></i> Rename Key</h3><p class="sub">Friendly label helps you organize.</p><form action="" method="POST" id="renameForm">@csrf @method('PATCH')<div class="form-group"><label>Label</label><input type="text" name="label" id="renameLabel" class="form-control" required maxlength="60" placeholder="e.g. Production, Website, App v2"></div><div class="flex gap"><button type="button" class="btn btn-outline" style="flex:1" onclick="closeModal('renameModal')">Cancel</button><button class="btn btn-primary" style="flex:1" type="submit">Save</button></div></form></div></div>
@push('scripts')
<script>
function renameKey(id, label){ document.getElementById('renameForm').action='{{ url('user/keys') }}/'+id; document.getElementById('renameLabel').value=label; openModal('renameModal'); }
function toggleReveal(btn){
  const chip = btn.closest('.token-chip');
  const span = chip.querySelector('span');
  const isMasked = span.textContent.includes('•');
  if(isMasked){ span.textContent = btn.getAttribute('data-key'); btn.innerHTML='<i class="fa-solid fa-eye-slash"></i>'; }
  else { const k=btn.getAttribute('data-key'); span.textContent=k.slice(0,8)+'••••••••'+k.slice(-4); btn.innerHTML='<i class="fa-solid fa-eye"></i>'; }
}
(function(){
  const search=document.getElementById('keySearch'), filter=document.getElementById('keyFilter'), grid=document.getElementById('keysGrid');
  function apply(){
    const q=(search.value||'').toLowerCase().trim();
    const f=filter.value;
    document.querySelectorAll('.key-card').forEach(c=>{
      const name=c.dataset.name||'';
      const left=parseInt(c.dataset.left||0);
      const exp=parseInt(c.dataset.exp||999);
      let show=true;
      if(q && !name.includes(q)) show=false;
      if(f==='low' && !(left>0 && left<50)) show=false;
      if(f==='expiring' && !(exp>=0 && exp<7)) show=false;
      if(f==='active' && c.dataset.status!=='active') show=false;
      c.style.display=show?'':'none';
    });
  }
  search?.addEventListener('input', apply);
  filter?.addEventListener('change', apply);
  // mask keys initially? Keep full for copy but visual masked? Keep full then user can toggle reveal - default show masked for safety?
  document.querySelectorAll('.key-card .token-chip span').forEach(s=>{
    const k=s.textContent.trim();
    if(k.length>16) s.textContent=k.slice(0,8)+'••••••••'+k.slice(-4);
  });
})();
</script>
@endpush
@endsection