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

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row items-start justify-between gap-3">
        <div>
            <a href="{{ route('admin.tickets.index') }}" class="text-xs text-gray-500 hover:text-indigo-400 mb-2 inline-block">
                <i class="fas fa-arrow-left mr-1"></i> Volver a Tickets
            </a>
            <h1 class="text-lg sm:text-xl font-bold flex flex-wrap items-center gap-2">
                <span class="text-indigo-400 font-mono">{{ $ticket->ticket_no }}</span>
                {{ $ticket->subject }}
            </h1>
            <div class="flex flex-wrap items-center gap-2 sm:gap-4 mt-2 text-sm">
                {!! $ticket->statusBadge() !!}
                {!! $ticket->priorityBadge() !!}
                <span class="text-gray-500"><i class="{{ $ticket->channelIcon() }} mr-1"></i> {{ ucfirst($ticket->channel) }}</span>
            </div>
        </div>
        <div class="flex gap-2">
            @if(!in_array($ticket->status, ['resolved', 'closed']))
            <button onclick="document.getElementById('closeModal').classList.remove('hidden')"
                class="px-3 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-sm transition">
                <i class="fas fa-check mr-1"></i> Cerrar
            </button>
            @else
            <form method="POST" action="{{ route('admin.tickets.reopen', $ticket->id) }}">
                @csrf
                <button class="px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition">
                    <i class="fas fa-rotate-left mr-1"></i> Reabrir
                </button>
            </form>
            @endif
        </div>
    </div>

    {{-- Client Info + SLA --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
            <h3 class="text-xs font-semibold uppercase text-gray-500 mb-3">Cliente</h3>
            <p class="text-sm"><i class="fas fa-user mr-2 text-gray-600"></i> {{ $ticket->visitor_name ?? '—' }}</p>
            <p class="text-sm mt-1"><i class="fas fa-envelope mr-2 text-gray-600"></i> {{ $ticket->visitor_email ?? '—' }}</p>
            <p class="text-sm mt-1"><i class="fas fa-phone mr-2 text-gray-600"></i> {{ $ticket->visitor_phone ?? '—' }}</p>
            @if($ticket->product)
            <p class="text-sm mt-1"><i class="fas fa-box mr-2 text-gray-600"></i> {{ $ticket->product }}</p>
            @endif
        </div>
        <div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
            <h3 class="text-xs font-semibold uppercase text-gray-500 mb-3">SLA</h3>
            <p class="text-sm"><i class="fas fa-calendar mr-2 text-gray-600"></i> Creado: {{ $ticket->created_at->format('d/m/Y H:i') }}</p>
            @if($ticket->first_response_at)
            <p class="text-sm mt-1 text-green-400"><i class="fas fa-reply mr-2"></i> 1era respuesta: {{ $ticket->responseTime() }}</p>
            @else
            <p class="text-sm mt-1 text-yellow-400"><i class="fas fa-clock mr-2"></i> Sin responder ({{ $ticket->created_at->diffForHumans() }})</p>
            @endif
            @if($ticket->resolved_at)
            <p class="text-sm mt-1 text-green-400"><i class="fas fa-check-circle mr-2"></i> Resuelto: {{ $ticket->resolutionTime() }}</p>
            @endif
            {{-- Priority changer --}}
            <form method="POST" action="{{ route('admin.tickets.priority', $ticket->id) }}" class="mt-3">
                @csrf
                <label class="text-xs text-gray-500">Prioridad:</label>
                <select name="priority" onchange="this.form.submit()" class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs ml-1">
                    @foreach(['low'=>'Baja','normal'=>'Normal','high'=>'Alta','urgent'=>'Urgente'] as $v => $l)
                    <option value="{{ $v }}" {{ $ticket->priority==$v?'selected':'' }}>{{ $l }}</option>
                    @endforeach
                </select>
            </form>
        </div>
    </div>

    {{-- Resolution Evidence (if closed) --}}
    @if($ticket->resolution_notes)
    <div class="bg-green-500/10 rounded-xl p-4 border border-green-500/30">
        <h3 class="text-xs font-semibold uppercase text-green-400 mb-2"><i class="fas fa-check-circle mr-1"></i> Evidencia de Cierre</h3>
        <p class="text-sm text-gray-300">{{ $ticket->resolution_notes }}</p>
        @if($ticket->resolution_attachments)
        <div class="mt-2 flex flex-wrap gap-2">
            @foreach($ticket->resolution_attachments as $url)
            <a href="{{ $url }}" target="_blank" class="text-xs text-indigo-400 underline">📎 Adjunto</a>
            @endforeach
        </div>
        @endif
    </div>
    @endif

    {{-- Description --}}
    @if($ticket->description)
    <div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
        <h3 class="text-xs font-semibold uppercase text-gray-500 mb-2">Descripción</h3>
        <div class="text-sm text-gray-300 whitespace-pre-line">{{ $ticket->description }}</div>
    </div>
    @endif

    {{-- Timeline --}}
    <div class="bg-gray-800 rounded-xl border border-gray-700">
        <h3 class="text-xs font-semibold uppercase text-gray-500 px-4 py-3 border-b border-gray-700">
            <i class="fas fa-comments mr-1"></i> Conversación ({{ $ticket->replies->count() }})
        </h3>
        <div class="divide-y divide-gray-700/50 max-h-96 overflow-y-auto">
            @forelse($ticket->replies as $reply)
            <div class="px-4 py-3 {{ $reply->is_internal ? 'bg-yellow-500/5' : '' }}">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs font-medium
                        {{ $reply->author_type === 'admin' ? 'text-indigo-400' : ($reply->author_type === 'system' ? 'text-gray-500' : 'text-emerald-400') }}">
                        {{ $reply->author_type === 'admin' ? '👤 ' : ($reply->author_type === 'system' ? '⚙️ ' : '🙋 ') }}
                        {{ $reply->author_name ?? ucfirst($reply->author_type) }}
                        @if($reply->is_internal) <span class="text-yellow-500 text-xs">(nota interna)</span> @endif
                    </span>
                    <span class="text-xs text-gray-600">{{ $reply->created_at->format('d/m H:i') }}</span>
                </div>
                <p class="text-sm text-gray-300">{{ $reply->content }}</p>
                @if($reply->attachments)
                <div class="mt-2 flex flex-wrap gap-2">
                    @foreach($reply->attachments as $att)
                        @if(str_starts_with($att['mime'] ?? '', 'image/'))
                            <a href="{{ $att['url'] }}" target="_blank" class="block">
                                <img src="{{ $att['url'] }}" alt="{{ $att['name'] }}" class="max-h-32 rounded-lg border border-gray-600 hover:border-indigo-500 transition">
                            </a>
                        @elseif(str_starts_with($att['mime'] ?? '', 'video/'))
                            <video controls class="max-h-40 rounded-lg border border-gray-600" preload="metadata">
                                <source src="{{ $att['url'] }}" type="{{ $att['mime'] }}">
                            </video>
                        @else
                            <a href="{{ $att['url'] }}" target="_blank" class="text-xs text-indigo-400 hover:underline flex items-center gap-1 bg-gray-700 px-2 py-1 rounded">
                                <i class="fas fa-paperclip"></i> {{ $att['name'] }} ({{ number_format(($att['size'] ?? 0) / 1024) }}KB)
                            </a>
                        @endif
                    @endforeach
                </div>
                @endif
            </div>
            @empty
            <div class="px-4 py-6 text-center text-gray-600">Sin respuestas aún</div>
            @endforelse
        </div>
    </div>

    {{-- Reply Form --}}
    @if(!in_array($ticket->status, ['resolved', 'closed']))
    <form method="POST" action="{{ route('admin.tickets.reply', $ticket->id) }}" enctype="multipart/form-data" class="bg-gray-800 rounded-xl p-4 border border-gray-700">
        @csrf
        <h3 class="text-xs font-semibold uppercase text-gray-500 mb-3">Responder</h3>
        <textarea name="content" rows="3" required placeholder="Escribe tu respuesta..."
            class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-sm focus:border-indigo-500 outline-none resize-none"></textarea>
        <div class="mt-3">
            <label class="text-xs text-gray-500 block mb-1"><i class="fas fa-paperclip mr-1"></i> Adjuntar archivos (máx 10MB c/u, imágenes/videos/PDF)</label>
            <input type="file" name="attachments[]" multiple accept="image/*,video/*,.pdf"
                class="text-xs text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:bg-gray-700 file:text-gray-300 hover:file:bg-gray-600">
        </div>
        <div class="flex items-center justify-between mt-3">
            <label class="flex items-center gap-2 text-xs text-gray-500">
                <input type="checkbox" name="is_internal" value="1" class="rounded bg-gray-700 border-gray-600">
                Nota interna (no enviar email)
            </label>
            <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg text-sm font-medium transition">
                <i class="fas fa-paper-plane mr-1"></i> Enviar
            </button>
        </div>
    </form>
    @endif
</div>

{{-- Close Modal --}}
<div id="closeModal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
    <div class="bg-gray-800 rounded-xl border border-gray-700 w-full max-w-md p-6">
        <h3 class="text-lg font-bold mb-4"><i class="fas fa-check-circle text-green-400 mr-2"></i> Cerrar Ticket</h3>
        <form method="POST" action="{{ route('admin.tickets.close', $ticket->id) }}">
            @csrf
            <label class="text-sm text-gray-400 block mb-1">Notas de resolución (evidencia de cierre):</label>
            <textarea name="resolution_notes" rows="4" required placeholder="Describe cómo se resolvió el problema..."
                class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-sm focus:border-green-500 outline-none resize-none mb-4"></textarea>
            <div class="flex gap-3 justify-end">
                <button type="button" onclick="document.getElementById('closeModal').classList.add('hidden')"
                    class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm transition">Cancelar</button>
                <button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-sm font-medium transition">
                    <i class="fas fa-check mr-1"></i> Cerrar Ticket
                </button>
            </div>
        </form>
    </div>
</div>
@endsection