<div class="space-y-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <flux:heading size="xl">{{ $editingId ? 'Edit post' : 'Add new post' }}</flux:heading>
            <flux:text class="mt-1 text-zinc-600 dark:text-zinc-400">Categories, tags, featured placement, cover image, and SEO fields.</flux:text>
        </div>
        <flux:button href="{{ route('admin.blog.posts.index') }}" variant="ghost" wire:navigate>Back to all posts</flux:button>
    </div>

    @if (session('success'))
        <flux:callout variant="success" icon="check-circle">{{ session('success') }}</flux:callout>
    @endif

    @if (session('reviews_generated'))
        <flux:callout variant="success" icon="sparkles">{{ session('reviews_generated') }}</flux:callout>
    @endif

    @if ($this->createBlockedWithoutCategories)
        <flux:callout variant="warning" icon="exclamation-triangle">
            <flux:callout.heading>Add a category first</flux:callout.heading>
            <flux:callout.text>
                Posts must belong to a category. Create at least one category, then return here to write your post.
            </flux:callout.text>
            <div class="mt-3 flex flex-wrap gap-2">
                <flux:button href="{{ route('admin.blog.categories.index') }}" variant="primary" size="sm" wire:navigate>
                    Manage categories
                </flux:button>
                <flux:button href="{{ route('admin.blog.posts.index') }}" variant="ghost" size="sm" wire:navigate>
                    Back to all posts
                </flux:button>
            </div>
        </flux:callout>
    @endif

    <flux:card class="p-6 space-y-5">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>Title</flux:label>
                <flux:input wire:model="title" placeholder="Ten tips we learned shipping this blog" />
                <flux:error name="title" />
            </flux:field>
            <flux:field>
                <flux:label>Status</flux:label>
                <flux:select wire:model="status" variant="listbox">
                    <flux:select.option value="draft">Draft</flux:select.option>
                    <flux:select.option value="published">Published</flux:select.option>
                </flux:select>
            </flux:field>
        </div>

        <flux:field>
            <flux:label>Publish date &amp; time</flux:label>
            <flux:input wire:model="published_at_input" type="datetime-local" />
            <flux:description>
                Uses when status is <strong>Published</strong> ({{ config('app.timezone') }}). Set a past date to backdate, or a future time to schedule ahead.
            </flux:description>
            <flux:error name="published_at_input" />
        </flux:field>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>Category</flux:label>
                @if ($this->createBlockedWithoutCategories)
                    <flux:select wire:model="blog_category_id" variant="listbox" placeholder="Select category" disabled>
                        @foreach ($this->categories as $category)
                            <flux:select.option value="{{ $category->id }}">{{ $category->name }}</flux:select.option>
                        @endforeach
                    </flux:select>
                @else
                    <flux:select wire:model="blog_category_id" variant="listbox" placeholder="Select category">
                        @foreach ($this->categories as $category)
                            <flux:select.option value="{{ $category->id }}">{{ $category->name }}</flux:select.option>
                        @endforeach
                    </flux:select>
                @endif
                <flux:error name="blog_category_id" />
            </flux:field>
            <div class="flex flex-col gap-4 sm:flex-row sm:items-end">
                <flux:field class="flex-1">
                    <flux:label>Featured order</flux:label>
                    <flux:input type="number" wire:model="featured_order" min="0" />
                    <flux:error name="featured_order" />
                </flux:field>
                <flux:field>
                    <flux:label>Featured</flux:label>
                    <flux:switch wire:model.live="is_featured" />
                </flux:field>
            </div>
        </div>

        <flux:field>
            <flux:label>Tags</flux:label>
            <div class="max-h-40 overflow-y-auto rounded-lg border border-zinc-200 dark:border-zinc-700 p-3 space-y-2">
                @forelse ($this->allTags as $tag)
                    <label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" wire:model="tagIds" value="{{ $tag->id }}" class="rounded border-zinc-300 text-lime-600 focus:ring-lime-500">
                        {{ $tag->name }}
                    </label>
                @empty
                    <flux:text class="text-sm text-zinc-500">No tags yet. Add tags under Blog management → Tags.</flux:text>
                @endforelse
            </div>
            <flux:error name="tagIds" />
        </flux:field>

        <flux:field>
            <flux:label>Excerpt</flux:label>
            <flux:textarea wire:model="excerpt" rows="2" placeholder="Short summary shown on blog cards (optional)." />
            <flux:error name="excerpt" />
        </flux:field>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>Meta title (SEO)</flux:label>
                <flux:input wire:model="meta_title" placeholder="Overrides browser title when set" />
                <flux:error name="meta_title" />
            </flux:field>
            <flux:field>
                <flux:label>Meta description (SEO)</flux:label>
                <flux:input wire:model="meta_description" placeholder="Optional search snippet" />
                <flux:error name="meta_description" />
            </flux:field>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>Cover Image</flux:label>
                <flux:file-upload wire:model="coverImage">
                    <flux:file-upload.dropzone heading="Drop cover image here" text="JPG/PNG/WebP up to 5MB" inline with-progress />
                </flux:file-upload>
                <flux:error name="coverImage" />
                @if ($existingCoverImage)
                    <img src="{{ $existingCoverImage }}" alt="Cover" class="mt-2 h-28 w-full rounded-lg object-cover border border-zinc-200 dark:border-zinc-700">
                @endif
            </flux:field>
            <div class="space-y-3">
                <flux:field>
                    <flux:label>Insert Image In Content</flux:label>
                    <flux:file-upload wire:model="inlineImage">
                        <flux:file-upload.dropzone heading="Upload inline image" text="Will be inserted into content editor" inline with-progress />
                    </flux:file-upload>
                    <flux:error name="inlineImage" />
                    <flux:button wire:click="insertUploadedImage" variant="outline" size="sm" class="mt-2">Insert Uploaded Image</flux:button>
                </flux:field>
                <flux:field>
                    <flux:label>Embed YouTube Video</flux:label>
                    <flux:input wire:model="youtubeUrl" placeholder="https://www.youtube.com/watch?v=..." />
                    <flux:error name="youtubeUrl" />
                    <flux:button wire:click="insertYoutubeEmbed" variant="outline" size="sm" class="mt-2">Insert YouTube Embed</flux:button>
                </flux:field>
            </div>
        </div>

        <flux:field>
            <flux:label>Content (HTML supported)</flux:label>
            <flux:textarea wire:model="content" rows="14" placeholder="Write your post content. Images and embeds inserted above will appear here." />
            <flux:error name="content" />
        </flux:field>

        @if ($editingId)
            <flux:card class="p-5 space-y-4 border border-dashed border-zinc-300 dark:border-zinc-600 bg-zinc-50/80 dark:bg-zinc-900/40">
                <flux:heading size="sm">Random reader reviews (demo)</flux:heading>
                <flux:text class="text-sm text-zinc-600 dark:text-zinc-400">
                    Generates guest reviews with random names, star ratings (1–5), and short text that references this post. Use for staging or internal demos—not to impersonate real readers in production. For bulk generation, manual entries, and the approval queue, use
                    <flux:link href="{{ route('admin.blog.post-reviews.index') }}" wire:navigate class="font-medium">review management</flux:link>.
                </flux:text>
                <div class="flex flex-col gap-4">
                    <div class="flex flex-wrap items-end gap-3">
                        <flux:field>
                            <flux:label>How many to add</flux:label>
                            <flux:input type="number" wire:model="randomReviewsCount" min="1" max="100" class="w-28" />
                            <flux:error name="randomReviewsCount" />
                        </flux:field>
                        <flux:button type="button" wire:click="generateRandomReviews" variant="outline" icon="sparkles">
                            Generate random reviews
                        </flux:button>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <flux:field>
                            <flux:label>Earliest review date (optional)</flux:label>
                            <flux:input type="date" wire:model="randomReviewsDateFrom" />
                            <flux:error name="randomReviewsDateFrom" />
                        </flux:field>
                        <flux:field>
                            <flux:label>Latest review date (optional)</flux:label>
                            <flux:input type="date" wire:model="randomReviewsDateTo" />
                            <flux:error name="randomReviewsDateTo" />
                        </flux:field>
                    </div>
                    <flux:text class="text-xs text-zinc-500 dark:text-zinc-400">Leave dates empty to use “now” for every review, or set both to spread timestamps across the range.</flux:text>
                </div>
            </flux:card>
        @endif

        <div class="flex flex-wrap items-center gap-3">
            @if ($this->createBlockedWithoutCategories)
                <flux:button wire:click="save" variant="primary" disabled>{{ $editingId ? 'Update post' : 'Publish / save post' }}</flux:button>
            @else
                <flux:button wire:click="save" variant="primary">{{ $editingId ? 'Update post' : 'Publish / save post' }}</flux:button>
            @endif
            <flux:button href="{{ route('admin.blog.posts.index') }}" variant="ghost" wire:navigate>Cancel</flux:button>
            @if ($editingId)
                <flux:text class="text-xs text-zinc-500 dark:text-zinc-400">Editing post #{{ $editingId }}</flux:text>
            @endif
        </div>
    </flux:card>
</div>
