@extends('layouts.admin')
@section('title', 'Dashboard')

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="mb-0 fw-bold">Dashboard</h4>
        <small class="text-muted">Backup overview for {{ \Carbon\Carbon::parse($date)->format('D, M j, Y') }}</small>
    </div>
    <div class="d-flex gap-2 align-items-center">
        <input type="date" id="date-picker" class="form-control form-control-sm"
               value="{{ $date }}" max="{{ today()->toDateString() }}">
    </div>
</div>

<!-- Stat Cards -->
<div class="row g-3 mb-4">
    @php
        $cards = [
            ['label' => 'Total Reports',        'value' => $stats['total'],               'icon' => 'bi-server',          'color' => 'primary',   'bg' => 'rgba(13,110,253,.1)'],
            ['label' => 'Completed',             'value' => $stats['completed'],           'icon' => 'bi-check-circle',    'color' => 'success',   'bg' => 'rgba(25,135,84,.1)'],
            ['label' => 'Partially Completed',   'value' => $stats['partially_completed'], 'icon' => 'bi-exclamation-circle','color' => 'warning', 'bg' => 'rgba(255,193,7,.1)'],
            ['label' => 'Failed',                'value' => $stats['failed'],              'icon' => 'bi-x-circle',        'color' => 'danger',    'bg' => 'rgba(220,53,69,.1)'],
            ['label' => 'Pending',               'value' => $stats['pending'],             'icon' => 'bi-hourglass-split', 'color' => 'secondary', 'bg' => 'rgba(108,117,125,.1)'],
            ['label' => 'Avg Duration',          'value' => $stats['avg_duration'] ? gmdate('H:i:s', $stats['avg_duration']) : '-', 'icon' => 'bi-clock', 'color' => 'info', 'bg' => 'rgba(13,202,240,.1)'],
        ];
    @endphp

    @foreach($cards as $card)
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-icon text-{{ $card['color'] }}" style="background: {{ $card['bg'] }}">
                    <i class="bi {{ $card['icon'] }}"></i>
                </div>
                <div>
                    <div class="fs-4 fw-bold lh-1">{{ $card['value'] }}</div>
                    <div class="text-muted small">{{ $card['label'] }}</div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- Charts Row -->
<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span class="fw-semibold"><i class="bi bi-bar-chart me-1"></i>Daily Success Rate (30 days)</span>
            </div>
            <div class="card-body" style="height:280px">
                <canvas id="dailyChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header fw-semibold">
                <i class="bi bi-pie-chart me-1"></i>Today's Summary
            </div>
            <div class="card-body d-flex align-items-center justify-content-center" style="height:280px">
                <canvas id="summaryChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Server Health Grid -->
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span class="fw-semibold"><i class="bi bi-hdd-rack me-1"></i>Server Health</span>
        <span class="badge bg-secondary">{{ count($servers) }} servers</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Server</th>
                        <th>API Status</th>
                        <th>Today's Backup</th>
                        <th>Last Sync</th>
                        <th>Response Time</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($servers as $s)
                    <tr>
                        <td>
                            <a href="{{ route('admin.servers.show', $s['id']) }}" class="fw-semibold text-decoration-none">
                                {{ $s['name'] }}
                            </a>
                            <span class="badge {{ $s['status'] === 'enabled' ? 'bg-success' : 'bg-secondary' }} ms-1">
                                {{ $s['status'] }}
                            </span>
                        </td>
                        <td>
                            @if(is_null($s['last_connection_ok']))
                                <span class="text-muted">—</span>
                            @elseif($s['last_connection_ok'])
                                <span class="text-success"><i class="bi bi-check-circle-fill"></i> OK</span>
                            @else
                                <span class="text-danger"><i class="bi bi-x-circle-fill"></i> Failed</span>
                            @endif
                        </td>
                        <td>
                            @php $reportStatus = $s['report_status'] ?? 'pending' @endphp
                            <span class="badge badge-{{ $reportStatus }}">
                                {{ \App\Models\BackupReport::STATUS_LABELS[$reportStatus] ?? ucfirst($reportStatus) }}
                            </span>
                        </td>
                        <td><small class="text-muted">{{ $s['last_sync_at'] ?? 'Never' }}</small></td>
                        <td><small class="text-muted">—</small></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Date picker navigation
$('#date-picker').on('change', function () {
    const url = new URL(window.location);
    url.searchParams.set('date', this.value);
    window.location = url;
});

// Daily chart data
const dailyData = @json($daily);

const labels   = dailyData.map(d => d.backup_date);
const completed   = dailyData.map(d => d.completed);
const partial     = dailyData.map(d => d.partially_completed);
const failed      = dailyData.map(d => d.failed);

new Chart(document.getElementById('dailyChart'), {
    type: 'bar',
    data: {
        labels,
        datasets: [
            { label: 'Completed',   data: completed, backgroundColor: '#198754' },
            { label: 'Partial',     data: partial,   backgroundColor: '#fd7e14' },
            { label: 'Failed',      data: failed,    backgroundColor: '#dc3545' },
        ]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { position: 'bottom' } },
        scales: { x: { stacked: true }, y: { stacked: true, beginAtZero: true } }
    }
});

// Summary donut
const stats = @json($stats);
new Chart(document.getElementById('summaryChart'), {
    type: 'doughnut',
    data: {
        labels: ['Completed', 'Partial', 'Failed', 'Pending'],
        datasets: [{
            data: [stats.completed, stats.partially_completed, stats.failed, stats.pending],
            backgroundColor: ['#198754', '#fd7e14', '#dc3545', '#6c757d'],
            borderWidth: 2,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { position: 'bottom' } },
        cutout: '65%',
    }
});
</script>
@endpush