@extends('layouts.app')

@section('title', $prompt->title)
@section('description', $prompt->excerpt ?? Str::limit(strip_tags($prompt->description), 150))

@section('content')
    @php
        $thumb = $prompt->thumbnail
            ? (Str::startsWith($prompt->thumbnail, ['http://', 'https://'])
                ? $prompt->thumbnail
                : Storage::url($prompt->thumbnail))
            : null;
    @endphp

    <div class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">

        <nav class="mb-6 flex items-center gap-2 text-sm text-slate-500">
            <a href="{{ route('prompts.index') }}" class="hover:text-white">All Prompts</a>
            @if ($prompt->category)
                <span>/</span>
                <a href="{{ route('prompts.index', ['category' => $prompt->category->slug]) }}" class="hover:text-white">
                    {{ $prompt->category->name }}
                </a>
            @endif
        </nav>

        <div class="grid gap-8 lg:grid-cols-[1.6fr_1fr]">

            {{-- Main --}}
            <div>
                <div class="flex flex-wrap items-center gap-2">
                    @if ($prompt->is_premium)
                        <span class="rounded-md bg-gradient-to-r from-brand-600 to-fuchsia-600 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-white">Premium</span>
                    @else
                        <span class="rounded-md bg-emerald-500/90 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-white">Free</span>
                    @endif
                    @if ($prompt->tool)
                        <span class="rounded-md border border-ink-600 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-slate-400">{{ $prompt->tool }}</span>
                    @endif
                </div>

                <h1 class="mt-4 text-3xl font-extrabold leading-tight tracking-tight sm:text-4xl">{{ $prompt->title }}</h1>

                @if ($prompt->excerpt)
                    <p class="mt-3 text-lg text-slate-400">{{ $prompt->excerpt }}</p>
                @endif

                <div class="mt-5 flex items-center gap-4 text-sm text-slate-500">
                    <span>{{ number_format($prompt->views) }} views</span>
                    <span>•</span>
                    <span>Added {{ $prompt->created_at->diffForHumans() }}</span>
                </div>

                @if ($thumb)
                    <img src="{{ $thumb }}" alt="{{ $prompt->title }}"
                         class="mt-7 w-full rounded-2xl border border-ink-700 object-cover">
                @endif

                @if ($prompt->description)
                    <div class="mt-8 space-y-4 leading-relaxed text-slate-300">
                        @foreach (preg_split('/\R{2,}/', trim($prompt->description)) as $paragraph)
                            <p>{{ $paragraph }}</p>
                        @endforeach
                    </div>
                @endif

                {{-- The prompt itself --}}
                <div class="mt-10">
                    <h2 class="mb-3 text-lg font-bold">The prompt</h2>

                    @if ($unlocked)
                        <div class="surface overflow-hidden">
                            <div class="flex items-center justify-between border-b border-ink-700 bg-ink-900/60 px-4 py-2.5">
                                <span class="text-xs font-semibold uppercase tracking-wide text-slate-500">Copy &amp; paste</span>
                                <button type="button"
                                        data-copy-target="prompt-body"
                                        class="btn btn-ghost px-3 py-1.5 text-xs">
                                    Copy prompt
                                </button>
                            </div>
                            <pre id="prompt-body" class="max-h-[32rem] overflow-auto whitespace-pre-wrap break-words px-4 py-4 font-mono text-sm leading-relaxed text-slate-200">{{ $prompt->prompt_text }}</pre>
                        </div>
                    @else
                        <div class="relative overflow-hidden rounded-2xl border border-brand-500/30 bg-gradient-to-br from-brand-600/15 to-ink-800">
                            {{-- Decorative filler only. The real prompt text is never sent to the
                                 client while locked — a CSS blur is not access control, and a short
                                 prompt would otherwise be fully readable in the page source. --}}
                            <pre aria-hidden="true" class="pointer-events-none select-none px-4 py-4 font-mono text-sm leading-relaxed text-slate-400 blur-[5px]">{{ str_repeat('████ ██████ ███ ████████ ██ ███████ ████ ██ ███████ ████████ ███ ' . PHP_EOL, 4) }}</pre>

                            <div class="absolute inset-0 grid place-items-center bg-ink-950/40 px-6 text-center backdrop-blur-[2px]">
                                <div>
                                    <p class="text-3xl">🔒</p>
                                    <h3 class="mt-3 text-xl font-bold text-white">This one is for members</h3>
                                    <p class="mx-auto mt-2 max-w-sm text-sm text-slate-300">
                                        Join to unlock this prompt and every other premium drop in the library.
                                    </p>
                                    <div class="mt-6 flex flex-wrap justify-center gap-3">
                                        @auth
                                            <a href="{{ route('join') }}" class="btn btn-primary">Upgrade membership</a>
                                        @else
                                            <a href="{{ route('register') }}" class="btn btn-primary">Join to unlock</a>
                                            <a href="{{ route('login') }}" class="btn btn-ghost">I have an account</a>
                                        @endauth
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Sidebar --}}
            <aside class="space-y-5">
                <div class="surface p-5">
                    <h2 class="text-sm font-bold uppercase tracking-wide text-slate-500">Actions</h2>

                    <div class="mt-4 space-y-2.5">
                        @auth
                            <form method="POST" action="{{ route('favorites.toggle', $prompt) }}">
                                @csrf
                                <button type="submit" class="btn btn-ghost w-full">
                                    {{ $isFavorited ? '★ Saved to library' : '☆ Save to library' }}
                                </button>
                            </form>
                        @else
                            <a href="{{ route('login') }}" class="btn btn-ghost w-full">☆ Save to library</a>
                        @endauth

                        @if ($prompt->video_url)
                            <a href="{{ $prompt->video_url }}" target="_blank" rel="noopener noreferrer"
                               class="btn btn-ghost w-full">▶ Watch the example</a>
                        @endif
                    </div>
                </div>

                @if ($prompt->category)
                    <div class="surface p-5">
                        <h2 class="text-sm font-bold uppercase tracking-wide text-slate-500">Category</h2>
                        <a href="{{ route('prompts.index', ['category' => $prompt->category->slug]) }}"
                           class="mt-3 inline-flex items-center gap-2 text-white hover:text-brand-300">
                            <span class="text-xl">{{ $prompt->category->icon }}</span>
                            <span class="font-semibold">{{ $prompt->category->name }}</span>
                        </a>
                        @if ($prompt->category->description)
                            <p class="mt-2 text-sm text-slate-400">{{ $prompt->category->description }}</p>
                        @endif
                    </div>
                @endif

                @if ($related->isNotEmpty())
                    <div class="surface p-5">
                        <h2 class="text-sm font-bold uppercase tracking-wide text-slate-500">You might also like</h2>
                        <ul class="mt-4 space-y-3.5">
                            @foreach ($related as $item)
                                <li>
                                    <a href="{{ route('prompts.show', $item) }}" class="group flex gap-3">
                                        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-ink-700 text-lg">
                                            {{ $item->category?->icon ?: '🎬' }}
                                        </span>
                                        <span class="min-w-0">
                                            <span class="line-clamp-2 block text-sm font-semibold text-slate-200 group-hover:text-brand-300">{{ $item->title }}</span>
                                            <span class="text-xs text-slate-500">{{ $item->is_premium ? 'Premium' : 'Free' }}</span>
                                        </span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </aside>
        </div>
    </div>
@endsection