<x-app-layout>

    <x-module-hero
        title="Publication: {{ $publication->title }}"
        description="View and manage your research publication"
        icon="fa-file-alt">

        <x-slot name="backButton">
            <a href="{{ route('research.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Publications
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view own publications')
            <a href="{{ route('research.index') }}"
               class="module-hero-tab {{ request()->routeIs('research.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-list text-sm"></i> My Publications
            </a>
            @endcan
            @can('create publications')
            <a href="{{ route('research.create') }}"
               class="module-hero-tab {{ request()->routeIs('research.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-plus text-sm"></i> New Publication
            </a>
            @endcan
            @can('review publications')
            <a href="{{ route('research.review.index') }}"
               class="module-hero-tab {{ request()->routeIs('research.review.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-clipboard-check text-sm"></i> Review Queue
            </a>
            @endcan
        </x-slot>

        <x-slot name="actions">
            @if($publication->isEditable())
            <a href="{{ route('research.edit', $publication) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-white text-green-800 text-sm font-semibold rounded-lg hover:bg-green-50 transition">
                <i class="fas fa-edit"></i> Edit
            </a>
            @endif
            @if($publication->canSubmit())
            <form action="{{ route('research.submit', $publication) }}" method="POST" class="inline">
                @csrf
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-green-500 text-white text-sm font-semibold rounded-lg hover:bg-green-400 transition">
                    <i class="fas fa-paper-plane"></i> Submit for Review
                </button>
            </form>
            @endif
        </x-slot>

    </x-module-hero>

    <div class="p-6">

        @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center text-sm">
            <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
        </div>
        @endif

        <div class="flex flex-col lg:flex-row gap-6">

            {{-- Main Column --}}
            <div class="flex-1 space-y-6">

                {{-- Status & Meta --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <div class="flex flex-wrap items-center gap-2 mb-3">
                        <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-semibold rounded-full uppercase">
                            {{ $publication->category_label }}
                        </span>
                        @php
                        $statusColors = [
                            'draft'             => 'bg-gray-100 text-gray-700',
                            'under_review'      => 'bg-blue-100 text-blue-700',
                            'revision_required' => 'bg-yellow-100 text-yellow-700',
                            'approved'          => 'bg-green-100 text-green-700',
                            'featured'          => 'bg-purple-100 text-purple-700',
                        ];
                        @endphp
                        <span class="px-3 py-1 {{ $statusColors[$publication->status] ?? 'bg-gray-100 text-gray-700' }} text-xs font-semibold rounded-full capitalize">
                            {{ str_replace('_', ' ', $publication->status) }}
                        </span>
                        @if($publication->is_featured)
                        <span class="px-3 py-1 bg-yellow-100 text-yellow-700 text-xs font-semibold rounded-full">
                            <i class="fas fa-star mr-1"></i>Featured
                        </span>
                        @endif
                    </div>
                    <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500">
                        <span><i class="fas fa-user mr-1"></i> {{ $publication->user->name ?? 'Unknown' }}</span>
                        <span><i class="fas fa-calendar mr-1"></i> Created {{ $publication->created_at->format('M d, Y') }}</span>
                        @if($publication->approved_at)
                        <span><i class="fas fa-check-circle mr-1"></i> Approved {{ $publication->approved_at->format('M d, Y') }}</span>
                        @endif
                    </div>
                </div>

                {{-- Abstract --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-align-left text-green-700"></i> Abstract
                    </h3>
                    <p class="text-gray-700 leading-relaxed text-sm">{{ $publication->abstract }}</p>
                </div>

                @if($publication->methodology)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-cogs text-green-700"></i> Methodology
                    </h3>
                    <div class="text-gray-700 leading-relaxed whitespace-pre-line text-sm">{{ $publication->methodology }}</div>
                </div>
                @endif

                @if($publication->findings)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-lightbulb text-green-700"></i> Key Findings
                    </h3>
                    <div class="text-gray-700 leading-relaxed whitespace-pre-line text-sm">{{ $publication->findings }}</div>
                </div>
                @endif

                @if($publication->references)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-book text-green-700"></i> References
                    </h3>
                    <div class="text-gray-700 leading-relaxed whitespace-pre-line text-xs">{{ $publication->references }}</div>
                </div>
                @endif

                @if($publication->files->count() > 0)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-paperclip text-green-700"></i> Attached Files ({{ $publication->files->count() }})
                    </h3>
                    <div class="space-y-2">
                        @foreach($publication->files as $file)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center">
                                    <i class="fas {{ $file->icon }} text-green-700 text-sm"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">{{ $file->original_name }}</p>
                                    <p class="text-xs text-gray-500">{{ $file->formatted_size }} • {{ $file->is_public ? 'Public' : 'Private' }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                <a href="{{ $file->url }}" target="_blank" class="btn-action-download">
                                    <i class="fas fa-download"></i> Download
                                </a>
                                @if($publication->isEditable())
                                <button type="button" onclick="deleteFile({{ $publication->id }}, {{ $file->id }})"
                                        class="btn-action-delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                @if($publication->reviews->count() > 0)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-history text-green-700"></i> Review History
                    </h3>
                    <div class="space-y-3">
                        @foreach($publication->reviews as $review)
                        <div class="border-l-4 {{ $review->isApproved() ? 'border-green-500' : ($review->isRevisionRequested() ? 'border-yellow-500' : 'border-red-500') }} pl-4 py-2">
                            <div class="flex items-center justify-between mb-1">
                                <div class="flex items-center gap-2">
                                    <span class="font-medium text-gray-900 text-sm">{{ $review->reviewer->name ?? 'Unknown' }}</span>
                                    <span class="px-2 py-0.5 text-xs font-semibold rounded-full {{ $review->decision_color === 'green' ? 'bg-green-100 text-green-700' : ($review->decision_color === 'yellow' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700') }}">
                                        {{ $review->decision_label }}
                                    </span>
                                </div>
                                <span class="text-xs text-gray-500">{{ $review->reviewed_at?->format('M d, Y') ?? 'N/A' }}</span>
                            </div>
                            @if($review->comments)
                            <p class="text-gray-600 text-xs">{{ $review->comments }}</p>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>

            {{-- Sidebar --}}
            <div class="w-full lg:w-72 flex-shrink-0 space-y-4">

                {{-- Actions --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">Actions</h3>
                    <div class="space-y-2">
                        @if($publication->isEditable())
                        <a href="{{ route('research.edit', $publication) }}"
                           class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm font-medium">
                            <i class="fas fa-edit mr-2"></i> Edit Publication
                        </a>
                        @endif
                        @if($publication->canSubmit())
                        <form action="{{ route('research.submit', $publication) }}" method="POST">
                            @csrf
                            <button type="submit"
                                    class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium">
                                <i class="fas fa-paper-plane mr-2"></i> Submit for Review
                            </button>
                        </form>
                        @endif
                        @if($publication->status !== 'under_review')
                        <form action="{{ route('research.destroy', $publication) }}" method="POST"
                              onsubmit="return confirm('Delete this publication?')">
                            @csrf @method('DELETE')
                            <button type="submit"
                                    class="w-full px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition text-sm font-medium">
                                <i class="fas fa-trash mr-2"></i> Delete
                            </button>
                        </form>
                        @endif
                        @if(in_array($publication->status, ['approved', 'featured']))
                        <a href="{{ route('research.public.show', $publication) }}" target="_blank"
                           class="block w-full text-center px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition text-sm font-medium">
                            <i class="fas fa-external-link-alt mr-2"></i> View Public Page
                        </a>
                        @endif
                    </div>
                </div>

                {{-- Details --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">Publication Details</h3>
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between"><dt class="text-gray-500">ID</dt><dd class="font-medium">#{{ $publication->id }}</dd></div>
                        <div class="flex justify-between"><dt class="text-gray-500">Category</dt><dd class="font-medium">{{ $publication->category_label }}</dd></div>
                        <div class="flex justify-between"><dt class="text-gray-500">Status</dt><dd class="font-medium capitalize">{{ str_replace('_', ' ', $publication->status) }}</dd></div>
                        <div class="flex justify-between"><dt class="text-gray-500">Created</dt><dd class="font-medium">{{ $publication->created_at->format('M d, Y') }}</dd></div>
                        @if($publication->submitted_at)
                        <div class="flex justify-between"><dt class="text-gray-500">Submitted</dt><dd class="font-medium">{{ $publication->submitted_at->format('M d, Y') }}</dd></div>
                        @endif
                        @if($publication->approved_at)
                        <div class="flex justify-between"><dt class="text-gray-500">Approved</dt><dd class="font-medium">{{ $publication->approved_at->format('M d, Y') }}</dd></div>
                        @endif
                        <div class="flex justify-between"><dt class="text-gray-500">Files</dt><dd class="font-medium">{{ $publication->files->count() }}</dd></div>
                    </dl>
                </div>

                @if($publication->status === 'under_review')
                <div class="bg-blue-50 rounded-lg border border-blue-200 p-5">
                    <h3 class="text-sm font-bold text-blue-800 mb-1"><i class="fas fa-hourglass-half mr-2"></i>Under Review</h3>
                    <p class="text-blue-700 text-xs">Your publication is currently being reviewed. You will be notified once complete.</p>
                </div>
                @endif

                @if($publication->status === 'revision_required')
                <div class="bg-yellow-50 rounded-lg border border-yellow-200 p-5">
                    <h3 class="text-sm font-bold text-yellow-800 mb-1"><i class="fas fa-exclamation-triangle mr-2"></i>Revision Required</h3>
                    <p class="text-yellow-700 text-xs mb-3">Please review the feedback and make the necessary changes.</p>
                    <a href="{{ route('research.edit', $publication) }}"
                       class="block w-full text-center px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition text-xs font-medium">
                        Make Revisions
                    </a>
                </div>
                @endif

            </div>
        </div>
    </div>

</x-app-layout>

@push('scripts')
<script>
function deleteFile(publicationId, fileId) {
    if (!confirm('Delete this file?')) return;
    fetch(`/dashboard/research/${publicationId}/files/${fileId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => { if (data.success) location.reload(); else alert('Failed: ' + data.message); })
    .catch(() => alert('An error occurred.'));
}
</script>
@endpush
