@extends('layouts.admin')

@section('title', 'Global File Explorer')

@section('content')
    <header class="mb-10">
        <h1 class="text-4xl font-black text-white tracking-tight">Global File Explorer</h1>
        <p class="text-white/40 font-medium">Monitor and manage all files shared across the platform.</p>
    </header>

    <div class="glass-card rounded-[3rem] overflow-hidden border border-white/5">
        <div class="p-8 border-b border-white/5 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <form action="{{ route('super.explorer') }}" method="GET" class="relative group w-full md:w-96">
                <i
                    class="fas fa-search absolute left-6 top-1/2 -translate-y-1/2 text-white/20 group-focus-within:text-indigo-400 transition-colors"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search all files..."
                    class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 pl-14 pr-6 outline-none focus:border-indigo-500 transition-all text-white/80">
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="text-[10px] font-black text-white/20 uppercase tracking-[0.2em] border-b border-white/5">
                        <th class="px-8 py-6">Owner</th>
                        <th class="px-8 py-6">File Name</th>
                        <th class="px-8 py-6">Size</th>
                        <th class="px-8 py-6 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5 text-sm">
                    @foreach($files as $file)
                        <tr class="hover:bg-white/[0.02] transition-colors group">
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400 font-bold text-xs">
                                        {{ strtoupper(substr(($file->user?->name ?? '?'), 0, 1)) }}
                                    </div>
                                    <span class="font-bold text-white/80">{{ $file->user?->name ?? 'Unknown' }}</span>
                                </div>
                            </td>
                            <td class="px-8 py-6">
                                <div class="flex flex-col">
                                    <span class="text-white font-bold mb-1">{{ $file->file_name }}</span>
                                    <span
                                        class="text-[10px] font-medium px-2 py-0.5 rounded-md bg-white/5 text-white/40 w-fit uppercase tracking-wider">{{ $file->file_type }}</span>
                                </div>
                            </td>
                            <td class="px-8 py-6 text-white/40 font-medium">
                                {{ number_format($file->file_size / 1024 / 1024, 2) }} MB
                            </td>
                            <td class="px-8 py-6 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button type="button" onclick="openFilePreview({{ json_encode($file) }})"
                                        class="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-400 hover:bg-blue-500 hover:text-white transition-all flex items-center justify-center"
                                        title="Preview Detail">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <form action="{{ route('super.clone', $file) }}" method="POST">
                                        @csrf
                                        <button type="submit"
                                            class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 hover:bg-amber-500 hover:text-white transition-all flex items-center justify-center"
                                            title="Clone to Main DB">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </form>
                                    <a href="https://t.me/{{ $file->user?->bot_username ?? 'YourBotUsername' }}?start={{ $file->slug }}"
                                        target="_blank"
                                        class="w-10 h-10 rounded-xl bg-indigo-500/10 text-indigo-400 hover:bg-indigo-500 hover:text-white transition-all flex items-center justify-center">
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($files->hasPages())
            <div class="p-8 border-t border-white/5">
                {{ $files->links() }}
            </div>
        @endif
    </div>

    <!-- Preview Modal -->
    <div id="previewModal" class="fixed inset-0 z-[60] hidden overflow-y-auto">
        <div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"></div>
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div
                class="glass-card relative transform overflow-hidden rounded-[2.5rem] text-left transition-all sm:my-8 sm:w-full sm:max-w-2xl border border-white/10">
                <div class="px-8 pt-8 pb-4 flex justify-between items-center border-b border-white/5">
                    <div>
                        <h3 class="text-2xl font-black text-white">File Details</h3>
                        <p class="text-white/40 text-xs uppercase tracking-widest font-bold">Comprehensive Metadata</p>
                    </div>
                    <button type="button" onclick="closePreview()"
                        class="w-10 h-10 rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center transition-all text-white/50 hover:text-white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <div class="p-8 space-y-6">
                    <div class="grid grid-cols-2 gap-6">
                        <div class="p-4 rounded-2xl bg-white/5 border border-white/5">
                            <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">File Name</p>
                            <p id="pv-name" class="text-sm font-bold text-white truncate">-</p>
                        </div>
                        <div class="p-4 rounded-2xl bg-white/5 border border-white/5">
                            <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">Slug ID</p>
                            <p id="pv-slug" class="text-sm font-bold text-indigo-300 font-mono">-</p>
                        </div>
                        <div class="p-4 rounded-2xl bg-white/5 border border-white/5">
                            <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">File Size</p>
                            <p id="pv-size" class="text-sm font-bold text-white">-</p>
                        </div>
                        <div class="p-4 rounded-2xl bg-white/5 border border-white/5">
                            <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">Upload Date</p>
                            <p id="pv-date" class="text-sm font-bold text-white">-</p>
                        </div>
                    </div>

                    <div class="p-6 rounded-2xl bg-indigo-600/10 border border-indigo-600/20">
                        <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-4 text-center">Media
                            Content Preview</p>
                        <div id="pv-media-container"
                            class="w-full flex justify-center items-center h-96 bg-black/20 rounded-xl border border-white/5 overflow-hidden">
                            <p class="text-white/20 text-[10px] italic">Loading preview...</p>
                        </div>
                    </div>

                    <div class="p-6 rounded-2xl bg-white/5 border border-white/5">
                        <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-2 text-center">
                            Telegram File ID</p>
                        <code id="pv-fileid"
                            class="block text-[10px] font-mono text-indigo-200/50 break-all p-3 bg-black/20 rounded-xl border border-white/5 leading-relaxed text-center">-</code>
                    </div>
                </div>

                <div class="px-8 py-6 bg-white/[0.02] border-t border-white/5 flex justify-end">
                    <button type="button" onclick="closePreview()"
                        class="px-8 py-3 rounded-xl bg-white/5 hover:bg-white/10 text-white font-bold transition-all text-sm">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openFilePreview(file) {
            document.getElementById('pv-name').innerText = file.file_name;
            document.getElementById('pv-slug').innerText = file.slug;
            document.getElementById('pv-size').innerText = (file.file_size / 1024 / 1024).toFixed(2) + ' MB';
            document.getElementById('pv-date').innerText = new Date(file.created_at).toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' });
            document.getElementById('pv-fileid').innerText = file.file_id || 'N/A';

            // Handle Media Preview
            const container = document.getElementById('pv-media-container');
            container.innerHTML = '<p class="text-white/20 text-[10px] italic underline animate-pulse">Fetching from Telegram...</p>';

            const fileType = file.file_type || '';
            const proxyUrl = `{{ url('super/proxy-media') }}/${file.id}`;

            if (fileType.includes('image') || file.file_name.match(/\.(jpg|jpeg|png|webp|gif)$/i)) {
                // Primary IMG with IFRAME fallback
                container.innerHTML = `
                            <div class="w-full h-full flex items-center justify-center">
                                <img src="${proxyUrl}" class="max-h-full max-w-full object-contain" id="preview-img" alt="Preview" 
                                     onerror="this.style.display='none'; document.getElementById('preview-iframe').style.display='block'">
                                <iframe id="preview-iframe" src="${proxyUrl}" style="display:none; width:100%; height:100%; border:0;" title="Iframe Preview"></iframe>
                            </div>
                        `;
            } else if (fileType.includes('video') || file.file_name.match(/\.(mp4|webm|mov)$/i)) {
                container.innerHTML = `<video controls class="max-h-full max-w-full"><source src="${proxyUrl}" type="video/mp4"></video>`;
            } else {
                // Use Iframe as requested by user for non-standard files
                container.innerHTML = `<iframe src="${proxyUrl}" class="w-full h-full border-0" title="File Content"></iframe>`;
            }

            document.getElementById('previewModal').classList.remove('hidden');
        }

        function closePreview() {
            document.getElementById('previewModal').classList.add('hidden');
        }

        // Close modal when clicking outside
        document.getElementById('previewModal').addEventListener('click', function (e) {
            if (e.target === this) {
                closePreview();
            }
        });
    </script>
@endsection