@extends('layouts.admin')

@section('title', 'AIR Job - ' . ($job['file_name'] ?? 'N/A'))
@section('header', 'Detail AIR Job')

@section('content')
<!-- Retour + Actions -->
<div class="mb-6 flex items-center justify-between">
    <a href="{{ route('dashboard.air-jobs.index') }}"
       class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-900">
        <i class="fas fa-arrow-left mr-2"></i>Retour a la liste
    </a>
    @if($job['retry']['can_retry'] ?? false)
        <form action="{{ route('dashboard.air-jobs.retry', $job['uuid'] ?? '') }}" method="POST"
              onsubmit="return confirm('Rejouer ce job ?')">
            @csrf
            <button type="submit"
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
                <i class="fas fa-redo mr-2"></i>Rejouer
            </button>
        </form>
    @endif
</div>

@php
    $status = $job['status'] ?? 'UNKNOWN';
    $statusClass = match($status) {
        'COMPLETED' => 'bg-green-100 text-green-800',
        'PENDING' => 'bg-yellow-100 text-yellow-800',
        'PARSING', 'CONVERTING', 'INSERTING' => 'bg-blue-100 text-blue-800',
        'PARSED', 'CONVERTED' => 'bg-indigo-100 text-indigo-800',
        'PARSE_FAILED', 'CONVERT_FAILED', 'INSERT_FAILED' => 'bg-red-100 text-red-800',
        'CANCELLED' => 'bg-gray-100 text-gray-800',
        'QUARANTINE' => 'bg-red-100 text-red-800',
        default => 'bg-gray-100 text-gray-800',
    };
@endphp

<!-- En-tete -->
<div class="mb-6 rounded-lg bg-white shadow p-6">
    <div class="flex items-start justify-between">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <i class="fas fa-file text-indigo-500"></i>
                <h2 class="text-xl font-bold text-gray-900">{{ $job['file_name'] ?? 'N/A' }}</h2>
            </div>
            <p class="text-sm text-gray-500 font-mono">UUID: {{ $job['uuid'] ?? '-' }}</p>
        </div>
        <div class="flex flex-col items-end gap-2">
            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold {{ $statusClass }}">
                {{ $status }}
            </span>
            <span class="text-sm text-gray-500">
                <i class="fas fa-bolt mr-1"></i>{{ $job['progress_percentage'] ?? 0 }}% complete
            </span>
        </div>
    </div>
</div>

<!-- Informations generales -->
<div class="mb-6 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900"><i class="fas fa-info-circle text-indigo-500 mr-2"></i>Informations generales</h3>
    </div>
    <div class="px-6 py-4">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <p class="text-xs font-medium text-blue-600 uppercase">Type</p>
                <p class="text-lg font-bold text-gray-900 mt-1">{{ $job['file_type'] ?? '-' }}</p>
            </div>
            <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                <p class="text-xs font-medium text-purple-600 uppercase">Taille</p>
                <p class="text-lg font-bold text-gray-900 mt-1">
                    {{ isset($job['file_size']) ? number_format($job['file_size'] / 1024, 2) . ' KB' : '-' }}
                </p>
            </div>
            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                <p class="text-xs font-medium text-green-600 uppercase">Cree le</p>
                <p class="text-lg font-bold text-gray-900 mt-1">
                    {{ isset($job['created_at']) ? date('d/m/Y H:i', strtotime($job['created_at'])) : '-' }}
                </p>
            </div>
        </div>

        @if(isset($job['office_id']) || isset($job['target_table']))
        <div class="grid grid-cols-2 gap-4 mt-4">
            @if(isset($job['office_id']))
            <div class="bg-amber-50 p-4 rounded-lg border border-amber-200">
                <p class="text-xs font-medium text-amber-600 uppercase">Office ID</p>
                <p class="text-lg font-bold text-gray-900 mt-1">{{ $job['office_id'] }}</p>
            </div>
            @endif
            @if(isset($job['target_table']))
            <div class="bg-cyan-50 p-4 rounded-lg border border-cyan-200">
                <p class="text-xs font-medium text-cyan-600 uppercase">Table cible</p>
                <p class="text-lg font-bold text-gray-900 mt-1">{{ $job['target_table'] }}</p>
            </div>
            @endif
        </div>
        @endif
    </div>
</div>

<!-- Hash du fichier -->
@if(isset($job['file_hash']))
<div class="mb-6 rounded-lg bg-white shadow p-6">
    <p class="text-xs font-medium text-gray-500 uppercase mb-2"><i class="fas fa-fingerprint mr-1"></i>Hash SHA256</p>
    <p class="text-xs font-mono text-gray-700 break-all bg-gray-50 p-2 rounded">{{ $job['file_hash'] }}</p>
</div>
@endif

<!-- Fichiers JSON generes -->
@php
    $jsonAirPath = $job['paths']['json_air'] ?? $job['json_air_path'] ?? null;
    $jsonEstairPath = $job['paths']['json_estair'] ?? $job['json_estair_path'] ?? null;
@endphp
@if($jsonAirPath || $jsonEstairPath)
<div class="mb-6 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900"><i class="fas fa-file-code text-indigo-500 mr-2"></i>Fichiers JSON generes</h3>
    </div>
    <div class="px-6 py-4 space-y-3">
        @if($jsonAirPath)
        <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
            <p class="text-xs font-medium text-blue-600 uppercase mb-1">JSON AIR</p>
            <p class="text-xs font-mono text-gray-700 break-all bg-white p-2 rounded">{{ $jsonAirPath }}</p>
        </div>
        @endif
        @if($jsonEstairPath)
        <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
            <p class="text-xs font-medium text-purple-600 uppercase mb-1">JSON ESTAIR</p>
            <p class="text-xs font-mono text-gray-700 break-all bg-white p-2 rounded">{{ $jsonEstairPath }}</p>
        </div>
        @endif
    </div>
</div>
@endif

<!-- Durees de traitement -->
@php
    $parseMs = $job['durations']['parse_ms'] ?? $job['parse_duration_ms'] ?? null;
    $convertMs = $job['durations']['convert_ms'] ?? $job['convert_duration_ms'] ?? null;
    $insertMs = $job['durations']['insert_ms'] ?? $job['insert_duration_ms'] ?? null;
    $totalMs = $job['durations']['total_ms'] ?? (($parseMs ?? 0) + ($convertMs ?? 0) + ($insertMs ?? 0));
@endphp
@if($parseMs || $convertMs || $insertMs || $totalMs)
<div class="mb-6 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900"><i class="fas fa-clock text-indigo-500 mr-2"></i>Durees de traitement</h3>
    </div>
    <div class="px-6 py-4">
        <div class="grid grid-cols-4 gap-4">
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <div class="flex items-center gap-2 mb-1">
                    <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                    <p class="text-xs font-medium text-blue-600 uppercase">Parse</p>
                </div>
                <p class="text-xl font-bold text-gray-900">{{ $parseMs ? number_format($parseMs / 1000, 2) . 's' : '-' }}</p>
            </div>
            <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                <div class="flex items-center gap-2 mb-1">
                    <div class="w-2 h-2 rounded-full bg-purple-500"></div>
                    <p class="text-xs font-medium text-purple-600 uppercase">Conversion</p>
                </div>
                <p class="text-xl font-bold text-gray-900">{{ $convertMs ? number_format($convertMs / 1000, 2) . 's' : '-' }}</p>
            </div>
            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                <div class="flex items-center gap-2 mb-1">
                    <div class="w-2 h-2 rounded-full bg-green-500"></div>
                    <p class="text-xs font-medium text-green-600 uppercase">Insertion</p>
                </div>
                <p class="text-xl font-bold text-gray-900">{{ $insertMs ? number_format($insertMs / 1000, 2) . 's' : '-' }}</p>
            </div>
            <div class="bg-indigo-50 p-4 rounded-lg border-2 border-indigo-300">
                <div class="flex items-center gap-2 mb-1">
                    <i class="fas fa-check-circle text-indigo-500 text-xs"></i>
                    <p class="text-xs font-medium text-indigo-600 uppercase">Total</p>
                </div>
                <p class="text-xl font-bold text-indigo-700">{{ $totalMs ? number_format($totalMs / 1000, 2) . 's' : '-' }}</p>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Insertions en base -->
@php
    $segmentsInserted = $job['insertions']['segments'] ?? $job['segments_inserted'] ?? 0;
    $recordsInserted = $job['insertions']['records'] ?? $job['records_inserted'] ?? 0;
    $accountsInserted = $job['insertions']['accounts'] ?? $job['accounts_inserted'] ?? 0;
    $beneficiairesInserted = $job['insertions']['beneficiaires'] ?? $job['beneficiaires_inserted'] ?? 0;
    $compagniesInserted = $job['insertions']['compagnies'] ?? $job['compagnies_inserted'] ?? 0;
    $totalInserted = $job['insertions']['total'] ?? ($segmentsInserted + $recordsInserted + $accountsInserted + $beneficiairesInserted + $compagniesInserted);
@endphp
@if($segmentsInserted || $recordsInserted || $accountsInserted || $beneficiairesInserted || $compagniesInserted)
<div class="mb-6 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900"><i class="fas fa-database text-indigo-500 mr-2"></i>Insertions en base</h3>
    </div>
    <div class="px-6 py-4">
        <div class="grid grid-cols-3 gap-4">
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-xs font-medium text-teal-600 uppercase">Segments</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($segmentsInserted) }}</p>
            </div>
            <div class="bg-sky-50 p-4 rounded-lg border border-sky-200">
                <p class="text-xs font-medium text-sky-600 uppercase">Etatsdeventes</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($recordsInserted) }}</p>
            </div>
            <div class="bg-violet-50 p-4 rounded-lg border border-violet-200">
                <p class="text-xs font-medium text-violet-600 uppercase">Accounts</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($accountsInserted) }}</p>
            </div>
            <div class="bg-pink-50 p-4 rounded-lg border border-pink-200">
                <p class="text-xs font-medium text-pink-600 uppercase">Beneficiaires</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($beneficiairesInserted) }}</p>
            </div>
            <div class="bg-orange-50 p-4 rounded-lg border border-orange-200">
                <p class="text-xs font-medium text-orange-600 uppercase">Compagnies</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($compagniesInserted) }}</p>
            </div>
            <div class="bg-emerald-50 p-4 rounded-lg border-2 border-emerald-300">
                <div class="flex items-center gap-2">
                    <i class="fas fa-check-circle text-emerald-500 text-xs"></i>
                    <p class="text-xs font-medium text-emerald-600 uppercase">Total</p>
                </div>
                <p class="text-2xl font-bold text-emerald-700 mt-1">{{ number_format($totalInserted) }}</p>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Timeline de traitement -->
@php
    $parseStarted = $job['timestamps']['parse_started'] ?? $job['parse_started_at'] ?? null;
    $parseCompleted = $job['timestamps']['parse_completed'] ?? $job['parse_completed_at'] ?? null;
    $convertStarted = $job['timestamps']['convert_started'] ?? $job['convert_started_at'] ?? null;
    $convertCompleted = $job['timestamps']['convert_completed'] ?? $job['convert_completed_at'] ?? null;
    $insertStarted = $job['timestamps']['insert_started'] ?? $job['insert_started_at'] ?? null;
    $insertCompleted = $job['timestamps']['insert_completed'] ?? $job['insert_completed_at'] ?? null;
@endphp
@if($parseStarted || $convertStarted || $insertStarted)
<div class="mb-6 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900"><i class="fas fa-stream text-indigo-500 mr-2"></i>Timeline de traitement</h3>
    </div>
    <div class="px-6 py-4">
        <div class="relative">
            <div class="absolute left-6 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-300 via-purple-300 to-green-300"></div>
            <div class="space-y-4">
                @if($parseStarted)
                <div class="relative pl-14">
                    <div class="absolute left-4 top-3 w-4 h-4 rounded-full bg-blue-500 border-4 border-white shadow"></div>
                    <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
                        <p class="text-sm font-bold text-blue-700 uppercase mb-2"><i class="fas fa-file-alt mr-1"></i>PARSE</p>
                        <div class="text-xs text-gray-700 space-y-1">
                            <div><span class="font-medium text-blue-600">Debut:</span> {{ date('d/m/Y H:i:s', strtotime($parseStarted)) }}</div>
                            @if($parseCompleted)
                            <div><span class="font-medium text-blue-600">Fin:</span> {{ date('d/m/Y H:i:s', strtotime($parseCompleted)) }}</div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
                @if($convertStarted)
                <div class="relative pl-14">
                    <div class="absolute left-4 top-3 w-4 h-4 rounded-full bg-purple-500 border-4 border-white shadow"></div>
                    <div class="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
                        <p class="text-sm font-bold text-purple-700 uppercase mb-2"><i class="fas fa-exchange-alt mr-1"></i>CONVERT</p>
                        <div class="text-xs text-gray-700 space-y-1">
                            <div><span class="font-medium text-purple-600">Debut:</span> {{ date('d/m/Y H:i:s', strtotime($convertStarted)) }}</div>
                            @if($convertCompleted)
                            <div><span class="font-medium text-purple-600">Fin:</span> {{ date('d/m/Y H:i:s', strtotime($convertCompleted)) }}</div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
                @if($insertStarted)
                <div class="relative pl-14">
                    <div class="absolute left-4 top-3 w-4 h-4 rounded-full bg-green-500 border-4 border-white shadow"></div>
                    <div class="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
                        <p class="text-sm font-bold text-green-700 uppercase mb-2"><i class="fas fa-database mr-1"></i>INSERT</p>
                        <div class="text-xs text-gray-700 space-y-1">
                            <div><span class="font-medium text-green-600">Debut:</span> {{ date('d/m/Y H:i:s', strtotime($insertStarted)) }}</div>
                            @if($insertCompleted)
                            <div><span class="font-medium text-green-600">Fin:</span> {{ date('d/m/Y H:i:s', strtotime($insertCompleted)) }}</div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endif

<!-- Erreur -->
@if(isset($job['error_message']) && $job['error_message'])
<div class="mb-6 rounded-lg bg-red-50 shadow border-l-4 border-red-500 p-6">
    <div class="flex items-start gap-3">
        <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
        <div class="flex-1">
            <h3 class="text-base font-bold text-red-800">
                Erreur lors de l'etape:
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-red-200 text-red-900">
                    {{ $job['error_step'] ?? 'Inconnue' }}
                </span>
            </h3>
            <p class="mt-3 text-sm text-red-700 bg-white p-3 rounded-lg border border-red-200">
                {{ $job['error_message'] }}
            </p>
            @if(isset($job['error_trace']) && $job['error_trace'])
            <details class="mt-4">
                <summary class="cursor-pointer text-sm font-medium text-red-800 hover:text-red-900">
                    <i class="fas fa-chevron-right mr-1"></i>Afficher la trace complete
                </summary>
                <pre class="mt-3 text-xs text-red-700 bg-white p-4 rounded-lg border border-red-200 overflow-x-auto">{{ $job['error_trace'] }}</pre>
            </details>
            @endif
        </div>
    </div>
</div>
@endif

<!-- Logs -->
@if(!empty($logs))
<div class="mb-6 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900"><i class="fas fa-list text-indigo-500 mr-2"></i>Logs ({{ count($logs) }})</h3>
    </div>
    <div class="px-6 py-4">
        <div class="flex gap-2 mb-4" x-data="{ level: 'all' }">
            <button @click="level = 'all'" :class="level === 'all' ? 'bg-indigo-100 text-indigo-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    class="px-3 py-1 text-xs rounded-md font-medium">Tous</button>
            @foreach(['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'] as $lvl)
                <button @click="level = '{{ $lvl }}'"
                        :class="level === '{{ $lvl }}' ? '{{ in_array($lvl, ['ERROR', 'CRITICAL']) ? 'bg-red-100 text-red-800' : ($lvl === 'WARNING' ? 'bg-yellow-100 text-yellow-800' : ($lvl === 'INFO' ? 'bg-blue-100 text-blue-800' : 'bg-gray-200 text-gray-800')) }}' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                        class="px-3 py-1 text-xs rounded-md font-medium">{{ $lvl }}</button>
            @endforeach
        </div>

        <div class="max-h-96 overflow-y-auto space-y-2 bg-gray-50 rounded-lg p-4">
            @foreach($logs as $log)
                @php
                    $logLevel = $log['level'] ?? 'INFO';
                    $logBorder = match($logLevel) {
                        'ERROR', 'CRITICAL' => 'border-red-500 bg-red-50',
                        'WARNING' => 'border-yellow-500 bg-yellow-50',
                        'INFO' => 'border-blue-500 bg-blue-50',
                        default => 'border-gray-300 bg-white',
                    };
                    $logBadge = match($logLevel) {
                        'ERROR', 'CRITICAL' => 'bg-red-200 text-red-800',
                        'WARNING' => 'bg-yellow-200 text-yellow-800',
                        'INFO' => 'bg-blue-200 text-blue-800',
                        default => 'bg-gray-200 text-gray-800',
                    };
                @endphp
                <div class="border-l-4 pl-3 py-2 {{ $logBorder }}" x-show="level === 'all' || level === '{{ $logLevel }}'">
                    <div class="flex items-center gap-2 mb-1 flex-wrap">
                        <span class="px-2 py-0.5 text-xs font-semibold rounded {{ $logBadge }}">{{ $logLevel }}</span>
                        @if($log['step'] ?? null)
                            <span class="px-2 py-0.5 text-xs bg-purple-100 text-purple-800 rounded font-medium">{{ $log['step'] }}</span>
                        @endif
                        <span class="text-xs text-gray-500">
                            {{ isset($log['created_at']) ? \Carbon\Carbon::parse($log['created_at'])->format('d/m/Y H:i:s') : '' }}
                        </span>
                        @if($log['duration_ms'] ?? null)
                            <span class="text-xs text-gray-400">({{ number_format($log['duration_ms'] / 1000, 2) }}s)</span>
                        @endif
                    </div>
                    <p class="text-sm font-medium text-gray-900">{{ $log['message'] ?? '' }}</p>
                    @if(!empty($log['context']))
                        <details class="mt-1">
                            <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-700">Contexte</summary>
                            <pre class="mt-1 text-xs bg-gray-100 p-2 rounded overflow-x-auto">{{ json_encode($log['context'], JSON_PRETTY_PRINT) }}</pre>
                        </details>
                    @endif
                    @if($log['exception'] ?? null)
                        <details class="mt-1">
                            <summary class="text-xs text-red-600 cursor-pointer hover:text-red-800">Exception</summary>
                            <pre class="mt-1 text-xs bg-red-50 p-2 rounded overflow-x-auto text-red-900">{{ substr($log['exception'], 0, 1000) }}...</pre>
                        </details>
                    @endif
                </div>
            @endforeach
        </div>
        <p class="text-xs text-gray-500 mt-2">{{ count($logs) }} log(s) affiches (limite: 100)</p>
    </div>
</div>
@endif
@endsection