<div class="space-y-8">
    <div>
        <flux:heading size="xl">Blog post review management</flux:heading>
        <flux:text class="mt-1 text-zinc-600 dark:text-zinc-400">
            Approve reader submissions, add reviews manually, or generate bulk demo reviews for any post.
        </flux:text>
    </div>

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

    <div class="grid gap-6 lg:grid-cols-2">
        <flux:card class="p-5 space-y-4">
            <flux:heading size="lg">Generate bulk reviews</flux:heading>
            <flux:text class="text-sm text-zinc-600 dark:text-zinc-400">
                Creates guest reviews with random names, star ratings, and short text (up to 100 per run). Marked approved immediately. Optionally spread review dates across a range (each review gets a random date and time within it).
            </flux:text>
            <flux:field>
                <flux:label>Post</flux:label>
                <flux:select wire:model="bulkPostId" variant="listbox" placeholder="Choose a post…">
                    @foreach ($this->postOptions as $p)
                        <flux:select.option value="{{ $p->id }}">{{ $p->title }}</flux:select.option>
                    @endforeach
                </flux:select>
                <flux:error name="bulkPostId" />
            </flux:field>
            <flux:field>
                <flux:label>Number of reviews</flux:label>
                <flux:input type="number" wire:model="bulkCount" min="1" max="100" />
                <flux:error name="bulkCount" />
            </flux:field>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <flux:field>
                    <flux:label>Earliest review date (optional)</flux:label>
                    <flux:input type="date" wire:model="bulkDateFrom" />
                    <flux:text class="text-xs text-zinc-500 dark:text-zinc-400">Set both dates to randomize timestamps in the range.</flux:text>
                    <flux:error name="bulkDateFrom" />
                </flux:field>
                <flux:field>
                    <flux:label>Latest review date (optional)</flux:label>
                    <flux:input type="date" wire:model="bulkDateTo" />
                    <flux:error name="bulkDateTo" />
                </flux:field>
            </div>
            <flux:button variant="primary" icon="sparkles" wire:click="generateBulk">Generate</flux:button>
        </flux:card>

        <flux:card class="p-5 space-y-4">
            <flux:heading size="lg">Add single review</flux:heading>
            <flux:text class="text-sm text-zinc-600 dark:text-zinc-400">
                Publish one review immediately with a display name and rating.
            </flux:text>
            <flux:field>
                <flux:label>Post</flux:label>
                <flux:select wire:model="manualPostId" variant="listbox" placeholder="Choose a post…">
                    @foreach ($this->postOptions as $p)
                        <flux:select.option value="{{ $p->id }}">{{ $p->title }}</flux:select.option>
                    @endforeach
                </flux:select>
                <flux:error name="manualPostId" />
            </flux:field>
            <flux:field>
                <flux:label>Display name</flux:label>
                <flux:input wire:model="manualGuestName" type="text" placeholder="Reader name" />
                <flux:error name="manualGuestName" />
            </flux:field>
            <flux:field>
                <flux:label>Email (optional)</flux:label>
                <flux:input wire:model="manualGuestEmail" type="email" placeholder="reader@example.com" />
                <flux:error name="manualGuestEmail" />
            </flux:field>
            <flux:field>
                <flux:label>Rating</flux:label>
                <flux:input type="number" wire:model="manualRating" min="1" max="5" />
                <flux:error name="manualRating" />
            </flux:field>
            <flux:field>
                <flux:label>Comments (optional)</flux:label>
                <flux:textarea wire:model="manualBody" rows="3" placeholder="Review text" />
                <flux:error name="manualBody" />
            </flux:field>
            <flux:button variant="primary" wire:click="saveManual">Save review</flux:button>
        </flux:card>
    </div>

    <flux:card class="p-4">
        <flux:field>
            <flux:label>Queue filter</flux:label>
            <flux:select wire:model.live="statusFilter" variant="listbox">
                <flux:select.option value="pending">Pending approval</flux:select.option>
                <flux:select.option value="approved">Approved</flux:select.option>
                <flux:select.option value="all">All</flux:select.option>
            </flux:select>
        </flux:field>
    </flux:card>

    <div class="space-y-3">
        @forelse ($this->reviews as $rev)
            <flux:card class="p-4" wire:key="bpr-{{ $rev->id }}">
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                    <div class="min-w-0 space-y-1">
                        <flux:heading size="sm">{{ $rev->post?->title ?? 'Post' }}</flux:heading>
                        <flux:text class="text-sm text-zinc-600 dark:text-zinc-400">
                            {{ $rev->reviewerDisplayName() }} · {{ $rev->rating }}/5
                            @if ($rev->user_id)
                                · Registered user
                            @else
                                · Guest
                            @endif
                        </flux:text>
                        <flux:text class="text-xs text-zinc-500">
                            {{ $rev->created_at?->diffForHumans() }}
                            · {{ $rev->is_approved ? 'Approved' : 'Pending' }}
                        </flux:text>
                        @if (filled($rev->body))
                            <flux:text class="text-sm text-zinc-700 dark:text-zinc-300 mt-2">{{ $rev->body }}</flux:text>
                        @endif
                        @if ($rev->post?->slug)
                            <div class="mt-2">
                                <flux:link href="{{ route('blog.show', $rev->post->slug) }}" target="_blank" variant="subtle" size="sm">
                                    View post
                                </flux:link>
                            </div>
                        @endif
                    </div>
                    @if (! $rev->is_approved)
                        <div class="flex flex-wrap gap-2 shrink-0">
                            <flux:button size="sm" variant="primary" wire:click="approve({{ $rev->id }})">Approve</flux:button>
                            <flux:button size="sm" variant="danger" wire:click="reject({{ $rev->id }})" wire:confirm="Remove this review permanently?">Reject</flux:button>
                        </div>
                    @elseif ($statusFilter !== 'pending')
                        <div class="shrink-0">
                            <flux:button size="sm" variant="danger" wire:click="reject({{ $rev->id }})" wire:confirm="Remove this approved review?">Delete</flux:button>
                        </div>
                    @endif
                </div>
            </flux:card>
        @empty
            <flux:card class="p-8 text-center">
                <flux:text class="text-zinc-600 dark:text-zinc-400">No reviews in this filter.</flux:text>
            </flux:card>
        @endforelse
    </div>

    <div>
        {{ $this->reviews->links() }}
    </div>
</div>
