@php
    $statusChip = ['published' => 'bg-green-500/15 text-green-400', 'draft' => 'bg-slate-500/15 text-slate-400'];
@endphp

<div>
    @if ($editingId === null)
        {{-- ===================== LIST ===================== --}}
        <x-admin.page-head title="Pages" subtitle="Custom content pages — About, Terms, Privacy, and more.">
            <button wire:click="create" class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
                <x-lucide-plus class="h-4 w-4" /> New Page
            </button>
        </x-admin.page-head>

        <section class="admin-card">
            @if ($rows->count())
                <div class="divide-y divide-edge">
                    @foreach ($rows as $p)
                        <div class="flex flex-wrap items-center gap-3 px-5 py-3.5 transition hover:bg-raised/40 lg:flex-nowrap">
                            <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-raised text-slate-400"><x-lucide-file class="h-4 w-4" /></span>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-2">
                                    <span class="truncate text-sm font-semibold text-white">{{ $p->title }}</span>
                                    <span class="admin-chip {{ $statusChip[$p->status] ?? '' }}">{{ ucfirst($p->status) }}</span>
                                </div>
                                <div class="mt-0.5 text-xs text-slate-500"><span class="font-mono">/p/{{ $p->slug }}</span> · updated {{ $p->updated_at->diffForHumans() }}</div>
                            </div>
                            <div class="flex shrink-0 items-center gap-1.5">
                                @if ($p->isLive())
                                    <a href="{{ route('page.show', $p->slug) }}" target="_blank" class="grid h-8 w-8 place-items-center rounded-lg border border-edge text-slate-400 hover:bg-raised hover:text-white" title="View live"><x-lucide-external-link class="h-3.5 w-3.5" /></a>
                                @endif
                                <button wire:click="togglePublish({{ $p->id }})" class="rounded-lg border border-edge px-2.5 py-1.5 text-[11px] font-medium text-slate-300 hover:bg-raised">{{ $p->status === 'published' ? 'Unpublish' : 'Publish' }}</button>
                                <button wire:click="edit({{ $p->id }})" class="grid h-8 w-8 place-items-center rounded-lg border border-edge text-slate-400 hover:bg-raised hover:text-white" title="Edit"><x-lucide-pencil class="h-3.5 w-3.5" /></button>
                                <button wire:click="delete({{ $p->id }})" wire:confirm="Delete '{{ $p->title }}'?" class="grid h-8 w-8 place-items-center rounded-lg border border-edge text-slate-400 hover:border-red-500/40 hover:bg-red-500/10 hover:text-red-400" title="Delete"><x-lucide-trash-2 class="h-3.5 w-3.5" /></button>
                            </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-file-text class="h-7 w-7" /></span>
                    <h2 class="mt-4 text-lg font-bold text-white">No pages yet</h2>
                    <p class="mt-1 text-sm text-slate-400">Create pages like About, Terms of Service or Privacy Policy.</p>
                    <button wire:click="create" class="mt-5 inline-flex items-center gap-2 rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-700"><x-lucide-plus class="h-4 w-4" /> New Page</button>
                </div>
            @endif
        </section>
    @else
        {{-- ===================== EDITOR ===================== --}}
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <button wire:click="$set('editingId', null)" class="grid h-9 w-9 place-items-center rounded-lg border border-edge text-slate-400 hover:bg-raised hover:text-white"><x-lucide-arrow-left class="h-4 w-4" /></button>
                <h1 class="text-2xl font-bold text-white">{{ $editingId ? 'Edit Page' : 'New Page' }}</h1>
            </div>
            <div class="flex items-center gap-2">
                <button wire:click="$set('editingId', null)" class="rounded-xl border border-edge px-4 py-2 text-sm font-medium text-slate-300 hover:bg-raised">Cancel</button>
                <button wire:click="save" class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700"><x-lucide-save class="h-4 w-4" /> Save</button>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-5 xl:grid-cols-3">
            <div class="space-y-5 xl:col-span-2">
                <section class="admin-card p-5">
                    <label class="mb-1.5 block text-xs font-medium text-slate-400">Title</label>
                    <input wire:model.live.debounce.500ms="title" type="text" placeholder="Page title" class="w-full rounded-xl border-edge bg-raised text-lg font-semibold text-white placeholder:text-slate-500 focus:border-brand focus:ring-brand/30">
                    @error('title') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                    <div class="mt-2 flex items-center gap-2 text-xs text-slate-500">
                        <span>URL:</span><span class="font-mono">/p/</span>
                        <input wire:model="slug" type="text" class="flex-1 rounded-lg border-edge bg-ink px-2 py-1 font-mono text-xs text-slate-300 focus:border-brand focus:ring-brand/30">
                    </div>
                    @error('slug') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </section>

                <section class="admin-card p-5">
                    <div class="mb-2 flex items-center justify-between">
                        <label class="text-xs font-medium text-slate-400">Content <span class="text-slate-600">· Markdown</span></label>
                        <span class="text-[11px] text-slate-600">**bold** · # heading · - list · [link](url)</span>
                    </div>
                    <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
                        <textarea wire:model.live.debounce.500ms="body" rows="20" placeholder="Write the page in Markdown…" class="w-full rounded-xl border-edge bg-ink font-mono text-[13px] leading-relaxed text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand/30"></textarea>
                        <div class="rounded-xl border border-edge bg-ink p-4">
                            <div class="mb-2 text-[10.5px] font-semibold uppercase tracking-wider text-slate-600">Live preview</div>
                            <div class="prose-blog max-h-[28rem] overflow-y-auto text-sm">
                                {!! $this->previewHtml ?: '<p class="text-slate-600">Preview appears as you type…</p>' !!}
                            </div>
                        </div>
                    </div>
                    @error('body') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </section>
            </div>

            <div class="space-y-5">
                <section class="admin-card p-5">
                    <h3 class="mb-3 text-sm font-semibold text-white">Publish</h3>
                    <select wire:model="pageStatus" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        <option value="draft">Draft (hidden)</option>
                        <option value="published">Published (public)</option>
                    </select>
                </section>
                <section class="admin-card p-5">
                    <h3 class="mb-3 text-sm font-semibold text-white">SEO</h3>
                    <label class="mb-1.5 block text-xs font-medium text-slate-400">Meta title</label>
                    <input wire:model="metaTitle" type="text" placeholder="Defaults to the title" class="w-full rounded-xl border-edge bg-raised text-sm text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand/30">
                    <label class="mb-1.5 mt-3 block text-xs font-medium text-slate-400">Meta description</label>
                    <textarea wire:model="metaDescription" rows="3" placeholder="Short description for search engines" class="w-full rounded-xl border-edge bg-raised text-sm text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand/30"></textarea>
                </section>
            </div>
        </div>
    @endif
</div>