@extends('layouts.admin.app')

@section('title', __('pages/contact-support.detail_title', ['id' => $record->id, 'subject' => $record->subject]))

@section('content')
<div
    class="animate-fade-in"
    x-data="contactSupportShow({
        updateStatusUrl: @js(route('admin.contact-support.update', $record->id)),
        storeNoteUrl: @js(route('admin.contact-support.notes.store', $record->id)),
        messages: @js(__('pages/contact-support.messages'))
    })">

    {{-- Breadcrumb --}}
    <div class="px-4 py-4">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/contact-support.title'), 'route' => 'admin.contact-support.index'],
            ['label' => __('pages/contact-support.detail_breadcrumb', ['id' => $record->id, 'subject' => $record->subject])],
        ]" />
    </div>

    <div class="px-6 pb-8 space-y-6">

        {{-- Header row --}}
        <div class="flex flex-wrap justify-end">
            <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('admin.contact-support.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors">
                <x-heroicon-o-arrow-left class="w-4 h-4" />
                {{ __('buttons.back') ?? __('pages/contact-support.labels.back_to_list') }}
            </a>
        </div>

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

            {{-- Left column: main info --}}
            <div class="xl:col-span-2 space-y-6">

                {{-- User Information --}}
                <div class="rounded-xl border border-border bg-card p-6 shadow-card">
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">{{ __('pages/contact-support.labels.user') }}</h2>
                    <dl class="grid grid-cols-1 gap-3 text-sm sm:grid-cols-3">
                        <div>
                            <dt class="mb-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/contact-support.labels.user_id') }}</dt>
                            <dd class="text-foreground">{{ $record->user_id ?? '—' }}</dd>
                        </div>
                        <div>
                            <dt class="mb-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('form.label.name') ?? 'Name' }}</dt>
                            <dd class="text-foreground font-medium">{{ ucwords($record->full_name) }}</dd>
                        </div>
                        <div>
                            <dt class="mb-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/contact-support.labels.email') }}</dt>
                            <dd class="text-foreground break-all">
                                <a href="mailto:{{ $record->contact_email }}" class="text-primary-600 hover:underline dark:text-primary-400">{{ $record->contact_email }}</a>
                            </dd>
                        </div>
                    </dl>
                </div>

                {{-- Inquiry Information --}}
                <div class="rounded-xl border border-border bg-card p-6 shadow-card">
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">{{ __('pages/contact-support.labels.inquiry_information') }}</h2>
                    <div class="space-y-4">
                        <div>
                            <p class="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/contact-support.labels.subject') }}</p>
                            <p class="text-sm font-medium text-foreground">{{ $record->subject }}</p>
                        </div>
                        <div>
                            <p class="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/contact-support.labels.message') }}</p>
                            <p class="whitespace-pre-line break-words text-sm text-foreground leading-relaxed rounded-lg bg-muted/40 dark:bg-muted/20 p-4">{{ $record->message }}</p>
                        </div>
                        @if($record->attachment_url)
                        <div>
                            <p class="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/contact-support.labels.attachment') }}</p>
                            <a href="{{ $record->attachment_url }}" target="_blank" class="inline-flex items-center gap-2 text-sm font-medium text-primary-600 hover:underline dark:text-primary-400">
                                <x-heroicon-o-paper-clip class="w-4 h-4" />
                                {{ __('pages/contact-support.view_attachment') }}
                            </a>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Internal Notes --}}
                <div
                    class="rounded-xl border border-border bg-card p-6 shadow-card"
                    x-data="{ note: '' }">
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">{{ __('pages/contact-support.labels.internal_notes') }}</h2>

                    {{-- Notes history --}}
                    <div id="notes-list">
                        @forelse($record->notes as $note)
                            @include('pages.admin.contact-support.partials.note-item', ['note' => $note])
                        @empty
                            <p id="notes-empty" class="text-sm text-muted-foreground py-4 text-center">{{ __('pages/contact-support.labels.no_notes') }}</p>
                        @endforelse
                    </div>

                    {{-- Add note form — hidden when inquiry is closed --}}
                    @if($record->status !== 'closed')
                    <form @submit.prevent="addNote($event, note); note = ''" class="mt-6">
                        <textarea
                            id="note"
                            x-model="note"
                            rows="3"
                            placeholder="{{ __('pages/contact-support.placeholders.note') }}"
                            class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors resize-none"
                            required></textarea>
                        <div class="mt-3 flex justify-end">
                            <x-buttons.primary type="submit" x-bind:disabled="submittingNote || !note.trim()">
                                <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" x-show="submittingNote" />
                                <span x-text="submittingNote ? '{{ __('buttons.saving') }}' : '{{ __('pages/contact-support.labels.add_note') }}'"></span>
                            </x-buttons.primary>
                        </div>
                    </form>
                    @endif
                </div>
            </div>

            {{-- Right column: status + timestamps --}}
            <div class="space-y-6">

                {{-- Status Management --}}
                <div class="rounded-xl border border-border bg-card p-6 shadow-card">
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">{{ __('pages/contact-support.labels.status') }}</h2>

                    @if($record->status === 'closed')
                        {{-- Locked state: already closed --}}
                        <div class="rounded-lg bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 px-4 py-3 flex items-start gap-3">
                            <x-heroicon-o-lock-closed class="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
                            <div>
                                <p class="text-sm font-semibold text-green-700 dark:text-green-300">{{ __('pages/contact-support.status.closed') }}</p>
                                <p class="mt-0.5 text-xs text-green-600 dark:text-green-400">{{ __('pages/contact-support.messages.status_locked') }}</p>
                            </div>
                        </div>
                    @else
                        <div class="space-y-2">
                            @foreach($statuses as $status)
                            @if($status === 'closed')
                            {{-- "Closed" always opens the close modal --}}
                            <button
                                type="button"
                                class="flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium text-left transition-colors
                                    {{ $record->status === $status
                                        ? 'bg-primary-50 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300 ring-1 ring-primary-200 dark:ring-primary-800'
                                        : 'hover:bg-muted text-foreground' }}"
                                @click="openCloseModal()"
                                x-bind:disabled="statusUpdating">
                                <span class="flex h-2.5 w-2.5 rounded-full shrink-0 bg-green-500"></span>
                                {{ __('pages/contact-support.status.closed') }}
                            </button>
                            @else
                            <button
                                type="button"
                                class="flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium text-left transition-colors
                                    {{ $record->status === $status
                                        ? 'bg-primary-50 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300 ring-1 ring-primary-200 dark:ring-primary-800'
                                        : 'hover:bg-muted text-foreground' }}"
                                data-status="{{ $status }}"
                                @click="updateStatus($event)"
                                x-bind:disabled="statusUpdating">
                                <span class="flex h-2.5 w-2.5 rounded-full shrink-0
                                    {{ match($status) {
                                        'open'        => 'bg-blue-500',
                                        'in_progress' => 'bg-amber-500',
                                        default       => 'bg-gray-400',
                                    } }}"></span>
                                {{ __('pages/contact-support.status.' . $status) }}
                                @if($record->status === $status)
                                <x-heroicon-o-check class="ms-auto h-4 w-4 text-primary-600 dark:text-primary-400" />
                                @endif
                            </button>
                            @endif
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Close Inquiry Modal (inline Alpine teleport-safe modal) --}}
                <div
                    x-show="showCloseModal"
                    x-cloak
                    class="fixed inset-0 z-50 flex items-center justify-center p-4"
                    role="dialog"
                    aria-modal="true">

                    {{-- Backdrop --}}
                    <div
                        class="absolute inset-0 bg-black/50 backdrop-blur-sm"
                        @click="cancelCloseModal()">
                    </div>

                    {{-- Panel --}}
                    <div
                        class="relative z-10 w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 scale-100"
                        x-transition:leave-end="opacity-0 scale-95">

                        {{-- Icon + title --}}
                        <div class="flex items-start gap-4 mb-5">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-green-100 dark:bg-green-950">
                                <x-heroicon-o-lock-closed class="h-6 w-6 text-green-600 dark:text-green-400" />
                            </div>
                            <div>
                                <h3 class="text-base font-semibold text-foreground">{{ __('pages/contact-support.close_modal.title') }}</h3>
                                <p class="mt-1 text-sm text-muted-foreground">{{ __('pages/contact-support.close_modal.description') }}</p>
                            </div>
                        </div>

                        {{-- Optional closing note --}}
                        <div class="mb-5">
                            <label for="closing-note" class="block text-sm font-medium text-foreground mb-1.5">
                                {{ __('pages/contact-support.close_modal.note_label') }}
                                <span class="text-muted-foreground font-normal">({{ __('pages/contact-support.close_modal.optional') }})</span>
                            </label>
                            <textarea
                                id="closing-note"
                                x-model="closeNote"
                                rows="3"
                                placeholder="{{ __('pages/contact-support.close_modal.note_placeholder') }}"
                                class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors resize-none"></textarea>
                        </div>

                        {{-- Actions --}}
                        <div class="flex items-center justify-end gap-3">
                            <button
                                type="button"
                                @click="cancelCloseModal()"
                                x-bind:disabled="statusUpdating"
                                class="inline-flex items-center justify-center rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors">
                                {{ __('buttons.cancel') }}
                            </button>
                            <button
                                type="button"
                                @click="confirmClose()"
                                x-bind:disabled="statusUpdating"
                                class="inline-flex items-center gap-2 justify-center rounded-lg bg-green-600 hover:bg-green-700 px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-60">
                                <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" x-show="statusUpdating" />
                                {{ __('pages/contact-support.close_modal.confirm_btn') }}
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Timeline --}}
                <div class="rounded-xl border border-border bg-card p-6 shadow-card">
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">{{ __('pages/contact-support.labels.timeline') }}</h2>
                    @php
                        $timelineEvents = [
                            [
                                'title'       => __('pages/contact-support.labels.received_at'),
                                'description' => __('pages/contact-support.timeline.received_description'),
                                'date'        => format_date($record->created_at, true),
                                'color'       => 'primary',
                            ],
                        ];

                        if ($record->created_at && $record->updated_at && ! $record->created_at->equalTo($record->updated_at)) {
                            $timelineEvents[] = [
                                'title' => __('pages/contact-support.labels.last_updated'),
                                'date'  => format_date($record->updated_at, true),
                                'color' => 'default',
                            ];
                        }
                    @endphp
                    <x-utility.timeline :events="$timelineEvents" />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('before-app-js')
@vite(['resources/js/admin/contact-support.js'])
@endpush