@php
    $statusChip = [
        'open' => 'bg-blue-500/15 text-blue-400',
        'answered' => 'bg-green-500/15 text-green-400',
        'closed' => 'bg-slate-500/15 text-slate-400',
    ];
@endphp

<div class="space-y-5">
    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Support Tickets</h1>
            <p class="mt-1 text-sm text-slate-400">Customer tickets from the portal — replies appear in their Support page and are emailed to them.</p>
        </div>
    </div>

    {{-- List --}}
    <section class="admin-card">
        <div class="flex flex-wrap items-center gap-3 border-b border-edge p-4">
            <div class="flex rounded-lg border border-edge bg-ink p-0.5 text-xs">
                @foreach (['open' => 'Open', 'answered' => 'Answered', 'closed' => 'Closed', 'all' => 'All'] as $key => $label)
                    <button wire:click="setStatus('{{ $key }}')"
                            class="rounded-md px-3 py-1.5 font-medium transition {{ $status === $key ? 'bg-raised text-white shadow' : 'text-slate-500 hover:text-slate-300' }}">
                        {{ $label }} <span class="tabular-nums {{ $status === $key ? 'text-slate-400' : 'text-slate-600' }}">{{ $counts[$key] }}</span>
                    </button>
                @endforeach
            </div>
            <label class="ml-auto flex h-9 w-full max-w-[280px] items-center gap-2 rounded-lg border border-edge bg-ink px-3">
                <x-lucide-search class="h-3.5 w-3.5 text-slate-500" />
                <input wire:model.live.debounce.300ms="search" type="text" placeholder="Search subject or customer..."
                       class="w-full border-0 bg-transparent p-0 text-sm text-slate-200 placeholder:text-slate-500 focus:ring-0">
            </label>
        </div>

        @if ($rows->count())
            <div class="divide-y divide-edge">
                @foreach ($rows as $t)
                    <div class="px-5 py-4">
                        <div class="flex flex-wrap items-center gap-2.5">
                            <span class="font-mono text-xs text-slate-600">#{{ $t->id }}</span>
                            <span class="text-sm font-semibold text-white">{{ $t->subject }}</span>
                            <span class="admin-chip {{ $statusChip[$t->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ ucfirst($t->status) }}</span>
                            <span class="admin-chip bg-raised text-slate-400">{{ $t->categoryLabel() }}</span>
                            <span class="ml-auto text-[11px] text-slate-600">{{ $t->created_at->diffForHumans() }}</span>
                        </div>
                        <div class="mt-1 text-xs text-slate-500">
                            <a href="{{ route('admin.users.show', $t->user_id) }}" wire:navigate class="font-medium text-slate-400 hover:text-white">{{ $t->user?->name ?? '—' }}</a>
                            · {{ $t->user?->email }}
                        </div>
                        <p class="mt-2 whitespace-pre-line text-xs leading-relaxed text-slate-300">{{ $t->message }}</p>
                        @if ($t->admin_reply)
                            <div class="mt-2.5 rounded-xl border border-green-500/20 bg-green-500/5 px-3.5 py-2.5">
                                <div class="mb-1 text-[11px] font-semibold text-green-400">Replied {{ $t->replied_at?->diffForHumans() }}</div>
                                <p class="whitespace-pre-line text-xs leading-relaxed text-slate-300">{{ $t->admin_reply }}</p>
                            </div>
                        @endif
                        <div class="mt-3 flex items-center gap-2">
                            @if ($t->status !== 'closed')
                                <button wire:click="openReply({{ $t->id }})"
                                        class="inline-flex items-center gap-1.5 rounded-lg bg-brand px-3 py-1.5 text-xs font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
                                    <x-lucide-reply class="h-3.5 w-3.5" /> {{ $t->admin_reply ? 'Edit reply' : 'Reply' }}
                                </button>
                                <button wire:click="close({{ $t->id }})" wire:confirm="Close ticket #{{ $t->id }}?"
                                        class="rounded-lg border border-edge px-3 py-1.5 text-xs font-medium text-slate-400 hover:bg-raised hover:text-white">Close</button>
                            @else
                                <button wire:click="reopen({{ $t->id }})"
                                        class="rounded-lg border border-edge px-3 py-1.5 text-xs font-medium text-slate-400 hover:bg-raised hover:text-white">Reopen</button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            @if ($rows->hasPages())
                <div class="border-t border-edge px-5 py-3">{{ $rows->links('pagination.dark') }}</div>
            @endif
        @else
            <div class="px-6 py-14 text-center">
                <span class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-brand/15 text-brand-500"><x-lucide-life-buoy class="h-7 w-7" /></span>
                <h2 class="mt-4 text-lg font-bold text-white">{{ $status === 'open' ? 'No open tickets' : 'Nothing here' }}</h2>
                <p class="mt-1 text-sm text-slate-400">{{ $status === 'open' ? 'The inbox is clear — nice.' : 'No tickets match this filter.' }}</p>
            </div>
        @endif
    </section>

    {{-- Reply modal --}}
    @if ($replyingTicket)
        <div class="fixed inset-0 z-50 overflow-y-auto bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('replyingId', null)">
            <div class="mx-auto my-8 w-full max-w-lg rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <div>
                        <h3 class="text-base font-semibold text-white">Reply to ticket #{{ $replyingTicket->id }}</h3>
                        <p class="text-xs text-slate-500">{{ $replyingTicket->user?->email }} · {{ $replyingTicket->subject }}</p>
                    </div>
                    <button wire:click="$set('replyingId', null)" class="rounded-lg p-1.5 text-slate-400 hover:bg-raised hover:text-white"><x-lucide-x class="h-5 w-5" /></button>
                </div>
                <form wire:submit="sendReply" class="space-y-4 px-6 py-5">
                    <div class="max-h-32 overflow-y-auto rounded-xl border border-edge bg-ink px-3.5 py-2.5 text-xs leading-relaxed text-slate-400">{{ $replyingTicket->message }}</div>
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400" for="reply-text">Your reply</label>
                        <textarea id="reply-text" wire:model="reply" rows="5" placeholder="Write the answer the customer will see and receive by email..."
                                  class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand"></textarea>
                        @error('reply') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>
                    <div class="flex justify-end gap-2 border-t border-edge pt-4">
                        <button type="button" wire:click="$set('replyingId', null)" class="rounded-xl border border-edge px-4 py-2 text-sm font-medium text-slate-300 hover:bg-raised">Cancel</button>
                        <button type="submit" class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Send reply</button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>