@extends('layouts.admin')
@section('title', 'API Monitor')

@section('content')

<div style="margin-bottom:1.5rem">
  <h1 style="font-size:1.25rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .25rem">API Monitor</h1>
  <p style="font-size:.8125rem;color:var(--muted-foreground);margin:0">Real-time license validation request monitoring</p>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr 300px;gap:.875rem;margin-bottom:1.25rem">

  {{-- Top IPs --}}
  <div class="card" style="padding:1.125rem">
    <div style="font-size:.8125rem;font-weight:700;color:var(--foreground);margin-bottom:.875rem">Top IPs (Last Hour)</div>
    @forelse($topIps as $row)
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--border)">
      <code style="font-family:monospace;font-size:.72rem;color:var(--foreground)">{{ $row->ip_address }}</code>
      <span class="badge b-blue" style="font-size:.65rem">{{ number_format($row->hits) }} hits</span>
    </div>
    @empty
    <p style="font-size:.78rem;color:var(--muted-foreground);text-align:center;padding:.5rem 0">No data yet.</p>
    @endforelse
  </div>

  {{-- Failure breakdown --}}
  <div class="card" style="padding:1.125rem">
    <div style="font-size:.8125rem;font-weight:700;color:var(--foreground);margin-bottom:.875rem">Failures (24h)</div>
    @forelse($failureBreakdown as $row)
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--border)">
      <code style="font-family:monospace;font-size:.72rem;color:var(--foreground)">{{ $row->failure_reason??'unknown' }}</code>
      <span class="badge b-red" style="font-size:.65rem">{{ number_format($row->count) }}</span>
    </div>
    @empty
    <div style="padding:1rem;text-align:center">
      <div style="font-size:1.5rem;margin-bottom:.35rem">âœ...</div>
      <p style="font-size:.75rem;color:var(--muted-foreground);margin:0">No failures in 24h.</p>
    </div>
    @endforelse
  </div>

  {{-- Filters --}}
  <div class="card" style="padding:1.125rem">
    <div style="font-size:.8125rem;font-weight:700;color:var(--foreground);margin-bottom:.875rem">Filter Requests</div>
    <form method="GET" style="display:flex;flex-direction:column;gap:.625rem">
      <input type="text" name="license_key" value="{{ request('license_key') }}" placeholder="License key..." class="input">
      <select name="success" class="select">
        <option value="">All Requests</option>
        <option value="1" @selected(request('success')==='1')>Successful Only</option>
        <option value="0" @selected(request('success')==='0')>Failed Only</option>
      </select>
      <button type="submit" class="btn btn-primary btn-sm" style="justify-content:center">Apply</button>
    </form>
  </div>
</div>

<div style="display:flex;align-items:flex-start;gap:.5rem;padding:.625rem .875rem;
  background:#eff6ff;border:1px solid #bfdbfe;border-radius:.65rem;
  font-size:.8rem;color:#1e40af;margin-bottom:.875rem;line-height:1.6">
  <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0;margin-top:.1rem">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
  </svg>
  <span>
    <strong>Multiple calls at the same time are normal.</strong>
    If your software validates the license on every page load, each page visit generates one call.
    Multiple simultaneous calls mean multiple pages were loaded at once.
    To reduce API calls, ask your developer to cache the validation result for 1–24 hours.
  </span>
</div>

<div class="card">
  <table style="width:100%;border-collapse:collapse">
    <thead>
      <tr style="border-bottom:1px solid var(--border)">
        <th class="th">Endpoint</th>
        <th class="th">License Key</th>
        <th class="th">IP</th>
        <th class="th">Domain</th>
        <th class="th">Status</th>
        <th class="th">Result</th>
        <th class="th">Time</th>
      </tr>
    </thead>
    <tbody>
      @forelse($logs as $log)
      <tr class="trow" style="{{ !$log->success ? 'background:rgba(239,68,68,.025)' : '' }}">
        <td class="td"><code style="font-family:monospace;font-size:.72rem;color:var(--foreground)">{{ $log->endpoint }}</code></td>
        <td class="td"><code style="font-family:monospace;font-size:.7rem;color:var(--foreground)">{{ $log->license_key ? substr($log->license_key,0,16).'...' : '-' }}</code></td>
        <td class="td"><code style="font-family:monospace;font-size:.7rem;color:var(--muted-foreground)">{{ $log->ip_address??'-' }}</code></td>
        <td class="td" style="font-size:.75rem;color:var(--muted-foreground)">{{ $log->domain??'-' }}</td>
        <td class="td">
          @if($log->success)
          <span class="badge b-green" style="font-size:.65rem">{{ $log->response_code }}</span>
          @else
          <span class="badge b-red" style="font-size:.65rem">{{ $log->response_code }}</span>
          @endif
        </td>
        <td class="td" style="font-size:.72rem">
          @if($log->success)
            <span style="color:#16a34a;font-weight:500">✓ Success</span>
          @else
            <span style="color:#dc2626;font-weight:500">{{ str_replace('_',' ', ucfirst($log->failure_reason ?? 'failed')) }}</span>
          @endif
        </td>
        <td class="td" style="font-size:.7rem;color:var(--muted-foreground);white-space:nowrap">{{ $log->created_at->diffForHumans() }}</td>
      </tr>
      @empty
      <tr><td colspan="7" style="padding:3rem;text-align:center;color:var(--muted-foreground);font-size:.8rem">No requests logged yet.</td></tr>
      @endforelse
    </tbody>
  </table>
  <div style="padding:.875rem 1.25rem;border-top:1px solid var(--border)">{{ $logs->links() }}</div>
</div>

@endsection
