@extends('layouts.nova')

@section('content')
<div class="mx-auto max-w-6xl px-4 py-8">
    <div class="mb-4 flex items-center justify-between gap-3">
        <h1 class="text-xl font-semibold text-gray-100">Review Story</h1>
        <a href="{{ route('admin.stories.review') }}" class="rounded-lg border border-gray-600 px-3 py-2 text-sm text-gray-200">Back to queue</a>
    </div>

    <div class="grid gap-6 lg:grid-cols-12">
        <article class="lg:col-span-8 rounded-xl border border-gray-700 bg-gray-900/80 p-5">
            <p class="text-xs uppercase tracking-wide text-gray-400">{{ $story->story_type }}</p>
            <h2 class="mt-2 text-2xl font-semibold text-white">{{ $story->title }}</h2>
            <p class="mt-1 text-sm text-gray-300">Creator: @{{ $story->creator?->username ?? 'unknown' }}</p>
            @if($story->excerpt)
                <p class="mt-3 text-sm text-gray-200">{{ $story->excerpt }}</p>
            @endif
            <div class="prose prose-invert mt-5 max-w-none prose-a:text-sky-300">
                {!! preg_replace('/<(script|style)\\b[^>]*>.*?<\\/\\1>/is', '', (string) $story->content) !!}
            </div>
        </article>

        <aside class="space-y-4 lg:col-span-4">
            <div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4">
                <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Moderation Actions</h3>
                <form method="POST" action="{{ route('admin.stories.approve', ['story' => $story->id]) }}" class="mt-3">
                    @csrf
                    <button class="w-full rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-200 transition hover:scale-[1.02]">Approve & Publish</button>
                </form>

                <form method="POST" action="{{ route('admin.stories.reject', ['story' => $story->id]) }}" class="mt-3 space-y-2">
                    @csrf
                    <label class="block text-xs uppercase tracking-wide text-gray-400">Rejection feedback</label>
                    <textarea name="reason" rows="4" required class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white" placeholder="Explain what needs to change..."></textarea>
                    <button class="w-full rounded-lg border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-sm text-rose-200 transition hover:scale-[1.02]">Reject Story</button>
                </form>
            </div>

            <div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4">
                <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Quick Links</h3>
                <div class="mt-3 flex flex-col gap-2 text-sm">
                    <a href="{{ route('admin.stories.edit', ['story' => $story->id]) }}" class="rounded-lg border border-gray-600 px-3 py-2 text-gray-200">Edit in admin form</a>
                    <a href="{{ route('creator.stories.preview', ['story' => $story->id]) }}" class="rounded-lg border border-gray-600 px-3 py-2 text-gray-200">Open creator preview</a>
                </div>
            </div>
        </aside>
    </div>
</div>
@endsection