@extends('blog.layout')

@section('meta_title', $post->meta_title ?: $post->title)
@section('meta_description', $post->meta_description ?: Str::limit(strip_tags($post->excerpt ?: $post->content), 160))

@section('content')
    <article class="max-w-3xl mx-auto">
        <header class="mb-8">
            <h1 class="text-4xl font-bold mb-2">{{ $post->title }}</h1>
            <p class="text-gray-500 text-sm">{{ $post->published_at?->format('F j, Y') }} · {{ $post->author->name ?? '' }}
                @if($post->category)
                    · <a href="{{ route('blog.category', $post->category) }}" class="text-blue-600 hover:underline">{{ $post->category->name }}</a>
                @endif
            </p>
            @if($post->tags->isNotEmpty())
                <div class="mt-2 flex flex-wrap gap-2">
                    @foreach($post->tags as $t)
                        <a href="{{ route('blog.tag', $t) }}" class="text-xs px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">{{ $t->name }}</a>
                    @endforeach
                </div>
            @endif
        </header>

        @if($post->featured_image)
            <img src="{{ asset('storage/'.$post->featured_image) }}" alt="" class="w-full rounded-lg mb-8 max-h-96 object-cover">
        @endif

        <div class="prose max-w-none mb-8 blog-content">
            {!! $post->content !!}
        </div>

        <div class="flex items-center gap-4 mb-10 text-sm border-t border-b border-gray-200 py-4">
            <span>{{ $post->likes_count }} likes</span>
            <span>{{ $post->dislikes_count }} dislikes</span>
            <form action="{{ route('blog.posts.vote', $post) }}" method="POST" class="inline">@csrf
                <input type="hidden" name="vote" value="1">
                <button type="submit" class="px-3 py-1 rounded {{ (int) $userVote === 1 ? 'bg-green-200' : 'bg-gray-200' }} hover:opacity-90">Like</button>
            </form>
            <form action="{{ route('blog.posts.vote', $post) }}" method="POST" class="inline">@csrf
                <input type="hidden" name="vote" value="-1">
                <button type="submit" class="px-3 py-1 rounded {{ (int) $userVote === -1 ? 'bg-red-200' : 'bg-gray-200' }} hover:opacity-90">Dislike</button>
            </form>
        </div>

        <section class="mb-12">
            <h2 class="text-xl font-bold mb-4">Comments</h2>
            @foreach($comments as $comment)
                <div class="border-b border-gray-100 py-3 text-sm">
                    <strong>{{ $comment->displayName() }}</strong>
                    <span class="text-gray-500">{{ $comment->created_at->diffForHumans() }}</span>
                    <p class="mt-1 text-gray-700">{{ $comment->body }}</p>
                </div>
            @endforeach
            {{ $comments->links() }}
        </section>

        <section class="bg-white rounded-lg shadow p-6 mb-12">
            <h3 class="font-semibold mb-4">Leave a comment</h3>
            @auth
                <form action="{{ route('blog.comments.store', $post) }}" method="POST" class="space-y-3">@csrf
                    <textarea name="body" rows="4" required class="w-full rounded border-gray-300 text-sm" placeholder="Your comment"></textarea>
                    <button type="submit" class="px-4 py-2 bg-gray-900 text-white rounded text-sm">Submit</button>
                </form>
            @else
                <form action="{{ route('blog.comments.store', $post) }}" method="POST" class="space-y-3">@csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <input type="text" name="guest_name" required placeholder="Name" class="rounded border-gray-300 text-sm" value="{{ old('guest_name') }}">
                        <input type="email" name="guest_email" required placeholder="Email" class="rounded border-gray-300 text-sm" value="{{ old('guest_email') }}">
                    </div>
                    <textarea name="body" rows="4" required class="w-full rounded border-gray-300 text-sm">{{ old('body') }}</textarea>
                    <button type="submit" class="px-4 py-2 bg-gray-900 text-white rounded text-sm">Submit</button>
                </form>
            @endauth
        </section>

        @if($related->isNotEmpty())
            <section>
                <h2 class="text-xl font-bold mb-4">Related posts</h2>
                <ul class="space-y-2">
                    @foreach($related as $r)
                        <li><a href="{{ route('blog.post', $r) }}" class="text-blue-600 hover:underline">{{ $r->title }}</a></li>
                    @endforeach
                </ul>
            </section>
        @endif

        <aside class="mt-12">
            <h3 class="font-bold mb-2">Popular</h3>
            <ul class="text-sm space-y-1">
                @foreach($popular as $p)
                    <li><a href="{{ route('blog.post', $p) }}" class="text-blue-600 hover:underline">{{ Str::limit($p->title, 60) }}</a></li>
                @endforeach
            </ul>
        </aside>
    </article>
@endsection