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

@php
    $storySummary = $story->excerpt ?: \Illuminate\Support\Str::limit(trim(strip_tags($safeContent)), 160);
@endphp

@push('head')
    @php
        $storyUrl = $story->canonical_url ?: route('stories.show', ['slug' => $story->slug]);
        $creatorName = $story->creator?->display_name ?: $story->creator?->username ?: 'Unknown creator';
        $metaDescription = $story->meta_description ?: $storySummary;
        $metaTitle = $story->meta_title ?: $story->title;
        $ogImage = $story->og_image ?: $story->cover_url;
        $creatorFollowProps = $story->creator ? [
            'username' => $story->creator->username,
            'following' => (bool) ($storySocialProps['state']['is_following_creator'] ?? false),
            'followers_count' => (int) ($storySocialProps['creator']['followers_count'] ?? 0),
        ] : null;
    @endphp
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{{ $metaTitle }}" />
    <meta property="og:description" content="{{ $metaDescription }}" />
    <meta property="og:url" content="{{ $storyUrl }}" />
    @if($ogImage)
        <meta property="og:image" content="{{ $ogImage }}" />
    @endif
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{ $metaTitle }}" />
    <meta name="twitter:description" content="{{ $metaDescription }}" />
    @if($ogImage)
        <meta name="twitter:image" content="{{ $ogImage }}" />
    @endif
    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'Article',
            'headline' => $story->title,
            'description' => $metaDescription,
            'image' => $ogImage,
            'author' => [
                '@type' => 'Person',
                'name' => $creatorName,
            ],
            'datePublished' => optional($story->published_at)->toIso8601String(),
            'dateModified' => optional($story->updated_at)->toIso8601String(),
            'mainEntityOfPage' => $storyUrl,
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
@endpush

@section('page-hero')
    <div class="hidden" aria-hidden="true"></div>
@endsection

@section('page-content')
<div class="mx-auto grid max-w-7xl gap-8 lg:grid-cols-12">
    <article class="lg:col-span-8">
        <div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70">
            @if($story->cover_url)
                <img src="{{ $story->cover_url }}" alt="{{ $story->title }}" class="h-72 w-full object-cover" loading="lazy" />
            @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>
                    @if($story->published_at)
                        <span>{{ $story->published_at->format('M d, Y') }}</span>
                    @endif
                    <span>{{ (int) $story->reading_time }} min read</span>
                </div>

                <h1 class="text-3xl font-semibold leading-tight 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 mt-6 prose prose-invert max-w-none prose-a:text-sky-300 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>

        <section class="mt-8" id="story-social-root" data-props='@json($storySocialProps)'></section>
    </article>

    <aside class="space-y-8 lg:col-span-4">
        <div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Creator</h3>
            <a href="{{ route('stories.creator', ['username' => $story->creator?->username]) }}" class="mt-2 inline-flex items-center gap-2 text-base text-white hover:text-sky-300">
                <span>{{ $story->creator?->display_name ?: $story->creator?->username }}</span>
            </a>
            @if($story->creator)
                <div class="mt-4" id="story-creator-follow-root" data-props='@json($creatorFollowProps)'></div>
            @endif
        </div>

        <div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Tags</h3>
            <div class="mt-3 flex flex-wrap gap-2">
                @forelse($story->tags as $tag)
                    <a href="{{ route('stories.tag', ['tag' => $tag->slug]) }}" class="rounded-full border border-gray-600 px-2 py-1 text-xs text-gray-200 hover:border-sky-400 hover:text-sky-300">#{{ $tag->name }}</a>
                @empty
                    <span class="text-sm text-gray-400">No tags</span>
                @endforelse
            </div>
        </div>

        <div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Report Story</h3>
            @auth
                <form method="POST" action="{{ url('/api/reports') }}" class="mt-3 space-y-3">
                    @csrf
                    <input type="hidden" name="target_type" value="story" />
                    <input type="hidden" name="target_id" value="{{ $story->id }}" />
                    <textarea name="reason" rows="3" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white" placeholder="Reason for report"></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.01]">Submit report</button>
                </form>
            @else
                <p class="mt-3 text-sm text-gray-400">
                    <a href="{{ route('login') }}" class="text-sky-300 hover:text-sky-200">Sign in</a> to report this story.
                </p>
            @endauth
        </div>

        @if($relatedStories->isNotEmpty())
            <div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-300">Related Stories</h3>
                <div class="space-y-3">
                    @foreach($relatedStories as $item)
                        <a href="{{ route('stories.show', ['slug' => $item->slug]) }}" class="block rounded-lg border border-gray-700 bg-gray-900/50 p-3 text-sm text-gray-200 hover:border-sky-400 hover:text-white">{{ $item->title }}</a>
                    @endforeach
                </div>
            </div>
        @endif
    </aside>
</div>
@endsection