@extends('layouts.atelier')

@section('title', 'Infos ESL ' . $eslId)
@section('page-title', 'Infos ESL ' . $eslId)

@section('topbar-actions')
    <a href="{{ route('inventaire.index') }}" class="btn btn-ghost btn-sm">← Inventaire</a>
    <a href="{{ route('reset.index', ['label_id' => $eslId]) }}" class="btn btn-primary btn-sm">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
            <path d="M4 4v6h6M20 20v-6h-6"/><path d="M20.49 9A9 9 0 1 0 21 12"/>
        </svg>
        Réinitialiser
    </a>
@endsection

@section('content')

@php
    $brand    = $brand    ?? 'hanshow';
    $raw      = $liveInfo?->raw ?? [];
    $lastHbMs = isset($raw['last_hb_time']) ? (int) $raw['last_hb_time'] : null;
    $lastHbIso = $lastHbMs ? \Carbon\Carbon::createFromTimestampMs($lastHbMs)->toIso8601String() : null;
    $resX     = $raw['resolution_x'] ?? null;
    $resY     = $raw['resolution_y'] ?? null;
    $desc     = $raw['description']  ?? null;
    $apMac    = $raw['ap_mac']       ?? null;
    $template = $raw['template']     ?? null;
    $isReset  = str_starts_with($template ?? '', 'RESET_');
    $batPct   = $liveInfo?->batteryPercent;
    $feedUrl  = route('inventaire.esl-info.feed', ['eslId' => $eslId, 'brand' => $brand, 'connector_id' => $connector?->id]);
@endphp

<div style="max-width:900px;">

{{-- ══ 1. FICHE LIVE AP ══════════════════════════════════════════════════════ --}}
<div class="card" id="esl-live-card"
     data-esl-info-feed="{{ $feedUrl }}"
     data-esl-id="{{ $eslId }}"
     data-connector-id="{{ $connector?->id }}">

    {{-- En-tête : statut + batterie + bouton Localiser --}}
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem;">

        <div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
            {{-- Badge statut --}}
            <span id="esl-live-status">
                @if($liveInfo && $liveInfo->online)
                    <span class="badge badge-success" style="font-size:0.82rem;">online</span>
                @elseif($liveInfo)
                    <span class="badge badge-muted" style="font-size:0.82rem;">offline</span>
                @else
                    <span class="badge badge-muted" style="font-size:0.82rem;">AP non dispo</span>
                @endif
            </span>

            {{-- Taille écran --}}
            @if(!empty($raw['screen_size']))
                <span style="font-size:0.85rem;color:#475569;font-weight:600;">{{ $raw['screen_size'] }} mm</span>
            @endif

            {{-- Firmware --}}
            @if($liveInfo && !empty($liveInfo->firmware))
                <span style="font-size:0.82rem;color:#94a3b8;">FW {{ $liveInfo->firmware }}</span>
            @endif
        </div>

        {{-- Batterie --}}
        <div id="esl-live-battery" style="display:flex;align-items:center;gap:0.75rem;">
            @if($batPct !== null)
                @include('partials.battery-icon', ['pct' => $batPct])
            @endif

            {{-- Bouton Localiser --}}
            @if($connector)
            <div class="locate-group" data-locate-target
                 data-esl-id="{{ $eslId }}"
                 data-connector-id="{{ $connector->id }}"
                 style="display:flex;align-items:center;gap:0.375rem;">
                <select class="locate-color" title="Couleur du clignotement">
                    <option value="red">Rouge</option>
                    <option value="green">Vert</option>
                    <option value="blue">Bleu</option>
                    <option value="multicolor">Multi</option>
                </select>
                <button type="button" class="btn btn-ghost btn-sm locate-btn">
                    <svg viewBox="0 0 20 20" fill="currentColor" width="13" height="13" style="flex-shrink:0">
                        <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.412.188-.802.465-1.095a5 5 0 10-4.93 0c.277.293.45.683.465 1.095H12z"/>
                    </svg>
                    Localiser
                </button>
            </div>
            @endif
        </div>
    </div>

    @if($liveInfo && !empty($raw))

    {{-- Chips d'informations techniques --}}
    <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem;">

        @if($resX && $resY)
        <span style="display:inline-flex;align-items:center;padding:2px 10px;background:#f1f5f9;border-radius:99px;font-size:0.78rem;color:#475569;font-weight:500;">
            {{ $resX }}×{{ $resY }} px
        </span>
        @endif

        @if($desc)
        <span style="display:inline-flex;align-items:center;padding:2px 10px;background:#f1f5f9;border-radius:99px;font-size:0.78rem;color:#475569;font-weight:500;">
            {{ $desc }}
        </span>
        @endif

        @if(isset($raw['temperature']) && $raw['temperature'] > 0)
        <span id="esl-live-temp" style="display:inline-flex;align-items:center;padding:2px 10px;background:#f1f5f9;border-radius:99px;font-size:0.78rem;color:#475569;font-weight:500;">
            {{ $raw['temperature'] }}°C
        </span>
        @endif

        @if($apMac)
        <span style="display:inline-flex;align-items:center;padding:2px 10px;background:#f1f5f9;border-radius:99px;font-size:0.78rem;color:#64748b;font-family:monospace;letter-spacing:0.03em;">
            AP {{ $apMac }}
        </span>
        @endif
    </div>

    {{-- Template actuel --}}
    @if($template)
    <div style="margin-bottom:1rem;padding:0.6rem 0.85rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;">
        <div style="font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:#94a3b8;margin-bottom:0.25rem;">Template actuel sur l'AP</div>
        <span id="esl-live-template" style="font-family:monospace;font-size:0.85rem;font-weight:700;color:{{ $isReset ? '#10b981' : '#f59e0b' }};">
            {{ $template }}
        </span>
        @if($isReset)
            <span class="badge badge-success" style="font-size:0.68rem;margin-left:8px;">RESET</span>
        @else
            <span class="badge badge-warning" style="font-size:0.68rem;margin-left:8px;">Autre</span>
        @endif
    </div>
    @endif

    {{-- Statistiques AP + Dernier contact --}}
    <div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-end;">

        @if(!empty($raw['success_rate']))
        <div>
            <div style="font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:#94a3b8;margin-bottom:2px;">Succès AP</div>
            <span style="font-size:1.1rem;font-weight:800;color:#10b981;">{{ $raw['success_rate'] }}</span>
        </div>
        @endif

        @if(isset($raw['failed_times']))
        <div>
            <div style="font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:#94a3b8;margin-bottom:2px;">Échecs AP</div>
            <span style="font-size:1.1rem;font-weight:800;color:{{ ($raw['failed_times'] ?? 0) > 0 ? '#ef4444' : '#94a3b8' }};">
                {{ $raw['failed_times'] ?? 0 }}
            </span>
        </div>
        @endif

        @if($lastHbIso)
        <div>
            <div style="font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:#94a3b8;margin-bottom:2px;">Dernier contact</div>
            <span id="esl-live-hb" data-ts="{{ $lastHbIso }}" style="font-size:0.85rem;color:#64748b;font-weight:600;">
                {{ \Carbon\Carbon::createFromTimestampMs($lastHbMs)->diffForHumans() }}
            </span>
        </div>
        @endif
    </div>

    @endif

    {{-- Avertissement si AP indisponible --}}
    @if($liveError)
    <div style="margin-top:{{ !empty($raw) ? '0.75rem' : '0' }};padding:0.5rem 0.75rem;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;font-size:0.82rem;color:#92400e;">
        ⚠ {{ $liveError }}
    </div>
    @endif
</div>

{{-- ══ 2. STATS NOTRE BASE ════════════════════════════════════════════════════ --}}
<div class="card" style="margin-top:1rem;">
    <div class="card-title" style="margin-bottom:0.75rem;">Historique dans notre base</div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;text-align:center;margin-bottom:0.75rem;">
        <div style="padding:0.75rem;background:#f8fafc;border-radius:8px;">
            <div style="font-size:1.6rem;font-weight:800;color:#1e293b;">{{ $stats['total'] }}</div>
            <div style="font-size:0.75rem;color:#64748b;margin-top:2px;">Opérations</div>
        </div>
        <div style="padding:0.75rem;background:#f0fdf4;border-radius:8px;">
            <div style="font-size:1.6rem;font-weight:800;color:#10b981;">{{ $stats['succes'] }}</div>
            <div style="font-size:0.75rem;color:#64748b;margin-top:2px;">Succès</div>
        </div>
        <div style="padding:0.75rem;background:#fff1f2;border-radius:8px;">
            <div style="font-size:1.6rem;font-weight:800;color:#ef4444;">{{ $stats['erreurs'] }}</div>
            <div style="font-size:0.75rem;color:#64748b;margin-top:2px;">Erreurs</div>
        </div>
    </div>
    @if($stats['last_at'])
    <div style="font-size:0.8rem;color:#94a3b8;text-align:center;">
        Dernier reset : <span data-ts="{{ $stats['last_at']->toIso8601String() }}">{{ $stats['last_at']->diffForHumans() }}</span>
    </div>
    @else
    <div style="font-size:0.8rem;color:#94a3b8;text-align:center;">Aucun reset effectué via cette application.</div>
    @endif
</div>

{{-- ══ 3. DERNIER TEMPLATE ENVOYÉ ════════════════════════════════════════════ --}}
@if($lastReset)
<div class="card" style="margin-top:1rem;">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.85rem;">
        <div class="card-title" style="margin:0;">Dernier template envoyé</div>
        <div style="display:flex;align-items:center;gap:0.5rem;">
            @if($lastReset->confirmed_at && $lastReset->ack_status === 'success')
                <span class="badge badge-success">✓ Confirmé par l'ESL</span>
            @elseif($lastReset->confirmed_at)
                <span class="badge badge-danger">✗ ACK échoué</span>
            @else
                <span class="badge badge-muted">Pas d'ACK</span>
            @endif
            @if($lastReset->mock)
                <span class="badge badge-warning" style="font-size:0.68rem;">Démo</span>
            @endif
        </div>
    </div>

    {{-- Métadonnées --}}
    <div style="display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:1rem;font-size:0.82rem;color:#64748b;">
        <span>
            <strong>Session :</strong>
            <a href="{{ route('historique.show', $lastReset->session_id) }}" style="color:#2563eb;">
                {{ $lastReset->session?->nom ?? ('Session #' . $lastReset->session_id) }}
            </a>
        </span>
        <span><strong>Date :</strong> {{ $lastReset->created_at?->format('d/m/Y H:i') }}</span>
        @if($lastReset->duration_ms)
        <span><strong>Durée :</strong> {{ $lastReset->duration_ms }} ms</span>
        @endif
        @if($lastReset->task_sid)
        <span><strong>SID :</strong> <code style="font-size:0.78rem;">{{ $lastReset->task_sid }}</code></span>
        @endif
    </div>

    {{-- Réponse API (response_data) --}}
    @if($lastReset->response_data)
    <div style="margin-bottom:0.85rem;">
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:#94a3b8;margin-bottom:0.35rem;">
            Réponse {{ ucfirst($brand) }} — données agent
        </div>
        <pre style="background:#0f172a;color:#e2e8f0;padding:0.85rem 1rem;border-radius:8px;font-size:0.78rem;line-height:1.6;overflow-x:auto;margin:0;font-family:'Courier New',monospace;">{{ json_encode($lastReset->response_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
    </div>
    @endif

    {{-- ACK callback ESL (ack_raw) --}}
    @if($lastReset->ack_raw)
    <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:#94a3b8;margin-bottom:0.35rem;">
            Confirmation ESL — ACK callback
            @if($lastReset->confirmed_at)
                <span style="color:#10b981;font-weight:600;">· {{ $lastReset->confirmed_at->format('H:i:s') }}</span>
            @endif
        </div>
        <pre style="background:#0f172a;color:#86efac;padding:0.85rem 1rem;border-radius:8px;font-size:0.78rem;line-height:1.6;overflow-x:auto;margin:0;font-family:'Courier New',monospace;">{{ json_encode($lastReset->ack_raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
    </div>
    @else
    <div style="padding:0.6rem 0.85rem;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;font-size:0.8rem;color:#94a3b8;">
        Aucun ACK reçu pour ce reset (timeout ou mock).
    </div>
    @endif
</div>
@elseif($stats['total'] > 0)
<div class="card" style="margin-top:1rem;">
    <div class="card-title" style="margin-bottom:0.5rem;">Dernier template envoyé</div>
    <div style="font-size:0.85rem;color:#94a3b8;text-align:center;padding:1rem 0;">
        Aucun reset réussi enregistré pour cette ESL.
    </div>
</div>
@endif

</div>{{-- /max-width:900px --}}

{{-- ══ 4. HISTORIQUE DES OPÉRATIONS (pleine largeur) ═══════════════════════ --}}
<div class="card" style="margin-top:1rem;">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.85rem;">
        <div class="card-title" style="margin:0;">
            Historique des opérations
            @if($stats['total'] > 0)
                <span style="font-size:0.78rem;color:#94a3b8;font-weight:400;margin-left:6px;">({{ $stats['total'] }})</span>
            @endif
        </div>
    </div>

    <div id="esl-ops-table-wrap" class="table-wrap">
        @if($operations->isEmpty())
        <div style="text-align:center;padding:2.5rem;color:#94a3b8;font-size:0.9rem;">
            Aucune opération dans la base pour cette étiquette.
        </div>
        @else
        @php
        $statutMap = [
            'pending'   => ['badge-muted',   '—'],
            'checking'  => ['badge-info',     '⏳'],
            'ping_ok'   => ['badge-info',     'Ping OK'],
            'ping_fail' => ['badge-danger',   '✗ Ping'],
            'reset_ok'  => ['badge-success',  '✓ Reset'],
            'erreur'    => ['badge-danger',   '✗ Erreur'],
        ];
        @endphp
        <table class="data-table" style="font-size:0.82rem;">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Session</th>
                    <th>Statut</th>
                    <th>Ping</th>
                    <th>Reset</th>
                    <th>Batterie</th>
                    <th>FW</th>
                    <th>Durée</th>
                    <th>ACK</th>
                    <th>Mode</th>
                </tr>
            </thead>
            <tbody>
            @foreach($operations as $op)
            @php
                [$badgeCls, $badgeLbl] = $statutMap[$op->statut] ?? ['badge-muted', $op->statut];
                $opHbIso = $op->created_at?->toIso8601String();
            @endphp
            <tr>
                <td style="font-size:0.78rem;color:#64748b;white-space:nowrap;"
                    @if($opHbIso) data-ts="{{ $opHbIso }}" @endif>
                    {{ $op->created_at?->format('d/m/Y H:i') }}
                </td>
                <td>
                    <a href="{{ route('historique.show', $op->session_id) }}"
                       style="font-size:0.78rem;color:#2563eb;text-decoration:none;">
                        {{ $op->session?->nom ?? ('Session #' . $op->session_id) }}
                    </a>
                    @if($op->session?->type === 'batch')
                        <span class="badge badge-info" style="font-size:0.65rem;margin-left:3px;">lot</span>
                    @endif
                </td>
                <td>
                    <span class="badge {{ $badgeCls }}" style="font-size:0.72rem;">{{ $badgeLbl }}</span>
                    @if(in_array($op->statut, ['ping_fail','erreur']))
                        <button type="button" class="btn-retry"
                                data-label="{{ $op->label_id }}" data-brand="{{ $op->brand }}"
                                style="margin-left:4px;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:1px 6px;font-size:0.68rem;font-weight:600;color:#64748b;cursor:pointer;white-space:nowrap;">
                            Réessayer
                        </button>
                    @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 style="white-space:nowrap;">
                    @include('partials.battery-icon', ['pct' => $op->battery_pct])
                </td>
                <td style="font-size:0.78rem;color:#94a3b8;">{{ $op->firmware ?? '—' }}</td>
                <td style="font-size:0.78rem;color:#64748b;">{{ $op->duration_ms ? $op->duration_ms . ' ms' : '—' }}</td>
                <td>
                    @if($op->confirmed_at)
                        @if($op->ack_status === 'success')
                            <span class="badge badge-success" style="font-size:0.72rem;">✓ {{ $op->confirmed_at->format('H:i:s') }}</span>
                        @else
                            <span class="badge badge-danger" style="font-size:0.72rem;">✗ Échec</span>
                        @endif
                    @elseif($op->reset_ok)
                        <span class="badge badge-muted" style="font-size:0.68rem;">En attente…</span>
                    @else
                        <span class="badge badge-muted">—</span>
                    @endif
                </td>
                <td>
                    @if($op->mock)
                        <span class="badge badge-warning" style="font-size:0.68rem;">Démo</span>
                    @endif
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

@endsection