@extends('frontend.layouts.app')

@section('title', $article->meta_title ?: $article->title)
@section('description', $article->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($article->excerpt ?? $article->content), 160))
@if($article->featured_image)
    @section('og_image', \App\Services\ImageService::url($article->featured_image, 'large'))
@endif
@section('og_type', 'article')

@section('content')

<article class="bg-white">
    {{-- Hero immagine --}}
    @if($article->featured_image)
    <div class="relative h-[50vh] md:h-[70vh] min-h-[400px] max-h-[700px]">
        <img src="{{ \App\Services\ImageService::url($article->featured_image, 'large') }}"
             alt="{{ $article->featured_image_caption ?? $article->title }}"
             class="absolute inset-0 w-full h-full object-cover">
        <div class="absolute inset-0 gradient-overlay"></div>
        <div class="absolute inset-x-0 bottom-0 p-6 md:p-12">
            <div class="container mx-auto">
                @if($article->category)
                    <a href="{{ url('/categoria/' . $article->category->slug) }}"
                       class="inline-block px-3 py-1 bg-folgore text-white text-xs font-bold uppercase tracking-wider rounded mb-4">
                        {{ $article->category->name }}
                    </a>
                @endif
                <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold text-white leading-tight max-w-4xl">
                    {{ $article->title }}
                </h1>
                @if($article->subtitle)
                    <p class="mt-4 text-lg md:text-xl text-white/90 max-w-3xl">{{ $article->subtitle }}</p>
                @endif
            </div>
        </div>
    </div>
    @if($article->featured_image_caption)
        <div class="container mx-auto px-4 py-3 text-xs text-gray-500 italic">{{ $article->featured_image_caption }}</div>
    @endif
    @else
    <div class="container mx-auto px-4 py-12">
        @if($article->category)
            <a href="{{ url('/categoria/' . $article->category->slug) }}"
               class="inline-block px-3 py-1 bg-folgore text-white text-xs font-bold uppercase tracking-wider rounded mb-4">
                {{ $article->category->name }}
            </a>
        @endif
        <h1 class="text-3xl md:text-5xl font-bold text-gray-900 max-w-4xl">{{ $article->title }}</h1>
        @if($article->subtitle)
            <p class="mt-4 text-lg text-gray-600">{{ $article->subtitle }}</p>
        @endif
    </div>
    @endif

    {{-- Meta + Contenuto --}}
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12">
            <div class="lg:col-span-8">
                {{-- Meta articolo --}}
                <div class="flex items-center gap-4 pb-6 mb-8 border-b border-gray-200 text-sm text-gray-600">
                    @if($article->author)
                        <a href="{{ url('/autore/' . $article->author->slug) }}" class="flex items-center gap-2 hover:text-folgore transition">
                            @if($article->author->avatar)
                                <img src="{{ \App\Services\ImageService::url($article->author->avatar, 'thumb') }}"
                                     alt="{{ $article->author->name }}" class="w-10 h-10 rounded-full object-cover">
                            @else
                                <div class="w-10 h-10 rounded-full bg-folgore text-white flex items-center justify-center font-bold">
                                    {{ strtoupper(substr($article->author->name, 0, 1)) }}
                                </div>
                            @endif
                            <span class="font-semibold text-gray-900">{{ $article->author->name }}</span>
                        </a>
                    @endif
                    @if($article->published_at)
                        <span class="flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            {{ $article->published_at->translatedFormat('d F Y') }}
                        </span>
                    @endif
                    @if($article->reading_time)
                        <span class="flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            {{ $article->reading_time }} {{ __t('article.min_read', 'min di lettura') }}
                        </span>
                    @endif
                    <span class="ml-auto flex items-center gap-1">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        {{ number_format($article->views_count ?? 0) }}
                    </span>
                </div>

                {{-- Contenuto --}}
                <div class="prose prose-lg max-w-none prose-headings:font-bold prose-a:text-folgore prose-a:no-underline hover:prose-a:underline">
                    {!! $article->content !!}
                </div>

                {{-- Video se presente --}}
                @if($article->video_url)
                    @php
                        // Estrai ID YouTube
                        preg_match('#(?:youtube\.com/(?:watch\?v=|embed/|shorts/)|youtu\.be/)([a-zA-Z0-9_-]{11})#', $article->video_url, $m);
                        $ytId = $m[1] ?? null;
                    @endphp
                    @if($ytId)
                        <div class="my-8 aspect-video rounded-xl overflow-hidden shadow-lg">
                            <iframe src="https://www.youtube.com/embed/{{ $ytId }}"
                                    class="w-full h-full" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen></iframe>
                        </div>
                    @endif
                @endif

                {{-- Galleria --}}
                @if(!empty($article->gallery) && is_array($article->gallery))
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3 my-8">
                        @foreach($article->gallery as $img)
                            <a href="{{ \App\Services\ImageService::url($img, 'original') }}" target="_blank">
                                <img src="{{ \App\Services\ImageService::url($img, 'medium') }}"
                                     class="w-full h-full object-cover rounded-lg hover:opacity-90 transition aspect-square">
                            </a>
                        @endforeach
                    </div>
                @endif

                {{-- Tags --}}
                @if($article->tags && $article->tags->isNotEmpty())
                    <div class="mt-12 pt-6 border-t border-gray-200">
                        <h4 class="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-3">{{ __t('article.tags', 'Tag') }}</h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach($article->tags as $tag)
                                <a href="{{ url('/tag/' . $tag->slug) }}"
                                   class="px-3 py-1 bg-gray-100 hover:bg-folgore hover:text-white rounded-full text-sm transition">
                                    #{{ $tag->name }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Autore box --}}
                @if($article->author)
                    <div class="mt-12 p-6 bg-gray-50 rounded-xl flex items-start gap-4">
                        @if($article->author->avatar)
                            <img src="{{ \App\Services\ImageService::url($article->author->avatar, 'thumb') }}"
                                 class="w-16 h-16 rounded-full object-cover flex-shrink-0">
                        @else
                            <div class="w-16 h-16 rounded-full bg-folgore text-white flex items-center justify-center font-bold text-xl flex-shrink-0">
                                {{ strtoupper(substr($article->author->name, 0, 1)) }}
                            </div>
                        @endif
                        <div class="flex-1 min-w-0">
                            <a href="{{ url('/autore/' . $article->author->slug) }}"
                               class="font-bold text-lg text-gray-900 hover:text-folgore">{{ $article->author->name }}</a>
                            @if($article->author->bio)
                                <p class="text-sm text-gray-600 mt-1 line-clamp-3">{{ $article->author->bio }}</p>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Commenti --}}
                @if($article->allow_comments && $approvedComments && $approvedComments->isNotEmpty())
                    <div class="mt-12 pt-8 border-t border-gray-200">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">
                            {{ __t('article.comments', 'Commenti') }} ({{ $approvedComments->count() }})
                        </h3>
                        <div class="space-y-6">
                            @foreach($approvedComments as $comment)
                                <div class="flex gap-3">
                                    <div class="w-10 h-10 rounded-full bg-folgore text-white flex items-center justify-center font-bold flex-shrink-0">
                                        {{ strtoupper(substr($comment->author_name ?? '?', 0, 1)) }}
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="bg-gray-50 rounded-lg p-4">
                                            <div class="flex items-baseline gap-2 mb-1">
                                                <span class="font-semibold text-gray-900">{{ $comment->author_name }}</span>
                                                <span class="text-xs text-gray-500">{{ $comment->created_at->translatedFormat('d F Y') }}</span>
                                            </div>
                                            <div class="text-sm text-gray-700">{!! nl2br(e($comment->content)) !!}</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            {{-- Sidebar --}}
            <aside class="lg:col-span-4 space-y-8">
                @if(!empty($related) && $related->isNotEmpty())
                <div>
                    <h3 class="text-lg font-bold text-gray-900 mb-4 pb-2 border-b-2 border-folgore">
                        {{ __t('article.related', 'Articoli correlati') }}
                    </h3>
                    <div class="space-y-4">
                        @foreach($related as $r)
                            <x-site.article-card :article="$r" variant="horizontal" />
                        @endforeach
                    </div>
                </div>
                @endif
            </aside>
        </div>
    </div>
</article>

@endsection