@extends('layouts.panel')

@section('title', 'Dashboard')

@section('content')
    <section class="hero">
        <p class="eyebrow">Operations Overview</p>
        <h1>Central command for websites, agents, backups, and health.</h1>
        <p class="muted">The panel is prepared for API-driven management at scale, with audit-first workflows and room for future file, log, queue, and deployment modules.</p>

        <div class="stat-strip">
            <div class="stat-pill">
                <p class="eyebrow">Average Latency</p>
                <strong>{{ $headlineStats['average_latency'] }} ms</strong>
            </div>
            <div class="stat-pill">
                <p class="eyebrow">Tracked Tables</p>
                <strong>{{ number_format($headlineStats['tracked_tables']) }}</strong>
            </div>
            <div class="stat-pill">
                <p class="eyebrow">Error Rate</p>
                <strong>{{ $headlineStats['error_rate'] }}%</strong>
            </div>
            <div class="stat-pill">
                <p class="eyebrow">Active Sessions</p>
                <strong>{{ $headlineStats['active_sessions'] }}</strong>
            </div>
        </div>
    </section>

    <section class="metric-grid">
        @foreach ($cards as $card)
            <article class="metric-card">
                <p class="eyebrow">{{ $card['label'] }}</p>
                <strong>{{ $card['value'] }}</strong>
                <p class="muted">{{ $card['meta'] }}</p>
            </article>
        @endforeach
    </section>

    <section class="two-column">
        <article class="card">
            <div class="page-header">
                <p class="eyebrow">System Health</p>
                <h1>Current stability mix</h1>
            </div>

            <div class="health-list">
                @foreach ($healthBreakdown as $label => $count)
                    <div class="health-row">
                        <div>
                            <strong>{{ str($label)->headline() }}</strong>
                            <p class="muted">Website health classification</p>
                        </div>
                        <x-status-badge :value="$label" />
                        <strong>{{ $count }}</strong>
                    </div>
                @endforeach
            </div>
        </article>

        <article class="card">
            <div class="page-header">
                <p class="eyebrow">Recent Backups</p>
                <h1>Latest backup stream</h1>
            </div>

            <div class="summary-list">
                @forelse ($recentBackups as $backup)
                    <div class="summary-row">
                        <div>
                            <strong>{{ $backup->website->name }}</strong>
                            <p class="muted">{{ str($backup->type)->headline() }} backup</p>
                        </div>
                        <x-status-badge :value="$backup->status" />
                    </div>
                @empty
                    <p class="muted">No backups have been recorded yet.</p>
                @endforelse
            </div>
        </article>
    </section>

    <section class="card">
        <div class="page-header">
            <p class="eyebrow">Recent Actions</p>
            <h1>Audit log spotlight</h1>
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Action</th>
                        <th>Website</th>
                        <th>User</th>
                        <th>When</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($recentActivity as $log)
                        <tr>
                            <td>
                                <strong>{{ str($log->action)->headline() }}</strong>
                                <div class="muted">{{ $log->description }}</div>
                            </td>
                            <td>{{ $log->website?->name ?? 'System' }}</td>
                            <td>{{ $log->user?->name ?? 'System' }}</td>
                            <td>{{ $log->occurred_at->diffForHumans() }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="muted">No recent activity recorded.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
@endsection
