@php $admin = auth('admin')->user(); @endphp

<x-layouts.admin :title="$ticket->reference" :heading="$ticket->subject">

    <div class="grid gap-6 lg:grid-cols-3">

        {{-- ========================================================== Thread --}}
        <div class="space-y-4 lg:col-span-2">
            @foreach ($messages as $message)
                @php $fromStaff = $message->isFromStaff(); @endphp
                <div class="zylo-panel p-5
                            {{ $message->is_internal_note
                                ? 'border-warning/40 bg-warning/5'
                                : ($fromStaff ? 'border-electric-500/30' : '') }}">
                    <div class="flex items-center justify-between gap-3">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium text-silver-100">{{ $message->authorName() }}</span>
                            @if ($message->is_internal_note)
                                <x-ui.badge variant="warning">Internal note</x-ui.badge>
                            @elseif ($fromStaff)
                                <x-ui.badge variant="info">Support</x-ui.badge>
                            @else
                                <x-ui.badge variant="neutral">Customer</x-ui.badge>
                            @endif
                        </div>
                        <time class="text-xs text-silver-500">{{ $message->created_at->diffForHumans() }}</time>
                    </div>

                    <div class="mt-3 whitespace-pre-wrap text-sm leading-relaxed text-silver-300">{{ $message->body }}</div>
                </div>
            @endforeach

            @if ($admin->hasPermission('tickets.reply'))
                <x-ui.card title="Reply">
                    <form method="POST" action="{{ route('admin.tickets.reply', $ticket) }}" class="space-y-4">
                        @csrf
                        <textarea name="body" rows="6" required maxlength="10000"
                                  placeholder="Type your reply…"
                                  class="block w-full rounded-lg border border-line-strong bg-abyss px-3.5 py-2.5
                                         text-sm text-silver-100 placeholder:text-silver-500
                                         focus:border-electric-500 focus:outline-none">{{ old('body') }}</textarea>
                        @error('body')
                            <p class="text-xs text-danger">{{ $message }}</p>
                        @enderror

                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <label class="flex cursor-pointer items-center gap-2.5 select-none">
                                <input type="checkbox" name="internal" value="1"
                                       class="h-4 w-4 rounded border-line-strong bg-abyss text-warning
                                              focus:ring-2 focus:ring-warning/40">
                                <span class="text-sm text-silver-300">
                                    Internal note — not visible to the customer
                                </span>
                            </label>

                            <x-ui.button type="submit">Send</x-ui.button>
                        </div>
                    </form>
                </x-ui.card>
            @endif
        </div>

        {{-- ========================================================= Sidebar --}}
        <div class="space-y-4">
            <x-ui.card title="Ticket">
                <dl class="space-y-3 text-sm">
                    @php
                        $facts = [
                            ['Reference', $ticket->reference],
                            ['Customer', $ticket->user?->email ?? 'unknown'],
                            ['Status', $ticket->status->label()],
                            ['Category', $ticket->category?->name ?? 'General'],
                            ['Device', $ticket->device?->name ?? '—'],
                            ['Opened', $ticket->created_at->format('j M Y H:i')],
                        ];
                    @endphp
                    @foreach ($facts as [$label, $value])
                        <div class="flex justify-between gap-3">
                            <dt class="text-silver-500">{{ $label }}</dt>
                            <dd class="truncate text-right text-silver-200">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            </x-ui.card>

            @if ($admin->hasPermission('tickets.manage'))
                <x-ui.card title="Manage">
                    <form method="POST" action="{{ route('admin.tickets.update', $ticket) }}" class="space-y-4">
                        @csrf
                        @method('PATCH')

                        <div class="space-y-1.5">
                            <label for="assigned_admin_id" class="block text-sm font-medium text-silver-200">
                                Assigned to
                            </label>
                            <select id="assigned_admin_id" name="assigned_admin_id"
                                    class="block w-full rounded-lg border border-line-strong bg-abyss px-3 py-2
                                           text-sm text-silver-100 focus:border-electric-500 focus:outline-none">
                                <option value="">Unassigned</option>
                                @foreach ($admins as $staff)
                                    <option value="{{ $staff->id }}" @selected($ticket->assigned_admin_id === $staff->id)>
                                        {{ $staff->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="space-y-1.5">
                            <label for="priority" class="block text-sm font-medium text-silver-200">Priority</label>
                            <select id="priority" name="priority"
                                    class="block w-full rounded-lg border border-line-strong bg-abyss px-3 py-2
                                           text-sm text-silver-100 focus:border-electric-500 focus:outline-none">
                                @foreach ($priorities as $priority)
                                    <option value="{{ $priority->value }}" @selected($ticket->priority === $priority)>
                                        {{ $priority->label() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <x-ui.button type="submit" variant="secondary" class="w-full">Update</x-ui.button>
                    </form>

                    @unless ($ticket->isClosed())
                        <div class="zylo-divider my-4"></div>
                        <form method="POST" action="{{ route('admin.tickets.close', $ticket) }}">
                            @csrf
                            <x-ui.button type="submit" variant="ghost" class="w-full">Close ticket</x-ui.button>
                        </form>
                        <p class="mt-2 text-xs text-silver-500">
                            A customer reply reopens it with history intact.
                        </p>
                    @endunless
                </x-ui.card>
            @endif
        </div>
    </div>

</x-layouts.admin>