@extends('layouts.atelier')

@section('title', 'Session #' . $session->id)
@section('page-title', 'Détail session #' . $session->id)

@section('topbar-actions')
    <a href="{{ route('historique.csv', $session) }}" class="btn btn-ghost btn-sm" style="gap:4px;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
        CSV
    </a>
    <a href="{{ route('historique.index') }}" class="btn btn-ghost btn-sm">← Historique</a>
@endsection

@section('content')

{{-- Wrapper pour LiveSession JS (data-session-statut sert au JS pour choisir l'intervalle) --}}
<div data-live-session="{{ $session->id }}" data-session-statut="{{ $session->statut }}">

{{-- Résumé --}}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem;">
    <div class="card">
        <div class="card-title">Type</div>
        <div style="font-weight:700;font-size:1rem;">
            @if($session->type === 'batch')
                <span class="badge badge-info" style="font-size:0.85rem;">Lot</span>
            @else
                <span class="badge badge-muted" style="font-size:0.85rem;">Unitaire</span>
            @endif
        </div>
    </div>
    <div class="card">
        <div class="card-title">Marque</div>
        <div style="font-weight:700;font-size:1rem;">{{ ucfirst($session->brand) }}</div>
    </div>
    <div class="card">
        <div class="card-title">Total</div>
        <div class="kpi-value"><span id="sess-total">{{ $session->total }}</span></div>
    </div>
    <div class="card">
        <div class="card-title">Succès</div>
        <div class="kpi-value success"><span id="sess-succes">{{ $session->succes }}</span></div>
    </div>
    <div class="card">
        <div class="card-title">Erreurs</div>
        <div class="kpi-value danger"><span id="sess-erreurs">{{ $session->erreurs }}</span></div>
    </div>
    <div class="card">
        <div class="card-title">Statut</div>
        <div id="sess-statut" style="margin-top:0.4rem;">
            @if($session->statut === 'termine')
                <span class="badge badge-success">Terminé</span>
            @elseif($session->statut === 'erreur_partielle')
                <span class="badge badge-warning">Partiel</span>
            @else
                <span class="badge badge-info">En cours</span>
            @endif
        </div>
    </div>
</div>

<div style="margin-bottom:0.75rem;font-size:0.82rem;color:#64748b;">
    Lancé par <strong>{{ $session->user?->full_name }}</strong>
    le {{ $session->created_at->format('d/m/Y à H:i:s') }}
    @if($session->nom) — <em>{{ $session->nom }}</em> @endif
</div>

{{-- Opérations --}}
<div class="table-wrap">
    <table class="data-table">
        <thead>
            <tr>
                <th>ID étiquette</th>
                <th>Batterie</th>
                <th>Info ESL</th>
                <th>Ping</th>
                <th>Reset</th>
                <th>Confirmé</th>
                <th>Statut</th>
                <th>Durée</th>
                <th>Mode</th>
                <th>Message</th>
            </tr>
        </thead>
        <tbody id="ops-tbody">
        @forelse($operations as $op)
            <tr>
                <td style="font-weight:700;font-family:monospace;letter-spacing:0.04em;">{{ $op->label_id }}</td>
                {{-- Batterie --}}
                <td style="white-space:nowrap;">
                    @include('partials.battery-icon', ['pct' => $op->battery_pct])
                </td>
                {{-- Info ESL --}}
                <td style="font-size:0.78rem;min-width:120px;">
                    @if($op->esl_status)
                        @php $sc = $op->esl_status === 'online' ? '#10b981' : '#94a3b8'; @endphp
                        <span style="display:inline-block;padding:1px 7px;border-radius:99px;font-size:0.7rem;font-weight:600;background:{{ $sc }}1a;color:{{ $sc }};margin-bottom:2px;">
                            {{ $op->esl_status }}
                        </span><br>
                    @endif
                    @if($op->screen_size)
                        <span style="color:#64748b;">{{ $op->screen_size }} mm</span>
                    @endif
                    @if($op->firmware)
                        <span style="color:#94a3b8;margin-left:4px;">· FW {{ $op->firmware }}</span>
                    @endif
                    @if($op->last_seen_at)
                        <br><span style="color:#94a3b8;font-size:0.72rem;">{{ $op->last_seen_at->diffForHumans() }}</span>
                    @endif
                    @if(!$op->esl_status && !$op->screen_size && !$op->firmware)
                        <span style="color:#cbd5e1;">—</span>
                    @endif
                </td>
                <td>
                    @if($op->ping_ok === true)
                        <span class="badge badge-success">OK</span>
                    @elseif($op->ping_ok === false)
                        <span class="badge badge-danger">KO</span>
                    @else
                        <span class="badge badge-muted">—</span>
                    @endif
                </td>
                <td>
                    @if($op->reset_ok === true)
                        <span class="badge badge-success">OK</span>
                    @elseif($op->reset_ok === false)
                        <span class="badge badge-danger">KO</span>
                    @else
                        <span class="badge badge-muted">—</span>
                    @endif
                </td>
                <td>
                    @if($op->confirmed_at)
                        @if($op->ack_status === 'success')
                            <span class="badge badge-success">✓ {{ $op->confirmed_at->format('H:i:s') }}</span>
                        @else
                            <span class="badge badge-danger">✗ Échec ESL</span>
                        @endif
                    @elseif($op->reset_ok === true)
                        <span class="badge badge-muted" style="font-size:0.72rem;">En attente…</span>
                    @else
                        <span class="badge badge-muted">—</span>
                    @endif
                </td>
                <td>
                    @php
                        $badgeMap = [
                            'pending'   => 'badge-muted',
                            'checking'  => 'badge-info',
                            'ping_ok'   => 'badge-info',
                            'ping_fail' => 'badge-danger',
                            'reset_ok'  => 'badge-success',
                            'erreur'    => 'badge-danger',
                        ];
                    @endphp
                    <span class="badge {{ $badgeMap[$op->statut] ?? 'badge-muted' }}">{{ $op->statut }}</span>
                </td>
                <td style="font-size:0.8rem;color:#64748b;">
                    {{ $op->duration_ms ? $op->duration_ms . ' ms' : '—' }}
                </td>
                <td>
                    @if($op->mock)
                        <span class="badge badge-warning" style="font-size:0.68rem;">Démo</span>
                    @endif
                </td>
                <td style="font-size:0.78rem;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                    @if($op->error_message)
                        <span style="color:#ef4444;">{{ $op->error_message }}</span>
                    @endif
                    @if($op->isError())
                        <button type="button" class="btn-retry" data-operation-id="{{ $op->id }}"
                                style="margin-left:6px;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:2px 8px;font-size:0.72rem;font-weight:600;color:#64748b;cursor:pointer;white-space:nowrap;">
                            Réessayer
                        </button>
                    @endif
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="10" style="text-align:center;color:#94a3b8;padding:2rem;">Aucune opération.</td>
            </tr>
        @endforelse
        </tbody>
    </table>
</div>

</div>{{-- /data-live-session --}}

@endsection