@extends('layouts.admin')

@section('title', 'Kelola File')

@section('content')
    <header class="mb-10 flex flex-wrap justify-between items-center gap-6">
        <div>
            <h1 class="text-4xl font-black text-white tracking-tight">Kelola File</h1>
            <p class="text-white/40 font-medium">Daftar semua file yang telah diunggah.</p>
        </div>
        <div class="flex flex-wrap gap-4 items-center">
            <div class="flex gap-2">
                <button type="button" onclick="exportSelected()"
                    class="px-5 py-3 bg-indigo-600/20 text-indigo-400 border border-indigo-600/30 rounded-[1.25rem] text-xs font-black uppercase tracking-widest hover:bg-indigo-600/30 transition-all flex items-center gap-2">
                    <i class="fas fa-file-export"></i> Export
                </button>
                <form action="{{ route('admin.files.export') }}" method="POST">
                    @csrf
                    <input type="hidden" name="export_type" value="all">
                    <button type="submit"
                        class="px-5 py-3 bg-emerald-600/20 text-emerald-400 border border-emerald-600/30 rounded-[1.25rem] text-xs font-black uppercase tracking-widest hover:bg-emerald-600/30 transition-all flex items-center gap-2">
                        <i class="fas fa-file-excel"></i> Export Semua
                    </button>
                </form>
                <form action="{{ route('admin.files.destroyAll') }}" method="POST"
                    onsubmit="return confirm('PERINGATAN: Ini akan menghapus SEMUA file Anda dari database dan Telegram. Tindakan ini TIDAK dapat dibatalkan. Lanjutkan?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="px-5 py-3 bg-red-600/20 text-red-400 border border-red-600/30 rounded-[1.25rem] text-xs font-black uppercase tracking-widest hover:bg-red-600/30 transition-all flex items-center gap-2">
                        <i class="fas fa-trash-sweep"></i> Hapus Semua
                    </button>
                </form>
            </div>
            <form action="{{ route('admin.files.index') }}" method="GET" class="relative">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari file..."
                    class="bg-white/5 border border-white/10 rounded-2xl px-6 py-3 outline-none focus:border-indigo-500 transition-all text-sm w-64 text-white">
                <button type="submit" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </header>

    <form id="exportForm" action="{{ route('admin.files.export') }}" method="POST">
        @csrf
        <input type="hidden" name="export_type" value="selected">
        <div class="premium-card rounded-[3rem] overflow-hidden bg-white/5 border border-white/5 shadow-2xl">
            <table class="w-full text-left">
                <thead>
                    <tr class="text-white/30 border-b border-white/5 text-xs uppercase tracking-wider">
                        <th class="px-6 py-4 w-10">
                            <input type="checkbox" id="selectAll"
                                class="rounded bg-white/5 border-white/10 text-indigo-600 focus:ring-indigo-500">
                        </th>
                        <th class="px-6 py-4 font-medium">Informasi File</th>
                        <th class="px-6 py-4 font-medium text-center">Slug</th>
                        <th class="px-6 py-4 font-medium text-center">Ukuran</th>
                        <th class="px-6 py-4 font-medium text-center">Tanggal</th>
                        <th class="px-6 py-4 font-medium text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    @forelse($files as $file)
                        <tr class="hover:bg-white/5 transition-all">
                            <td class="px-6 py-5">
                                <input type="checkbox" name="selected_files[]" value="{{ $file->id }}"
                                    class="file-checkbox rounded bg-white/5 border-white/10 text-indigo-600 focus:ring-indigo-500">
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400">
                                        <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z">
                                            </path>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-white/90">
                                            {{ $file->file_name }}
                                            @if($file->is_group)
                                                <span
                                                    class="ml-2 px-2 py-0.5 bg-indigo-500/20 text-indigo-400 text-[10px] font-black uppercase rounded-full border border-indigo-500/20">Group</span>
                                            @endif
                                        </p>
                                        <p class="text-xs text-white/30 uppercase">
                                            {{ $file->is_group ? ($file->group_name ?: 'Batch Upload') : ($file->file_type ?? 'unknown') }}
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-5 text-center">
                                <code
                                    class="bg-indigo-500/10 text-indigo-300 px-2 py-1 rounded text-xs">{{ $file->slug }}</code>
                            </td>
                            <td class="px-6 py-5 text-center text-sm text-white/50">
                                {{ number_format($file->file_size / 1024, 2) }} KB
                            </td>
                            <td class="px-6 py-5 text-center text-sm text-white/40">
                                {{ $file->created_at->format('d M Y') }}
                            </td>
                            <td class="px-6 py-5 text-right">
                                <div class="flex justify-end gap-2 text-right">
                                    @if(auth()->user()->role === 'super')
                                        <button type="button" onclick="openFilePreview({{ json_encode($file) }})"
                                            class="p-2 text-blue-400 hover:bg-blue-400/10 rounded-lg transition-all"
                                            title="Preview Detail">
                                            <i class="fas fa-eye w-5 h-5 text-center leading-5"></i>
                                        </button>
                                    @endif
                                    @if(auth()->user()->bot_username)
                                        <button type="button"
                                            onclick="copyBotLink('{{ auth()->user()->bot_username }}', '{{ $file->slug }}', this)"
                                            class="p-2 text-emerald-400 hover:bg-emerald-400/10 rounded-lg transition-all"
                                            title="Copy Link Bot">
                                            <i class="fas fa-copy w-5 h-5 text-center leading-5"></i>
                                        </button>
                                    @else
                                        <a href="{{ route('admin.settings') }}"
                                            class="p-2 text-yellow-400 hover:bg-yellow-400/10 rounded-lg transition-all"
                                            title="Setup Webhook first to get Bot Link">
                                            <i class="fas fa-exclamation-triangle w-5 h-5 text-center leading-5"></i>
                                        </a>
                                    @endif
                                    <form action="{{ route('admin.files.destroy', $file->id) }}" method="POST"
                                        onsubmit="return confirm('Apakah Anda yakin ingin menghapus file ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                            class="p-2 text-red-400 hover:bg-red-400/10 rounded-lg transition-all"
                                            title="Hapus">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                                </path>
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-20 text-center text-white/20 italic">
                                Belum ada file yang ditemukan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </form>

    <div class="mt-6">
        {{ $files->links() }}
    </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>

    <!-- Toast Notification for Copy -->
    <div id="copyToast"
        class="fixed bottom-10 right-10 transform translate-y-20 opacity-0 transition-all duration-300 z-50">
        <div
            class="bg-indigo-600 text-white px-6 py-3 rounded-2xl shadow-2xl flex items-center gap-3 border border-white/10">
            <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
                <i class="fas fa-check text-xs"></i>
            </div>
            <div>
                <p class="text-sm font-bold">Berhasil!</p>
                <p class="text-xs text-white/70">Link bot telah disalin.</p>
            </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();
            }
        });

        function copyBotLink(botUsername, slug, btn) {
            const link = `https://t.me/${botUsername}?start=${slug}`;

            navigator.clipboard.writeText(link).then(() => {
                // Toast feedback
                const toast = document.getElementById('copyToast');
                toast.classList.remove('translate-y-20', 'opacity-0');
                toast.classList.add('translate-y-0', 'opacity-100');

                // Button feedback
                const originalHtml = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-check w-5 h-5 text-center leading-5"></i>';
                btn.classList.add('text-indigo-400');

                setTimeout(() => {
                    toast.classList.add('translate-y-20', 'opacity-0');
                    toast.classList.remove('translate-y-0', 'opacity-100');
                    btn.innerHTML = originalHtml;
                    btn.classList.remove('text-indigo-400');
                }, 3000);
            }).catch(err => {
                console.error('Gagal menyalin: ', err);
                alert('Gagal menyalin link. Silakan coba lagi.');
            });
        }

        function exportSelected() {
            const form = document.getElementById('exportForm');
            if (!form) return;
            const checked = document.querySelectorAll('.file-checkbox:checked');
            if (checked.length === 0) {
                alert('Pilih file terlebih dahulu.');
                return;
            }
            form.submit();
        }

        document.addEventListener('DOMContentLoaded', function () {
            const selectAll = document.getElementById('selectAll');
            if (selectAll) {
                selectAll.addEventListener('change', function () {
                    const checkboxes = document.querySelectorAll('.file-checkbox');
                    checkboxes.forEach(cb => cb.checked = this.checked);
                });
            }
        });
    </script>
@endsection