@extends('layouts.site')

@section('title', $publication->title . ' — Research & Innovation Centre')
@section('meta-description', Str::limit($publication->abstract, 160))

@section('content')

{{-- ── Hero ──────────────────────────────────────────────────────────────── --}}
<div class="bg-gradient-to-r from-emerald-700 to-teal-700 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="flex flex-col md:flex-row gap-8 items-start">

            {{-- Publication Info --}}
            <div class="flex-1">
                <div class="flex flex-wrap items-center gap-2 mb-4">
                    <span class="px-3 py-1 bg-emerald-900/60 text-white text-xs font-semibold rounded-full uppercase tracking-wide">
                        {{ $publication->category_label }}
                    </span>
                    @if($publication->is_featured)
                    <span class="px-3 py-1 bg-yellow-400 text-yellow-900 text-xs font-semibold rounded-full">
                        <i class="fas fa-star mr-1"></i>Featured
                    </span>
                    @endif
                </div>

                <h1 class="text-3xl md:text-4xl font-bold text-white font-serif mb-5 leading-tight">
                    {{ $publication->title }}
                </h1>

                <div class="flex flex-wrap items-center gap-5 text-emerald-100 text-sm">
                    <div class="flex items-center gap-2">
                        <div class="w-9 h-9 rounded-full bg-emerald-900/50 flex items-center justify-center">
                            <i class="fas fa-user text-white text-xs"></i>
                        </div>
                        <div>
                            <p class="text-white font-semibold leading-tight">{{ $publication->user->name ?? 'Unknown Author' }}</p>
                            <p class="text-xs text-emerald-200">{{ $publication->author_badge }}</p>
                        </div>
                    </div>
                    <span class="text-emerald-400">|</span>
                    <span class="flex items-center gap-1.5">
                        <i class="fas fa-calendar-alt"></i>
                        Published {{ $publication->approved_at?->format('F d, Y') ?? 'N/A' }}
                    </span>
                    @if($publication->files->where('is_public', true)->count() > 0)
                    <span class="flex items-center gap-1.5">
                        <i class="fas fa-paperclip"></i>
                        {{ $publication->files->where('is_public', true)->count() }} attachment(s)
                    </span>
                    @endif
                </div>
            </div>

            {{-- Cover Image --}}
            @if($publication->cover_image)
            <div class="w-full md:w-64 flex-shrink-0">
                <img src="{{ Storage::url($publication->cover_image) }}"
                     alt="{{ $publication->title }}"
                     class="w-full h-52 md:h-64 object-cover rounded-2xl shadow-xl border-2 border-white/20">
            </div>
            @endif
        </div>
    </div>
</div>

{{-- ── Breadcrumb ───────────────────────────────────────────────────────── --}}
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-emerald-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('research.public.index') }}" class="hover:text-emerald-600 transition">Research</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-500">{{ $publication->category_label }}</span>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium truncate max-w-xs">{{ Str::limit($publication->title, 50) }}</span>
        </nav>
    </div>
</div>

{{-- ── Main Content ─────────────────────────────────────────────────────── --}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex flex-col lg:flex-row gap-8">

        {{-- ── Content Column ──────────────────────────────────────────── --}}
        <div class="flex-1 space-y-8">

            {{-- Abstract --}}
            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <h2 class="text-xl font-bold text-gray-900 font-serif mb-4 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                        <i class="fas fa-align-left text-emerald-600 text-sm"></i>
                    </span>
                    Abstract
                </h2>
                <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                    {{ $publication->abstract }}
                </div>
            </section>

            {{-- Methodology --}}
            @if($publication->methodology)
            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <h2 class="text-xl font-bold text-gray-900 font-serif mb-4 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-cogs text-blue-600 text-sm"></i>
                    </span>
                    Methodology
                </h2>
                <div class="prose prose-lg max-w-none text-gray-700 whitespace-pre-line leading-relaxed">
                    {{ $publication->methodology }}
                </div>
            </section>
            @endif

            {{-- Findings --}}
            @if($publication->findings)
            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <h2 class="text-xl font-bold text-gray-900 font-serif mb-4 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-lg bg-yellow-100 flex items-center justify-center">
                        <i class="fas fa-lightbulb text-yellow-600 text-sm"></i>
                    </span>
                    Key Findings
                </h2>
                <div class="prose prose-lg max-w-none text-gray-700 whitespace-pre-line leading-relaxed">
                    {{ $publication->findings }}
                </div>
            </section>
            @endif

            {{-- References --}}
            @if($publication->references)
            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <h2 class="text-xl font-bold text-gray-900 font-serif mb-4 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-book text-purple-600 text-sm"></i>
                    </span>
                    References
                </h2>
                <div class="prose max-w-none text-gray-700 whitespace-pre-line text-sm leading-relaxed">
                    {{ $publication->references }}
                </div>
            </section>
            @endif

            {{-- ── Full Paper / Attachments ─────────────────────────────── --}}
            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <h2 class="text-xl font-bold text-gray-900 font-serif mb-6 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
                        <i class="fas fa-download text-indigo-600 text-sm"></i>
                    </span>
                    Download Full Publication
                </h2>

                @php
                    $publicFiles = $publication->files->where('is_public', true);
                    $hasFiles    = $publicFiles->count() > 0;
                @endphp

                @if($hasFiles)
                {{-- Files available --}}
                <div class="space-y-3">
                    @foreach($publicFiles as $file)
                    <div class="group flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-200 hover:border-emerald-300 hover:shadow-md transition-all duration-200">
                        <div class="flex items-center gap-4">
                            {{-- File type icon --}}
                            <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0
                                @if($file->isPdf()) bg-red-100 @elseif(in_array($file->file_type, ['doc','docx'])) bg-blue-100 @else bg-gray-100 @endif">
                                <i class="fas {{ $file->icon }} text-xl
                                    @if($file->isPdf()) text-red-600 @elseif(in_array($file->file_type, ['doc','docx'])) text-blue-600 @else text-gray-500 @endif"></i>
                            </div>
                            <div>
                                <p class="font-semibold text-gray-900 text-sm group-hover:text-emerald-700 transition">
                                    {{ $file->original_name }}
                                </p>
                                <div class="flex items-center gap-3 mt-0.5">
                                    <span class="text-xs text-gray-500">{{ $file->formatted_size }}</span>
                                    <span class="text-xs text-gray-300">•</span>
                                    <span class="text-xs font-medium uppercase
                                        @if($file->isPdf()) text-red-600 @elseif(in_array($file->file_type, ['doc','docx'])) text-blue-600 @else text-gray-500 @endif">
                                        {{ strtoupper($file->file_type) }}
                                    </span>
                                    @if(isset($file->download_count) && $file->download_count > 0)
                                    <span class="text-xs text-gray-400">
                                        <i class="fas fa-download mr-0.5"></i>{{ number_format($file->download_count) }}
                                    </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <a href="{{ $file->url }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 text-white text-sm font-semibold rounded-xl hover:bg-emerald-700 active:scale-95 transition-all shadow-sm">
                            <i class="fas fa-download"></i>
                            Download
                        </a>
                    </div>
                    @endforeach
                </div>

                @else
                {{-- No files — beautifully designed placeholder --}}
                <div class="relative overflow-hidden rounded-2xl border-2 border-dashed border-gray-200 bg-gradient-to-br from-gray-50 to-white p-10 text-center">
                    {{-- Decorative background circles --}}
                    <div class="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-emerald-50 opacity-60"></div>
                    <div class="absolute -bottom-6 -left-6 w-24 h-24 rounded-full bg-indigo-50 opacity-60"></div>

                    <div class="relative">
                        {{-- Icon stack --}}
                        <div class="flex items-center justify-center mb-5">
                            <div class="relative">
                                <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center shadow-inner">
                                    <i class="fas fa-file-pdf text-emerald-500 text-3xl"></i>
                                </div>
                                <div class="absolute -bottom-2 -right-2 w-8 h-8 rounded-full bg-amber-100 border-2 border-white flex items-center justify-center">
                                    <i class="fas fa-clock text-amber-500 text-xs"></i>
                                </div>
                            </div>
                        </div>

                        <h3 class="text-lg font-bold text-gray-800 mb-2">Full Paper Coming Soon</h3>
                        <p class="text-gray-500 text-sm max-w-sm mx-auto mb-6 leading-relaxed">
                            The complete research document has not been uploaded yet. The author may add the
                            full paper shortly. Check back later or contact the author directly.
                        </p>

                        {{-- Action buttons --}}
                        <div class="flex flex-wrap items-center justify-center gap-3">
                            @auth
                            @if($publication->user?->email)
                            <a href="mailto:{{ $publication->user->email }}?subject={{ rawurlencode('Request for Full Paper: ' . $publication->title) }}"
                               class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 text-white text-sm font-semibold rounded-xl hover:bg-emerald-700 transition shadow-sm">
                                <i class="fas fa-envelope"></i>
                                Request from Author
                            </a>
                            @endif
                            @else
                            <a href="{{ route('login') }}"
                               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-600 text-white text-sm font-semibold rounded-xl hover:bg-gray-700 transition shadow-sm">
                                <i class="fas fa-sign-in-alt"></i>
                                Login to Request Paper
                            </a>
                            @endauth
                            <a href="{{ route('research.public.index') }}"
                               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 text-gray-700 text-sm font-semibold rounded-xl hover:bg-gray-200 transition">
                                <i class="fas fa-search"></i>
                                Browse Other Publications
                            </a>
                        </div>

                        {{-- Notify me (cosmetic — could be wired to a real notification system) --}}
                        <div class="mt-6 pt-6 border-t border-gray-100">
                            <p class="text-xs text-gray-400">
                                <i class="fas fa-bell mr-1"></i>
                                Want to be notified when the full paper is available?
                                <a href="{{ route('login') }}" class="text-emerald-600 hover:underline font-medium">Sign in</a>
                                to follow this publication.
                            </p>
                        </div>
                    </div>
                </div>
                @endif
            </section>

        </div>

        {{-- ── Sidebar ──────────────────────────────────────────────────── --}}
        <div class="w-full lg:w-80 flex-shrink-0 space-y-6">

            {{-- Author Card --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h3 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <i class="fas fa-user-circle text-emerald-600"></i> About the Author
                </h3>
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-14 h-14 rounded-full bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-user text-emerald-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900 text-sm">{{ $publication->user->name ?? 'Unknown Author' }}</p>
                        <span class="inline-block mt-1 px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs font-semibold rounded-full">
                            {{ $publication->author_badge }}
                        </span>
                    </div>
                </div>
                @auth
                @if($publication->user?->email && $publication->user->email !== auth()->user()?->email)
                <a href="mailto:{{ $publication->user->email }}"
                   class="block w-full text-center px-4 py-2.5 border-2 border-emerald-200 text-emerald-700 rounded-xl hover:bg-emerald-50 transition text-sm font-semibold">
                    <i class="fas fa-envelope mr-2"></i>Contact Author
                </a>
                @endif
                @else
                <a href="{{ route('login') }}"
                   class="block w-full text-center px-4 py-2.5 border-2 border-gray-200 text-gray-500 rounded-xl hover:bg-gray-50 transition text-sm">
                    <i class="fas fa-lock mr-2"></i>Login to contact author
                </a>
                @endauth
            </div>

            {{-- Publication Details --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h3 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <i class="fas fa-info-circle text-emerald-600"></i> Publication Details
                </h3>
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between items-center py-2 border-b border-gray-50">
                        <dt class="text-gray-500">Category</dt>
                        <dd class="font-semibold text-gray-900">{{ $publication->category_label }}</dd>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-50">
                        <dt class="text-gray-500">Published</dt>
                        <dd class="font-semibold text-gray-900">{{ $publication->approved_at?->format('M d, Y') ?? 'N/A' }}</dd>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-50">
                        <dt class="text-gray-500">Status</dt>
                        <dd>
                            <span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-semibold rounded-full">
                                {{ $publication->is_featured ? 'Featured' : 'Published' }}
                            </span>
                        </dd>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <dt class="text-gray-500">Downloads</dt>
                        <dd class="font-semibold text-gray-900">
                            {{ $publication->files->where('is_public', true)->count() > 0 ? 'Available' : 'Pending' }}
                        </dd>
                    </div>
                </dl>
            </div>

            {{-- Share --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h3 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <i class="fas fa-share-alt text-emerald-600"></i> Share This Research
                </h3>
                <div class="grid grid-cols-3 gap-2">
                    <button onclick="shareOnTwitter()"
                            class="flex flex-col items-center gap-1 p-3 bg-sky-50 text-sky-600 rounded-xl hover:bg-sky-100 transition text-xs font-medium">
                        <i class="fab fa-twitter text-lg"></i>
                        Twitter
                    </button>
                    <button onclick="shareOnLinkedIn()"
                            class="flex flex-col items-center gap-1 p-3 bg-blue-50 text-blue-700 rounded-xl hover:bg-blue-100 transition text-xs font-medium">
                        <i class="fab fa-linkedin text-lg"></i>
                        LinkedIn
                    </button>
                    <button onclick="copyLink()" id="copy-btn"
                            class="flex flex-col items-center gap-1 p-3 bg-gray-50 text-gray-600 rounded-xl hover:bg-gray-100 transition text-xs font-medium">
                        <i class="fas fa-link text-lg"></i>
                        Copy Link
                    </button>
                </div>
            </div>

            {{-- Submit your own --}}
            <div class="bg-gradient-to-br from-indigo-600 to-purple-600 rounded-2xl p-6 text-white">
                <h3 class="text-base font-bold mb-2">Have Research to Share?</h3>
                <p class="text-indigo-100 text-sm mb-4">
                    Submit your own research paper for peer review and publication in our centre.
                </p>
                <a href="{{ route('research.public.submit') }}"
                   class="block w-full text-center px-4 py-2.5 bg-white text-indigo-700 rounded-xl font-semibold text-sm hover:bg-indigo-50 transition">
                    <i class="fas fa-upload mr-2"></i>Submit Publication
                </a>
            </div>

            {{-- Author Actions (if own publication) --}}
            @auth
            @if($publication->isAuthor(auth()->id()))
            <div class="bg-amber-50 rounded-2xl border border-amber-200 p-6">
                <h3 class="text-base font-bold text-amber-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-edit"></i> Author Actions
                </h3>
                <a href="{{ route('research.edit', $publication) }}"
                   class="block w-full text-center px-4 py-2.5 bg-amber-600 text-white rounded-xl font-semibold text-sm hover:bg-amber-700 transition">
                    <i class="fas fa-edit mr-2"></i>Edit Publication
                </a>
            </div>
            @endif
            @endauth

        </div>
    </div>

    {{-- ── Related Publications ─────────────────────────────────────────── --}}
    @if($related->count() > 0)
    <section class="mt-14">
        <h2 class="text-2xl font-bold text-gray-900 font-serif mb-6 flex items-center gap-3">
            <i class="fas fa-bookmark text-emerald-600"></i>
            Related Publications
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($related as $relatedPub)
            <article class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
                @if($relatedPub->cover_image)
                <div class="h-36 overflow-hidden">
                    <img src="{{ Storage::url($relatedPub->cover_image) }}"
                         alt="{{ $relatedPub->title }}"
                         class="w-full h-full object-cover">
                </div>
                @else
                <div class="h-36 bg-gradient-to-br from-emerald-50 to-teal-100 flex items-center justify-center">
                    <i class="fas fa-file-alt text-emerald-300 text-4xl"></i>
                </div>
                @endif
                <div class="p-5">
                    <span class="text-xs font-semibold text-emerald-600 uppercase tracking-wide">
                        {{ $relatedPub->category_label }}
                    </span>
                    <h3 class="text-sm font-bold text-gray-900 mt-1.5 mb-2 line-clamp-2 leading-snug">
                        <a href="{{ route('research.public.show', $relatedPub) }}"
                           class="hover:text-emerald-600 transition">
                            {{ $relatedPub->title }}
                        </a>
                    </h3>
                    <div class="flex items-center justify-between text-xs text-gray-400">
                        <span>{{ $relatedPub->user->name ?? 'Unknown' }}</span>
                        <span>{{ $relatedPub->approved_at?->format('M Y') ?? 'N/A' }}</span>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </section>
    @endif

</div>

@push('scripts')
<script>
function shareOnTwitter() {
    const url  = encodeURIComponent(window.location.href);
    const text = encodeURIComponent('{{ addslashes($publication->title) }}');
    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=550,height=420');
}
function shareOnLinkedIn() {
    const url = encodeURIComponent(window.location.href);
    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=550,height=420');
}
function copyLink() {
    navigator.clipboard.writeText(window.location.href).then(() => {
        const btn = document.getElementById('copy-btn');
        btn.innerHTML = '<i class="fas fa-check text-lg"></i><span>Copied!</span>';
        btn.classList.add('bg-green-50', 'text-green-600');
        setTimeout(() => {
            btn.innerHTML = '<i class="fas fa-link text-lg"></i><span>Copy Link</span>';
            btn.classList.remove('bg-green-50', 'text-green-600');
        }, 2000);
    });
}
</script>
@endpush

@endsection
