@extends('frontend.layouts.app')

@section('title', 'Publication')

@php
    use Carbon\Carbon;
    use App\Helpers\Helper;
    use Anuzpandey\LaravelNepaliDate\LaravelNepaliDate;

    $isEn = app()->getLocale() == 'en';
    $fallbackImage = asset('assets/frontend/images/default-image.png');
    $totalPublications = $publicationCategories->sum(fn($category) => $category->publications->count());
@endphp

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.publications'),
        'subHeading' => Helper::contentText('pages.publications_tagline'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.publication'),
            'route' => route('publication'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    <section class="container-page section-y" id="publications-section">
        @if ($totalPublications > 0)
            {{-- Toolbar: category filter + search --}}
            <div class="flex flex-col items-center justify-center gap-5 mb-8 md:mb-10">
                <div role="tablist" aria-label="{{ Helper::contentText('pages.publications') }}" class="flex flex-wrap justify-center gap-2"
                    id="publication-filters">
                    <button type="button" role="tab" aria-selected="true" data-filter="all"
                        class="publication-filter btn !min-h-[2.5rem] !px-4 text-sm rounded-full border border-line bg-primary text-white">
                        All
                        <span class="opacity-80 font-normal">({{ $totalPublications }})</span>
                    </button>
                    @foreach ($publicationCategories as $key => $publicationCategory)
                        @continue($publicationCategory->publications->isEmpty())
                        <button type="button" role="tab" aria-selected="false" data-filter="{{ $key }}"
                            class="publication-filter btn !min-h-[2.5rem] !px-4 text-sm rounded-full border border-gray-300 bg-white text-gray-700 hover:border-primary hover:text-primary">
                            {{ $isEn ? $publicationCategory->name_en : $publicationCategory->name_np ?? $publicationCategory->name_en }}
                            <span class="opacity-70 font-normal">({{ $publicationCategory->publications->count() }})</span>
                        </button>
                    @endforeach
                </div>

                <div class="relative w-full max-w-md">
                    <label for="publication-search" class="sr-only">Search publications</label>
                    <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
                        aria-hidden="true"></i>
                    <input id="publication-search" type="search" placeholder="Search publications"
                        class="w-full pl-11 pr-4 py-2.5 rounded-full border border-gray-300 bg-white text-sm focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
            </div>

            <p id="publication-count" class="text-sm text-gray-600 mb-6 text-center" aria-live="polite"></p>

            {{-- Cards --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-gap" id="publications-container">
                @foreach ($publicationCategories as $key => $publicationCategory)
                    @foreach ($publicationCategory->publications as $publication)
                        @php
                            $title = $isEn ? $publication->name_en : $publication->name_np ?? $publication->name_en;
                            $categoryName = $isEn
                                ? $publicationCategory->name_en
                                : $publicationCategory->name_np ?? $publicationCategory->name_en;
                            $excerpt = Helper::stripInlineStyle(
                                $isEn
                                    ? $publication->short_description_en ?? ''
                                    : $publication->short_description_np ?? ($publication->short_description_en ?? ''),
                            );
                        @endphp

                        <article class="publication-card card-ui overflow-hidden flex flex-col relative group"
                            data-category="{{ $key }}" data-title="{{ \Illuminate\Support\Str::lower(strip_tags($title . ' ' . $excerpt)) }}">

                            <div class="relative aspect-[16/10] overflow-hidden bg-gray-100">
                                <img loading="lazy" decoding="async"
                                    src="{{ $publication->thumbnail_image ? asset($publication->thumbnail_image) : $fallbackImage }}"
                                    onerror="this.onerror=null;this.src='{{ $fallbackImage }}'"
                                    alt="{{ $title }}"
                                    class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                                <span
                                    class="absolute top-3 left-3 bg-white/95 text-primary text-xs font-semibold px-3 py-1 rounded-full shadow-sm">
                                    {{ $categoryName }}
                                </span>
                            </div>

                            <div class="flex flex-col flex-1 p-5 md:p-6">
                                <div class="flex items-center flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600 mb-3">
                                    <span class="inline-flex items-center gap-1.5">
                                        <i class="fa-regular fa-calendar" aria-hidden="true"></i>
                                        <time datetime="{{ Carbon::parse($publication->published_date)->toDateString() }}">
                                            {{ $isEn
                                                ? Carbon::parse($publication->published_date)->format('d M Y')
                                                : LaravelNepaliDate::from($publication->published_date)->toNepaliDate(format: 'j F Y', locale: 'np') }}
                                        </time>
                                    </span>
                                    @isset($publication->author)
                                        <span class="inline-flex items-center gap-1.5">
                                            <i class="fa-regular fa-user" aria-hidden="true"></i> {{ $publication->author }}
                                        </span>
                                    @endisset
                                </div>

                                <h3 class="text-lg font-bold text-gray-900 leading-snug line-clamp-2">
                                    <a href="{{ route('publication-detail', $publication->slug) }}"
                                        class="after:absolute after:inset-0 hover:text-primary">
                                        {{ $title }}
                                    </a>
                                </h3>

                                <div class="mt-3 text-sm text-gray-600 leading-6 line-clamp-3">
                                    {!! $excerpt !!}
                                </div>

                                <span
                                    class="mt-auto pt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary group-hover:gap-3 transition-all">
                                    {{ __('pages.read_more') }}
                                    <i class="fa-solid fa-arrow-right-long" aria-hidden="true"></i>
                                </span>
                            </div>
                        </article>
                    @endforeach
                @endforeach
            </div>

            {{-- Empty state (filter / search) --}}
            <div id="publication-empty" class="hidden text-center py-16">
                <i class="fa-regular fa-newspaper text-4xl text-gray-300 mb-4" aria-hidden="true"></i>
                <p class="text-gray-700 font-semibold">{!! Helper::content('pages.no_details') !!}</p>
            </div>

            {{-- Load more --}}
            <div class="text-center mt-10 md:mt-12">
                <button type="button" id="publication-more"
                    class="btn hidden border border-primary text-primary hover:bg-primary hover:text-white">
                    Load more
                </button>
            </div>
        @else
            <div class="text-center py-16">
                <i class="fa-regular fa-newspaper text-4xl text-gray-300 mb-4" aria-hidden="true"></i>
                <h3 class="text-lg text-primary">{!! Helper::content('pages.no_details') !!}</h3>
            </div>
        @endif
    </section>
@endsection

@section('scripts')
    <script>
        (function() {
            const PAGE_SIZE = 9;
            const cards = Array.from(document.querySelectorAll('.publication-card'));
            if (!cards.length) return;

            const filters = Array.from(document.querySelectorAll('.publication-filter'));
            const search = document.getElementById('publication-search');
            const more = document.getElementById('publication-more');
            const empty = document.getElementById('publication-empty');
            const count = document.getElementById('publication-count');

            let activeFilter = 'all';
            let visibleLimit = PAGE_SIZE;

            function render() {
                const q = (search.value || '').trim().toLowerCase();
                const matches = cards.filter(c =>
                    (activeFilter === 'all' || c.dataset.category === activeFilter) &&
                    (!q || c.dataset.title.includes(q))
                );

                cards.forEach(c => c.classList.add('hidden'));
                matches.slice(0, visibleLimit).forEach(c => c.classList.remove('hidden'));

                empty.classList.toggle('hidden', matches.length > 0);
                more.classList.toggle('hidden', matches.length <= visibleLimit);
                count.textContent = matches.length ?
                    'Showing ' + Math.min(visibleLimit, matches.length) + ' of ' + matches.length :
                    '';
            }

            filters.forEach(btn => btn.addEventListener('click', () => {
                activeFilter = btn.dataset.filter;
                visibleLimit = PAGE_SIZE;
                filters.forEach(b => {
                    const on = b === btn;
                    b.setAttribute('aria-selected', on);
                    b.classList.toggle('bg-primary', on);
                    b.classList.toggle('text-white', on);
                    b.classList.toggle('border-line', on);
                    b.classList.toggle('bg-white', !on);
                    b.classList.toggle('text-gray-700', !on);
                    b.classList.toggle('border-gray-300', !on);
                });
                render();
            }));

            search.addEventListener('input', () => {
                visibleLimit = PAGE_SIZE;
                render();
            });
            more.addEventListener('click', () => {
                visibleLimit += PAGE_SIZE;
                render();
            });

            render();
        })();
    </script>
@endsection