@extends('layouts.nova.content-layout')

@php
    $hero_title = 'Story Preview';
    $hero_description = 'This preview mirrors the final published layout.';
@endphp

@section('page-hero')
<div class="mx-auto max-w-7xl">
    @include('components.breadcrumbs', ['breadcrumbs' => collect([
        ['label' => 'Home', 'url' => route('index')],
        ['label' => 'Story Preview'],
    ])])

    <div class="mt-4 grid gap-6 lg:grid-cols-12 lg:items-start">
        <div class="lg:col-span-8">
            <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-800/95 via-slate-800/88 to-sky-950/60 p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)] ring-1 ring-white/6 sm:p-8">
                <div class="flex flex-wrap items-center gap-3 text-xs font-semibold uppercase tracking-[0.24em] text-sky-200/80">
                    <span class="rounded-full border border-sky-400/30 bg-sky-400/10 px-3 py-1.5 text-[0.65rem]">Preview mode</span>
                    <span class="text-white/40">Matches the published story canvas</span>
                </div>

                <div class="mt-5 max-w-3xl">
                    <h1 class="text-3xl font-semibold leading-tight tracking-tight text-white sm:text-4xl">{{ $hero_title }}</h1>
                    <p class="mt-3 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">
                        {{ $hero_description }} Review the story rhythm, media scale, and spacing here before you publish.
                    </p>
                </div>
            </div>
        </div>

        <div class="lg:col-span-4">
            <div class="rounded-3xl border border-white/10 bg-white/[0.05] p-5 shadow-[0_18px_45px_rgba(2,6,23,0.2)] ring-1 ring-white/6 backdrop-blur-sm">
                <div class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-200/75">Preview workspace</div>
                <p class="mt-3 text-sm leading-7 text-slate-300">
                    Use this surface to check composition, scan the story in its published canvas, and jump back into editing without hunting for controls.
                </p>

                <div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
                    <a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="rounded-2xl border border-sky-500/35 bg-sky-500/10 px-4 py-3 text-sm font-medium text-sky-100 transition hover:-translate-y-0.5 hover:bg-sky-500/15">
                        Back to editor
                    </a>
                    <a href="{{ route('creator.stories.analytics', ['story' => $story->id]) }}" class="rounded-2xl border border-violet-500/35 bg-violet-500/10 px-4 py-3 text-sm font-medium text-violet-100 transition hover:-translate-y-0.5 hover:bg-violet-500/15">
                        Story analytics
                    </a>
                </div>

                <div class="mt-5 rounded-2xl border border-white/10 bg-slate-950/35 p-4">
                    <div class="text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-slate-400">Current status</div>
                    <p class="mt-2 text-sm font-medium text-white">{{ str_replace('_', ' ', ucfirst($story->status)) }}</p>
                    @if($story->rejected_reason)
                        <p class="mt-3 rounded-xl border border-rose-500/30 bg-rose-500/10 p-3 text-xs leading-6 text-rose-100">{{ $story->rejected_reason }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-content')
<div class="mx-auto grid max-w-7xl gap-6 lg:grid-cols-12">
    <article class="lg:col-span-8">
        <div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
            @if($story->cover_url)
                <img src="{{ $story->cover_url }}" alt="{{ $story->title }}" class="h-72 w-full object-cover" />
            @endif
            <div class="p-6">
                <div class="mb-4 flex flex-wrap items-center gap-3 text-xs text-gray-300">
                    <span class="rounded-full border border-gray-600 px-2 py-1">{{ str_replace('_', ' ', $story->story_type) }}</span>
                    <span>{{ (int) $story->reading_time }} min read</span>
                    <span class="rounded-full border border-amber-500/40 px-2 py-1 text-amber-200">Preview</span>
                </div>
                <h1 class="text-3xl font-semibold tracking-tight text-white">{{ $story->title }}</h1>
                @if($story->excerpt)
                    <p class="mt-3 text-gray-300">{{ $story->excerpt }}</p>
                @endif

                <div class="story-prose prose prose-invert prose-lg mt-6 max-w-none prose-a:text-sky-300 prose-p:leading-[1.9] prose-li:leading-[1.9] prose-pre:overflow-x-auto prose-pre:rounded-2xl prose-pre:border prose-pre:border-slate-700 prose-pre:bg-slate-950 prose-pre:px-8 prose-pre:py-6 prose-pre:text-slate-100 prose-pre:shadow-[0_24px_70px_rgba(2,6,23,0.45)] prose-pre:ring-1 prose-pre:ring-sky-500/10 prose-pre:font-mono prose-pre:text-[0.95rem] prose-pre:leading-8 prose-code:text-amber-200 prose-code:bg-white/[0.08] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-blockquote:border-l-4 prose-blockquote:border-sky-400/55 prose-blockquote:bg-sky-400/[0.06] prose-blockquote:px-5 prose-blockquote:py-3 prose-blockquote:rounded-r-xl prose-blockquote:text-white/82 prose-blockquote:italic prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0 prose-pre:prose-code:text-slate-100 prose-pre:prose-code:rounded-none [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_li]:text-white/85">
                    {!! $safeContent !!}
                </div>
            </div>
        </div>
    </article>

    <aside class="space-y-4 lg:col-span-4 lg:sticky lg:top-24 lg:self-start">
        <div class="rounded-2xl border border-gray-700/80 bg-gray-800/55 p-5 shadow-lg ring-1 ring-white/5">
            <h3 class="text-sm font-semibold uppercase tracking-[0.2em] text-gray-300">Preview Checklist</h3>
            <div class="mt-4 space-y-3 text-sm text-slate-300">
                <div class="rounded-xl border border-white/8 bg-white/[0.03] px-4 py-3">
                    <div class="font-medium text-white">Check story rhythm</div>
                    <p class="mt-1 text-xs leading-6 text-slate-400">Scan headings, paragraph spacing, and separators to make sure the page breathes.</p>
                </div>
                <div class="rounded-xl border border-white/8 bg-white/[0.03] px-4 py-3">
                    <div class="font-medium text-white">Check media scale</div>
                    <p class="mt-1 text-xs leading-6 text-slate-400">Look for full-width images, embedded video sizing, and any block that feels too narrow.</p>
                </div>
                <div class="rounded-xl border border-white/8 bg-white/[0.03] px-4 py-3">
                    <div class="font-medium text-white">Check top fold</div>
                    <p class="mt-1 text-xs leading-6 text-slate-400">Confirm the cover, title, excerpt, and first block create a strong opening impression.</p>
                </div>
            </div>
        </div>
    </aside>
</div>
@endsection