@extends('layouts.dash')
@section('title', 'Dashboard')
@section('content')
@php
  $pctUsed = $stats['quota']>0 ? min(100, round($stats['used']/$stats['quota']*100)) : 0;
  $isLow = $stats['left'] < 100 && $stats['left']>0;
  $isEmpty = $stats['left'] <= 0 && $stats['quota']>0;
  $stepsDone = 0;
  $stepsTotal = 3;
  if($stats['keys']>0) $stepsDone++;
  if($stats['total_hits']>0) $stepsDone++;
  if($stats['left']>0) $stepsDone++;
  $onboardingPct = round($stepsDone/$stepsTotal*100);
@endphp
<div class="user-dashboard-page">
<div class="page-head" style="align-items:flex-end">
  <div>
    <h1 style="display:flex;gap:10px;align-items:center">Welcome, {{ explode(' ', auth()->user()->name)[0] }} 👋 @if($isLow)<span class="badge badge-warning" style="font-size:11px"><i class="fa-solid fa-triangle-exclamation"></i> Low credits</span>@endif</h1>
    <p style="margin-top:4px">Here’s your API health at a glance — <b style="color:var(--primary)">{{ number_format($stats['left']) }} credits left</b> • {{ number_format($stats['today']) }} today • {{ $pctUsed }}% used.</p>
  </div>
  <div class="flex gap wrap-x">
    <a class="btn btn-outline btn-sm" href="{{ route('user.test') }}"><i class="fa-solid fa-flask-vial"></i> Test API</a>
    <a class="btn btn-primary btn-sm" href="{{ route('user.buy') }}"><i class="fa-solid fa-plus"></i> Buy Credits</a>
  </div>
</div>

@if(auth()->user()->must_change_password)
<div class="alert alert-warning" style="display:flex;gap:12px;align-items:center;border:2px solid #f59e0b"><i class="fa-solid fa-shield-halved" style="font-size:20px"></i><div><b>Secure your account</b> — please change your default password now. <a href="{{ route('user.profile') }}" style="font-weight:900;text-decoration:underline;color:inherit">Go to Profile →</a></div><a href="{{ route('user.profile') }}" class="btn btn-warning btn-sm" style="margin-left:auto">Change Password</a></div>
@endif

@if($isLow || $isEmpty)
<div class="card" style="padding:16px;background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#fde68a;display:flex;gap:14px;align-items:center;flex-wrap:wrap">
  <div style="width:44px;height:44px;border-radius:12px;background:#f59e0b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px"><i class="fa-solid fa-bolt"></i></div>
  <div style="flex:1;min-width:200px"><div style="font-weight:900">{{ $isEmpty ? 'Out of credits — API calls will fail' : 'Running low — top up to stay live' }}</div><div class="text-sm text-gray">You have <b style="color:{{ $isEmpty?'var(--danger)':'var(--warning)'}}">{{ number_format($stats['left']) }} left</b> of {{ number_format($stats['quota']) }}. Buy a package for any API you use most — wallet or secure Auto Payment.</div></div>
  <a href="{{ route('user.buy') }}" class="btn btn-warning"><i class="fa-solid fa-cart-shopping"></i> Top Up Now</a>
  <a href="{{ route('user.orders') }}" style="font-size:13px;color:var(--gray);font-weight:700">View orders →</a>
</div>
@endif

@foreach($notices as $n)
<div class="alert alert-{{ $n->type === 'error' ? 'danger' : $n->type }}">
  <i class="fa-solid fa-bullhorn"></i>
  <div><b>{{ $n->title }}</b> — {{ \Illuminate\Support\Str::limit($n->message, 220) }}</div>
</div>
@endforeach

<!-- Onboarding for new users -->
@if($stepsDone < $stepsTotal)
<div class="card" style="padding:18px;background:linear-gradient(135deg,#f8fbff,#eef4ff);border-color:#dbeafe">
  <div class="flex between center wrap-x"><div style="font-weight:900;display:flex;gap:8px;align-items:center"><i class="fa-solid fa-rocket text-primary"></i> Get started — {{ $stepsDone }}/{{ $stepsTotal }} done</div><span class="text-sm text-gray">{{ $onboardingPct }}% • Takes &lt; 1 min</span></div>
  <div class="progress" style="margin:12px 0;height:10px"><div style="width:{{ $onboardingPct }}%"></div></div>
  <div class="grid-3" style="gap:12px">
    <div style="background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;opacity:{{ $stats['keys']>0?1:.7 }}">
      <span style="width:28px;height:28px;border-radius:50%;background:{{ $stats['keys']>0?'var(--success)':'var(--border)'}};color:#fff;display:flex;align-items:center;justify-content:center"><i class="fa-solid {{ $stats['keys']>0?'fa-check':'fa-key' }}"></i></span>
      <div style="flex:1"><div style="font-weight:800;font-size:13px">1. Claim your keys</div><div class="text-sm text-gray">{{ $stats['keys']>0 ? $stats['keys'].' keys ready' : 'One per API, free bonus' }}</div></div>
      @if($stats['keys']==0)<a href="{{ route('user.keys') }}" class="btn btn-primary btn-xs">Claim</a>@else<span class="badge badge-success" style="font-size:10px">Done</span>@endif
    </div>
    <div style="background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;opacity:{{ $stats['total_hits']>0?1:.7 }}">
      <span style="width:28px;height:28px;border-radius:50%;background:{{ $stats['total_hits']>0?'var(--success)':'var(--border)'}};color:#fff;display:flex;align-items:center;justify-content:center"><i class="fa-solid {{ $stats['total_hits']>0?'fa-check':'fa-bolt' }}"></i></span>
      <div style="flex:1"><div style="font-weight:800;font-size:13px">2. Make first call</div><div class="text-sm text-gray">{{ $stats['total_hits']>0 ? number_format($stats['total_hits']).' hits' : 'Copy-paste cURL, run' }}</div></div>
      @if($stats['total_hits']==0)<a href="{{ route('user.test') }}" class="btn btn-primary btn-xs">Try</a>@else<span class="badge badge-success" style="font-size:10px">Done</span>@endif
    </div>
    <div style="background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;opacity:{{ $stats['left']>0?1:.7 }}">
      <span style="width:28px;height:28px;border-radius:50%;background:{{ $stats['left']>0?'var(--success)':'var(--border)'}};color:#fff;display:flex;align-items:center;justify-content:center"><i class="fa-solid {{ $stats['left']>0?'fa-check':'fa-coins' }}"></i></span>
      <div style="flex:1"><div style="font-weight:800;font-size:13px">3. Stay topped up</div><div class="text-sm text-gray">{{ $stats['left']>0 ? number_format($stats['left']).' left' : 'Buy when low' }}</div></div>
      @if($stats['left']==0)<a href="{{ route('user.buy') }}" class="btn btn-primary btn-xs">Buy</a>@else<span class="badge badge-success" style="font-size:10px">Done</span>@endif
    </div>
  </div>
</div>
@endif

<div class="stat-grid">
  <div class="stat-card" style="position:relative;overflow:hidden"><div style="position:absolute;right:-10px;top:-10px;opacity:.06;font-size:64px"><i class="fa-solid fa-key"></i></div><div class="top"><div class="sic bg-blue"><i class="fa-solid fa-key"></i></div><span class="mini-tag blue">{{ $pctUsed }}% used</span></div><h3>{{ $stats['keys'] }}</h3><p>API Keys</p><div class="progress mt" style="height:6px"><div style="width:{{ $pctUsed }}%"></div></div></div>
  <div class="stat-card" style="border-color:{{ $isEmpty?'#fecaca':($isLow?'#fde68a':'var(--border)')}};background:{{ $isEmpty?'#fef2f2':($isLow?'#fffbeb':'#fff')}}"><div class="top"><div class="sic {{ $isEmpty?'bg-red':($isLow?'bg-amber':'bg-green') }}"><i class="fa-solid fa-coins"></i></div>@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>@else<span class="badge badge-success" style="font-size:10px">Healthy</span>@endif</div><h3 style="color:{{ $isEmpty?'var(--danger)':($isLow?'#b45309':'inherit')}}">{{ number_format($stats['left']) }}</h3><p>Credits Left <span style="opacity:.6">/ {{ number_format($stats['quota']) }}</span></p><a href="{{ route('user.buy') }}" style="font-size:12px;color:var(--primary);font-weight:800">Top up →</a></div>
  <div class="stat-card"><div class="top"><div class="sic bg-sky"><i class="fa-solid fa-bolt"></i></div><span class="mini-tag">{{ $stats['today'] }} today</span></div><h3>{{ number_format($stats['today']) }}</h3><p>Requests Today</p><div class="text-sm text-gray mt" style="font-size:12px">Total: {{ number_format($stats['total_hits']) }} hits</div></div>
  <div class="stat-card"><div class="top"><div class="sic bg-amber"><i class="fa-solid fa-chart-line"></i></div><span class="mini-tag">{{ $pctUsed }}% used</span></div><h3>{{ $pctUsed }}%</h3><p>Quota Used</p><div class="progress mt" style="height:6px"><div style="width:{{ $pctUsed }}%"></div></div></div>
</div>

<div class="grid-2">
  <div class="card">
    <div class="flex between center"><div class="card-title" style="margin:0"><i class="fa-solid fa-key"></i> My API Keys</div><a href="{{ route('user.keys') }}" style="font-size:13px;color:var(--primary);font-weight:800">Manage →</a></div>
    <p class="card-sub">Tap copy, paste into code — one key per API.</p>
    @forelse($keys as $k)
      @php $pct = $k->usagePercent(); $left=$k->remaining(); @endphp
      <div style="padding:12px 0;border-bottom:1px solid #f1f5f9">
        <div class="flex between center"><b style="display:flex;gap:8px;align-items:center"><i class="fa-solid {{ $k->service->icon ?? 'fa-plug' }}" style="color:var(--primary)"></i> {{ $k->service->name ?? $k->label }} @if($left<20)<span class="badge badge-warning" style="font-size:9px">Low</span>@endif</b>{!! badge($k->status) !!}</div>
        <div class="token-chip mt" style="width:100%;background:#f8fafc"><span style="flex:1;font-size:12px">{{ \Illuminate\Support\Str::limit($k->api_key, 22) }}••••</span><button type="button" class="copy-btn" onclick="copyText('{{ $k->api_key }}', this)"><i class="fa-solid fa-copy"></i> Copy</button></div>
        <div class="flex between center mt" style="font-size:13px"><span class="text-gray">{{ number_format($left) }} left • {{ fmt_date($k->exp_date) }}</span><span class="mini-tag {{ $pct>=90?'low':'' }}" style="background:var(--bg)">{{ $pct }}% used</span></div>
        <div class="progress" style="height:6px;margin-top:6px"><div style="width:{{ $pct }}%"></div></div>
      </div>
    @empty
      <div class="empty" style="padding:24px"><i class="fa-solid fa-key" style="font-size:32px"></i><b>No keys yet</b><p class="text-sm text-gray">Claim free keys to get started</p><a href="{{ route('user.keys') }}" class="btn btn-primary btn-sm mt"><i class="fa-solid fa-plus"></i> Claim Keys</a></div>
    @endforelse
    <a class="btn btn-ghost btn-sm btn-block mt" href="{{ route('user.keys') }}">Manage All Keys<i class="fa-solid fa-arrow-right"></i></a>
  </div>
  <div class="card">
    <div class="flex between center"><div class="card-title" style="margin:0"><i class="fa-solid fa-clock-rotate-left"></i> Recent API Calls</div><a href="{{ route('user.test') }}" class="btn btn-ghost btn-xs"><i class="fa-solid fa-flask-vial"></i> Test</a></div>
    <p class="card-sub">Latest requests from your keys — refresh to see new ones.</p>
    @if($recent->count())
      <div class="table-wrap"><table class="tbl" style="min-width:0">
        <tr><th>API</th><th>Param</th><th>Status</th><th>Time</th></tr>
        @foreach($recent as $l)
        <tr>
          <td><b>{{ $l->service->name ?? '—' }}</b></td>
          <td class="mono text-sm">{{ \Illuminate\Support\Str::limit($l->param_summary ?? '', 26) }}</td>
          <td>{!! badge($l->status) !!}</td>
          <td class="text-sm text-gray">{{ $l->created_at->diffForHumans() }}</td>
        </tr>
        @endforeach
      </table></div>
      <div class="flex gap mt"><a href="{{ route('user.keys') }}" style="font-size:13px;color:var(--primary);font-weight:700">View keys →</a><span style="color:var(--border)">•</span><a href="{{ route('docs') }}" style="font-size:13px;color:var(--primary);font-weight:700">Docs →</a></div>
    @else
      <div class="empty" style="padding:28px"><i class="fa-solid fa-tower-broadcast" style="font-size:32px"></i><b>No calls yet</b><p class="text-sm text-gray">Make your first API call to see it here.</p><a href="{{ route('user.test') }}" class="btn btn-primary btn-sm mt"><i class="fa-solid fa-play"></i> Try a test call</a></div>
    @endif
  </div>
</div>

@if($firstService)
@php
  $myFirst = $keys->first();
  $p0 = $firstService->paramList();
  $ex = $firstService->gatewayUrl().'?api_key='.($myFirst ? \Illuminate\Support\Str::limit($myFirst->api_key,12).'…' : 'YOUR_API_KEY').($p0 ? '&'.$p0[0]['name'].'='.urlencode($p0[0]['placeholder'] ?? '123456') : '');
  $fullEx = $firstService->gatewayUrl().'?api_key='.($myFirst ? $myFirst->api_key : 'YOUR_API_KEY').($p0 ? '&'.$p0[0]['name'].'='.urlencode($p0[0]['placeholder'] ?? '123456') : '');
@endphp
<div class="card mt dashboard-quickstart" style="border-color:#dbeafe;background:linear-gradient(180deg,#fff,#f8fbff)">
  <div class="flex between center wrap-x"><div class="card-title" style="margin:0"><i class="fa-solid fa-rocket"></i> Quick Start — {{ $firstService->name }}</div><span class="mini-tag blue"><i class="fa-solid fa-bolt"></i> {{ $firstService->credits_per_hit }} / hit</span></div>
  <p class="card-sub">Copy, paste & go — no SDK needed. Replace <span class="mono">api_key</span> with your key.</p>
      <div class="endpoint-line" style="background:#0b1526;color:#e2e8f0;border:none"><span class="method">GET</span><span class="mono" style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $ex }}</span>
    <button type="button" class="copy-btn" style="background:rgba(255,255,255,.12);color:#fff" onclick="copyText('{{ $fullEx }}', this)"><i class="fa-solid fa-copy"></i> Copy</button>
  </div>
  <div class="flex gap wrap-x mt" style="font-size:13px">
    <a href="{{ route('service.show', $firstService->slug) }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-book"></i> Full docs</a>
    <a href="{{ route('docs') }}#{{ $firstService->slug }}" class="btn btn-outline btn-sm"><i class="fa-solid fa-code"></i> Code samples</a>
    <span class="text-sm text-gray" style="align-self:center"><i class="fa-solid fa-lightbulb text-warning"></i> Tip: Test without spending — use <b>Test</b> tab.</span>
  </div>
</div>
@endif
</div>
@endsection