@extends('layouts.app')

@section('title', $article->title . ' - Corpus Intellectual')
@section('description', Str::limit($article->abstract, 160))

@section('content')
<!-- Article Header -->
<section class="bg-white border-b">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Breadcrumb -->
        <nav class="mb-6">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
                <!-- <li><a href="{{ route('home') }}" class="hover:text-journal-blue">Home</a></li> -->
                <li class="flex items-center">
                    <svg class="flex-shrink-0 mx-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                    <a href="{{ route('articles.index') }}" class="hover:text-journal-blue">Articles</a>
                </li>
                @if($article->category)
                <li class="flex items-center">
                    <svg class="flex-shrink-0 mx-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                    <a href="{{ route('articles.index', ['category' => $article->category->slug]) }}" class="hover:text-journal-blue">{{ $article->category->name }}</a>
                </li>
                @endif
                <li class="flex items-center">
                    <svg class="flex-shrink-0 mx-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                    <span class="text-gray-900">Article</span>
                </li>
            </ol>
        </nav>

        <!-- Article Type Badge -->
        <div class="mb-4">
            <span class="bg-journal-light-blue text-journal-blue px-3 py-1 text-sm font-semibold rounded-full">
                {{ ucfirst(str_replace('_', ' ', $article->article_type)) }}
            </span>
        </div>

        <!-- Title -->
        <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 leading-tight mb-6">
            {{ $article->title }}
        </h1>

        <!-- Authors -->
        <div class="mb-6">
            <div class="flex flex-wrap gap-2 mb-3">
                @php
                    $authors = $article->authors_text ? array_map('trim', explode(',', $article->authors_text)) : [];
                @endphp
                @foreach($authors as $author)
                    <div class="bg-gray-50 rounded-lg px-3 py-2">
                        <span class="font-medium text-gray-900">{{ $author }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Article Meta -->
        <div class="border-t border-b py-4 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div>
                    <span class="font-medium text-gray-900">Published:</span>
                    <div class="text-gray-600">{{ $article->published_date->format('F j, Y') }}</div>
                </div>
                <div>
                    <span class="font-medium text-gray-900">Submitted:</span>
                    <div class="text-gray-600">{{ $article->submitted_date->format('F j, Y') }}</div>
                </div>
                @if($article->doi)
                <div>
                    <span class="font-medium text-gray-900">DOI:</span>
                    <div class="text-journal-blue font-mono text-xs">{{ $article->doi }}</div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Article Content -->
<section class="py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-3">
                <!-- Abstract -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">Abstract</h2>
                    <div class="bg-gray-50 rounded-lg p-6">
                        <p class="text-gray-700 leading-relaxed">{{ $article->abstract }}</p>
                    </div>
                </div>

                <!-- Keywords -->
                @if($article->keywords)
                    @php $keywords = is_array($article->keywords) ? $article->keywords : json_decode($article->keywords, true); @endphp
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Keywords</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($keywords ?? [] as $keyword)
                            <span class="bg-journal-light-blue text-journal-blue px-3 py-1 text-sm rounded-full">
                                {{ $keyword }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Article Content -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Full Text</h2>
                    <div class="prose prose-lg prose-gray max-w-none">
                        {!! nl2br(e($article->content)) !!}
                    </div>
                </div>

                <!-- Author Information -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Author Information</h3>
                    <div class="space-y-4">
                        @php
                            $authors = $article->authors_text ? array_map('trim', explode(',', $article->authors_text)) : [];
                        @endphp
                        <div class="mb-4">
                            <div class="flex flex-wrap gap-2">
                                @foreach($authors as $author)
                                    <span class="font-semibold text-gray-800">{{ $author }}</span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <!-- Article Actions -->
                <div class="bg-white border rounded-lg p-4 mb-6 sticky top-6">
                    <h3 class="font-semibold text-gray-900 mb-4">Article Actions</h3>
                    <div class="space-y-3">
                        <a href="{{ route('articles.downloadPDF', $article) }}" class="w-full bg-journal-primary text-white px-4 py-2 rounded-md hover:bg-journal-dark-blue transition flex items-center justify-center space-x-2" target="_blank" rel="noopener">
                            <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                            <span>Download PDF</span>
                        </a>

                        <button class="w-full bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition flex items-center justify-center space-x-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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                            </svg>
                            <span>Bookmark</span>
                        </button>

                        <button class="w-full bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition flex items-center justify-center space-x-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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
                            </svg>
                            <span>Share</span>
                        </button>

                        <div x-data="{ showCiteModal: false, activeFormat: 'APA' }">
                            <button @click="showCiteModal = true" class="w-full bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition flex items-center justify-center space-x-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span>Cite Article</span>
                            </button>

                            <!-- Modal Backdrop -->
                            <div x-show="showCiteModal" style="display: none;" class="fixed inset-0 z-50 flex items-center justify-center">
                                <div class="absolute inset-0 bg-black opacity-50" @click="showCiteModal = false"></div>
                                
                                <!-- Modal Content -->
                                <div class="relative bg-white rounded-lg p-6 w-full max-w-2xl mx-4 shadow-xl z-10">
                                    <div class="flex justify-between items-center mb-4">
                                        <h3 class="text-xl font-bold text-journal-primary">Cite this Article</h3>
                                        <button @click="showCiteModal = false" class="text-gray-500 hover:text-gray-700">
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                        </button>
                                    </div>
                                    
                                    @php
                                        $authors_array = $article->authors_text ? array_map('trim', explode(',', $article->authors_text)) : [];
                                        $authors_text = implode(', ', $authors_array);
                                        $year = $article->published_at ? \Carbon\Carbon::parse($article->published_at)->format('Y') : date('Y');
                                        $title_apa = $article->title;
                                        $title_mla = ucwords($article->title);
                                        $journal = "Corpus Intellectual";
                                    @endphp

                                    <div class="flex flex-col md:flex-row gap-6">
                                        <!-- Sidebar Menu -->
                                        <div class="md:w-1/4 border-r border-gray-100 pr-4">
                                            <ul class="space-y-2">
                                                <li>
                                                    <button @click="activeFormat = 'APA'" :class="activeFormat === 'APA' ? 'bg-journal-primary text-white' : 'text-gray-700 hover:bg-gray-100'" class="w-full text-left px-3 py-2 rounded-md transition font-medium focus:outline-none">
                                                        APA
                                                    </button>
                                                </li>
                                                <li>
                                                    <button @click="activeFormat = 'MLA'" :class="activeFormat === 'MLA' ? 'bg-journal-primary text-white' : 'text-gray-700 hover:bg-gray-100'" class="w-full text-left px-3 py-2 rounded-md transition font-medium focus:outline-none">
                                                        MLA
                                                    </button>
                                                </li>
                                                <li>
                                                    <button @click="activeFormat = 'IEEE'" :class="activeFormat === 'IEEE' ? 'bg-journal-primary text-white' : 'text-gray-700 hover:bg-gray-100'" class="w-full text-left px-3 py-2 rounded-md transition font-medium focus:outline-none">
                                                        IEEE
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>

                                        <!-- Content Area -->
                                        <div class="md:w-3/4">
                                            <div x-show="activeFormat === 'APA'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                                                <p class="font-semibold text-gray-800 mb-2">APA Format</p>
                                                <div class="bg-gray-50 p-4 rounded text-gray-700 text-sm leading-relaxed border border-gray-100">
                                                    {{ $authors_text }} ({{ $year }}). {{ $title_apa }}. <i class="italic">{{ $journal }}</i>.
                                                </div>
                                            </div>

                                            <div x-show="activeFormat === 'MLA'" style="display: none;" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                                                <p class="font-semibold text-gray-800 mb-2">MLA Format</p>
                                                <div class="bg-gray-50 p-4 rounded text-gray-700 text-sm leading-relaxed border border-gray-100">
                                                    {{ $authors_text }}. "{{ $title_mla }}." <i class="italic">{{ $journal }}</i>, {{ $year }}.
                                                </div>
                                            </div>

                                            <div x-show="activeFormat === 'IEEE'" style="display: none;" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                                                <p class="font-semibold text-gray-800 mb-2">IEEE Format</p>
                                                <div class="bg-gray-50 p-4 rounded text-gray-700 text-sm leading-relaxed border border-gray-100">
                                                    {{ $authors_text }}, "{{ $title_apa }}," <i class="italic">{{ $journal }}</i>, {{ $year }}.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Article Stats -->
                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                    <h3 class="font-semibold text-gray-900 mb-4">Article Metrics</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">Views</span>
                            <span class="font-semibold">{{ number_format($article->views_count) }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">Downloads</span>
                            <span class="font-semibold">{{ number_format($article->downloads_count) }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">Citations</span>
                            <span class="font-semibold">0</span>
                        </div>
                    </div>
                </div>

                <!-- Category -->
                @if($article->category)
                <div class="bg-white border rounded-lg p-4">
                    <h3 class="font-semibold text-gray-900 mb-2">Category</h3>
                    <a href="{{ route('articles.index', ['category' => $article->category->slug]) }}"
                       class="text-journal-blue hover:text-journal-dark-blue font-medium">
                        {{ $article->category->name }}
                    </a>
                    @if($article->category->description)
                    <p class="text-sm text-gray-600 mt-2">{{ $article->category->description }}</p>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Related Articles -->
@if($relatedArticles->count() > 0)
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Related Articles</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($relatedArticles as $relatedArticle)
            <article class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 p-4">
                <div class="mb-3">
                    <span class="bg-journal-light-blue text-journal-blue px-2 py-1 text-xs font-semibold rounded-full">
                        {{ ucfirst(str_replace('_', ' ', $relatedArticle->article_type)) }}
                    </span>
                </div>

                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">
                    <a href="{{ route('articles.show', $relatedArticle) }}" class="hover:text-journal-blue transition">
                        {{ $relatedArticle->title }}
                    </a>
                </h3>

                <p class="text-gray-600 text-sm mb-3 line-clamp-3">
                    {{ Str::limit($relatedArticle->abstract, 120) }}
                </p>

                <div class="text-xs text-gray-500 mb-3">
                    @php
                        $authors = $relatedArticle->authors_text ? array_map('trim', explode(',', $relatedArticle->authors_text)) : [];
                    @endphp
                    {{ collect($authors)->take(2)->join(', ') }}
                    @if(count($authors) > 2)
                        et al.
                    @endif
                </div>

                <div class="flex justify-between items-center text-xs text-gray-500">
                    <span>{{ $relatedArticle->published_date->format('M Y') }}</span>
                    <span>{{ number_format($relatedArticle->views_count) }} views</span>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection