@extends('components.layout')

@section('title', 'My Feed | ' . ($settings['site_name'] ?? 'LOCAL PULSE'))

@section('content')
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

            <aside class="lg:col-span-3 space-y-5">
                @php $followingCount = $stats['following'] ?? 0; @endphp
                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
                        <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                        Browse
                    </h3>
                    <nav class="space-y-1">
                        @php $filters = ['all' => 'For You', 'following' => 'Following', 'trending' => 'Trending', 'latest' => 'Latest']; @endphp
                        @foreach($filters as $key => $label)
                            <a href="{{ route('feed', ['filter' => $key]) }}" class="flex items-center justify-between px-3 py-2 text-sm rounded-md {{ $filter === $key ? 'bg-red-50 text-red-700 font-semibold' : 'text-gray-700 hover:bg-gray-50' }}">
                                <span>{{ $label }}</span>
                                @if($key === 'following' && $followingCount > 0)
                                    <span class="text-[10px] bg-red-100 text-red-700 px-1.5 py-0.5 rounded-full font-semibold">{{ $followingCount }}</span>
                                @endif
                            </a>
                        @endforeach
                    </nav>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Following</h3>
                    @if($followingCount === 0)
                        <p class="text-xs text-gray-500 mb-3">Follow topics below to personalize your feed.</p>
                    @else
                        <div class="text-xs text-gray-500 mb-3">Following {{ $followingCount }} topics</div>
                    @endif
                    <a href="#discover" class="text-xs text-red-600 font-semibold hover:underline">+ Discover topics</a>
                </div>

                @if($recentlyViewed->isNotEmpty())
                    <div class="bg-white border border-gray-200 rounded-xl p-5">
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Recently read</h3>
                        <div class="space-y-3">
                            @foreach($recentlyViewed->take(5) as $r)
                                @if($r)
                                    <a href="{{ route('articles.show', $r->slug) }}" class="block group">
                                        <div class="text-xs font-semibold text-gray-900 line-clamp-2 group-hover:text-red-600">{{ $r->title }}</div>
                                        <div class="text-xs text-gray-500">{{ $r->published_at?->diffForHumans() }}</div>
                                    </a>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif
            </aside>

            <main class="lg:col-span-9 space-y-5">

                <div class="bg-gradient-to-r from-red-600 to-orange-600 rounded-xl p-6 sm:p-8 text-white shadow-sm">
                    <h1 class="text-3xl font-bold">My Feed</h1>
                    <p class="text-red-100 text-sm mt-1">Personalized news from the topics you follow.</p>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-5 space-y-4">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="text-xs font-semibold text-gray-500 uppercase">Scope</span>
                        <a href="{{ route('feed', ['filter' => $filter, 'scope' => 'all']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ ($scope ?? 'all') === 'all' ? 'bg-gray-900 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-gray-400' }}">All AU</a>
                        <a href="{{ route('feed', ['filter' => $filter, 'scope' => 'local']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ ($scope ?? '') === 'local' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">Local</a>
                        <a href="{{ route('feed', ['filter' => $filter, 'scope' => 'international']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ ($scope ?? '') === 'international' ? 'bg-blue-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-blue-400' }}">International</a>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="text-xs font-semibold text-gray-500 uppercase">Filter</span>
                        <a href="{{ route('feed', ['scope' => $scope, 'filter' => 'all']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ $filter === 'all' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">For You</a>
                        <a href="{{ route('feed', ['scope' => $scope, 'filter' => 'following']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ $filter === 'following' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">Following</a>
                        <a href="{{ route('feed', ['scope' => $scope, 'filter' => 'trending']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ $filter === 'trending' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">Trending</a>
                        <a href="{{ route('feed', ['scope' => $scope, 'filter' => 'latest']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ $filter === 'latest' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">Latest</a>
                    </div>
                </div>

                @if($articles->isEmpty())
                    <div class="bg-white border border-gray-200 rounded-xl p-12 text-center">
                        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">No stories to show</h3>
                        <p class="text-sm text-gray-500 mb-4">Follow some topics below to build your personalized feed.</p>
                        <a href="#discover" class="inline-block px-4 py-2 bg-red-600 text-white font-semibold rounded-md hover:bg-red-700">Discover topics</a>
                    </div>
                @else
                    <div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
                        @foreach($articles as $article)
                            <article class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:border-red-300 transition flex flex-col">
                                @if($article->featured_image)
                                    <a href="{{ route('articles.show', $article->slug) }}" class="block aspect-[16/9] overflow-hidden bg-gray-100">
                                        <img src="{{ asset('storage/' . $article->featured_image) }}" alt="" class="w-full h-full object-cover hover:scale-105 transition duration-300">
                                    </a>
                                @endif
                                <div class="p-5 flex-1 flex flex-col">
                                    <div class="flex items-center gap-2 text-xs text-gray-500 mb-2">
                                        @if($article->category)
                                            <a href="{{ route('categories.show', $article->category->slug) }}" class="text-red-600 font-semibold hover:underline uppercase tracking-wide">{{ $article->category->name }}</a>
                                        @endif
                                        <span>·</span>
                                        <span>{{ $article->published_at?->diffForHumans() }}</span>
                                        @if($article->is_breaking)<span class="px-1.5 py-0.5 bg-red-600 text-white rounded text-[10px] font-bold">BREAKING</span>@endif
                                    </div>
                                    <h2 class="text-lg font-bold text-gray-900 mb-2 leading-snug">
                                        <a href="{{ route('articles.show', $article->slug) }}" class="hover:text-red-600">{{ $article->title }}</a>
                                    </h2>
                                    <p class="text-sm text-gray-600 line-clamp-3 flex-1">{{ $article->excerpt ?? \Illuminate\Support\Str::limit(strip_tags($article->body), 180) }}</p>
                                    <div class="flex items-center gap-3 mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
                                        <span class="font-medium">By {{ $article->author?->name ?? 'Staff' }}</span>
                                        <span>·</span>
                                        <span>{{ number_format($article->view_count) }} views</span>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>

                    <div class="mt-6">
                        {{ $articles->links() }}
                    </div>
                @endif
            </main>
        </div>

        <section id="discover" class="mt-14 space-y-6">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Discover &amp; follow</h2>
                <p class="text-sm text-gray-500 mt-1">Pick topics, locations and authors to build your feed.</p>
            </div>

            <div class="bg-white border border-gray-200 rounded-xl p-6">
                <h3 class="text-sm font-semibold text-gray-900 mb-4">Categories</h3>
                <div class="flex flex-wrap gap-2">
                    @foreach($allCategories as $cat)
                        @php $following = in_array($cat->id, $prefs->followed_categories ?? []); @endphp
                        <button data-follow data-type="category" data-id="{{ $cat->id }}" class="px-3 py-1.5 text-sm rounded-full border {{ $following ? 'bg-red-600 text-white border-red-600' : 'border-gray-200 text-gray-700 hover:border-red-400' }}">
                            {{ $following ? '✓ ' : '+ ' }}{{ $cat->name }}
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="bg-white border border-gray-200 rounded-xl p-6">
                    <h3 class="text-sm font-semibold text-gray-900 mb-4">Locations</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($allLocations->take(20) as $loc)
                            @php $following = in_array($loc->id, $prefs->followed_locations ?? []); @endphp
                            <button data-follow data-type="location" data-id="{{ $loc->id }}" class="px-3 py-1.5 text-sm rounded-full border {{ $following ? 'bg-red-600 text-white border-red-600' : 'border-gray-200 text-gray-700 hover:border-red-400' }}">
                                {{ $following ? '✓ ' : '+ ' }}{{ $loc->name }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-6">
                    <h3 class="text-sm font-semibold text-gray-900 mb-4">Authors</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($allAuthors->take(15) as $a)
                            @php $following = in_array($a->id, $prefs->followed_authors ?? []); @endphp
                            <button data-follow data-type="author" data-id="{{ $a->id }}" class="px-3 py-1.5 text-sm rounded-full border {{ $following ? 'bg-red-600 text-white border-red-600' : 'border-gray-200 text-gray-700 hover:border-red-400' }}">
                                {{ $following ? '✓ ' : '+ ' }}{{ $a->name }}
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>

            @if($popularTags->isNotEmpty())
                <div class="bg-white border border-gray-200 rounded-xl p-6">
                    <h3 class="text-sm font-semibold text-gray-900 mb-4">Trending tags</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($popularTags as $t)
                            @php $following = in_array($t->id, $prefs->followed_tags ?? []); @endphp
                            <button data-follow data-type="tag" data-id="{{ $t->id }}" class="px-3 py-1.5 text-sm rounded-full border {{ $following ? 'bg-red-600 text-white border-red-600' : 'border-gray-200 text-gray-700 hover:border-red-400' }}">
                                #{{ $t->name }} ({{ $t->articles_count }})
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif
        </section>
    </div>

    @csrf
    <script>
        document.querySelectorAll('[data-follow]').forEach(btn => {
            btn.addEventListener('click', async () => {
                const type = btn.dataset.type;
                const id = btn.dataset.id;
                const csrfMeta = document.querySelector('meta[name="csrf-token"]');
                const csrf = csrfMeta ? csrfMeta.getAttribute('content') : document.querySelector('input[name="_token"]').value;
                const r = await fetch('{{ route("feed.follow") }}', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json'},
                    body: JSON.stringify({type, id})
                });
                const j = await r.json();
                if (j.following) {
                    btn.classList.add('bg-red-600', 'text-white', 'border-red-600');
                    btn.classList.remove('border-gray-200', 'text-gray-700', 'hover:border-red-400');
                    btn.textContent = btn.textContent.replace(/^\+\s*/, '✓ ');
                } else {
                    btn.classList.remove('bg-red-600', 'text-white', 'border-red-600');
                    btn.classList.add('border-gray-200', 'text-gray-700');
                    btn.textContent = btn.textContent.replace(/^✓\s*/, '+ ');
                }
            });
        });
    </script>
@endsection