@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="Blog" subtitle="Write and publish articles for your public blog.">
            <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 Article
            </button>
        </x-admin.page-head>

        <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 (['all' => 'All', 'published' => 'Published', 'draft' => 'Drafts'] as $key => $label)
                        <button wire:click="$set('status','{{ $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-[260px] 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 articles..." 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 $a)
                        <div class="flex flex-wrap items-center gap-3 px-5 py-3.5 transition hover:bg-raised/40 lg:flex-nowrap">
                            @if ($a->coverUrl())
                                <img src="{{ $a->coverUrl() }}" alt="" class="h-11 w-16 shrink-0 rounded-lg object-cover">
                            @else
                                <span class="grid h-11 w-16 shrink-0 place-items-center rounded-lg bg-raised text-slate-600"><x-lucide-file-text class="h-4 w-4" /></span>
                            @endif
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-2">
                                    <span class="truncate text-sm font-semibold text-white">{{ $a->title }}</span>
                                    <span class="admin-chip {{ $statusChip[$a->status] ?? '' }}">{{ ucfirst($a->status) }}</span>
                                </div>
                                <div class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-slate-500">
                                    <span class="font-mono">/blog/{{ $a->slug }}</span>
                                    @if ($a->category)<span class="text-slate-700">·</span><span>{{ $a->category->name }}</span>@endif
                                    <span class="text-slate-700">·</span><span>{{ $a->published_at?->format('M j, Y') ?? 'no date' }}</span>
                                    <span class="text-slate-700">·</span><span class="tabular-nums">{{ number_format($a->views) }} views</span>
                                </div>
                            </div>
                            <div class="flex shrink-0 items-center gap-1.5">
                                @if ($a->isLive())
                                    <a href="{{ route('blog.show', $a->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({{ $a->id }})" class="rounded-lg border border-edge px-2.5 py-1.5 text-[11px] font-medium text-slate-300 hover:bg-raised">{{ $a->status === 'published' ? 'Unpublish' : 'Publish' }}</button>
                                <button wire:click="edit({{ $a->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({{ $a->id }})" wire:confirm="Delete '{{ $a->title }}'? This cannot be undone." 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-newspaper class="h-7 w-7" /></span>
                    <h2 class="mt-4 text-lg font-bold text-white">No articles yet</h2>
                    <p class="mt-1 text-sm text-slate-400">Write your first article to start your blog.</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 Article</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 Article' : 'New Article' }}</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">
            {{-- Main: title + markdown + live preview --}}
            <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="Your article headline" 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">/blog/</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) · ![alt](image)</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 your article 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>

            {{-- Sidebar: publish + cover + category + excerpt + SEO --}}
            <div class="space-y-5">
                <section class="admin-card p-5">
                    <h3 class="mb-3 text-sm font-semibold text-white">Publish</h3>
                    <label class="mb-1.5 block text-xs font-medium text-slate-400">Status</label>
                    <select wire:model="articleStatus" 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>
                    <label class="mb-1.5 mt-3 block text-xs font-medium text-slate-400">Publish date <span class="text-slate-600">· blank = now</span></label>
                    <input wire:model="publishedAt" type="datetime-local" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                </section>

                <section class="admin-card p-5">
                    <h3 class="mb-3 text-sm font-semibold text-white">Cover image</h3>
                    @if ($cover)
                        <img src="{{ $cover->temporaryUrl() }}" alt="" class="mb-2 aspect-video w-full rounded-lg object-cover">
                    @elseif ($existingCover && ! $removeCover)
                        <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($existingCover) }}" alt="" class="mb-2 aspect-video w-full rounded-lg object-cover">
                        <button type="button" wire:click="$set('removeCover', true)" class="mb-2 text-xs text-rose-400 hover:underline">Remove current image</button>
                    @endif
                    <input type="file" wire:model="cover" accept="image/*" class="block w-full text-xs text-slate-400 file:mr-3 file:rounded-lg file:border-0 file:bg-raised file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-slate-200 hover:file:bg-card">
                    <div wire:loading wire:target="cover" class="mt-1 text-xs text-slate-500">Uploading…</div>
                    @error('cover') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                </section>

                <section class="admin-card p-5">
                    <h3 class="mb-3 text-sm font-semibold text-white">Category</h3>
                    <select wire:model="categoryId" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        <option value="">— none —</option>
                        @foreach ($categories as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach
                    </select>
                    <div class="mt-2 flex gap-2">
                        <input wire:model="newCategory" wire:keydown.enter.prevent="addCategory" type="text" placeholder="New category…" class="flex-1 rounded-lg border-edge bg-ink text-xs text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand/30">
                        <button type="button" wire:click="addCategory" class="rounded-lg border border-edge bg-raised px-3 text-xs font-medium text-slate-200 hover:bg-card">Add</button>
                    </div>
                </section>

                <section class="admin-card p-5">
                    <h3 class="mb-3 text-sm font-semibold text-white">Excerpt &amp; SEO</h3>
                    <label class="mb-1.5 block text-xs font-medium text-slate-400">Excerpt <span class="text-slate-600">· blank = auto</span></label>
                    <textarea wire:model="excerpt" rows="2" placeholder="Short summary for the blog list…" 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>
                    <label class="mb-1.5 mt-3 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="2" placeholder="Defaults to the excerpt" 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>