@extends('layouts.app')

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

@section('meta_description', $post->meta_description ?: $post->excerpt)

@section('content')
<article class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    {{-- Categories & Date --}}
    <div class="flex items-center gap-2 text-xs font-sans text-stone-500 dark:text-stone-500 mb-4 uppercase tracking-wide">
        @if($post->categories->isNotEmpty())
            @foreach($post->categories as $category)
                <a href="{{ route('categories.show', $category->slug) }}" class="hover:text-stone-900 dark:hover:text-stone-100">{{ $category->name }}</a>
                @if(!$loop->last)<span>·</span>@endif
            @endforeach
            <span>·</span>
        @endif
        <time datetime="{{ $post->published_at?->toISOString() }}">{{ $post->published_at?->format('F j, Y') }}</time>
    </div>

    {{-- Title --}}
    <h1 class="font-display text-3xl md:text-5xl font-bold text-stone-900 dark:text-stone-100 leading-tight mb-4">
        {{ $post->title }}
    </h1>

    {{-- Excerpt --}}
    @if($post->excerpt)
        <p class="text-xl text-stone-600 dark:text-stone-400 leading-relaxed mb-6 font-display italic">{!! $post->excerpt !!}</p>
    @endif

    {{-- Author Meta --}}
    <div class="flex items-center gap-3 text-sm font-sans text-stone-600 dark:text-stone-400 mb-8 pb-8 border-b border-stone-200 dark:border-stone-800">
        <span>By {{ $post->user->name }}</span>
        <span>·</span>
        <span>{{ $post->reading_time_minutes ?? 0 }} min read</span>
    </div>

    {{-- Featured Image --}}
    @if($post->featured_image_media_id)
        <div class="mb-8 overflow-hidden rounded-lg">
            <img src="{{ $post->getFirstMediaUrl('featured', 'hero') }}" alt="{{ $post->title }}" class="w-full h-auto">
        </div>
    @endif

    {{-- YouTube Video --}}
    @if($post->youtube_url)
        <div class="mb-8 aspect-video rounded-lg overflow-hidden">
            <iframe src="{{ $post->youtube_url }}" class="w-full h-full" frameborder="0" allowfullscreen></iframe>
        </div>
    @endif

    {{-- Body --}}
    <div class="prose-blog">
        {!! $post->body_html !!}
    </div>

    {{-- Share --}}
    @if(settings('show_share_buttons', true))
    <div class="mt-12 pt-8 border-t border-stone-200 dark:border-stone-800">
        <h3 class="font-sans text-sm font-semibold uppercase tracking-wide text-stone-500 mb-4">Share this post</h3>
        <div class="flex gap-4">
            @if(settings('social_share_twitter', true))
                <a href="https://twitter.com/intent/tweet?text={{ urlencode($post->title) }}&url={{ urlencode(request()->url()) }}" target="_blank" rel="noopener" class="text-stone-400 hover:text-stone-900 dark:hover:text-stone-100">Twitter</a>
            @endif
            @if(settings('social_share_facebook', true))
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" rel="noopener" class="text-stone-400 hover:text-stone-900 dark:hover:text-stone-100">Facebook</a>
            @endif
            @if(settings('social_share_linkedin', true))
                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}" target="_blank" rel="noopener" class="text-stone-400 hover:text-stone-900 dark:hover:text-stone-100">LinkedIn</a>
            @endif
        </div>
    </div>
    @endif

    {{-- Author Box --}}
    @if(settings('show_author_box', true))
    <div class="mt-12 p-6 bg-stone-100 dark:bg-stone-900 rounded-lg flex gap-4">
        <div class="shrink-0">
            <div class="w-16 h-16 rounded-full bg-amber-200 dark:bg-amber-800 flex items-center justify-center font-display text-2xl font-bold text-amber-800 dark:text-amber-200">
                {{ strtoupper(substr($post->user->name, 0, 1)) }}
            </div>
        </div>
        <div>
            <h4 class="font-display font-bold text-stone-900 dark:text-stone-100">{{ $post->user->name }}</h4>
            @if($post->user->bio)
                <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">{{ $post->user->bio }}</p>
            @endif
        </div>
    </div>
    @endif

    {{-- Post Navigation --}}
    @if(settings('show_post_navigation', true) && ($previous || $next))
    <nav class="mt-12 grid grid-cols-2 gap-4">
        @if($previous)
            <a href="{{ route('posts.show', $previous->slug) }}" class="block p-4 rounded-lg border border-stone-200 dark:border-stone-800 hover:border-amber-500 transition">
                <span class="text-xs text-stone-500 font-sans uppercase tracking-wide">← Previous</span>
                <span class="block text-sm font-medium text-stone-900 dark:text-stone-100 mt-1">{{ $previous->title }}</span>
            </a>
        @else
            <div></div>
        @endif
        @if($next)
            <a href="{{ route('posts.show', $next->slug) }}" class="block p-4 rounded-lg border border-stone-200 dark:border-stone-800 hover:border-amber-500 transition text-right">
                <span class="text-xs text-stone-500 font-sans uppercase tracking-wide">Next →</span>
                <span class="block text-sm font-medium text-stone-900 dark:text-stone-100 mt-1">{{ $next->title }}</span>
            </a>
        @endif
    </nav>
    @endif

    {{-- Related Posts --}}
    @if(settings('show_related_posts', true) && $related->isNotEmpty())
    <section class="mt-16">
        <h3 class="font-display text-2xl font-bold text-stone-900 dark:text-stone-100 mb-6">Related Posts</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($related as $relPost)
                @include('partials.post-card', ['post' => $relPost])
            @endforeach
        </div>
    </section>
    @endif

    {{-- Comments --}}
    @if($post->approvedComments->isNotEmpty() || true)
    <section class="mt-16">
        <h3 class="font-display text-2xl font-bold text-stone-900 dark:text-stone-100 mb-6">Comments</h3>

        {{-- Comment List --}}
        @foreach($post->approvedComments->whereNull('parent_id') as $comment)
            @include('partials.comment-item', ['comment' => $comment])
        @endforeach

        {{-- Comment Form --}}
        <form action="{{ route('comments.store', $post->slug) }}" method="POST" class="mt-8 space-y-4">
            @csrf
            @if(!auth()->check())
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-sans font-medium text-stone-700 dark:text-stone-300 mb-1">Name</label>
                        <input type="text" name="guest_name" required class="w-full px-3 py-2 rounded-md border border-stone-300 dark:border-stone-700 bg-white dark:bg-stone-900 text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent">
                    </div>
                    <div>
                        <label class="block text-sm font-sans font-medium text-stone-700 dark:text-stone-300 mb-1">Email</label>
                        <input type="email" name="guest_email" required class="w-full px-3 py-2 rounded-md border border-stone-300 dark:border-stone-700 bg-white dark:bg-stone-900 text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent">
                    </div>
                </div>
            @endif
            <div>
                <label class="block text-sm font-sans font-medium text-stone-700 dark:text-stone-300 mb-1">Comment</label>
                <textarea name="body" rows="5" required class="w-full px-3 py-2 rounded-md border border-stone-300 dark:border-stone-700 bg-white dark:bg-stone-900 text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent"></textarea>
            </div>
            <label class="flex items-center gap-2 text-sm font-sans text-stone-600 dark:text-stone-400">
                <input type="checkbox" name="notify_replies" class="rounded"> Notify me of replies
            </label>
            <button type="submit" class="px-6 py-2 bg-amber-600 text-white text-sm font-medium rounded-md hover:bg-amber-700 transition">Post Comment</button>
        </form>
    </section>
    @endif

</article>
@endsection