@extends('layouts.app')

@section('title', $article->title)

{{-- Story 5.5: Article JSON-LD structured data (only for published articles) --}}
@if($article->status === \App\Enums\ArticleStatus::Published)
@section('json-ld')
<x-json-ld :schemas="['article']" :data="[
    'headline' => $article->meta_title ?: $article->title,
    'description' => $article->meta_description ?? '',
    'authorName' => $article->author?->name,
    'datePublished' => $article->published_at?->toIso8601String() ?? '',
    'dateModified' => $article->updated_at->toIso8601String(),
    'image' => $article->og_image ? \Illuminate\Support\Facades\Storage::disk('blog_images')->url($article->og_image) : asset('images/og/wasoria-default.webp'),
    'url' => $article->canonical_url ?: url()->current(),
]" />
@endsection
@endif

@section('content')

{{-- Preview banner — visible only when previewing unpublished content (Story 5.7) --}}
@if(isset($preview) && $preview)
<div class="fixed top-0 left-0 right-0 z-50 bg-amber-400 text-black text-center py-2 font-bold text-sm shadow-md"
    id="preview-banner">
    ⚠️ PREVIEW — Cet article n'est pas publié
</div>
@endif

{{-- Breadcrumb --}}
@php
$locale = app()->getLocale();
@endphp
<nav aria-label="Breadcrumb" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 {{ isset($preview) && $preview ? 'mt-10' : '' }}">
    <ol class="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
        <li>
            <a href="{{ url('/' . $locale) }}" class="hover:text-primary transition-colors">Accueil</a>
        </li>
        <li aria-hidden="true">/</li>
        <li>
            <a href="{{ url('/' . $locale . '/blog') }}" class="hover:text-primary transition-colors">Blog</a>
        </li>
        <li aria-hidden="true">/</li>
        <li class="text-foreground font-medium truncate max-w-xs" aria-current="page">
            {{ $article->title }}
        </li>
    </ol>
</nav>

{{-- Article layout: content + sticky TOC sidebar --}}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {{-- Main article content --}}
    <article class="min-w-0">

        {{-- Article header --}}
        <header class="mb-10 mt-[80px]">
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight mb-6 text-foreground">
                {{ $article->title }}
            </h1>

            @if($article->published_at || $article->read_time)
            <div class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
                @if($article->published_at)
                <time datetime="{{ $article->published_at->toIso8601String() }}">
                    {{ $article->published_at->translatedFormat('d F Y') }}
                </time>
                @endif
                @if($article->read_time)
                <span>{{ $article->read_time }} min de lecture</span>
                @endif
            </div>
            @endif

            @if($article->tags->isNotEmpty())
            <div class="flex flex-wrap gap-2 mt-4">
                @foreach($article->tags as $tag)
                <a href="{{ url('/' . $locale . '/blog?tag=' . $tag->slug) }}"
                    class="inline-block bg-muted text-muted-foreground text-xs font-medium px-3 py-1 rounded-full hover:bg-primary/10 hover:text-primary transition-colors">
                    {{ $tag->name }}
                </a>
                @endforeach
            </div>
            @endif
        </header>

        {{-- Block rendering engine (Story 5.9) --}}
        <div class="blog-content" id="blog-article-content">
            @if(!empty($article->blocks))
            @php
            // Pre-compute heading slugs to handle duplicates (matching controller logic)
            $headingSlugs = [];
            $slugCounts = [];
            foreach ($article->blocks as $i => $b) {
            if (($b['type'] ?? '') === 'heading') {
            $text = $b['data']['text'] ?? $b['data']['content'] ?? '';
            $baseSlug = \Illuminate\Support\Str::slug($text);
            if (isset($slugCounts[$baseSlug])) {
            $slugCounts[$baseSlug]++;
            $headingSlugs[$i] = $baseSlug . '-' . $slugCounts[$baseSlug];
            } else {
            $slugCounts[$baseSlug] = 1;
            $headingSlugs[$i] = $baseSlug;
            }
            }
            }
            @endphp
            @foreach($article->blocks as $blockIndex => $block)
            @php $blockType = $block['type'] ?? ''; @endphp

            @switch($blockType)
            @case('paragraph')
            <x-blog.block-paragraph :data="$block['data'] ?? []" />
            @break

            @case('heading')
            @php
            $headingData = $block['data'] ?? [];
            $headingData['slug'] = $headingSlugs[$blockIndex] ?? \Illuminate\Support\Str::slug($headingData['text'] ?? $headingData['content'] ?? '');
            @endphp
            <x-blog.block-heading :data="$headingData" />
            @break

            @case('image')
            <x-blog.block-image :data="$block['data'] ?? []" />
            @break

            @case('kpi')
            <x-blog.block-kpi-router :data="$block['data'] ?? []" />
            @break

            @case('quote')
            <x-blog.block-quote :data="$block['data'] ?? []" />
            @break

            @case('banner')
            <x-blog.block-banner :data="$block['data'] ?? []" />
            @break

            @case('button')
            <x-blog.block-button :data="$block['data'] ?? []" />
            @break

            @case('video')
            <x-blog.block-video :data="$block['data'] ?? []" />
            @break

            @case('list')
            <x-blog.block-list :data="$block['data'] ?? []" />
            @break

            @case('classic')
            <x-blog.block-classic :data="$block['data'] ?? []" />
            @break

            @case('gallery')
            <x-blog.block-gallery :data="$block['data'] ?? []" />
            @break

            @case('iframe')
            <x-blog.block-iframe :data="$block['data'] ?? []" />
            @break

            @default
            {{-- Unknown block type — graceful fallback --}}
            @if(isset($preview) && $preview)
            <div class="bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded p-3 my-4 text-sm">
                <strong>Block type inconnu :</strong> {{ $blockType ?: 'N/A' }}
            </div>
            @else
            <!-- Unknown block: {{ $blockType }} -->
            @endif
            @endswitch
            @endforeach
            @else
            <p class="text-muted-foreground italic">Aucun contenu de bloc disponible.</p>
            @endif
        </div>

        {{-- "See also" section — single related article --}}
        @if(isset($relatedArticles) && $relatedArticles->isNotEmpty())
        @php $seeAlso = $relatedArticles->first(); @endphp
        <section class="mt-16 pt-8 border-t border-border">
            <h2 class="text-lg font-semibold text-muted-foreground mb-4">{{ __('blog.see_also') }}</h2>
            <a href="{{ url('/' . $locale . '/blog/' . $seeAlso->slug) }}"
                class="group inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors text-lg font-medium">
                <span>{{ $seeAlso->title }}</span>
                <svg class="w-5 h-5 shrink-0 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
            </a>
        </section>
        @endif

    </article>

</div>
@endsection