@extends('layouts.app')

@section('title', 'All Prompts')

@section('content')
    <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">

        <header class="mb-9">
            <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">All Prompts</h1>
            <p class="mt-2 text-slate-400">{{ $prompts->total() }} prompts in the library.</p>
        </header>

        {{-- Filters --}}
        <form method="GET" action="{{ route('prompts.index') }}" class="surface mb-9 p-4">
            <div class="grid gap-3 md:grid-cols-[1fr_auto_auto_auto]">
                <div>
                    <label for="q" class="sr-only">Search</label>
                    <input id="q" type="search" name="q" value="{{ $filters['q'] }}"
                           placeholder="Search prompts, tools, keywords…" class="field">
                </div>

                <div>
                    <label for="category" class="sr-only">Category</label>
                    <select id="category" name="category" class="field md:w-48">
                        <option value="">All categories</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->slug }}" @selected($filters['category'] === $category->slug)>
                                {{ $category->name }} ({{ $category->prompts_count }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="access" class="sr-only">Access</label>
                    <select id="access" name="access" class="field md:w-36">
                        <option value="">Free + Premium</option>
                        <option value="free" @selected($filters['access'] === 'free')>Free only</option>
                        <option value="premium" @selected($filters['access'] === 'premium')>Premium only</option>
                    </select>
                </div>

                <div class="flex gap-2">
                    <button type="submit" class="btn btn-primary flex-1">Filter</button>
                    @if (array_filter($filters))
                        <a href="{{ route('prompts.index') }}" class="btn btn-ghost">Clear</a>
                    @endif
                </div>
            </div>
        </form>

        @if ($prompts->isEmpty())
            <div class="surface px-6 py-20 text-center">
                <p class="text-4xl">🔍</p>
                <h2 class="mt-4 text-xl font-bold">Nothing matched that search</h2>
                <p class="mt-2 text-sm text-slate-400">Try a broader keyword, or clear the filters.</p>
                <a href="{{ route('prompts.index') }}" class="btn btn-ghost mt-6">Show everything</a>
            </div>
        @else
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($prompts as $prompt)
                    <x-prompt-card :prompt="$prompt" />
                @endforeach
            </div>

            <div class="mt-10">
                {{ $prompts->links() }}
            </div>
        @endif

    </div>
@endsection