@extends('layouts.app')

@section('title', 'All Articles - Corpus Intellectual')
@section('description', 'Browse all published articles in Corpus Intellectual journal covering various aspects of genomics research.')

@section('content')
<!-- Header -->
<section class="bg-white border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
            <div>
                <h1 class="text-3xl font-bold text-journal-primary">All Articles</h1>
                <p class="text-gray-600 mt-2">
                    @if(request('search'))
                        Search results for "{{ request('search') }}" - {{ $articles->total() }} articles found
                    @elseif(request('category'))
                        Articles in {{ $categories->where('slug', request('category'))->first()?->name ?? request('category') }} - {{ $articles->total() }} articles
                    @else
                        Browse all published articles - {{ $articles->total() }} articles
                    @endif
                </p>
            </div>

            <!-- Filters -->
            <div id="article-filters" class="flex flex-wrap gap-4">
                <!-- Category Filter -->

                <div class="relative">
                    <select id="category-filter" class="appearance-none bg-white border border-gray-300 rounded-md px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-journal-accent">
                        <option value="">All Categories</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->slug }}" {{ request('category') == $cat->slug ? 'selected' : '' }}>
                                {{ $cat->name }} ({{ $cat->articles_count }})
                            </option>
                        @endforeach
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                        <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
                            <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                        </svg>
                    </div>
                </div>

                <!-- Volume Filter -->
                <div class="relative">
                    <select id="volume-filter" class="appearance-none bg-white border border-gray-300 rounded-md px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-journal-accent">
                        <option value="">All Volumes</option>
                        @foreach($volumes as $vol)
                            <option value="{{ $vol->id }}" {{ request('volume') == $vol->id ? 'selected' : '' }}>
                                {{ $vol->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                        <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
                            <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                        </svg>
                    </div>
                </div>

                <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var categorySelect = document.getElementById('category-filter');
                    var volumeSelect = document.getElementById('volume-filter');
                    categorySelect.addEventListener('change', function () {
                        var url = new URL(window.location.href);
                        if (this.value) {
                            url.searchParams.set('category', this.value);
                        } else {
                            url.searchParams.delete('category');
                        }
                        url.searchParams.delete('page');
                        window.location.href = url.toString();
                    });
                    volumeSelect.addEventListener('change', function () {
                        var url = new URL(window.location.href);
                        if (this.value) {
                            url.searchParams.set('volume', this.value);
                        } else {
                            url.searchParams.delete('volume');
                        }
                        url.searchParams.delete('page');
                        window.location.href = url.toString();
                    });
                });
                </script>
                </div>
            </div>
        </div>

        <!-- Articles List -->
        @if($articles->count() > 0)
        <div class="mt-8">
            @if(request('volume'))
                @php
                    $grouped = $articles->groupBy(function($article) {
                        return optional($article->series)->name ?? 'No Series';
                    });
                @endphp
                @foreach($grouped as $seriesName => $seriesArticles)
                    <h3 class="text-2xl font-bold text-journal-primary mt-8 mb-4">{{ $seriesName }}</h3>
                    @foreach($seriesArticles as $article)
                        <article class="mb-8 p-6 bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-lg">
                            <div class="flex flex-col gap-4">
                                <!-- Title -->
                                <h2 class="text-xl font-bold text-journal-primary mb-3">
                                    <a href="{{ route('articles.show', $article) }}" class="hover:text-journal-accent transition">
                                        {{ $article->title }}
                                    </a>
                                </h2>

                                <!-- Abstract -->
                                <p class="text-gray-600 mb-4 leading-relaxed">
                                    {{ Str::limit($article->abstract, 300) }}
                                </p>

                                <!-- Authors -->
                                <div class="mb-4">
                                    <p class="text-sm text-gray-700">
                                        <strong class="text-journal-primary">Authors:</strong>
                                        @php
                                            $authors = $article->authors_text ? array_map('trim', explode(',', $article->authors_text)) : [];
                                        @endphp
                                        @foreach(array_slice($authors, 0, 6) as $index => $author)
                                            <span class="author-name">{{ $author }}</span>@if($index < min(5, count($authors) - 1)), @endif
                                        @endforeach
                                        @if(count($authors) > 6)
                                            <span class="text-gray-500"> et al.</span>
                                        @endif
                                    </p>
                                </div>

                                <!-- Keywords -->
                                @if($article->keywords)
                                    @php $keywords = is_array($article->keywords) ? $article->keywords : json_decode($article->keywords, true); @endphp
                                    <div class="mb-4">
                                        <div class="flex flex-wrap gap-1">
                                            @foreach(array_slice($keywords ?? [], 0, 5) as $keyword)
                                            <span class="bg-gray-100 text-gray-600 px-2 py-1 text-xs rounded">
                                                {{ $keyword }}
                                            </span>
                                            @endforeach
                                            @if(count($keywords ?? []) > 5)
                                            <span class="text-gray-500 text-xs px-2 py-1">
                                                +{{ count($keywords) - 5 }} more
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                @endif

                                <!-- DOI & Stats -->
                                <div class="flex items-center justify-between pt-4 border-t">
                                    <div class="flex items-center space-x-4">
                                        @if($article->doi)
                                        <span class="text-sm text-gray-600">
                                            DOI: <span class="text-journal-accent font-mono">{{ $article->doi }}</span>
                                        </span>
                                        @endif
                                        <div class="flex items-center space-x-3 text-sm text-gray-500">
                                            <span>👁 {{ number_format($article->views_count) }} views</span>
                                            <span>⬇ {{ number_format($article->downloads_count) }} downloads</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <a href="{{ route('articles.show', $article) }}" class="text-journal-accent hover:text-journal-dark-blue font-medium text-sm">
                                            Read full article →
                                        </a>
                                        <button class="text-gray-400 hover:text-gray-600" title="Bookmark">
                                            <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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                @endforeach
            @else
                @foreach($articles as $article)
                    <article class="mb-8 p-6 bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-lg">
                        <div class="flex flex-col gap-4">
                            <!-- Title -->
                            <h2 class="text-xl font-bold text-journal-primary mb-3">
                                <a href="{{ route('articles.show', $article) }}" class="hover:text-journal-accent transition">
                                    {{ $article->title }}
                                </a>
                            </h2>

                            <!-- Abstract -->
                            <p class="text-gray-600 mb-4 leading-relaxed">
                                {{ Str::limit($article->abstract, 300) }}
                            </p>

                            <!-- Authors -->
                            <div class="mb-4">
                                <p class="text-sm text-gray-700">
                                    <strong class="text-journal-primary">Authors:</strong>
                                    @php
                                        $authors = $article->authors_text ? array_map('trim', explode(',', $article->authors_text)) : [];
                                    @endphp
                                    @foreach(array_slice($authors, 0, 6) as $index => $author)
                                        <span class="author-name">{{ $author }}</span>@if($index < min(5, count($authors) - 1)), @endif
                                    @endforeach
                                    @if(count($authors) > 6)
                                        <span class="text-gray-500"> et al.</span>
                                    @endif
                                </p>
                            </div>

                            <!-- Keywords -->
                            @if($article->keywords)
                                @php $keywords = is_array($article->keywords) ? $article->keywords : json_decode($article->keywords, true); @endphp
                                <div class="mb-4">
                                    <div class="flex flex-wrap gap-1">
                                        @foreach(array_slice($keywords ?? [], 0, 5) as $keyword)
                                        <span class="bg-gray-100 text-gray-600 px-2 py-1 text-xs rounded">
                                            {{ $keyword }}
                                        </span>
                                        @endforeach
                                        @if(count($keywords ?? []) > 5)
                                        <span class="text-gray-500 text-xs px-2 py-1">
                                            +{{ count($keywords) - 5 }} more
                                        </span>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            <!-- DOI & Stats -->
                            <div class="flex items-center justify-between pt-4 border-t">
                                <div class="flex items-center space-x-4">
                                    @if($article->doi)
                                    <span class="text-sm text-gray-600">
                                        DOI: <span class="text-journal-accent font-mono">{{ $article->doi }}</span>
                                    </span>
                                    @endif
                                    <div class="flex items-center space-x-3 text-sm text-gray-500">
                                        <span>👁 {{ number_format($article->views_count) }} views</span>
                                        <span>⬇ {{ number_format($article->downloads_count) }} downloads</span>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <a href="{{ route('articles.show', $article) }}" class="text-journal-accent hover:text-journal-dark-blue font-medium text-sm">
                                        Read full article →
                                    </a>
                                    <button class="text-gray-400 hover:text-gray-600" title="Bookmark">
                                        <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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </article>
                @endforeach
            @endif
        </div>

        <!-- Pagination -->
        <div class="mt-8">
            {{ $articles->appends(request()->query())->links() }}
        </div>
        @else
        <!-- No Articles Found -->
        <div class="text-center py-16">
            <svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            <h3 class="text-lg font-medium text-journal-primary mb-2">No articles found</h3>
            <p class="text-gray-500 mb-6">
                @if(request()->hasAny(['category', 'type', 'search']))
                    No articles match your current filters. Try adjusting your search criteria.
                @else
                    There are no published articles yet.
                @endif
            </p>
            @if(request()->hasAny(['category', 'type', 'search']))
            <a href="{{ route('articles.index') }}" class="bg-journal-accent text-white px-6 py-3 rounded-lg font-medium hover:bg-journal-dark-blue transition">
                View All Articles
            </a>
            @endif
        </div>
        @endif
    </div>
</section>

@endsection