@extends('layouts.admin')
@section('title', 'Ticket ' . $ticket->ticket_no)

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <a href="{{ route('admin.tickets') }}" class="text-gray-500 hover:text-gray-300 text-sm">← Volver a tickets</a>
            <h1 class="text-2xl font-bold mt-2">🎫 {{ $ticket->ticket_no }}</h1>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Main Content --}}
        <div class="lg:col-span-2">
            {{-- Ticket Description --}}
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 mb-4">
                <h2 class="text-lg font-semibold mb-2">{{ $ticket->subject }}</h2>
                <div class="text-sm text-gray-300 whitespace-pre-wrap">{!! nl2br(e($ticket->description)) !!}</div>
                <div class="text-xs text-gray-600 mt-3">{{ $ticket->created_at->format('d/m/Y H:i') }}</div>
            </div>

            {{-- Replies --}}
            @foreach($ticket->replies as $reply)
                <div class="bg-gray-900 rounded-xl border {{ $reply->author_type === 'admin' ? 'border-indigo-800/50' : 'border-gray-800' }} p-4 mb-3">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="text-sm font-medium {{ $reply->author_type === 'admin' ? 'text-indigo-400' : 'text-gray-300' }}">
                            {{ $reply->author_name ?? ucfirst($reply->author_type) }}
                        </span>
                        <span class="text-xs px-2 py-0.5 rounded {{ $reply->author_type === 'admin' ? 'bg-indigo-500/20 text-indigo-400' : 'bg-gray-700 text-gray-400' }}">
                            {{ ucfirst($reply->author_type) }}
                        </span>
                        <span class="text-xs text-gray-600">{{ $reply->created_at->diffForHumans() }}</span>
                    </div>
                    <div class="text-sm text-gray-300 whitespace-pre-wrap">{!! nl2br(e($reply->content)) !!}</div>
                </div>
            @endforeach

            {{-- Reply Form --}}
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-4 mt-4">
                <h3 class="text-sm font-semibold text-gray-400 mb-3">Responder</h3>
                <form action="{{ route('admin.tickets.reply', $ticket->id) }}" method="POST">
                    @csrf
                    <textarea name="content" rows="3" required
                        class="w-full bg-gray-800 text-gray-200 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500"
                        placeholder="Escribe tu respuesta..."></textarea>
                    <button type="submit"
                        class="mt-2 px-6 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-500 transition">
                        Enviar Respuesta
                    </button>
                </form>
            </div>

            {{-- Conversation Link --}}
            @if($ticket->conversation)
                <div class="bg-gray-900 rounded-xl border border-gray-800 p-4 mt-4">
                    <h3 class="text-sm font-semibold text-gray-400 mb-3">💬 Conversación Original</h3>
                    <a href="{{ route('admin.chatbot.show', $ticket->conversation->id) }}"
                       class="text-indigo-400 hover:underline text-sm">
                        Ver conversación #{{ $ticket->conversation->id }} →
                    </a>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div>
            {{-- Status Update --}}
            <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">Gestión</h3>
                <form action="{{ route('admin.tickets.update', $ticket->id) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <label class="block text-xs text-gray-500 mb-1">Estado</label>
                    <select name="status" class="w-full bg-gray-800 text-gray-200 border border-gray-700 rounded-lg px-3 py-2 text-sm mb-3 focus:outline-none">
                        @foreach(['open', 'in_progress', 'waiting', 'resolved', 'closed'] as $s)
                            <option value="{{ $s }}" {{ $ticket->status === $s ? 'selected' : '' }}>{{ str_replace('_', ' ', ucfirst($s)) }}</option>
                        @endforeach
                    </select>
                    <label class="block text-xs text-gray-500 mb-1">Prioridad</label>
                    <select name="priority" class="w-full bg-gray-800 text-gray-200 border border-gray-700 rounded-lg px-3 py-2 text-sm mb-3 focus:outline-none">
                        @foreach(['low', 'normal', 'high', 'urgent'] as $p)
                            <option value="{{ $p }}" {{ $ticket->priority === $p ? 'selected' : '' }}>{{ ucfirst($p) }}</option>
                        @endforeach
                    </select>
                    <button type="submit" class="w-full px-4 py-2 bg-gray-700 text-gray-200 rounded-lg text-sm hover:bg-gray-600 transition">
                        Actualizar
                    </button>
                </form>
            </div>

            {{-- Client Info --}}
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-4">
                <h3 class="font-semibold text-sm text-gray-400 mb-3">Cliente</h3>
                <div class="space-y-2 text-sm">
                    <div><span class="text-gray-500">Nombre:</span> <span class="text-gray-200">{{ $ticket->visitor_name ?? '-' }}</span></div>
                    <div><span class="text-gray-500">Email:</span> <span class="text-gray-200">{{ $ticket->visitor_email ?? '-' }}</span></div>
                    <div><span class="text-gray-500">WhatsApp:</span> <span class="text-gray-200">{{ $ticket->visitor_phone ?? '-' }}</span></div>
                    <div><span class="text-gray-500">Producto:</span> <span class="text-indigo-400">{{ $ticket->product ?? '-' }}</span></div>
                    <div><span class="text-gray-500">Creado:</span> <span class="text-gray-200">{{ $ticket->created_at->format('d/m/Y H:i') }}</span></div>
                </div>
            </div>
        </div>
    </div>
@endsection