<?php
use Livewire\Component;
use App\Models\Post;
use Illuminate\Support\Str;
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-8 font-odia">
    <!-- Breadcrumb -->
    <nav class="flex text-[10px] md:text-xs text-slate-400 mb-8 font-sans uppercase tracking-wider font-bold">
        <a href="{{ route('home') }}" class="hover:text-brand-blue">Home</a>
        <span class="mx-2">/</span>
        <a href="{{ route('category', $post->category->slug) }}" class="hover:text-brand-blue">{{ $post->category->name }}</a>
        <span class="mx-2">/</span>
        <span class="text-slate-300 truncate">{{ Str::limit($post->title, 30) }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
        <!-- Main Content -->
        <article class="lg:col-span-8">
            <h1 class="text-3xl md:text-5xl font-black text-slate-900 leading-tight mb-8">
                {{ $post->title }}
            </h1>
            
            <div class="flex flex-wrap items-center justify-between gap-6 border-y border-slate-100 py-6 mb-10">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 bg-slate-100 rounded-sm border border-slate-200 flex-shrink-0 flex items-center justify-center">
                        <i class="fa-solid fa-user text-slate-300"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-slate-800 uppercase tracking-tight">ଆମ ପ୍ରତିନିଧି</p>
                        <p class="text-[10px] text-slate-400 font-sans uppercase font-bold tracking-wider">Updated: {{ $post->updated_at->format('d M Y, h:i A') }}</p>
                    </div>
                </div>
                @php
                    $articleUrl   = urlencode(route('article', $post->slug));
                    $articleTitle = urlencode($post->title);
                @endphp
                <div class="flex gap-2">
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ $articleUrl }}" target="_blank" rel="noopener"
                        class="w-8 h-8 rounded-sm bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 transition-colors"><i class="fa-brands fa-facebook-f text-xs"></i></a>
                    <a href="https://twitter.com/intent/tweet?url={{ $articleUrl }}&text={{ $articleTitle }}" target="_blank" rel="noopener"
                        class="w-8 h-8 rounded-sm bg-slate-900 text-white flex items-center justify-center hover:bg-black transition-colors"><i class="fa-brands fa-x-twitter text-xs"></i></a>
                    <a href="https://api.whatsapp.com/send?text={{ $articleTitle }}%20{{ $articleUrl }}" target="_blank" rel="noopener"
                        class="w-8 h-8 rounded-sm bg-green-600 text-white flex items-center justify-center hover:bg-green-700 transition-colors"><i class="fa-brands fa-whatsapp text-xs"></i></a>
                    <button onclick="navigator.clipboard.writeText('{{ route('article', $post->slug) }}').then(() => this.innerHTML='<i class=\'fa-solid fa-check text-xs\'></i>')"
                        class="w-8 h-8 rounded-sm bg-slate-100 text-slate-500 border border-slate-200 flex items-center justify-center hover:bg-slate-200 transition-colors" title="Copy link"><i class="fa-solid fa-link text-xs"></i></button>
                </div>
            </div>

            <!-- Featured Image -->
            <figure class="mb-10">
                <img src="{{ $post->featured_image ? (Str::startsWith($post->featured_image, 'http') ? $post->featured_image : asset('storage/'.$post->featured_image)) : 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80&w=1200' }}" class="w-full rounded-lg border border-slate-200" alt="{{ $post->title }}">
                @if($post->image_caption)
                <figcaption class="text-[10px] text-slate-400 mt-3 italic text-center font-sans uppercase font-bold tracking-widest">{{ $post->image_caption }}</figcaption>
                @endif
            </figure>

            <!-- Article Body -->
            <div class="text-lg text-slate-700 leading-relaxed space-y-6 prose max-w-none">
                {!! $post->content !!}
            </div>

            <!-- Tags (Static for now) -->
            <div class="flex flex-wrap gap-2 mt-12 pt-8 border-t border-slate-100">
                <span class="text-[9px] font-bold bg-slate-50 border border-slate-200 px-3 py-1 rounded-sm text-slate-500 uppercase font-sans tracking-widest cursor-default hover:bg-slate-100 transition-colors">#OdishaNews</span>
                <span class="text-[9px] font-bold bg-slate-50 border border-slate-200 px-3 py-1 rounded-sm text-slate-500 uppercase font-sans tracking-widest cursor-default hover:bg-slate-100 transition-colors">#BikashBarta</span>
            </div>

            <!-- Author Box (Static for now) -->
            <div class="bg-slate-50 rounded-lg p-6 mt-12 flex items-center gap-6 border border-slate-200">
                <div class="w-16 h-16 bg-slate-200 rounded-sm flex-shrink-0 border border-slate-300 flex items-center justify-center">
                    <i class="fa-solid fa-user-tie text-slate-400 text-2xl"></i>
                </div>
                <div>
                    <h4 class="text-lg font-black text-slate-900 uppercase tracking-tight">ସମ୍ପାଦକୀୟ ଡେସ୍କ</h4>
                    <p class="text-sm text-slate-500 font-bold leading-relaxed">ଓଡ଼ିଶା ନ୍ୟୁଜ୍ ର ଅଭିଜ୍ଞ ଟିମ୍ ଦ୍ୱାରା ପ୍ରସ୍ତୁତ ଏହି ରିପୋର୍ଟ। ଆମେ ଆପଣଙ୍କ ପାଖରେ ସଠିକ୍ ଓ ନିରପେକ୍ଷ ଖବର ପହଞ୍ଚାଇବାକୁ ପ୍ରତିଶ୍ରୁତିବଦ୍ଧ।</p>
                </div>
            </div>

            <!-- Comments Placeholder -->
            <div class="mt-16">
                <h3 class="text-xl font-black mb-8 flex items-center gap-3 uppercase tracking-tighter">
                    <span class="w-1 h-6 bg-brand-red"></span>
                    ପ୍ରତିକ୍ରିୟା ଦିଅନ୍ତୁ
                </h3>
                <textarea class="w-full bg-slate-50 border border-slate-200 rounded-md p-4 h-32 focus:ring-1 focus:ring-brand-blue outline-none text-slate-800 placeholder:text-slate-400 font-bold" placeholder="Write your comment here..."></textarea>
                <button class="mt-4 bg-brand-blue text-white px-8 py-3 rounded-sm font-bold hover:bg-blue-800 transition-all uppercase font-sans text-xs tracking-widest shadow-sm">Post Comment</button>
            </div>

        </article>

        <!-- Sidebar -->
        <aside class="lg:col-span-4 space-y-12">
            <!-- Related News -->
            @if($relatedPosts->count() > 0)
            <div>
                <h3 class="text-sm font-bold mb-6 flex items-center gap-3 uppercase tracking-widest text-slate-900">
                    <span class="w-1 h-5 bg-brand-blue inline-block"></span>
                    ସମ୍ପର୍କିତ ଖବର
                </h3>
                <div class="space-y-6">
                    @foreach($relatedPosts as $rPost)
                    <a href="{{ route('article', $rPost->slug) }}" class="group block">
                        <div class="aspect-video rounded-md overflow-hidden mb-3 border border-slate-100">
                            <img src="{{ $rPost->featured_image ? (Str::startsWith($rPost->featured_image, 'http') ? $rPost->featured_image : asset('storage/'.$rPost->featured_image)) : 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80&w=400' }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                        </div>
                        <h4 class="text-sm font-bold text-slate-800 font-odia leading-snug group-hover:text-brand-blue transition-colors">
                            {{ $rPost->title }}
                        </h4>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Trending Stories -->
            <div>
                <h3 class="text-sm font-bold mb-6 flex items-center gap-3 uppercase tracking-widest text-slate-900">
                    <span class="w-1 h-5 bg-brand-red inline-block"></span>
                    ଟ୍ରେଣ୍ଡିଂ ଖବର
                </h3>
                <div class="space-y-5">
                    @foreach($trendingPosts as $tPost)
                    <a href="{{ route('article', $tPost->slug) }}" class="group flex gap-4 border-b border-slate-100 pb-4">
                        <span class="text-2xl font-black text-slate-200 font-sans flex-shrink-0">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <div>
                            <h4 class="text-sm font-bold text-slate-800 font-odia leading-snug group-hover:text-brand-red transition-colors mb-1">{{ $tPost->title }}</h4>
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">{{ $tPost->category->name }} | {{ $tPost->created_at->diffForHumans() }}</span>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
        </aside>
    </div>
</main>