@extends('admin.layouts.app')

@section('title', 'Ticket #' . $ticket->ticket_number)

@section('content')
    <div class="space-y-6">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.tickets.index') }}"
                class="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white transition-colors border border-slate-700">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white">Ticket #{{ $ticket->ticket_number }}</h1>
                <p class="text-slate-400 text-sm">Review conversation and respond to the customer.</p>
            </div>
        </div>

        @if(session('success'))
            <div class="p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-xl text-emerald-500 text-sm">
                {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 text-white">
            <!-- Sidebar Info -->
            <div class="space-y-6">
                <div class="glass-card rounded-2xl border border-white/5 p-6 h-fit h-60">
                    <h3 class="text-xs uppercase font-bold text-slate-500 tracking-widest mb-6">Customer Information</h3>
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <div
                                class="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 border border-blue-500/20">
                                {{ strtoupper(substr($ticket->user->name, 0, 1)) }}
                            </div>
                            <div>
                                <p class="text-sm font-bold text-white">{{ $ticket->user->name }}</p>
                                <p class="text-xs text-slate-500">{{ $ticket->user->email }}</p>
                            </div>
                        </div>
                        <div class="pt-4 border-t border-white/5 space-y-3">
                            <div>
                                <p class="text-[10px] text-slate-500 uppercase font-bold tracking-wider mb-1">Subject</p>
                                <p class="text-sm">{{ $ticket->subject }}</p>
                            </div>
                            <div>
                                <p class="text-[10px] text-slate-500 uppercase font-bold tracking-wider mb-1">Status</p>
                                @if($ticket->status === 'open')
                                    <span
                                        class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-500 text-xs font-medium border border-emerald-500/20">
                                        Open
                                    </span>
                                @else
                                    <span
                                        class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-500/10 text-slate-400 text-xs font-medium border border-slate-500/20">
                                        Closed
                                    </span>
                                @endif
                            </div>
                            @if($ticket->order)
                                <div>
                                    <p class="text-[10px] text-slate-500 uppercase font-bold tracking-wider mb-1">Related Order
                                    </p>
                                    <a href="{{ route('admin.orders.show', $ticket->order_id) }}"
                                        class="text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1">
                                        #{{ $ticket->order->order_number }}
                                        <i data-lucide="external-link" class="w-3 h-3"></i>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>

                    @if($ticket->status === 'open')
                        <div class="mt-8 pt-6 border-t border-white/5">
                            <form action="{{ route('admin.tickets.close', $ticket) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="w-full h-12 rounded-xl bg-red-500 text-white font-bold text-sm hover:bg-red-600 transition-all shadow-lg shadow-red-500/20">
                                    Mark as Resolved
                                </button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Chat Area -->
            <div class="lg:col-span-2">
                <div class="glass-card rounded-2xl border border-white/5 flex flex-col h-[700px]">
                    <div class="p-6 border-b border-white/5 bg-white/[0.02]">
                        <h3 class="text-sm font-bold text-white">Ticket Conversation</h3>
                    </div>

                    <div class="flex-1 overflow-y-auto p-6 space-y-6 no-scrollbar" id="messages-container">
                        @foreach($ticket->messages as $message)
                            <div class="flex {{ $message->user_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                                <div class="max-w-[80%] space-y-2">
                                    <div
                                        class="flex items-center gap-2 {{ $message->user_id === auth()->id() ? 'flex-row-reverse' : '' }}">
                                        <span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
                                            {{ $message->user->name }} • {{ $message->created_at->format('M d, h:i A') }}
                                        </span>
                                    </div>
                                    <div
                                        class="p-4 rounded-2xl border {{ $message->user_id === auth()->id() ? 'bg-blue-600 border-blue-500 rounded-tr-none text-white' : 'bg-slate-800 border-slate-700 rounded-tl-none text-slate-300' }}">
                                        <p class="text-sm leading-relaxed">{{ $message->message }}</p>
                                        @if($message->attachment_path)
                                            <div
                                                class="mt-3 pt-3 border-t {{ $message->user_id === auth()->id() ? 'border-blue-500' : 'border-slate-700' }}">
                                                <a href="{{ asset('storage/' . $message->attachment_path) }}" target="_blank"
                                                    class="inline-flex items-center gap-2 text-xs font-bold {{ $message->user_id === auth()->id() ? 'text-blue-100 hover:text-white' : 'text-blue-400 hover:text-blue-300' }} transition-colors">
                                                    <i data-lucide="paperclip" class="w-3 h-3"></i>
                                                    View Attachment
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @if($ticket->status === 'open')
                        <div class="p-6 border-t border-white/5 bg-white/[0.02]">
                            <form action="{{ route('admin.tickets.reply', $ticket) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="space-y-4">
                                    <div class="relative">
                                        <textarea name="message" rows="3" required
                                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all placeholder:text-slate-600"
                                            placeholder="Type your reply here..."></textarea>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <div class="flex items-center gap-2">
                                            <label for="attachment" class="cursor-pointer group">
                                                <div
                                                    class="flex items-center gap-2 text-slate-400 group-hover:text-blue-400 transition-colors">
                                                    <div
                                                        class="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center border border-slate-700 group-hover:border-blue-500/50">
                                                        <i data-lucide="paperclip" class="w-5 h-5"></i>
                                                    </div>
                                                    <span class="text-xs font-medium" id="file-name">Attach file</span>
                                                </div>
                                                <input type="file" name="attachment" id="attachment" class="hidden">
                                            </label>
                                        </div>
                                        <button type="submit"
                                            class="h-11 px-6 bg-blue-600 text-white rounded-xl font-bold text-sm hover:bg-blue-700 transition-all flex items-center gap-2 shadow-lg shadow-blue-500/20">
                                            <i data-lucide="send" class="w-4 h-4"></i>
                                            Send Reply
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    @else
                        <div class="p-6 bg-white/[0.02] border-t border-white/5 text-center">
                            <p class="text-sm font-medium text-slate-500 flex items-center justify-center gap-2">
                                <i data-lucide="lock" class="w-4 h-4"></i>
                                This ticket is closed and can no longer be replied to.
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Scroll to bottom of chat
        const messagesContainer = document.getElementById('messages-container');
        messagesContainer.scrollTop = messagesContainer.scrollHeight;

        // File name display
        const fileInput = document.getElementById('attachment');
        const fileNameSpan = document.getElementById('file-name');
        if (fileInput) {
            fileInput.addEventListener('change', function () {
                if (this.files && this.files.length > 0) {
                    fileNameSpan.textContent = this.files[0].name;
                    fileNameSpan.classList.add('text-blue-400');
                } else {
                    fileNameSpan.textContent = 'Attach file';
                    fileNameSpan.classList.remove('text-blue-400');
                }
            });
        }
    </script>
@endpush