@extends('layouts.app')
@section('title', 'System Status')
@section('active', 'status')
@section('content')
<div class="wrap page" style="max-width:860px">
  <div style="text-align:center;margin-bottom:30px">
    <h1 style="font-size:32px;font-weight:900">System <span class="text-primary">Status</span></h1>
    <p class="text-gray">Live health of every API, updated in real time.</p>
  </div>

  <div class="alert alert-{{ $allOk ? 'success' : 'warning' }}"><i class="fa-solid fa-{{ $allOk ? 'circle-check' : 'triangle-exclamation' }}"></i><div><b>{{ $allOk ? 'All systems operational' : 'Some APIs are experiencing issues' }}</b><br><span class="text-sm">Overall success rate {{ $uptime }}% • Avg response {{ $avgMs }}ms (24h)</span></div></div>

  <div class="card">
    @forelse($rows as $r)
    <div class="flex between center wrap-x gap" style="padding:16px 0;border-bottom:1px solid #f1f5f9">
      <div class="flex center gap">
        <div class="svc-ic" style="width:46px;height:46px;font-size:20px"><i class="fa-solid {{ $r['service']->icon ?: 'fa-plug' }}"></i></div>
        <div><b style="font-size:16px">{{ $r['service']->name }}</b><br><small class="mono text-gray">/api/{{ $r['service']->slug }}</small></div>
      </div>
      <div class="flex center gap wrap-x">
        <span class="mini-tag">{{ number_format($r['stats']['calls_24h']) }} calls/24h</span>
        <span class="mini-tag">{{ $r['stats']['avg_ms'] }}ms</span>
        @if($r['operational'])
          <span class="badge badge-success"><i class="fa-solid fa-circle-check"></i> Operational</span>
        @else
          <span class="badge badge-danger"><i class="fa-solid fa-circle-exclamation"></i> {{ $r['service']->status === 'active' ? 'Degraded' : 'Offline' }}</span>
        @endif
      </div>
    </div>
    @empty
      <div class="empty"><i class="fa-solid fa-signal"></i><b>No APIs yet</b></div>
    @endforelse
  </div>
  <p class="text-sm text-gray mt" style="text-align:center">Auto-refreshes every 60 seconds • <a href="{{ route('home') }}" style="font-weight:700">Back to home</a></p>
</div>
@push('scripts')
<script>setTimeout(function(){ location.reload(); }, 60000);</script>
@endpush
@endsection