@php
    $isPreview = (bool) ($previewMode ?? false);
    $articleUrl = $isPreview ? ($previewCanonical ?? url()->current()) : route('news.show', $article->slug);
    $articleSchemaImage = $article->effective_og_image
        ? url($article->effective_og_image)
        : url((string) config('seo.fallback_image_path', '/gfx/skinbase_back_001.webp'));
    $articleCoverSizes = '(max-width: 767px) calc(100vw - 3rem), (max-width: 1279px) calc(100vw - 5rem), 768px';
    $articleCoverPreloadHref = $article->cover_desktop_url ?: $article->cover_url;
    $seo = \App\Support\Seo\SeoDataBuilder::fromArray([
        'title' => $article->meta_title ?: $article->title,
        'description' => $article->meta_description ?: Str::limit(strip_tags((string) $article->excerpt), 160),
        'keywords' => $article->meta_keywords,
        'canonical' => $isPreview ? $articleUrl : ($article->canonical_url ?: $articleUrl),
        'robots' => $isPreview ? 'noindex,nofollow' : 'index,follow',
        'og_type' => 'article',
        'og_title' => $article->effective_og_title,
        'og_description' => $article->effective_og_description,
        'og_image' => $article->effective_og_image,
        'breadcrumbs' => collect([
            (object) ['name' => 'Home', 'url' => url('/')],
            (object) ['name' => 'News', 'url' => route('news.index')],
            $article->category
                ? (object) ['name' => $article->category->name, 'url' => route('news.category', $article->category->slug)]
                : null,
        ])->filter()->values(),
    ])
        ->addJsonLd(array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'NewsArticle',
            'headline' => $article->title,
            'description' => $article->meta_description ?: Str::limit(strip_tags((string) $article->excerpt), 160),
            'image' => $articleSchemaImage
                ? array_filter([
                    '@type' => 'ImageObject',
                    'url' => $articleSchemaImage,
                    'contentUrl' => $articleSchemaImage,
                    'thumbnailUrl' => $article->cover_mobile_url,
                    'caption' => $article->title,
                ], fn (mixed $value): bool => $value !== null && $value !== '')
                : null,
            'datePublished' => $article->published_at?->toIso8601String(),
            'dateModified' => $article->updated_at?->toIso8601String(),
            'articleSection' => $article->category?->name,
            'author' => array_filter([
                '@type' => 'Person',
                'name' => $article->author?->name,
            ]),
            'publisher' => [
                '@type' => 'Organization',
                'name' => config('seo.site_name', 'Skinbase'),
            ],
            'mainEntityOfPage' => $articleUrl,
        ], fn (mixed $value): bool => $value !== null && $value !== ''))
        ->build();
@endphp

@push('head')
    @if($articleCoverPreloadHref)
        <link
            rel="preload"
            as="image"
            href="{{ $articleCoverPreloadHref }}"
            @if($article->cover_srcset) imagesrcset="{{ $article->cover_srcset }}" imagesizes="{{ $articleCoverSizes }}" @endif
            fetchpriority="high"
        >
    @endif
@endpush

@extends('news.layout', [
    'metaTitle'       => $article->meta_title ?: $article->title,
    'metaDescription' => $article->meta_description ?: Str::limit(strip_tags((string)$article->excerpt), 160),
    'metaCanonical'   => $isPreview ? $articleUrl : ($article->canonical_url ?: $articleUrl),
    'metaRobots'      => $isPreview ? 'noindex,nofollow' : 'index,follow',
])

@section('news_content')

@php
    $headerBreadcrumbs = collect([
        (object) ['name' => 'Home', 'url' => url('/')],
        (object) ['name' => 'News', 'url' => route('news.index')],
        $article->category
            ? (object) ['name' => $article->category->name, 'url' => route('news.category', $article->category->slug)]
            : null,
    ])->filter()->values();
@endphp

<x-nova-page-header
    section="News"
    :title="$article->title"
    icon="fa-newspaper"
    :breadcrumbs="$headerBreadcrumbs"
    :description="$article->excerpt ? Str::limit(strip_tags((string) $article->excerpt), 180) : 'Latest Skinbase announcement and community update.'"
    headerClass="pb-6"
    innerClass="mx-auto max-w-7xl"
>
    <x-slot name="actions">
        <div class="flex flex-wrap items-center gap-2 text-sm text-white/60">
            <span class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-white/75">{{ $article->type_label }}</span>
            @if($article->category)
                <a href="{{ route('news.category', $article->category->slug) }}" class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1.5 text-sky-200">{{ $article->category->name }}</a>
            @endif
            @if($article->is_pinned)
                <span class="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1.5 text-amber-100">Pinned</span>
            @endif
            <span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5">
                <i class="fa-regular fa-clock text-xs"></i>
                {{ $article->reading_time }} min read
            </span>
        </div>
    </x-slot>
</x-nova-page-header>

<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
    @if($isPreview)
        <div class="mb-6 rounded-[24px] border border-indigo-300/20 bg-indigo-400/10 px-5 py-4 text-sm text-indigo-100 shadow-[0_16px_40px_rgba(30,41,59,0.24)]">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-indigo-100/70">Preview mode</div>
                    <div class="mt-1">This article preview is visible only to newsroom staff and is excluded from indexing.</div>
                </div>
                @if(!empty($previewBackUrl))
                    <a href="{{ $previewBackUrl }}" class="inline-flex items-center gap-2 rounded-full border border-indigo-200/20 bg-indigo-500/10 px-4 py-2 text-sm font-semibold text-indigo-50 transition hover:bg-indigo-500/15">
                        <i class="fa-solid fa-arrow-left text-xs"></i>
                        Back to editor
                    </a>
                @endif
            </div>
        </div>
    @endif

    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
        <article class="min-w-0">
            @if($article->cover_url)
                <div class="overflow-hidden rounded-[32px] border border-white/[0.06] bg-black/20 shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
                    <a href="{{ $articleCoverPreloadHref }}" class="group block focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950" aria-label="Open full cover image">
                        <div class="relative">
                            <img src="{{ $article->cover_url }}" @if($article->cover_srcset) srcset="{{ $article->cover_srcset }}" sizes="{{ $articleCoverSizes }}" @endif alt="{{ $article->title }}" fetchpriority="high" loading="eager" decoding="async" class="h-auto max-h-[520px] w-full object-cover transition duration-300 group-hover:scale-[1.01]">
                            <div class="pointer-events-none absolute inset-x-4 bottom-4 flex items-center justify-between gap-3 rounded-full border border-white/10 bg-slate-950/72 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/82 backdrop-blur-sm">
                                <span>Open Image</span>
                                <span class="inline-flex items-center gap-2 text-sky-200/90">
                                    <i class="fa-solid fa-magnifying-glass-plus text-[11px]"></i>
                                    Full Image
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            @endif

            <div class="mt-6 rounded-[32px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] p-6 shadow-[0_18px_45px_rgba(0,0,0,0.2)] sm:p-8">
                <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
                    <span>
                        @if($article->author?->username)
                            <a href="{{ route('news.author', $article->author->username) }}" class="transition hover:text-white">{{ $article->author->name ?? $article->author->username }}</a>
                        @else
                            {{ $article->author?->name ?? 'Skinbase' }}
                        @endif
                    </span>
                    <span>{{ $article->published_at?->format('d M Y') }}</span>
                    <span>{{ number_format((int) $article->views) }} views</span>
                </div>

                @if($article->excerpt)
                    <p class="mt-5 text-lg leading-8 text-white/65">{{ $article->excerpt }}</p>
                @endif

                <div class="story-prose prose prose-invert mt-8 max-w-none text-[1.02rem] leading-8 prose-p:text-white/72 prose-strong:text-white prose-headings:text-white [&_img]:rounded-[24px] [&_img]:border [&_img]:border-white/[0.08] [&_img]:shadow-[0_20px_45px_rgba(0,0,0,0.24)]">
                    {!! $article->rendered_content !!}
                </div>

                @php
                    $renderedContent = (string) ($article->rendered_content ?? '');
                    $needsInstagramEmbeds = str_contains($renderedContent, 'instagram-media');
                    $needsFacebookEmbeds = str_contains($renderedContent, 'fb-post');
                    $needsTikTokEmbeds = str_contains($renderedContent, 'tiktok-embed');
                    $needsXEmbeds = str_contains($renderedContent, 'twitter-tweet');
                @endphp

                @if($article->tags->isNotEmpty())
                    <div class="mt-8 flex flex-wrap gap-2 border-t border-white/[0.06] pt-6">
                        @foreach($article->tags as $tag)
                            <a href="{{ route('news.tag', $tag->slug) }}" class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/60 transition hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-white">#{{ $tag->name }}</a>
                        @endforeach
                    </div>
                @endif

                <div class="mt-8 flex flex-wrap items-center gap-3 border-t border-white/[0.06] pt-6">
                    <span class="text-sm font-medium text-white/55">Share</span>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}" class="inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-500/10 px-4 py-2 text-sm text-sky-200 transition hover:bg-sky-500/15" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-twitter text-xs"></i>
                        Twitter
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" class="inline-flex items-center gap-2 rounded-full border border-blue-400/20 bg-blue-500/10 px-4 py-2 text-sm text-blue-200 transition hover:bg-blue-500/15" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-facebook text-xs"></i>
                        Facebook
                    </a>
                </div>

                @if($article->forum_thread_id)
                    <div class="mt-6 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-4 text-sm text-emerald-100/90">
                        <div class="flex flex-wrap items-center gap-2">
                            <i class="fa-solid fa-comments text-xs"></i>
                            <span class="font-medium">Join the discussion</span>
                        </div>
                        <a href="{{ url('/forum/thread/discussion-' . $article->slug) }}" class="mt-2 inline-flex items-center gap-2 text-emerald-200 transition hover:text-white">
                            Discussion: {{ $article->title }}
                            <i class="fa-solid fa-arrow-right text-[11px]"></i>
                        </a>
                    </div>
                @endif

                @if($article->commentsAreEnabled() && ! $isPreview)
                    <script id="news-comments-props" type="application/json">
                        {!! json_encode([
                            'articleId' => (int) $article->id,
                            'isLoggedIn' => auth()->check(),
                            'loginUrl' => route('login'),
                        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
                    </script>

                    <div id="news-comments-root">
                        @include('news._comments', [
                            'article' => $article,
                            'comments' => $comments ?? collect(),
                            'commentsCount' => $commentsCount ?? 0,
                            'isPreview' => $isPreview,
                        ])
                    </div>

                    @vite(['resources/js/Pages/News/NewsComments.jsx'])
                @else
                    @include('news._comments', [
                        'article' => $article,
                        'comments' => $comments ?? collect(),
                        'commentsCount' => $commentsCount ?? 0,
                        'isPreview' => $isPreview,
                    ])
                @endif
            </div>

            @include('news._related_entities', ['relatedEntities' => $relatedEntities ?? []])

            @if($related->isNotEmpty())
                <section class="mt-8">
                    <div class="mb-4 flex items-center justify-between gap-3">
                        <h2 class="text-lg font-semibold text-white/90">Related Articles</h2>
                    </div>
                    <div class="grid gap-5 md:grid-cols-2">
                        @foreach($related as $rel)
                            @include('news._article_card', ['article' => $rel])
                        @endforeach
                    </div>
                </section>
            @endif
        </article>

        <aside class="space-y-4">
            @include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
        </aside>
    </div>
</div>
@endsection

@push('scripts')
    @if($needsFacebookEmbeds)
        <div id="fb-root"></div>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0"></script>
    @endif

    @if($needsInstagramEmbeds)
        <script async src="https://www.instagram.com/embed.js"></script>
    @endif

    @if($needsTikTokEmbeds)
        <script async src="https://www.tiktok.com/embed.js"></script>
    @endif

    @if($needsXEmbeds)
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    @endif
@endpush