@extends('admin.layout')

@section('title', $prompt->exists ? 'Edit Prompt' : 'New Prompt')

@section('admin')
    @php
        $action = $prompt->exists
            ? route('admin.prompts.update', $prompt)
            : route('admin.prompts.store');
    @endphp

    <div class="flex flex-wrap items-center justify-between gap-3">
        <h1 class="text-2xl font-extrabold tracking-tight">
            {{ $prompt->exists ? 'Edit prompt' : 'New prompt' }}
        </h1>
        <a href="{{ route('admin.prompts.index') }}" class="btn btn-ghost">Cancel</a>
    </div>

    <form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="mt-7 grid gap-6 lg:grid-cols-[1fr_300px]">
        @csrf
        @if ($prompt->exists)
            @method('PUT')
        @endif

        {{-- Main fields --}}
        <div class="surface space-y-5 p-6">
            <div>
                <label for="title" class="label">Title</label>
                <input id="title" name="title" value="{{ old('title', $prompt->title) }}" required class="field">
                @error('title') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="slug" class="label">Slug <span class="normal-case text-slate-600">(optional — generated from the title)</span></label>
                <input id="slug" name="slug" value="{{ old('slug', $prompt->slug) }}" class="field">
                @error('slug') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="excerpt" class="label">Excerpt</label>
                <input id="excerpt" name="excerpt" value="{{ old('excerpt', $prompt->excerpt) }}"
                       placeholder="One line shown on cards and in search" class="field">
                @error('excerpt') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="description" class="label">Description</label>
                <textarea id="description" name="description" rows="5"
                          placeholder="How to use it, what to tweak, what to expect">{{ old('description', $prompt->description) }}</textarea>
                @error('description') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="prompt_text" class="label">Prompt text</label>
                <textarea id="prompt_text" name="prompt_text" rows="14" required
                          class="font-mono text-xs">{{ old('prompt_text', $prompt->prompt_text) }}</textarea>
                @error('prompt_text') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            <div class="surface space-y-5 p-5">
                <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500">Publishing</h2>

                @foreach ([
                    ['is_published', 'Published', 'Visible on the public site'],
                    ['is_premium', 'Premium', 'Locked behind membership'],
                    ['is_featured', 'Featured', 'Pinned to the homepage'],
                ] as [$field, $label, $hint])
                    <label class="flex items-start gap-3">
                        <input type="checkbox" name="{{ $field }}" value="1"
                               @checked(old($field, $prompt->$field))
                               class="mt-1 rounded border-ink-600 bg-ink-900 text-brand-500">
                        <span>
                            <span class="block text-sm font-semibold text-slate-200">{{ $label }}</span>
                            <span class="block text-xs text-slate-500">{{ $hint }}</span>
                        </span>
                    </label>
                @endforeach

                <div>
                    <label for="sort_order" class="label">Sort order</label>
                    <input id="sort_order" name="sort_order" type="number" min="0"
                           value="{{ old('sort_order', $prompt->sort_order ?? 0) }}" class="field">
                </div>
            </div>

            <div class="surface space-y-5 p-5">
                <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500">Details</h2>

                <div>
                    <label for="category_id" class="label">Category</label>
                    <select id="category_id" name="category_id" class="field">
                        <option value="">Uncategorised</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected(old('category_id', $prompt->category_id) == $category->id)>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="tool" class="label">Tool</label>
                    <input id="tool" name="tool" value="{{ old('tool', $prompt->tool) }}"
                           placeholder="Veo 3, Sora, Runway…" class="field">
                </div>

                <div>
                    <label for="video_url" class="label">Example video URL</label>
                    <input id="video_url" name="video_url" type="url" value="{{ old('video_url', $prompt->video_url) }}" class="field">
                    @error('video_url') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="surface space-y-4 p-5">
                <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500">Thumbnail</h2>

                @if ($prompt->thumbnail)
                    <img src="{{ Str::startsWith($prompt->thumbnail, ['http://', 'https://']) ? $prompt->thumbnail : Storage::url($prompt->thumbnail) }}"
                         alt="" class="w-full rounded-lg border border-ink-700">
                @endif

                <div>
                    <label for="thumbnail_file" class="label">Upload</label>
                    <input id="thumbnail_file" name="thumbnail_file" type="file" accept="image/*"
                           class="w-full text-xs text-slate-400 file:mr-3 file:rounded-lg file:border-0 file:bg-ink-700 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-slate-200">
                    @error('thumbnail_file') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="thumbnail_url" class="label">…or paste a URL</label>
                    <input id="thumbnail_url" name="thumbnail_url" value="{{ old('thumbnail_url') }}"
                           placeholder="https://…" class="field">
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-full py-3">
                {{ $prompt->exists ? 'Save changes' : 'Create prompt' }}
            </button>
        </div>
    </form>
@endsection

@push('scripts')
    <style>
        /* Textareas in this form share the .field look without repeating the class. */
        form textarea { width: 100%; border-radius: .75rem; background: var(--color-ink-900);
            border: 1px solid var(--color-ink-600); padding: .625rem .875rem; font-size: .875rem; color: #e6e6f0; }
        form textarea:focus { outline: none; border-color: var(--color-brand-500); }
    </style>
@endpush