@extends('layouts.admin')
@section('title', 'Items')
@section('subtitle', 'Manage all repository submissions')

@section('content')
<div class="space-y-4">
    <!-- Status Filter Tabs -->
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div class="flex flex-wrap items-center gap-3">
            <div class="inline-flex p-1 bg-slate-100 rounded-2xl text-xs font-bold">
                <a href="{{ route('admin.items.index', array_merge(request()->except(['status', 'page']))) }}" 
                   class="px-4 py-2 rounded-xl transition-all {{ !request('status') ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-800' }}">
                    All <span class="ml-1 text-[10px] font-black {{ !request('status') ? 'text-primary' : 'text-slate-400' }}">{{ $publishedCount + $hiddenCount }}</span>
                </a>
                <a href="{{ route('admin.items.index', array_merge(request()->except('page'), ['status' => 'published'])) }}" 
                   class="px-4 py-2 rounded-xl transition-all {{ request('status') === 'published' ? 'bg-white text-emerald-700 shadow-sm' : 'text-slate-500 hover:text-slate-800' }}">
                    Published <span class="ml-1 text-[10px] font-black {{ request('status') === 'published' ? 'text-emerald-600' : 'text-slate-400' }}">{{ $publishedCount }}</span>
                </a>
                <a href="{{ route('admin.items.index', array_merge(request()->except('page'), ['status' => 'hidden'])) }}" 
                   class="px-4 py-2 rounded-xl transition-all {{ request('status') === 'hidden' ? 'bg-white text-amber-700 shadow-sm' : 'text-slate-500 hover:text-slate-800' }}">
                    Hidden / Drafts <span class="ml-1 text-[10px] font-black {{ request('status') === 'hidden' ? 'text-amber-600' : 'text-slate-400' }}">{{ $hiddenCount }}</span>
                </a>
            </div>

            <!-- Total Repository File Downloads Metric -->
            <div class="inline-flex items-center gap-1.5 px-3.5 py-2 bg-blue-50/90 border border-blue-200/70 rounded-2xl text-xs font-bold text-blue-800 shadow-xs">
                <span class="material-icons text-sm text-blue-600">cloud_download</span>
                <span>Total Downloads: <strong class="font-black text-blue-900 font-mono text-sm ml-0.5">{{ number_format($totalRepositoryDownloads ?? 0) }}</strong></span>
            </div>
        </div>

        <div class="flex items-center gap-3 w-full sm:w-auto">
            <form action="{{ route('admin.items.index') }}" method="GET" class="relative flex-grow sm:w-72">
                @if(request('status'))
                    <input type="hidden" name="status" value="{{ request('status') }}">
                @endif
                <input type="text" name="search" value="{{ request('search') }}" 
                    placeholder="Search items by title, author, ID..." 
                    class="w-full pl-9 pr-8 py-2 bg-white border border-slate-200 rounded-xl text-xs font-medium focus:ring-2 focus:ring-primary focus:border-primary shadow-sm">
                <span class="material-icons absolute left-3 top-2.5 text-slate-400 text-sm">search</span>
                @if(request('search'))
                    <a href="{{ route('admin.items.index', request()->except(['search', 'page'])) }}" class="absolute right-2.5 top-2.5 text-slate-400 hover:text-slate-600">
                        <span class="material-icons text-sm">close</span>
                    </a>
                @endif
            </form>

            <a href="{{ route('admin.items.create') }}" class="flex-shrink-0 flex items-center gap-2 px-4 py-2 bg-primary text-white text-xs font-bold uppercase tracking-widest rounded-xl hover:scale-105 transition-transform shadow-lg shadow-primary/30">
                <span class="material-icons text-sm">add</span> Create Item
            </a>
        </div>
    </div>

    <!-- Main Card & Bulk Form -->
    <form id="bulkActionForm" action="{{ route('admin.items.bulkAction') }}" method="POST">
        @csrf
        <input type="hidden" name="action" id="bulkActionInput" value="">
        <input type="hidden" name="return_url" value="{{ request()->fullUrl() }}">

        <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden relative">
            <!-- Header bar with page indicator & quick selection summary -->
            <div class="p-5 border-b border-slate-100 flex flex-wrap items-center justify-between gap-4 bg-slate-50/50">
                <div class="flex items-center gap-3">
                    <div>
                        <h2 class="font-black text-slate-800 text-base">Repository Items</h2>
                        <div class="flex items-center gap-2 text-xs font-bold text-slate-400">
                            <span>Showing {{ $items->firstItem() ?? 0 }}–{{ $items->lastItem() ?? 0 }} of {{ $items->total() }}</span>
                            <span>•</span>
                            <span class="text-primary font-black">Page {{ $items->currentPage() }} of {{ max(1, $items->lastPage()) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Page Multi-Select Controls -->
                <div class="flex items-center gap-2 text-xs">
                    <button type="button" id="selectAllPageBtn" class="px-3 py-1.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 font-bold text-slate-600 transition-all flex items-center gap-1.5 shadow-sm">
                        <span class="material-icons text-xs text-primary">done_all</span> Select All on Page {{ $items->currentPage() }}
                    </button>
                    <button type="button" id="deselectAllPageBtn" class="px-3 py-1.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 font-bold text-slate-500 transition-all flex items-center gap-1.5 shadow-sm hidden">
                        <span class="material-icons text-xs text-slate-400">clear</span> Clear Selection
                    </button>
                </div>
            </div>

            <!-- Inline Selection Banner (visible when items selected) -->
            <div id="selectionBanner" class="hidden px-6 py-2.5 bg-primary/10 border-b border-primary/20 text-xs font-bold text-primary flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <span class="material-icons text-sm text-primary">check_circle</span>
                    <span><strong id="bannerSelectedCount">0</strong> items selected on this page (Page {{ $items->currentPage() }})</span>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" onclick="submitBulk('hide')" class="px-2.5 py-1 bg-amber-500 hover:bg-amber-600 text-white rounded-lg text-[11px] font-black uppercase tracking-wider flex items-center gap-1 shadow-sm transition-all">
                        <span class="material-icons text-xs">visibility_off</span> Hide
                    </button>
                    <button type="button" onclick="submitBulk('publish')" class="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-[11px] font-black uppercase tracking-wider flex items-center gap-1 shadow-sm transition-all">
                        <span class="material-icons text-xs">visibility</span> Publish
                    </button>
                    @if(auth()->user()->role === 'admin')
                        <button type="button" onclick="submitBulk('delete')" class="px-2.5 py-1 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-[11px] font-black uppercase tracking-wider flex items-center gap-1 shadow-sm transition-all">
                            <span class="material-icons text-xs">delete</span> Delete
                        </button>
                    @endif
                </div>
            </div>

            <!-- Table -->
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-slate-50 border-b border-slate-100">
                            <th class="px-4 py-4 w-12 text-center">
                                <label class="inline-flex items-center cursor-pointer" title="Select all items on this page">
                                    <input type="checkbox" id="selectAllCheckbox" class="rounded border-slate-300 text-primary focus:ring-primary h-4 w-4 cursor-pointer">
                                </label>
                            </th>
                            <th class="text-left px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest w-16">ID</th>
                            <th class="text-left px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Title</th>
                            <th class="text-left px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest hidden lg:table-cell">Collection</th>
                            <th class="text-left px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Date</th>
                            <th class="text-left px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">
                                <a href="{{ route('admin.items.index', array_merge(request()->except('page'), ['sort' => request('sort') === 'downloads_desc' ? 'downloads_asc' : 'downloads_desc'])) }}" 
                                   class="inline-flex items-center gap-1 hover:text-primary transition-colors group" title="Click to sort by file downloads">
                                    <span>Downloads</span>
                                    @if(request('sort') === 'downloads_desc')
                                        <span class="material-icons text-xs text-primary">south</span>
                                    @elseif(request('sort') === 'downloads_asc')
                                        <span class="material-icons text-xs text-primary">north</span>
                                    @else
                                        <span class="material-icons text-xs text-slate-300 group-hover:text-slate-500">unfold_more</span>
                                    @endif
                                </a>
                            </th>
                            <th class="text-left px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
                            <th class="text-left px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @forelse($items as $item)
                            <tr id="row-{{ $item->id }}" class="hover:bg-slate-50/60 transition-colors">
                                <td class="px-4 py-4 text-center">
                                    <input type="checkbox" name="item_ids[]" value="{{ $item->id }}" 
                                        class="item-checkbox rounded border-slate-300 text-primary focus:ring-primary h-4 w-4 cursor-pointer">
                                </td>
                                <td class="px-4 py-4 text-xs font-bold text-slate-400">
                                    #{{ $item->id }}
                                </td>
                                <td class="px-4 py-4">
                                    <p class="font-bold text-slate-800 line-clamp-1 max-w-xs">{{ $item->title ?: 'Untitled Item' }}</p>
                                    <p class="text-[11px] text-slate-400 font-medium">{{ $item->author }}</p>
                                </td>
                                <td class="px-4 py-4 hidden lg:table-cell">
                                    <p class="text-xs text-slate-500 font-medium">{{ $item->collection->name ?? '—' }}</p>
                                    <p class="text-[10px] text-slate-300 font-medium">{{ $item->collection->community->name ?? '' }}</p>
                                </td>
                                <td class="px-4 py-4 text-xs font-bold text-slate-500">
                                    {{ optional($item->issued_at)->format('d M Y') ?: 'N/A' }}
                                </td>
                                <td class="px-4 py-4">
                                    @php
                                        $fileCount = $item->bitstreams->count();
                                        $totalDl = $item->bitstreams_sum_downloads ?? $item->bitstreams->sum('downloads');
                                    @endphp
                                    @if($fileCount > 0)
                                        <div class="flex flex-col gap-1">
                                            <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-xl text-xs font-black {{ $totalDl > 0 ? 'bg-blue-50 text-blue-700 border border-blue-200/70 shadow-xs' : 'bg-slate-100 text-slate-500 border border-slate-200/60' }} w-fit" title="Total downloads across all attached files">
                                                <span class="material-icons text-xs {{ $totalDl > 0 ? 'text-blue-500' : 'text-slate-400' }}">file_download</span>
                                                <span class="font-mono font-bold">{{ number_format($totalDl) }}</span>
                                                <span class="text-[9px] uppercase tracking-wider font-bold opacity-75">{{ \Illuminate\Support\Str::plural('dl', $totalDl) }}</span>
                                            </div>
                                            
                                            @if($fileCount === 1)
                                                @php $singleFile = $item->bitstreams->first(); @endphp
                                                <p class="text-[10px] text-slate-400 font-medium truncate max-w-[140px] flex items-center gap-1" title="{{ $singleFile->file_name }} ({{ number_format($singleFile->downloads) }} downloads)">
                                                    <span class="material-icons text-[11px] text-slate-300">attach_file</span>
                                                    <span class="truncate">{{ $singleFile->file_name }}</span>
                                                </p>
                                            @else
                                                <div class="space-y-0.5 mt-0.5">
                                                    @foreach($item->bitstreams as $bs)
                                                        <div class="flex items-center justify-between gap-2 text-[10px] text-slate-600 bg-slate-50 hover:bg-slate-100 px-2 py-0.5 rounded-lg border border-slate-100 transition-colors" title="{{ $bs->file_name }}: {{ number_format($bs->downloads) }} downloads">
                                                            <span class="truncate max-w-[95px] font-medium flex items-center gap-0.5">
                                                                <span class="material-icons text-[10px] text-slate-400">insert_drive_file</span>
                                                                <span class="truncate">{{ $bs->file_name }}</span>
                                                            </span>
                                                            <span class="font-black text-blue-600 font-mono flex-shrink-0 flex items-center gap-0.5 bg-blue-50/60 px-1 py-0.2 rounded text-[9px]">
                                                                <span class="material-icons text-[9px]">download</span>{{ number_format($bs->downloads) }}
                                                            </span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    @else
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] font-bold text-slate-400 bg-slate-50 border border-slate-100">
                                            <span class="material-icons text-[11px] text-slate-300">block</span> No files
                                        </span>
                                    @endif
                                </td>
                                <td class="px-4 py-4">
                                    @if($item->is_published)
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest bg-emerald-100 text-emerald-700">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                            Published
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
                                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                            Hidden / Draft
                                        </span>
                                    @endif
                                </td>
                                <td class="px-4 py-4">
                                    <div class="flex items-center gap-2">
                                        <a href="{{ route('items.show', $item->uuid) }}" target="_blank" class="p-2 rounded-xl bg-slate-50 hover:bg-slate-100 text-slate-400 transition-all" title="View">
                                            <span class="material-icons text-sm">open_in_new</span>
                                        </a>
                                        <a href="{{ route('admin.items.edit', $item) }}" class="p-2 rounded-xl bg-slate-50 hover:bg-primary hover:text-white text-slate-400 transition-all" title="Edit">
                                            <span class="material-icons text-sm">edit</span>
                                        </a>
                                        <button type="button" onclick="singleToggle('{{ $item->id }}', {{ $item->is_published ? "'hide'" : "'publish'" }})" title="{{ $item->is_published ? 'Hide (Unpublish)' : 'Publish' }}"
                                            class="p-2 rounded-xl transition-all {{ $item->is_published ? 'bg-amber-50 hover:bg-amber-500 text-amber-500 hover:text-white' : 'bg-emerald-50 hover:bg-emerald-500 text-emerald-500 hover:text-white' }}">
                                            <span class="material-icons text-sm">{{ $item->is_published ? 'visibility_off' : 'visibility' }}</span>
                                        </button>
                                        @if(auth()->user()->role === 'admin')
                                            <button type="button" onclick="singleDelete('{{ $item->id }}')" class="p-2 rounded-xl bg-red-50 hover:bg-red-500 text-red-400 hover:text-white transition-all" title="Delete">
                                                <span class="material-icons text-sm">delete_outline</span>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-6 py-16 text-center text-slate-400 font-bold">
                                    <div class="flex flex-col items-center justify-center gap-2">
                                        <span class="material-icons text-4xl text-slate-300">find_in_page</span>
                                        <span>No items found matching your criteria.</span>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($items->hasPages())
                <div class="p-6 border-t border-slate-100 bg-slate-50/30">
                    {{ $items->links() }}
                </div>
            @endif
        </div>
    </form>
</div>

<!-- Floating Multi-Action Bar -->
<div id="floatingActionBar" 
     class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-5 py-3.5 bg-slate-900/95 backdrop-blur-md text-white rounded-2xl shadow-2xl border border-slate-700/60 transition-all duration-300 transform translate-y-24 opacity-0 pointer-events-none">
    <div class="flex items-center gap-2.5 pr-3 border-r border-slate-700/80">
        <span id="floatingBadge" class="w-6 h-6 rounded-full bg-primary text-white text-xs font-black flex items-center justify-center">0</span>
        <span class="text-xs font-semibold text-slate-200">
            <span id="floatingSelectedText">0 items</span> selected on <span class="text-primary font-bold">Page {{ $items->currentPage() }}</span>
        </span>
    </div>

    <div class="flex items-center gap-2">
        <button type="button" onclick="submitBulk('hide')" class="flex items-center gap-1.5 px-3 py-1.5 bg-amber-500/20 hover:bg-amber-500 text-amber-300 hover:text-white rounded-xl text-xs font-bold transition-all border border-amber-500/30">
            <span class="material-icons text-sm">visibility_off</span> Hide Selected
        </button>

        <button type="button" onclick="submitBulk('publish')" class="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/20 hover:bg-emerald-500 text-emerald-300 hover:text-white rounded-xl text-xs font-bold transition-all border border-emerald-500/30">
            <span class="material-icons text-sm">visibility</span> Publish Selected
        </button>

        @if(auth()->user()->role === 'admin')
            <button type="button" onclick="submitBulk('delete')" class="flex items-center gap-1.5 px-3 py-1.5 bg-rose-500/20 hover:bg-rose-500 text-rose-300 hover:text-white rounded-xl text-xs font-bold transition-all border border-rose-500/30">
                <span class="material-icons text-sm">delete_outline</span> Delete Selected
            </button>
        @endif

        <button type="button" onclick="deselectAll()" class="p-1.5 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800 transition-all ml-1" title="Deselect All">
            <span class="material-icons text-sm">close</span>
        </button>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    const selectAllPageBtn = document.getElementById('selectAllPageBtn');
    const deselectAllPageBtn = document.getElementById('deselectAllPageBtn');
    const itemCheckboxes = document.querySelectorAll('.item-checkbox');
    const floatingActionBar = document.getElementById('floatingActionBar');
    const floatingBadge = document.getElementById('floatingBadge');
    const floatingSelectedText = document.getElementById('floatingSelectedText');
    const selectionBanner = document.getElementById('selectionBanner');
    const bannerSelectedCount = document.getElementById('bannerSelectedCount');

    function updateSelectionState() {
        const checked = document.querySelectorAll('.item-checkbox:checked');
        const count = checked.length;
        const totalOnPage = itemCheckboxes.length;

        // Update counts
        if (floatingBadge) floatingBadge.textContent = count;
        if (floatingSelectedText) floatingSelectedText.textContent = `${count} ${count === 1 ? 'item' : 'items'}`;
        if (bannerSelectedCount) bannerSelectedCount.textContent = count;

        // Update header checkbox
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = (totalOnPage > 0 && count === totalOnPage);
            selectAllCheckbox.indeterminate = (count > 0 && count < totalOnPage);
        }

        // Toggle buttons
        if (deselectAllPageBtn) {
            deselectAllPageBtn.classList.toggle('hidden', count === 0);
        }

        // Toggle row highlight
        itemCheckboxes.forEach(cb => {
            const row = document.getElementById(`row-${cb.value}`);
            if (row) {
                row.classList.toggle('bg-primary/5', cb.checked);
            }
        });

        // Toggle floating toolbar and inline banner
        if (count > 0) {
            floatingActionBar.classList.remove('translate-y-24', 'opacity-0', 'pointer-events-none');
            floatingActionBar.classList.add('translate-y-0', 'opacity-100', 'pointer-events-auto');
            if (selectionBanner) selectionBanner.classList.remove('hidden');
        } else {
            floatingActionBar.classList.remove('translate-y-0', 'opacity-100', 'pointer-events-auto');
            floatingActionBar.classList.add('translate-y-24', 'opacity-0', 'pointer-events-none');
            if (selectionBanner) selectionBanner.classList.add('hidden');
        }
    }

    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function () {
            itemCheckboxes.forEach(cb => { cb.checked = selectAllCheckbox.checked; });
            updateSelectionState();
        });
    }

    if (selectAllPageBtn) {
        selectAllPageBtn.addEventListener('click', function () {
            itemCheckboxes.forEach(cb => { cb.checked = true; });
            updateSelectionState();
        });
    }

    if (deselectAllPageBtn) {
        deselectAllPageBtn.addEventListener('click', function () {
            deselectAll();
        });
    }

    itemCheckboxes.forEach(cb => {
        cb.addEventListener('change', updateSelectionState);
    });

    window.deselectAll = function () {
        itemCheckboxes.forEach(cb => { cb.checked = false; });
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = false;
            selectAllCheckbox.indeterminate = false;
        }
        updateSelectionState();
    };

    window.submitBulk = function (action) {
        const checked = document.querySelectorAll('.item-checkbox:checked');
        const count = checked.length;
        if (count === 0) {
            alert('Please select at least one item.');
            return;
        }

        let confirmMsg = '';
        if (action === 'hide') {
            confirmMsg = `Are you sure you want to hide (unpublish) ${count} selected ${count === 1 ? 'item' : 'items'} on this page?`;
        } else if (action === 'publish') {
            confirmMsg = `Are you sure you want to publish ${count} selected ${count === 1 ? 'item' : 'items'} on this page?`;
        } else if (action === 'delete') {
            confirmMsg = `WARNING: Are you sure you want to PERMANENTLY delete ${count} selected ${count === 1 ? 'item' : 'items'}? This cannot be undone!`;
        }

        if (confirmMsg && !confirm(confirmMsg)) {
            return;
        }

        document.getElementById('bulkActionInput').value = action;
        document.getElementById('bulkActionForm').submit();
    };

    window.singleToggle = function (id, action) {
        // Uncheck everything else, check only this ID, and submit
        itemCheckboxes.forEach(cb => { cb.checked = (cb.value == id); });
        document.getElementById('bulkActionInput').value = action;
        document.getElementById('bulkActionForm').submit();
    };

    window.singleDelete = function (id) {
        if (!confirm('Permanently delete this item?')) return;
        itemCheckboxes.forEach(cb => { cb.checked = (cb.value == id); });
        document.getElementById('bulkActionInput').value = 'delete';
        document.getElementById('bulkActionForm').submit();
    };

    // Initial state check
    updateSelectionState();
});
</script>
@endsection