<x-layout :title="$post->title . ' - Muse'">
    <article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-16">
        <!-- Header -->
        <header class="text-center mb-10 lg:mb-16">
            @if($post->category)
                <a href="{{ route('category', $post->category) }}" 
                   class="inline-block px-4 py-1.5 text-sm font-medium bg-gradient-to-r from-rose-100 to-fuchsia-100 text-fuchsia-700 rounded-full mb-6 hover:from-rose-200 hover:to-fuchsia-200 transition-colors">
                    {{ $post->category->name }}
                </a>
            @endif
            
            <h1 class="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold text-stone-900 leading-tight mb-6">
                {{ $post->title }}
            </h1>
            
            @if($post->excerpt)
                <p class="text-lg sm:text-xl text-stone-600 max-w-2xl mx-auto leading-relaxed">
                    {{ $post->excerpt }}
                </p>
            @endif
            
            <div class="flex flex-wrap items-center justify-center gap-4 mt-8 text-sm text-stone-500">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-gradient-to-br from-rose-400 to-fuchsia-500 rounded-full flex items-center justify-center text-white font-medium mr-3">
                        {{ substr($post->user->name ?? 'U', 0, 1) }}
                    </div>
                    <span class="font-medium text-stone-700">{{ $post->user->name ?? '匿名作者' }}</span>
                </div>
                <span class="hidden sm:inline">·</span>
                <span>{{ $post->published_at?->format('Y年m月d日') }}</span>
                <span class="hidden sm:inline">·</span>
                <span>{{ $post->reading_time }} 分钟阅读</span>
                <span class="hidden sm:inline">·</span>
                <span>{{ number_format($post->views_count) }} 次阅读</span>
            </div>
        </header>
        
        <!-- Cover Image -->
        @if($post->cover_image)
            <div class="mb-10 lg:mb-16 -mx-4 sm:mx-0">
                <img src="{{ Storage::url($post->cover_image) }}" 
                     alt="{{ $post->title }}"
                     class="w-full aspect-[16/9] object-cover sm:rounded-2xl lg:rounded-3xl">
            </div>
        @endif
        
        <!-- Gallery (Instagram Style) -->
        @if($post->gallery && count($post->gallery) > 0)
            <div class="mb-10 lg:mb-16">
                @php
                    $galleryCount = count($post->gallery);
                @endphp
                
                @if($galleryCount == 1)
                    <div class="aspect-square rounded-2xl overflow-hidden">
                        <img src="{{ Storage::url($post->gallery[0]) }}" alt="" class="w-full h-full object-cover">
                    </div>
                @elseif($galleryCount == 2)
                    <div class="grid grid-cols-2 gap-2 rounded-2xl overflow-hidden">
                        @foreach($post->gallery as $image)
                            <div class="aspect-square">
                                <img src="{{ Storage::url($image) }}" alt="" class="w-full h-full object-cover">
                            </div>
                        @endforeach
                    </div>
                @elseif($galleryCount == 3)
                    <div class="grid grid-cols-3 gap-2 rounded-2xl overflow-hidden">
                        @foreach($post->gallery as $image)
                            <div class="aspect-square">
                                <img src="{{ Storage::url($image) }}" alt="" class="w-full h-full object-cover">
                            </div>
                        @endforeach
                    </div>
                @elseif($galleryCount == 4)
                    <div class="grid grid-cols-2 gap-2 rounded-2xl overflow-hidden">
                        @foreach($post->gallery as $image)
                            <div class="aspect-square">
                                <img src="{{ Storage::url($image) }}" alt="" class="w-full h-full object-cover">
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="grid grid-cols-3 gap-2 rounded-2xl overflow-hidden">
                        @foreach(array_slice($post->gallery, 0, 9) as $index => $image)
                            <div class="aspect-square relative">
                                <img src="{{ Storage::url($image) }}" alt="" class="w-full h-full object-cover">
                                @if($index == 8 && $galleryCount > 9)
                                    <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
                                        <span class="text-white text-2xl font-semibold">+{{ $galleryCount - 9 }}</span>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif
        
        <!-- Content -->
        <div class="prose prose-lg prose-stone max-w-none
                    prose-headings:font-serif prose-headings:font-semibold
                    prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-4
                    prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
                    prose-p:text-stone-700 prose-p:leading-relaxed
                    prose-a:text-fuchsia-600 prose-a:no-underline hover:prose-a:underline
                    prose-img:rounded-xl prose-img:shadow-lg
                    prose-blockquote:border-l-fuchsia-400 prose-blockquote:bg-stone-50 prose-blockquote:py-1 prose-blockquote:rounded-r-lg
                    prose-code:text-fuchsia-600 prose-code:bg-stone-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
                    prose-pre:bg-stone-900 prose-pre:rounded-xl">
            {!! $post->content !!}
        </div>
        
        <!-- Tags -->
        @if($post->tags->isNotEmpty())
            <div class="mt-12 pt-8 border-t border-stone-200">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="text-stone-500 mr-2">标签:</span>
                    @foreach($post->tags as $tag)
                        <a href="{{ route('tag', $tag) }}" 
                           class="px-4 py-1.5 text-sm font-medium rounded-full transition-colors"
                           style="background-color: {{ $tag->color }}20; color: {{ $tag->color }}">
                            #{{ $tag->name }}
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
        
        <!-- Share & Actions -->
        <div class="mt-8 pt-8 border-t border-stone-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <button class="flex items-center space-x-2 px-4 py-2 bg-stone-100 hover:bg-stone-200 rounded-full transition-colors">
                        <svg class="w-5 h-5 text-rose-500" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                        </svg>
                        <span class="text-sm font-medium text-stone-700">{{ number_format($post->likes_count) }}</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-stone-500">分享:</span>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($post->title) }}" 
                       target="_blank"
                       class="p-2 bg-stone-100 hover:bg-stone-200 rounded-full transition-colors">
                        <svg class="w-5 h-5 text-stone-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                        </svg>
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" 
                       target="_blank"
                       class="p-2 bg-stone-100 hover:bg-stone-200 rounded-full transition-colors">
                        <svg class="w-5 h-5 text-stone-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </article>
    
    <!-- Related Posts -->
    @if($relatedPosts->isNotEmpty())
        <section class="bg-stone-100/50 py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="font-serif text-2xl sm:text-3xl font-semibold text-stone-900 mb-8 text-center">相关文章</h2>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($relatedPosts as $relatedPost)
                        <x-post-card :post="$relatedPost" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</x-layout>

