@extends('layouts.admin')

@section('title', 'Message #' . $message->id)
@section('header', 'Message #' . $message->id)

@section('content')
<div class="mb-4">
    <a href="{{ route('dashboard.messages.index') }}" class="text-sm text-indigo-600 hover:text-indigo-900">
        <i class="fas fa-arrow-left mr-1"></i>Retour à la liste
    </a>
</div>

<div class="grid grid-cols-1 gap-6">
    <!-- Informations principales -->
    <div class="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">Informations</h3>
        </div>
        <div class="px-6 py-4">
            <dl class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div>
                    <dt class="text-sm font-medium text-gray-500">ID</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $message->id }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Domaine</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $message->domain->name ?? 'N/A' }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Statut</dt>
                    <dd class="mt-1">
                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
                            {{ $message->status === 'completed' ? 'bg-green-100 text-green-800' :
                               ($message->status === 'failed' ? 'bg-red-100 text-red-800' :
                               ($message->status === 'processing' ? 'bg-blue-100 text-blue-800' :
                               ($message->status === 'dispatched' ? 'bg-indigo-100 text-indigo-800' :
                               ($message->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')))) }}">
                            {{ ucfirst($message->status) }}
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Queue</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $message->queue_name ?? 'default' }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Tentatives</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $message->attempts }} / {{ $message->max_attempts }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Temps de traitement</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        {{ $message->processing_time_ms ? round($message->processing_time_ms / 1000, 2) . 's' : 'N/A' }}
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Date de création</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $message->created_at->format('d/m/Y H:i:s') }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Démarré le</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $message->started_at?->format('d/m/Y H:i:s') ?? 'N/A' }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Terminé le</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        {{ $message->completed_at?->format('d/m/Y H:i:s') ?? $message->failed_at?->format('d/m/Y H:i:s') ?? 'N/A' }}
                    </dd>
                </div>
                @if($message->message_id)
                <div class="sm:col-span-3">
                    <dt class="text-sm font-medium text-gray-500">Message ID</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-mono">{{ $message->message_id }}</dd>
                </div>
                @endif
            </dl>
        </div>
    </div>

    <!-- Timeline d'Audit -->
    <div class="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-history mr-2"></i>Piste d'Audit
            </h3>
        </div>
        <div class="px-6 py-4">
            <div class="flow-root">
                <ul role="list" class="-mb-8">
                    <!-- Message Créé -->
                    <li>
                        <div class="relative pb-8">
                            <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
                                        <i class="fas fa-plus text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">Message créé</p>
                                        <p class="text-xs text-gray-500 mt-0.5">
                                            ID: {{ $message->id }} | Domain: {{ $message->domain->name }}
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                        {{ $message->created_at->format('H:i:s') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <!-- ProcessingLog Créé (si existe) -->
                    @foreach($message->processingLogs as $log)
                    <li>
                        <div class="relative pb-8">
                            <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center ring-8 ring-white">
                                        <i class="fas fa-file-alt text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">ProcessingLog créé</p>
                                        <p class="text-xs text-gray-500 mt-0.5">
                                            Source: {{ $log->source_type }} | File: {{ $log->source_identifier }}
                                            <a href="{{ route('dashboard.processing-logs.show', $log->id) }}" class="text-indigo-600 hover:text-indigo-900 ml-2">
                                                <i class="fas fa-external-link-alt"></i> Voir détails
                                            </a>
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                        {{ $log->created_at->format('H:i:s') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endforeach

                    <!-- Job Dispatché -->
                    @if($message->started_at)
                    <li>
                        <div class="relative pb-8">
                            <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center ring-8 ring-white">
                                        <i class="fas fa-paper-plane text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">Traitement démarré</p>
                                        <p class="text-xs text-gray-500 mt-0.5">
                                            Queue: {{ $message->queue_name ?? 'default' }} | Attempt: {{ $message->attempts }}
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                        {{ $message->started_at->format('H:i:s') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endif

                    <!-- Webhook Appelé -->
                    @if($message->domain->webhook_url && $message->started_at)
                    <li>
                        <div class="relative pb-8">
                            <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center ring-8 ring-white">
                                        <i class="fas fa-globe text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">Webhook appelé</p>
                                        <p class="text-xs text-gray-500 mt-0.5">
                                            URL: {{ $message->domain->webhook_url }}
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                        {{ $message->started_at->copy()->addSeconds(1)->format('H:i:s') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endif

                    <!-- Résultat Final -->
                    @if($message->status === 'completed')
                    <li>
                        <div class="relative pb-8">
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
                                        <i class="fas fa-check text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">✅ Traitement réussi</p>
                                        <p class="text-xs text-gray-500 mt-0.5">
                                            Durée: {{ round($message->processing_time_ms / 1000, 2) }}s
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                        {{ $message->completed_at->format('H:i:s') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    @elseif($message->status === 'failed')
                    <li>
                        <div class="relative pb-8">
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-red-500 flex items-center justify-center ring-8 ring-white">
                                        <i class="fas fa-times text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">❌ Échec du traitement</p>
                                        <p class="text-xs text-gray-500 mt-0.5">
                                            Durée: {{ $message->processing_time_ms ? round($message->processing_time_ms / 1000, 2) . 's' : 'N/A' }}
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                        {{ $message->failed_at?->format('H:i:s') ?? 'N/A' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endif

                    <!-- ProcessingLog Mis à Jour -->
                    @foreach($message->processingLogs->where('status', 'failed') as $log)
                    <li>
                        <div class="relative pb-8">
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-orange-500 flex items-center justify-center ring-8 ring-white">
                                        <i class="fas fa-exclamation text-white text-xs"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">ProcessingLog mis à jour</p>
                                        <p class="text-xs text-gray-500 mt-0.5">
                                            Status: failed | Error: {{ $log->error_code }}
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                        {{ $log->processed_at?->format('H:i:s') ?? 'N/A' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    <!-- Payload -->
    @if($message->payload)
        <div class="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">Payload</h3>
            </div>
            <div class="px-6 py-4">
                <pre class="overflow-x-auto rounded-md bg-gray-50 p-4 text-xs">{{ json_encode($message->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
            </div>
        </div>
    @endif

    <!-- Processing Logs Associés -->
    @if($message->processingLogs->isNotEmpty())
    <div class="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 mr-2"></i>Processing Logs Associés
            </h3>
        </div>
        <div class="px-6 py-4">
            <div class="space-y-4">
                @foreach($message->processingLogs as $log)
                <div class="border-l-4 {{ $log->status === 'success' ? 'border-green-500' : ($log->status === 'failed' ? 'border-red-500' : 'border-gray-300') }} pl-4">
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <p class="font-medium text-gray-900">
                                Log #{{ $log->id }} - {{ $log->source_type }}
                                <span class="ml-2 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                                    {{ $log->status === 'success' ? 'bg-green-100 text-green-800' : ($log->status === 'failed' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                                    {{ ucfirst($log->status) }}
                                </span>
                            </p>
                            <div class="mt-1 text-sm text-gray-500 space-y-1">
                                <div><strong>Fichier:</strong> {{ $log->source_identifier }}</div>
                                <div><strong>Type:</strong> {{ $log->data_type }}</div>
                                <div><strong>Cible:</strong> {{ $log->target_system }} → {{ $log->target_endpoint }}</div>
                                @if($log->status === 'failed')
                                    <div class="text-red-600"><strong>Erreur:</strong> {{ $log->error_message }}</div>
                                    <div><strong>Code:</strong> {{ $log->error_code }} | <strong>Type:</strong> {{ $log->error_type }}</div>
                                @endif
                            </div>
                        </div>
                        <div class="ml-4">
                            <a href="{{ route('dashboard.processing-logs.show', $log->id) }}"
                               class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                <i class="fas fa-eye mr-2"></i>Détails
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Erreur Détaillée -->
    @if($message->status === 'failed' && $message->error_message)
    <div class="rounded-lg bg-red-50 shadow border-2 border-red-200">
        <div class="border-b border-red-200 px-6 py-4 bg-red-100">
            <h3 class="text-lg font-medium text-red-900">
                <i class="fas fa-exclamation-circle mr-2"></i>Erreur Détaillée
            </h3>
        </div>
        <div class="px-6 py-4 space-y-4">
            <!-- Extraction du code d'erreur HTTP si présent -->
            @php
                $errorCode = null;
                $errorType = 'unknown';
                if (preg_match('/returned error: (\d{3})/', $message->error_message, $matches)) {
                    $errorCode = 'HTTP ' . $matches[1];
                    $errorType = in_array($matches[1], ['401', '403', '404', '422']) ? 'permanent' : 'temporary';
                }
            @endphp

            @if($errorCode)
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <dt class="text-sm font-medium text-red-800">Code d'erreur</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-mono">{{ $errorCode }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-red-800">Type d'erreur</dt>
                    <dd class="mt-1">
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                            {{ $errorType === 'permanent' ? 'bg-red-100 text-red-800' : 'bg-orange-100 text-orange-800' }}">
                            {{ ucfirst($errorType) }}
                        </span>
                    </dd>
                </div>
            </div>
            @endif

            <div>
                <dt class="text-sm font-medium text-red-800 mb-2 flex items-center justify-between">
                    <span>Message d'erreur</span>
                    <div class="flex gap-2">
                        <button onclick="toggleFullError()" id="toggleErrorBtn"
                                class="text-xs px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700">
                            <i class="fas fa-expand mr-1"></i>Voir tout
                        </button>
                        <a href="{{ route('dashboard.messages.download-error', $message->id) }}"
                           class="text-xs px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700">
                            <i class="fas fa-download mr-1"></i>Télécharger
                        </a>
                        <button onclick="copyError()"
                                class="text-xs px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700">
                            <i class="fas fa-copy mr-1"></i>Copier
                        </button>
                    </div>
                </dt>
                <dd class="mt-1">
                    @php
                        $errorLines = explode("\n", $message->error_message);
                        $previewLines = array_slice($errorLines, 0, 10);
                        $hasMore = count($errorLines) > 10;
                    @endphp
                    <pre id="errorPreview" class="text-sm text-gray-900 bg-white p-4 rounded-md border border-red-200 overflow-x-auto whitespace-pre-wrap">{{ implode("\n", $previewLines) }}@if($hasMore)

<span class="text-red-600 font-semibold">... ({{ count($errorLines) - 10 }} lignes supplémentaires - cliquez sur "Voir tout")</span>@endif</pre>
                    <pre id="errorFull" class="hidden text-sm text-gray-900 bg-white p-4 rounded-md border border-red-200 overflow-x-auto whitespace-pre-wrap">{{ $message->error_message }}</pre>
                </dd>
            </div>

            <!-- Recommandations intelligentes -->
            @if($errorCode === 'HTTP 401')
            <div class="rounded-md bg-blue-50 p-4 border border-blue-200">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-blue-400 text-lg"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">💡 Recommandations</h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <ul class="list-disc pl-5 space-y-1">
                                <li>Vérifier la clé API du domaine "{{ $message->domain->name }}"</li>
                                <li>Vérifier la configuration webhook dans Estair</li>
                                <li>S'assurer que le header X-API-Key est bien envoyé</li>
                                <li>Après correction, utiliser le bouton "Rejouer" ci-dessous</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @elseif($errorCode === 'HTTP 422')
            <div class="rounded-md bg-blue-50 p-4 border border-blue-200">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-blue-400 text-lg"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">💡 Recommandations</h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <ul class="list-disc pl-5 space-y-1">
                                <li>Erreur de validation des données</li>
                                <li>Vérifier que le payload contient tous les champs requis</li>
                                <li>Vérifier le format des données (types, longueurs)</li>
                                <li>Consulter la documentation de l'API Estair</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Réponse -->
    @if($message->response)
        <div class="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">Réponse</h3>
            </div>
            <div class="px-6 py-4">
                <pre class="overflow-x-auto rounded-md bg-gray-50 p-4 text-xs">{{ json_encode($message->response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
            </div>
        </div>
    @endif

    <!-- Actions Disponibles -->
    <div class="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-tools mr-2"></i>Actions
            </h3>
        </div>
        <div class="px-6 py-4">
            <div class="flex flex-wrap gap-3">
                <!-- Bouton Rejouer (si failed ou cancelled) -->
                @if($message->canReplay())
                <form action="{{ route('dashboard.messages.replay', $message->id) }}" method="POST"
                      onsubmit="return confirm('Êtes-vous sûr de vouloir rejouer ce message ?');">
                    @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-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        <i class="fas fa-redo mr-2"></i>
                        Rejouer Immédiatement
                    </button>
                </form>
                @endif

                <!-- Bouton Télécharger Payload -->
                <a href="{{ route('dashboard.messages.download-payload', $message->id) }}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-download mr-2"></i>
                    Télécharger Payload
                </a>

                <!-- Bouton Copier JSON -->
                <button onclick="copyPayload()"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-copy mr-2"></i>
                    Copier JSON
                </button>

                <!-- Bouton Supprimer (danger) -->
                @if(in_array($message->status, ['failed', 'cancelled']))
                <form action="{{ route('dashboard.messages.destroy', $message->id) }}" method="POST"
                      onsubmit="return confirm('⚠️ Êtes-vous sûr de vouloir supprimer ce message ? Cette action est irréversible.');">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-red-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50">
                        <i class="fas fa-trash mr-2"></i>
                        Supprimer
                    </button>
                </form>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
function copyPayload() {
    const payload = @json($message->payload);
    navigator.clipboard.writeText(JSON.stringify(payload, null, 2))
        .then(() => alert('✅ Payload copié dans le presse-papier !'))
        .catch(err => alert('❌ Erreur lors de la copie: ' + err));
}

function toggleFullError() {
    const preview = document.getElementById('errorPreview');
    const full = document.getElementById('errorFull');
    const btn = document.getElementById('toggleErrorBtn');

    if (preview.classList.contains('hidden')) {
        preview.classList.remove('hidden');
        full.classList.add('hidden');
        btn.innerHTML = '<i class="fas fa-expand mr-1"></i>Voir tout';
    } else {
        preview.classList.add('hidden');
        full.classList.remove('hidden');
        btn.innerHTML = '<i class="fas fa-compress mr-1"></i>Réduire';
    }
}

function copyError() {
    const errorMessage = @json($message->error_message ?? '');
    navigator.clipboard.writeText(errorMessage)
        .then(() => alert('✅ Message d\'erreur copié dans le presse-papier !'))
        .catch(err => alert('❌ Erreur lors de la copie: ' + err));
}
</script>

@endsection