@extends('layouts.atelier')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')

{{-- data-dashboard-feed : déclenche LiveDashboard.init() --}}
<div data-dashboard-feed>

{{-- KPIs --}}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.75rem;">
    <div class="card">
        <div class="card-title">Resets aujourd'hui</div>
        <div class="kpi-value primary" id="dash-today-total">{{ $stats['today_total'] }}</div>
    </div>
    <div class="card">
        <div class="card-title">Succès</div>
        <div class="kpi-value success" id="dash-today-succes">{{ $stats['today_succes'] }}</div>
    </div>
    <div class="card">
        <div class="card-title">Erreurs</div>
        <div class="kpi-value danger" id="dash-today-erreur">{{ $stats['today_erreur'] }}</div>
    </div>
    <div class="card">
        <div class="card-title">Total historique</div>
        <div class="kpi-value" id="dash-total-all">{{ $stats['total_all'] }}</div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 300px;gap:1.5rem;align-items:start;">

    {{-- Sessions récentes --}}
    <div class="card" style="padding:0;overflow:hidden;">
        <div style="padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;font-weight:700;font-size:0.875rem;">
            Sessions récentes
        </div>
        <div class="table-wrap" style="border:none;border-radius:0;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Type</th>
                        <th>Marque</th>
                        <th>Total</th>
                        <th>Résultat</th>
                        <th>Par</th>
                        <th>Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="dash-sessions-tbody">
                @forelse($recentSessions as $s)
                    <tr>
                        <td style="color:#94a3b8;font-size:0.78rem;">#{{ $s->id }}</td>
                        <td>
                            @if($s->type === 'batch')
                                <span class="badge badge-info">Lot</span>
                            @else
                                <span class="badge badge-muted">Unitaire</span>
                            @endif
                        </td>
                        <td style="font-weight:600;">{{ ucfirst($s->brand) }}</td>
                        <td>{{ $s->total }}</td>
                        <td>
                            @if($s->statut === 'termine')
                                <span class="badge badge-success">{{ $s->succes }}/{{ $s->total }} OK</span>
                            @elseif($s->statut === 'erreur_partielle')
                                <span class="badge badge-warning">{{ $s->succes }} OK / {{ $s->erreurs }} err.</span>
                            @else
                                <span class="badge badge-info">En cours</span>
                            @endif
                        </td>
                        <td style="font-size:0.8rem;">{{ $s->user?->prenom }}</td>
                        <td style="font-size:0.78rem;color:#64748b;"
                            data-ts="{{ $s->created_at->toIso8601String() }}">
                            {{ $s->created_at->format('d/m H:i') }}
                        </td>
                        <td>
                            <a href="{{ route('historique.show', $s) }}" class="btn btn-ghost btn-sm">Voir</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" style="text-align:center;color:#94a3b8;padding:2rem;">Aucune session</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Agents --}}
    <div>
        <div class="card">
            <div class="card-title" style="margin-bottom:1rem;">Agents locaux</div>
            @forelse($agents as $agent)
                <div data-agent-id="{{ $agent->id }}"
                     style="display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0;border-bottom:1px solid #f1f5f9;">
                    <span class="agent-dot {{ $agent->isOnline() ? 'online' : 'offline' }}"></span>
                    <div style="flex:1;min-width:0;">
                        <div style="font-size:0.85rem;font-weight:600;">{{ $agent->name }}</div>
                        <div style="font-size:0.72rem;color:#94a3b8;" data-agent-seen>
                            {{ $agent->last_seen_at ? $agent->last_seen_at->diffForHumans() : 'Jamais vu' }}
                        </div>
                    </div>
                    <span class="badge {{ $agent->isOnline() ? 'badge-success' : 'badge-muted' }}">
                        {{ $agent->isOnline() ? 'En ligne' : 'Hors ligne' }}
                    </span>
                </div>
            @empty
                <div style="font-size:0.82rem;color:#94a3b8;text-align:center;padding:1rem 0;">
                    Aucun agent configuré
                </div>
            @endforelse
            <div style="margin-top:1rem;">
                <a href="{{ route('admin.connecteurs') }}" class="btn btn-ghost btn-sm" style="width:100%;justify-content:center;">
                    Gérer les connecteurs
                </a>
            </div>
        </div>

        {{-- Accès rapides --}}
        <div class="card" style="margin-top:1rem;">
            <div class="card-title" style="margin-bottom:0.75rem;">Accès rapide</div>
            <a href="{{ route('reset.index') }}" class="btn btn-primary" style="width:100%;justify-content:center;margin-bottom:0.5rem;">
                Reset unitaire
            </a>
            <a href="{{ route('batch.index') }}" class="btn btn-ghost" style="width:100%;justify-content:center;">
                Traitement lot
            </a>
        </div>
    </div>

</div>

</div>{{-- /data-dashboard-feed --}}

@endsection