@extends('layouts.admin')
@section('title', 'Conversación #' . $conversation->id)

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <a href="{{ route('admin.chatbot') }}" class="text-gray-500 hover:text-gray-300 text-sm">← Volver</a>
            <h1 class="text-2xl font-bold mt-2">
                Conversación #{{ $conversation->id }}
                @php $icons = ['web' => '🌐', 'whatsapp' => '📱', 'instagram' => '📸']; @endphp
                {{ $icons[$conversation->channel] ?? '💬' }}
            </h1>
        </div>
        <div class="flex items-center gap-3">
            {{-- Print PDF --}}
            <a href="{{ route('admin.chatbot.print', $conversation->id) }}" target="_blank"
               class="px-4 py-2 bg-blue-600/20 text-blue-400 hover:bg-blue-600/30 rounded-lg text-sm font-medium transition"
               title="Imprimir conversación">
                <i class="fas fa-print mr-1"></i> Imprimir PDF
            </a>
            {{-- Delete --}}
            <form method="POST" action="{{ route('admin.chatbot.delete', $conversation->id) }}"
                  onsubmit="return confirm('¿Eliminar esta conversación y todos sus mensajes?')">
                @csrf @method('DELETE')
                <button type="submit"
                        class="px-4 py-2 bg-red-600/20 text-red-400 hover:bg-red-600/30 rounded-lg text-sm font-medium transition">
                    <i class="fas fa-trash-alt mr-1"></i> Eliminar
                </button>
            </form>
            {{-- Status badge --}}
            <span class="px-3 py-1 rounded text-sm {{ $conversation->status === 'active' ? 'bg-green-500/20 text-green-400' : ($conversation->status === 'escalated' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-gray-500/20 text-gray-400') }}">
                {{ ucfirst($conversation->status) }}
            </span>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Chat Messages --}}
        <div class="lg:col-span-2 bg-gray-900 rounded-xl border border-gray-800 p-4 max-h-[600px] overflow-y-auto">
            @foreach($conversation->messages as $msg)
                @if($msg->role === 'system')
                    <div class="text-center my-3">
                        <span class="text-xs text-gray-500 bg-gray-800 px-3 py-1 rounded-full">{{ $msg->content }}</span>
                    </div>
                @elseif($msg->role === 'user')
                    <div class="flex justify-end mb-3">
                        <div class="max-w-[70%]">
                            <div class="bg-indigo-600/30 text-gray-200 rounded-xl rounded-br-sm px-4 py-2 text-sm">
                                {!! nl2br(e($msg->content)) !!}
                            </div>
                            <div class="text-xs text-gray-600 text-right mt-1">{{ $msg->created_at->format('H:i') }}</div>
                        </div>
                    </div>
                @else
                    <div class="flex justify-start mb-3">
                        <div class="max-w-[70%]">
                            <div class="bg-gray-800 text-gray-300 rounded-xl rounded-bl-sm px-4 py-2 text-sm border border-gray-700">
                                {!! nl2br(e($msg->content)) !!}
                            </div>
                            <div class="text-xs text-gray-600 mt-1">Olo • {{ $msg->created_at->format('H:i') }}
                                @if($msg->intent) <span class="text-indigo-400 ml-1">[{{ $msg->intent }}]</span> @endif
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>

        {{-- Sidebar Info --}}
        <div>
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-4 mb-4">
                <h3 class="font-semibold text-sm text-gray-400 mb-3">Visitante</h3>
                <div class="space-y-2 text-sm">
                    <div><span class="text-gray-500">Nombre:</span> <span class="text-gray-200">{{ $conversation->visitor_name ?? 'No proporcionado' }}</span></div>
                    <div><span class="text-gray-500">Email:</span> <span class="text-gray-200">{{ $conversation->visitor_email ?? '-' }}</span></div>
                    <div><span class="text-gray-500">Phone:</span> <span class="text-gray-200">{{ $conversation->visitor_phone ?? '-' }}</span></div>
                    <div><span class="text-gray-500">Canal:</span> <span class="text-gray-200">{{ ucfirst($conversation->channel) }}</span></div>
                    <div><span class="text-gray-500">Producto:</span> <span class="text-indigo-400">{{ $conversation->product_context ?? 'general' }}</span></div>
                    <div><span class="text-gray-500">IP:</span> <span class="text-gray-200">{{ $conversation->visitor_ip ?? '-' }}</span></div>
                    <div><span class="text-gray-500">Fecha:</span> <span class="text-gray-200">{{ $conversation->created_at->format('d/m/Y H:i') }}</span></div>
                </div>
            </div>

            @if($conversation->ticket)
                <div class="bg-gray-900 rounded-xl border border-yellow-800/50 p-4">
                    <h3 class="font-semibold text-sm text-yellow-400 mb-2">🎫 Ticket Asociado</h3>
                    <p class="text-sm">
                        <a href="{{ route('admin.tickets.show', $conversation->ticket->id) }}"
                           class="text-indigo-400 hover:underline font-mono">
                            {{ $conversation->ticket->ticket_no }}
                        </a>
                        — {{ $conversation->ticket->status }}
                    </p>
                </div>
            @endif
        </div>
    </div>
@endsection