@php
    $featuredId = old('featured_image_id', $item?->featured_image_id);
    $featuredPreview = $item?->featuredImage?->url();
    $selectedTagIds = collect(old('tag_ids', $item?->tags?->pluck('id')->all() ?? []))->map(fn ($id) => (string) $id)->all();
@endphp

<section id="compose" class="home-seo-card space-y-4"
         x-data="{
            title: @js((string) old('title', $item?->title ?? '')),
            slug: @js((string) old('slug', $item?->slug ?? '')),
            slugLocked: @js(filled(old('slug', $item?->slug))),
            excerpt: @js((string) old('excerpt', $item?->excerpt ?? '')),
            content: @js((string) old('content', $item?->content ?? '')),
            preview: false,
            slugify(value) {
                return value.toLowerCase().trim()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .replace(/^-|-$/g, '');
            },
            onTitle() {
                if (! this.slugLocked) this.slug = this.slugify(this.title);
            },
            get words() {
                const text = (this.content || '').replace(/<[^>]+>/g, ' ').trim();
                if (! text) return 0;
                return text.split(/\s+/).filter(Boolean).length;
            },
            get chars() { return (this.content || '').length; },
            get reading() { return Math.max(1, Math.ceil(this.words / 200)); },
            get excerptLen() { return (this.excerpt || '').length; }
         }">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">Compose</h3>
            <p class="text-xs text-slate-500">Title, slug, excerpt, and body with live writing intelligence.</p>
        </div>
        <div class="blog-studio__stats">
            <span x-text="words + ' words'"></span>
            <span x-text="chars + ' chars'"></span>
            <span x-text="reading + ' min read'"></span>
            <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="preview = !preview" x-text="preview ? 'Edit' : 'Preview'"></button>
        </div>
    </div>

    <div class="home-field-grid">
        <div class="span-2">
            <label class="home-label">Title</label>
            <input type="text" name="title" x-model="title" @input="onTitle()" required class="home-input" placeholder="A clear, benefit-led headline">
            @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">
                Slug
                <button type="button" class="ml-2 text-[10px] font-semibold uppercase tracking-wide text-teal-700" @click="slugLocked = !slugLocked" x-text="slugLocked ? 'Locked' : 'Auto'"></button>
            </label>
            <input type="text" name="slug" x-model="slug" @focus="slugLocked = true" required class="home-input" placeholder="post-url-slug">
            @error('slug')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
    </div>

    <div>
        <label class="home-label">Excerpt <span class="font-normal text-slate-400" x-text="excerptLen + '/220'"></span></label>
        <textarea name="excerpt" rows="3" x-model="excerpt" maxlength="500" class="home-textarea" placeholder="Search-friendly summary for listings and meta fallback"></textarea>
    </div>

    <div>
        <div class="mb-2 flex items-center justify-between">
            <label class="home-label !mb-0">Content</label>
            <p class="text-[11px] text-slate-500">HTML supported · aim for 800+ words for competitive topics</p>
        </div>
        <textarea name="content" rows="18" x-model="content" x-show="!preview" class="home-textarea blog-studio__editor" placeholder="Write the full article…"></textarea>
        <div x-show="preview" x-cloak class="blog-studio__preview prose prose-slate max-w-none" x-html="content || '<p class=\'text-slate-400\'>Nothing to preview yet.</p>'"></div>
    </div>
</section>

<section id="taxonomy" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Taxonomy</h3>
        <p class="text-xs text-slate-500">Category, tags, and authorship for discovery and internal linking.</p>
    </div>
    <div class="home-field-grid">
        <div>
            <label class="home-label">Category</label>
            <select name="category_id" class="home-select">
                <option value="">Uncategorized</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected((string) old('category_id', $item?->category_id) === (string) $category->id)>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="home-label">Author</label>
            <select name="author_id" class="home-select">
                <option value="">Current user</option>
                @foreach ($authors as $author)
                    <option value="{{ $author->id }}" @selected((string) old('author_id', $item?->author_id ?? auth()->id()) === (string) $author->id)>
                        {{ $author->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="span-2">
            <label class="home-label">Tags</label>
            <div class="blog-studio__tags">
                @forelse ($tags as $tag)
                    <label class="blog-studio__tag">
                        <input type="checkbox" name="tag_ids[]" value="{{ $tag->id }}" @checked(in_array((string) $tag->id, $selectedTagIds, true))>
                        <span>{{ $tag->name }}</span>
                    </label>
                @empty
                    <p class="text-xs text-slate-500">No tags yet — create some below.</p>
                @endforelse
            </div>
            <input type="text" name="new_tags" value="{{ old('new_tags') }}" class="home-input mt-3" placeholder="Add new tags (comma separated)">
        </div>
    </div>
</section>

<section id="media" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Featured image</h3>
        <p class="text-xs text-slate-500">Hero/card image and social fallback when OG image is empty.</p>
    </div>
    <x-admin.media-picker
        mode="id"
        name="featured_image_id"
        :value="$featuredId"
        label="Featured image"
        help="Upload or pick from the Media Library. Prefer 1200×630 for social share quality."
        :preview-url="$featuredPreview"
    />
</section>

<section id="publish" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Publish</h3>
        <p class="text-xs text-slate-500">Draft, publish now, or schedule — plus featured placement.</p>
    </div>
    <div class="home-field-grid">
        <div>
            <label class="home-label">Status</label>
            <select name="status" class="home-select" required>
                @foreach (['draft' => 'Draft', 'published' => 'Published', 'scheduled' => 'Scheduled'] as $value => $label)
                    <option value="{{ $value }}" @selected(old('status', $item?->status ?? 'draft') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="home-label">Publish date</label>
            <input type="datetime-local" name="published_at" class="home-input"
                   value="{{ old('published_at', optional($item?->published_at)->format('Y-m-d\TH:i')) }}">
        </div>
        <div class="span-2">
            <label class="home-label">Featured post</label>
            <select name="is_featured" class="home-select">
                <option value="0" @selected(! old('is_featured', $item?->is_featured))>No</option>
                <option value="1" @selected((bool) old('is_featured', $item?->is_featured))>Yes — highlight on blog index</option>
            </select>
        </div>
    </div>
</section>