import { useEffect, useState, useRef } from 'react';
import { Head } from '@inertiajs/react';
import { Button, Modal, toast } from '@heroui/react';
import {
    FolderIcon, DocumentIcon, ArrowUpTrayIcon, FolderPlusIcon,
    TrashIcon, PencilSquareIcon, LinkIcon, ArrowPathIcon,
    ChevronRightIcon, ArrowLeftIcon, MagnifyingGlassIcon,
    ArrowDownTrayIcon, EyeIcon, ArrowsRightLeftIcon, PlusIcon,
    ArrowsPointingOutIcon, ArrowsPointingInIcon, ArrowTopRightOnSquareIcon,
    ShareIcon, DocumentDuplicateIcon, FolderArrowDownIcon, CheckIcon, CheckCircleIcon,
    ClipboardDocumentCheckIcon, UserIcon, ClockIcon, EllipsisVerticalIcon,
    UserGroupIcon, ShieldCheckIcon, LockClosedIcon
} from '@heroicons/react/24/solid';
import AppLayout from '@/Layouts/AppLayout';
import { api } from '@/lib/api';
import { useUploadStore } from '@/store/useUploadStore';
import { FilePreview } from '@/Components/ui/FilePreview';
import { SearchInput } from '@/Components/ui/SearchInput';
import { Field } from '@/Components/ui/Field';
import { SelectField } from '@/Components/ui/SelectField';
import { useAuth } from '@/hooks/useAuth';

interface BreadcrumbItem {
    id: any;
    name: string;
    type: string;
    kegiatan_id?: number;
    dok_key?: string;
}

interface FileItem {
    id: number;
    name: string;
    url: string;
    type: 'file';
    mime_type?: string;
    file_size?: number;
    kegiatan_id?: number;
    dokumentasi_key?: string;
    kegiatan?: { id: number; nama_kegiatan?: string; nama?: string };
    user?: { id: number; name: string; email?: string };
    created_at?: string;
    updated_at?: string;
    share_token?: string;
    share_enabled?: boolean;
}

interface FolderOption {
    id: number | null;
    name: string;
    parent_id?: number | null;
    path: string;
}

interface FolderItem {
    id?: number | string;
    name?: string;
    type: string;
    file_count?: number;
    kegiatan_id?: number;
    dok_key?: string;
    tanggal?: string;
    tanggal_mulai?: string;
    is_system?: boolean;
    creator?: string;
    created_at?: string;
    last_editor?: string;
    last_edited_at?: string;
    access_level?: 'view' | 'edit' | 'manage';
    is_owner?: boolean;
    shared_count?: number;
    share_token?: string;
    share_enabled?: boolean;
}

const DOK_LABELS: Record<string, string> = {
    mentah: 'Foto Mentah',
    timestamp: 'Foto Timestamps',
    matang: 'Foto Carousel',
    video_mentah: 'Video Mentah',
    video_jadi: 'Video Jadi',
    daftar_hadir_berkas: 'Daftar Hadir (Berkas)',
    daftar_hadir_xlsx: 'Daftar Hadir (XLSX)',
    draf_berita: 'Draf Berita',
};

const DOK_ACCEPTS: Record<string, string> = {
    mentah: 'image/jpeg,image/png,image/webp',
    timestamp: 'image/jpeg,image/png,image/webp',
    matang: 'image/jpeg,image/png,image/webp',
    video_mentah: 'video/mp4,video/quicktime,video/x-matroska,video/*',
    video_jadi: 'video/mp4,video/quicktime,video/x-matroska,video/*',
    daftar_hadir_berkas: 'application/pdf,image/jpeg,image/png',
    daftar_hadir_xlsx: '.xlsx,.xls,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel',
    draf_berita: '.doc,.docx,.pdf,.txt,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
};

function formatBytes(bytes?: number) {
    if (!bytes || bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

interface ShareModalTarget {
    id: number | string;
    name: string;
    type: 'file' | 'folder';
    share_token?: string;
    share_enabled?: boolean;
    folder_type?: string;
    kegiatan_id?: number;
    dok_key?: string;
}

export default function FileManagerPage() {
    const { canDelete, canEdit } = useAuth();
    const canDeleteFile = canDelete('file_manager');
    const canEditFileManager = canEdit('file_manager');
    const [loading, setLoading] = useState(true);
    const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([]);
    const [folders, setFolders] = useState<FolderItem[]>([]);
    const [files, setFiles] = useState<FileItem[]>([]);
    const [virtualFolders, setVirtualFolders] = useState<FolderItem[]>([]);

    // Current navigation state (inisialisasi langsung dari URL agar tidak balik ke root saat refresh)
    const [currentPath, setCurrentPath] = useState<{
        mode?: string;
        parent_id?: any;
        kegiatan_id?: number;
        dok_key?: string;
        narasumber_id?: number;
        narasumber_field?: string;
        surat_type?: string;
        surat_id?: number;
        honor_id?: number;
    }>(() => {
        if (typeof window !== 'undefined') {
            const params = new URLSearchParams(window.location.search);
            const result: any = {};
            const mode = params.get('mode');
            const parent_id = params.get('parent_id');
            const kegiatan_id = params.get('kegiatan_id');
            const dok_key = params.get('dok_key');
            const narasumber_id = params.get('narasumber_id');
            const narasumber_field = params.get('narasumber_field');
            const surat_type = params.get('surat_type');
            const surat_id = params.get('surat_id');
            const honor_id = params.get('honor_id');
            if (mode) result.mode = mode;
            if (parent_id) result.parent_id = Number(parent_id);
            if (kegiatan_id) result.kegiatan_id = Number(kegiatan_id);
            if (dok_key) result.dok_key = dok_key;
            if (narasumber_id) result.narasumber_id = Number(narasumber_id);
            if (narasumber_field) result.narasumber_field = narasumber_field;
            if (surat_type) result.surat_type = surat_type;
            if (surat_id) result.surat_id = Number(surat_id);
            if (honor_id) result.honor_id = Number(honor_id);
            return result;
        }
        return {};
    });

    // UI state
    const [searchQuery, setSearchQuery] = useState('');
    const [createFolderOpen, setCreateFolderOpen] = useState(false);
    const [newFolderName, setNewFolderName] = useState('');
    const [creatingFolder, setCreatingFolder] = useState(false);

    // Context / Action menu states
    const [renameItem, setRenameItem] = useState<{ id: number; name: string } | null>(null);
    const [renameName, setRenameName] = useState('');
    const [renaming, setRenaming] = useState(false);

    const [deleteItem, setDeleteItem] = useState<{ id: number; name: string; type: 'file' | 'folder' } | null>(null);
    const [deleting, setDeleting] = useState(false);

    // Link Kegiatan State & Confirm
    const [linkFile, setLinkFile] = useState<FileItem | null>(null);
    const [kegiatanList, setKegiatanList] = useState<Array<{ id: number; nama?: string; nama_kegiatan?: string }>>([]);
    const [selectedKegiatanId, setSelectedKegiatanId] = useState<number | ''>('');
    const [selectedDokKey, setSelectedDokKey] = useState<string>('mentah');
    const [confirmLinkOpen, setConfirmLinkOpen] = useState(false);
    const [linking, setLinking] = useState(false);

    // Unlink State & Confirm
    const [unlinkFile, setUnlinkFile] = useState<FileItem | null>(null);
    const [unlinking, setUnlinking] = useState(false);

    // Dropdown Action Menu Popup State (hanya 1 yang terbuka)
    const [activeFileMenuId, setActiveFileMenuId] = useState<number | null>(null);

    useEffect(() => {
        const handleClickOutside = () => setActiveFileMenuId(null);
        window.addEventListener('click', handleClickOutside);
        return () => window.removeEventListener('click', handleClickOutside);
    }, []);

    // Preview File Modal State
    const [previewFile, setPreviewFile] = useState<FileItem | null>(null);

    // Share Modal
    const [shareTarget, setShareTarget] = useState<ShareModalTarget | null>(null);
    const [sharing, setSharing] = useState(false);
    const [copiedShareLink, setCopiedShareLink] = useState(false);

    // Selection state for Bulk Actions
    const [selectedItems, setSelectedItems] = useState<Array<{ id: number; name: string; type: 'file' | 'folder' }>>([]);

    // Clipboard State (Salin & Pindahkan langsung di UI tanpa modal, support single & bulk)
    const [clipboard, setClipboard] = useState<{
        action: 'copy' | 'move';
        items: Array<{ id: number; name: string; type: 'file' | 'folder' }>;
    } | null>(null);
    const [processingClipboard, setProcessingClipboard] = useState(false);

    // Bulk Delete Confirmation Modal State
    const [confirmBulkDeleteOpen, setConfirmBulkDeleteOpen] = useState(false);
    const [deletingBulk, setDeletingBulk] = useState(false);

    const fileInputRef = useRef<HTMLInputElement>(null);
    const [uploading, setUploading] = useState(false);

    // Current Folder Extra Information (Access level, owner)
    const [currentFolderInfo, setCurrentFolderInfo] = useState<{
        type?: string;
        id?: number | string;
        name?: string;
        access_level?: 'view' | 'edit' | 'manage';
        is_owner?: boolean;
        can_manage_access?: boolean;
        share_token?: string;
        share_enabled?: boolean;
        dok_key?: string;
        dok_label?: string;
        kegiatan?: { id: number; nama_kegiatan?: string; nama?: string };
    }>({});

    // Folder Access Management Modal State
    const [accessModalFolder, setAccessModalFolder] = useState<FolderItem | null>(null);
    const [accessLoading, setAccessLoading] = useState(false);
    const [accessData, setAccessData] = useState<{
        folder: { id: number; name: string; owner?: { id: number; name: string; email?: string; role?: string } | null };
        accesses: Array<{
            id: number;
            user_id: number;
            user_name: string;
            user_email?: string;
            user_role?: string;
            access_level: 'view' | 'edit' | 'manage';
            created_at?: string;
        }>;
        available_users: Array<{
            id: number;
            name: string;
            email?: string;
            role?: string;
        }>;
    } | null>(null);
    const [selectedUserIdToAdd, setSelectedUserIdToAdd] = useState<number | ''>('');
    const [selectedAccessToAdd, setSelectedAccessToAdd] = useState<'view' | 'edit' | 'manage'>('view');
    const [submittingAccess, setSubmittingAccess] = useState(false);
    const [updatingAccessUserId, setUpdatingAccessUserId] = useState<number | null>(null);

    const handleOpenAccessModal = async (folder: FolderItem) => {
        if (!folder.id || typeof folder.id !== 'number') return;
        setAccessModalFolder(folder);
        setAccessLoading(true);
        setSelectedUserIdToAdd('');
        setSelectedAccessToAdd('view');
        try {
            const res = await api.get(`/file-manager/${folder.id}/access`);
            setAccessData(res.data);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal memuat pengaturan akses folder');
            setAccessModalFolder(null);
        } finally {
            setAccessLoading(false);
        }
    };

    const handleAddAccess = async () => {
        if (!accessModalFolder?.id || !selectedUserIdToAdd) return;
        setSubmittingAccess(true);
        try {
            await api.post(`/file-manager/${accessModalFolder.id}/access`, {
                user_id: selectedUserIdToAdd,
                access_level: selectedAccessToAdd,
            });
            toast.success('Hak akses berhasil diberikan');
            setSelectedUserIdToAdd('');
            const res = await api.get(`/file-manager/${accessModalFolder.id}/access`);
            setAccessData(res.data);
            loadData();
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal memberikan hak akses');
        } finally {
            setSubmittingAccess(false);
        }
    };

    const handleUpdateAccessLevel = async (userId: number, newLevel: 'view' | 'edit' | 'manage') => {
        if (!accessModalFolder?.id) return;
        setUpdatingAccessUserId(userId);
        try {
            await api.post(`/file-manager/${accessModalFolder.id}/access`, {
                user_id: userId,
                access_level: newLevel,
            });
            toast.success('Tingkat akses berhasil diperbarui');
            const res = await api.get(`/file-manager/${accessModalFolder.id}/access`);
            setAccessData(res.data);
            loadData();
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal memperbarui hak akses');
        } finally {
            setUpdatingAccessUserId(null);
        }
    };

    const handleRevokeAccess = async (userId: number) => {
        if (!accessModalFolder?.id) return;
        setUpdatingAccessUserId(userId);
        try {
            await api.delete(`/file-manager/${accessModalFolder.id}/access/${userId}`);
            toast.success('Hak akses user berhasil dicabut');
            const res = await api.get(`/file-manager/${accessModalFolder.id}/access`);
            setAccessData(res.data);
            loadData();
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal mencabut hak akses');
        } finally {
            setUpdatingAccessUserId(null);
        }
    };

    const loadData = async (params = currentPath, silent = false) => {
        if (!silent) setLoading(true);
        try {
            const res = await api.get('/file-manager', { params });
            setBreadcrumbs(res.data.breadcrumbs || []);
            setFolders(res.data.folders || []);
            setFiles(res.data.files || []);
            // Handle both new virtual_folders array and legacy virtual_folder
            const vf = res.data.virtual_folders ?? (res.data.virtual_folder ? [res.data.virtual_folder] : []);
            setVirtualFolders(vf);
            setCurrentFolderInfo(res.data.current || {});
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal memuat berkas');
        } finally {
            if (!silent) setLoading(false);
        }
    };

    // ------------------------------------------------------------------
    // URL sync helpers – baca dari URL saat mount, tulis ke URL saat navigasi
    // ------------------------------------------------------------------
    const parsePathFromUrl = (): typeof currentPath => {
        const params = new URLSearchParams(window.location.search);
        const result: typeof currentPath = {};
        const mode = params.get('mode');
        const parent_id = params.get('parent_id');
        const kegiatan_id = params.get('kegiatan_id');
        const dok_key = params.get('dok_key');
        const narasumber_id = params.get('narasumber_id');
        const narasumber_field = params.get('narasumber_field');
        const surat_type = params.get('surat_type');
        const surat_id = params.get('surat_id');
        const honor_id = params.get('honor_id');
        if (mode) result.mode = mode;
        if (parent_id) result.parent_id = Number(parent_id);
        if (kegiatan_id) result.kegiatan_id = Number(kegiatan_id);
        if (dok_key) result.dok_key = dok_key;
        if (narasumber_id) result.narasumber_id = Number(narasumber_id);
        if (narasumber_field) result.narasumber_field = narasumber_field;
        if (surat_type) result.surat_type = surat_type;
        if (surat_id) result.surat_id = Number(surat_id);
        if (honor_id) result.honor_id = Number(honor_id);
        return result;
    };

    const pathToUrlSearch = (path: typeof currentPath): string => {
        const params = new URLSearchParams();
        if (path.mode) params.set('mode', path.mode);
        if (path.parent_id != null) params.set('parent_id', String(path.parent_id));
        if (path.kegiatan_id != null) params.set('kegiatan_id', String(path.kegiatan_id));
        if (path.dok_key) params.set('dok_key', path.dok_key);
        if (path.narasumber_id != null) params.set('narasumber_id', String(path.narasumber_id));
        if (path.narasumber_field) params.set('narasumber_field', path.narasumber_field);
        if (path.surat_type) params.set('surat_type', path.surat_type);
        if (path.surat_id != null) params.set('surat_id', String(path.surat_id));
        if (path.honor_id != null) params.set('honor_id', String(path.honor_id));
        const qs = params.toString();
        return qs ? `?${qs}` : '';
    };

    useEffect(() => {
        loadData(currentPath);
        // Sync URL tanpa reload Inertia
        const newUrl = window.location.pathname + pathToUrlSearch(currentPath);
        window.history.replaceState(null, '', newUrl);
    }, [currentPath]);

    // Saat mount: baca path dari URL (untuk handle refresh)
    useEffect(() => {
        const pathFromUrl = parsePathFromUrl();
        setCurrentPath(pathFromUrl);
        // Juga handle tombol back/forward browser
        const handlePopState = () => {
            setSearchQuery('');
            setCurrentPath(parsePathFromUrl());
        };
        window.addEventListener('popstate', handlePopState);
        return () => window.removeEventListener('popstate', handlePopState);
    }, []);

    const navigateTo = (nav: typeof currentPath) => {
        setSearchQuery('');
        setCurrentPath(nav);
        // Push state sehingga tombol back browser bisa kembali
        const newUrl = window.location.pathname + pathToUrlSearch(nav);
        window.history.pushState(null, '', newUrl);
    };

    const handleBreadcrumbClick = (b: BreadcrumbItem, index: number) => {
        if (index === breadcrumbs.length - 1) return; // already here

        if (b.type === 'root') {
            navigateTo({});
        } else if (b.type === 'kegiatan_root') {
            navigateTo({ mode: 'kegiatan' });
        } else if (b.type === 'kegiatan') {
            navigateTo({ kegiatan_id: b.kegiatan_id });
        } else if (b.type === 'kegiatan_dok') {
            navigateTo({ kegiatan_id: b.kegiatan_id, dok_key: b.dok_key });
        } else if (b.type === 'narasumber_root') {
            navigateTo({ mode: 'narasumber' });
        } else if (b.type === 'narasumber') {
            navigateTo({ narasumber_id: (b as any).narasumber_id });
        } else if (b.type === 'narasumber_dok') {
            navigateTo({ narasumber_id: (b as any).narasumber_id, narasumber_field: (b as any).narasumber_field });
        } else if (b.type === 'honor_root') {
            navigateTo({ mode: 'honor' });
        } else if (b.type === 'honor') {
            navigateTo({ honor_id: (b as any).honor_id });
        } else if (b.type === 'surat_root') {
            navigateTo({ mode: 'surat' });
        } else if (b.type === 'surat_sub') {
            navigateTo({ mode: 'surat', surat_type: (b as any).surat_type });
        } else if (b.type === 'surat_detail') {
            navigateTo({ mode: 'surat', surat_type: (b as any).surat_type, surat_id: (b as any).surat_id });
        } else if (b.type === 'folder') {
            navigateTo({ parent_id: b.id });
        }
    };

    const handleFolderClick = (folder: FolderItem) => {
        if (folder.type === 'virtual_kegiatan_root') {
            navigateTo({ mode: 'kegiatan' });
        } else if (folder.type === 'virtual_narasumber_root') {
            navigateTo({ mode: 'narasumber' });
        } else if (folder.type === 'virtual_honor_root') {
            navigateTo({ mode: 'honor' });
        } else if (folder.type === 'virtual_honor') {
            navigateTo({ honor_id: (folder as any).honor_id });
        } else if (folder.type === 'virtual_surat_root') {
            navigateTo({ mode: 'surat' });
        } else if (folder.type === 'virtual_surat_subfolder') {
            navigateTo({ mode: 'surat', surat_type: (folder as any).surat_type });
        } else if (folder.type === 'virtual_surat_item') {
            navigateTo({ mode: 'surat', surat_type: (folder as any).surat_type, surat_id: (folder as any).surat_id });
        } else if (folder.type === 'virtual_narasumber') {
            navigateTo({ narasumber_id: (folder as any).narasumber_id });
        } else if (folder.type === 'narasumber_dok_folder') {
            navigateTo({ narasumber_id: (folder as any).narasumber_id, narasumber_field: (folder as any).narasumber_field });
        } else if (folder.type === 'kegiatan_folder') {
            navigateTo({ kegiatan_id: folder.kegiatan_id });
        } else if (folder.type === 'kegiatan_dok_folder') {
            navigateTo({ kegiatan_id: folder.kegiatan_id, dok_key: folder.dok_key });
        } else {
            navigateTo({ parent_id: folder.id });
        }
    };

    // Fetch kegiatan list untuk modal Kaitkan ke Kegiatan
    useEffect(() => {
        if (linkFile) {
            api.get('/kegiatan', { params: { per_page: 100 } })
                .then((res) => {
                    const data = res.data?.data || res.data || [];
                    setKegiatanList(data);
                    if (data.length > 0 && !selectedKegiatanId) {
                        setSelectedKegiatanId(data[0].id);
                    }
                })
                .catch(() => {});
        }
    }, [linkFile]);

    const handleCreateFolder = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newFolderName.trim()) return;

        setCreatingFolder(true);
        try {
            await api.post('/file-manager/folder', {
                name: newFolderName.trim(),
                parent_id: currentPath.parent_id || null,
            });
            toast.success('Folder berhasil dibuat');
            setNewFolderName('');
            setCreateFolderOpen(false);
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal membuat folder');
        } finally {
            setCreatingFolder(false);
        }
    };

    const { startUpload } = useUploadStore();

    const handleUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {
        const fileList = e.target.files;
        if (!fileList || fileList.length === 0) return;

        const extraData: Record<string, any> = {};
        if (currentPath.parent_id) extraData.parent_id = currentPath.parent_id;
        if (currentPath.kegiatan_id) extraData.kegiatan_id = currentPath.kegiatan_id;
        if (currentPath.dok_key) extraData.dok_key = currentPath.dok_key;
        if (currentPath.narasumber_id) extraData.narasumber_id = currentPath.narasumber_id;
        if (currentPath.narasumber_field) extraData.narasumber_field = currentPath.narasumber_field;
        if (currentPath.honor_id) extraData.honor_id = currentPath.honor_id;
        if (currentPath.surat_type) extraData.surat_type = currentPath.surat_type;
        if (currentPath.surat_id) extraData.surat_id = currentPath.surat_id;

        const targetFolder = currentPath.kegiatan_id && currentPath.dok_key
            ? `kegiatan/${currentPath.dok_key}`
            : currentPath.narasumber_id
            ? 'narasumber'
            : currentPath.honor_id
            ? 'honorarium'
            : currentPath.surat_type
            ? 'surat'
            : 'file-manager';

        Array.from(fileList).forEach((file) => {
            startUpload(
                file,
                targetFolder,
                '/file-manager/upload',
                () => {
                    loadData(currentPath, true);
                },
                extraData
            );
        });

        if (fileInputRef.current) fileInputRef.current.value = '';
    };

    const handleRename = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!renameItem || !renameName.trim()) return;

        try {
            await api.put(`/file-manager/${renameItem.id}`, { name: renameName.trim() });
            toast.success('Nama berhasil diubah');
            setRenameItem(null);
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal mengubah nama');
        }
    };

    const handleDelete = async () => {
        if (!deleteItem) return;

        try {
            if ((deleteItem as any).source === 'narasumber') {
                await api.delete('/file-manager/0', {
                    params: {
                        narasumber_id: (deleteItem as any).narasumber_id,
                        narasumber_field: (deleteItem as any).source_field,
                    },
                });
            } else {
                await api.delete(`/file-manager/${deleteItem.id}`);
            }
            toast.success('Item berhasil dihapus');

            // Saring item dari clipboard jika sedang dalam clipboard
            const deletedId = deleteItem.id;
            setClipboard((prev) => {
                if (!prev) return null;
                const remaining = prev.items.filter((x) => x.id !== deletedId);
                return remaining.length > 0 ? { ...prev, items: remaining } : null;
            });

            setDeleteItem(null);
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal menghapus item');
        }
    };

    // Filter folder & file berdasarkan search query dengan null safe
    const queryLower = (searchQuery || '').toLowerCase();
    const filteredFolders = folders.filter((f) => (f.name || '').toLowerCase().includes(queryLower));
    const filteredFiles = files.filter((f) => (f.name || '').toLowerCase().includes(queryLower));

    // Apakah di lingkup kegiatan atau narasumber
    const isKegiatanRoot = currentPath.mode === 'kegiatan';
    const isKegiatanFolder = Boolean(currentPath.kegiatan_id && !currentPath.dok_key);
    const isKegiatanDok = Boolean(currentPath.kegiatan_id && currentPath.dok_key);
    const isInsideKegiatan = Boolean(isKegiatanRoot || currentPath.kegiatan_id);

    const isNarasumberRoot = currentPath.mode === 'narasumber';
    const isNarasumberFolder = Boolean(currentPath.narasumber_id && !currentPath.narasumber_field);
    const isNarasumberDok = Boolean(currentPath.narasumber_id && currentPath.narasumber_field);
    const isInsideNarasumber = Boolean(isNarasumberRoot || currentPath.narasumber_id);

    const isHonorRoot = currentPath.mode === 'honor' && !currentPath.honor_id;
    const isHonorFolder = Boolean(currentPath.honor_id);

    const isSuratRoot = currentPath.mode === 'surat' && !currentPath.surat_type;
    const isSuratSub = Boolean(currentPath.mode === 'surat' && currentPath.surat_type && !currentPath.surat_id);
    const isSuratDetail = Boolean(currentPath.mode === 'surat' && currentPath.surat_type && currentPath.surat_id);

    const isInsideHonor = Boolean(currentPath.mode === 'honor' || currentPath.honor_id);
    const isInsideSurat = Boolean(currentPath.mode === 'surat' || currentPath.surat_type || currentPath.surat_id);

    const isRootPage = Object.keys(currentPath).length === 0;

    const remainingFiles = clipboard && clipboard.action === 'move'
        ? files.filter((f) => !clipboard.items.some((i) => i.type === 'file' && i.id === f.id))
        : files;
    const isNarasumberDokFull = isNarasumberDok && remainingFiles.length > 0;
    const isHonorFolderFull = isHonorFolder && remainingFiles.length > 0;
    const isSuratDetailFull = isSuratDetail && remainingFiles.length > 0;

    const isSystemVirtualRoot = Boolean(isKegiatanRoot || isNarasumberRoot || isHonorRoot || (isInsideHonor && isHonorFolderFull) || isSuratRoot || isSuratSub || (isInsideSurat && isSuratDetailFull));
    const currentFolderName = breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].name : 'Folder Utama';

    // Cek tingkat hak akses folder aktif
    const currentAccess = currentFolderInfo.access_level || 'manage';
    const canEditInCurrentFolder = canEditFileManager && (currentAccess === 'edit' || currentAccess === 'manage');
    const isViewOnlyFolder = !canEditFileManager || currentAccess === 'view';

    // Tombol upload:
    // - Honor & Surat: sistem virtual otomatis, TIDAK BISA upload manual / buat folder baru
    // - Jika di narasumber_dok: hanya boleh jika BELUM ADA file (maksimal 1 file per kategori)
    //   (bila berkas di dalamnya sedang disiap-pindahkan di clipboard, jangan anggap penuh sehingga tempat tujuan baru bisa menampung)
    const canUpload = (
        (!isKegiatanRoot && !isKegiatanFolder && !isNarasumberRoot && !isNarasumberFolder && !isHonorRoot && !isHonorFolderFull && !isSuratRoot && !isSuratSub && !isSuratDetailFull && !isNarasumberDokFull && canEditInCurrentFolder) &&
        !isSystemVirtualRoot
    );
    const canCreateFolder = !isInsideKegiatan && !isInsideNarasumber && !isInsideHonor && !isInsideSurat && !isSystemVirtualRoot && canEditInCurrentFolder;

    const DOK_ALLOWED_EXTS: Record<string, string[]> = {
        mentah: ['jpg', 'jpeg', 'png', 'webp'],
        timestamp: ['jpg', 'jpeg', 'png', 'webp'],
        matang: ['jpg', 'jpeg', 'png', 'webp'],
        video_mentah: ['mp4', 'mov', 'avi', 'mkv', 'webm'],
        video_jadi: ['mp4', 'mov', 'avi', 'mkv', 'webm'],
        daftar_hadir_berkas: ['pdf', 'jpg', 'jpeg', 'png'],
        daftar_hadir_xlsx: ['xlsx', 'xls', 'csv'],
        draf_berita: ['doc', 'docx', 'pdf', 'txt', 'rtf'],
    };

    const isClipboardItemExtAllowed = (dokKey: string): boolean => {
        if (!clipboard || clipboard.items.length === 0) return false;
        const allowed = DOK_ALLOWED_EXTS[dokKey] ?? [];
        if (allowed.length === 0) return true;

        return clipboard.items.every((item) => {
            if (item.type === 'folder') return false;
            const ext = (item.name.split('.').pop() || '').toLowerCase();
            return allowed.includes(ext);
        });
    };

    const isDokFolderInvalidExt = Boolean(isKegiatanDok && currentPath.dok_key && !isClipboardItemExtAllowed(currentPath.dok_key));

    const handleProceedLink = () => {
        if (!selectedKegiatanId || !selectedDokKey) {
            toast.danger('Pilih kegiatan dan kategori subfolder dokumentasi');
            return;
        }
        setConfirmLinkOpen(true);
    };

    const handleConfirmLink = async () => {
        if (!linkFile || !selectedKegiatanId) return;

        setLinking(true);
        try {
            await api.post(`/file-manager/${linkFile.id}/link-kegiatan`, {
                kegiatan_id: selectedKegiatanId,
                dok_key: selectedDokKey,
                url: linkFile.url,
                name: linkFile.name,
            });
            toast.success('Berkas berhasil dipindahkan & dikaitkan ke kegiatan');
            setConfirmLinkOpen(false);
            setLinkFile(null);
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal mengaitkan berkas');
        } finally {
            setLinking(false);
        }
    };

    const handleConfirmUnlink = async () => {
        if (!unlinkFile) return;

        setUnlinking(true);
        try {
            await api.post(`/file-manager/${unlinkFile.id}/unlink-kegiatan`, {
                target_parent_id: null,
            });
            toast.success('Kaitan dilepas, berkas dipindahkan ke folder utama');
            setUnlinkFile(null);
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal melepas kaitan');
        } finally {
            setUnlinking(false);
        }
    };

    const handleToggleSelectItem = (item: { id: number; name: string; type: 'file' | 'folder' }) => {
        if (clipboard) return; // Nonaktifkan centang saat mode Salin / Pindahkan aktif
        setSelectedItems((prev) => {
            const exists = prev.some((x) => x.id === item.id && x.type === item.type);
            if (exists) {
                return prev.filter((x) => !(x.id === item.id && x.type === item.type));
            } else {
                return [...prev, item];
            }
        });
    };

    const handleSelectAll = () => {
        const selectableFolders = filteredFolders
            .filter((f) => typeof f.id === 'number')
            .map((f) => ({ id: f.id as number, name: f.name || 'Folder', type: 'folder' as const }));
        const selectableFiles = filteredFiles.map((f) => ({ id: f.id, name: f.name, type: 'file' as const }));
        const all = [...selectableFolders, selectableFiles];
        const flatAll = [...selectableFolders, ...selectableFiles];

        if (selectedItems.length === flatAll.length && flatAll.length > 0) {
            setSelectedItems([]);
        } else {
            setSelectedItems(flatAll);
        }
    };

    const handleStartCopy = (item: { id: number; name: string; type: 'file' | 'folder' }) => {
        setClipboard({ action: 'copy', items: [item] });
        setSelectedItems([]);
        toast.success(`"${item.name}" siap disalin. Masuk ke folder tujuan lalu klik "Salin ke Sini".`);
    };

    const handleStartMove = (item: { id: number; name: string; type: 'file' | 'folder' }) => {
        setClipboard({ action: 'move', items: [item] });
        setSelectedItems([]);
        toast.success(`"${item.name}" siap dipindahkan. Masuk ke folder tujuan lalu klik "Pindahkan ke Sini".`);
    };

    const handleStartBulkCopy = () => {
        if (selectedItems.length === 0) return;
        setClipboard({ action: 'copy', items: [...selectedItems] });
        const count = selectedItems.length;
        setSelectedItems([]);
        toast.success(`${count} item siap disalin. Masuk ke folder tujuan lalu klik "Salin ke Sini".`);
    };

    const handleStartBulkMove = () => {
        if (selectedItems.length === 0) return;
        setClipboard({ action: 'move', items: [...selectedItems] });
        const count = selectedItems.length;
        setSelectedItems([]);
        toast.success(`${count} item siap dipindahkan. Masuk ke folder tujuan lalu klik "Pindahkan ke Sini".`);
    };

    const handleConfirmBulkDelete = async () => {
        if (selectedItems.length === 0) return;
        setDeletingBulk(true);
        try {
            const deletedIds = selectedItems.map((x) => x.id);
            const res = await api.post('/file-manager/bulk-delete', {
                ids: deletedIds,
            });
            toast.success(res.data?.message || 'Item terpilih berhasil dihapus.');

            // Saring item yang dihapus dari clipboard
            setClipboard((prev) => {
                if (!prev) return null;
                const remaining = prev.items.filter((x) => !deletedIds.includes(x.id as any));
                return remaining.length > 0 ? { ...prev, items: remaining } : null;
            });

            setSelectedItems([]);
            setConfirmBulkDeleteOpen(false);
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal menghapus item terpilih.');
        } finally {
            setDeletingBulk(false);
        }
    };

    const handleOpenShareFile = (file: FileItem) => {
        setShareTarget({
            id: file.id,
            name: file.name,
            type: 'file',
            share_token: file.share_token,
            share_enabled: file.share_enabled,
        });
        setCopiedShareLink(false);
    };

    const handleOpenShareFolder = (folder: FolderItem) => {
        setShareTarget({
            id: folder.id as any,
            name: folder.name || 'Folder',
            type: 'folder',
            share_token: folder.share_token,
            share_enabled: folder.share_enabled,
            folder_type: folder.type,
            kegiatan_id: folder.kegiatan_id,
            dok_key: folder.dok_key,
        });
        setCopiedShareLink(false);
    };

    const handleOpenShareCurrentFolder = () => {
        const cur = currentFolderInfo || {};
        const title = cur.name || cur.dok_label || (breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].name : 'Folder Saat Ini');
        const defaultId = cur.dok_key 
            ? `kegiatan-${cur.kegiatan?.id || currentPath.kegiatan_id}-${cur.dok_key}` 
            : (cur.kegiatan?.id || currentPath.kegiatan_id)
            ? `kegiatan-${cur.kegiatan?.id || currentPath.kegiatan_id}` 
            : currentPath.parent_id || 'kegiatan-root';

        setShareTarget({
            id: cur.id || defaultId,
            name: title,
            type: 'folder',
            share_token: cur.share_token,
            share_enabled: cur.share_enabled,
            folder_type: cur.type || (cur.dok_key ? 'kegiatan_dok' : cur.kegiatan?.id ? 'kegiatan' : undefined),
            kegiatan_id: cur.kegiatan?.id || currentPath.kegiatan_id,
            dok_key: cur.dok_key || currentPath.dok_key,
        });
        setCopiedShareLink(false);
    };

    const handleShareActivate = async () => {
        if (!shareTarget) return;
        setSharing(true);
        try {
            const res = await api.post(`/file-manager/${shareTarget.id}/share`, {
                folder_type: shareTarget.folder_type,
                kegiatan_id: shareTarget.kegiatan_id,
                dok_key: shareTarget.dok_key,
            });
            toast.success('Tautan bagikan berhasil diaktifkan.');
            setShareTarget({
                ...shareTarget,
                share_token: res.data.share_token,
                share_enabled: true,
            });
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal mengaktifkan tautan bagikan.');
        } finally {
            setSharing(false);
        }
    };

    const handleShareRevoke = async () => {
        if (!shareTarget) return;
        setSharing(true);
        try {
            await api.delete(`/file-manager/${shareTarget.id}/share`, {
                data: {
                    folder_type: shareTarget.folder_type,
                    kegiatan_id: shareTarget.kegiatan_id,
                    dok_key: shareTarget.dok_key,
                },
            });
            toast.success('Tautan bagikan telah ditutup.');
            setShareTarget({
                ...shareTarget,
                share_enabled: false,
            });
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal menutup tautan bagikan.');
        } finally {
            setSharing(false);
        }
    };

    const handleCopyShareLink = async (url: string) => {
        try {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(url);
            } else {
                const ta = document.createElement('textarea');
                ta.value = url;
                ta.style.position = 'fixed';
                ta.style.opacity = '0';
                ta.style.left = '-999999px';
                ta.style.top = '-999999px';
                document.body.appendChild(ta);
                ta.focus();
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
            }
            setCopiedShareLink(true);
            toast.success('Tautan berhasil disalin ke clipboard!');
            setTimeout(() => setCopiedShareLink(false), 2000);
        } catch {
            toast.danger('Gagal menyalin tautan secara otomatis.');
        }
    };

    const handleExecuteClipboard = async (targetFolder?: { id?: number | null; kegiatan_id?: number; dok_key?: string; narasumber_id?: number; narasumber_field?: string }) => {
        if (!clipboard || clipboard.items.length === 0) return;

        let targetParentId: number | null | undefined = undefined;
        let targetKegiatanId: number | undefined = undefined;
        let targetDokKey: string | undefined = undefined;
        let targetNarasumberId: number | undefined = undefined;
        let targetNarasumberField: string | undefined = undefined;
        let targetHonorId: number | undefined = undefined;
        let targetSuratType: string | undefined = undefined;
        let targetSuratId: number | undefined = undefined;

        if (targetFolder) {
            if (targetFolder.kegiatan_id && targetFolder.dok_key) {
                targetKegiatanId = targetFolder.kegiatan_id;
                targetDokKey = targetFolder.dok_key;
            } else if ((targetFolder as any).narasumber_id && (targetFolder as any).narasumber_field) {
                targetNarasumberId = (targetFolder as any).narasumber_id;
                targetNarasumberField = (targetFolder as any).narasumber_field;
            } else if ((targetFolder as any).honor_id) {
                targetHonorId = (targetFolder as any).honor_id;
            } else if ((targetFolder as any).surat_type && (targetFolder as any).surat_id) {
                targetSuratType = (targetFolder as any).surat_type;
                targetSuratId = (targetFolder as any).surat_id;
            } else if (targetFolder.id !== undefined) {
                targetParentId = targetFolder.id;
            }
        } else {
            // Mengikuti lokasi currentPath saat ini
            if (currentPath.kegiatan_id && currentPath.dok_key) {
                targetKegiatanId = currentPath.kegiatan_id;
                targetDokKey = currentPath.dok_key;
            } else if (currentPath.narasumber_id && currentPath.narasumber_field) {
                targetNarasumberId = currentPath.narasumber_id;
                targetNarasumberField = currentPath.narasumber_field;
            } else if (currentPath.honor_id) {
                targetHonorId = currentPath.honor_id;
            } else if (currentPath.surat_type && currentPath.surat_id) {
                targetSuratType = currentPath.surat_type;
                targetSuratId = currentPath.surat_id;
            } else if (!isInsideKegiatan && !isInsideNarasumber && !isInsideHonor && !isInsideSurat) {
                targetParentId = currentPath.parent_id || null;
            }
        }

        const hasFolder = clipboard.items.some((i) => i.type === 'folder');

        // Validasi: memindahkan/menyalin folder ke dokumentasi/narasumber/honor/surat
        if (hasFolder && (targetKegiatanId || isInsideKegiatan || targetNarasumberId || isInsideNarasumber || targetHonorId || isInsideHonor || targetSuratId || isInsideSurat)) {
            toast.danger('Folder tidak dapat dipindahkan atau disalin ke dalam lokasi virtual. Hanya berkas yang dapat dimasukkan.');
            return;
        }

        // Validasi: tidak boleh memindahkan folder ke dalam dirinya sendiri
        if (clipboard.action === 'move' && targetParentId !== undefined) {
            const invalidSelf = clipboard.items.some((i) => i.type === 'folder' && i.id === targetParentId);
            if (invalidSelf) {
                toast.danger('Tidak dapat memindahkan folder ke dalam dirinya sendiri.');
                return;
            }
        }

        if (targetKegiatanId === undefined && targetParentId === undefined && targetNarasumberId === undefined && targetHonorId === undefined && targetSuratId === undefined) {
            toast.danger('Pilih folder tujuan spesifik untuk menempatkan berkas.');
            return;
        }

        setProcessingClipboard(true);
        try {
            const isMultiple = clipboard.items.length > 1;
            const endpoint = isMultiple
                ? `/file-manager/bulk-${clipboard.action}`
                : `/file-manager/${clipboard.items[0].id}/${clipboard.action}`;

            const payload: any = {};
            if (isMultiple) {
                payload.ids = clipboard.items.map((x) => x.id);
            } else {
                if ((clipboard.items[0] as any).url) payload.url = (clipboard.items[0] as any).url;
                if (clipboard.items[0].name) payload.name = clipboard.items[0].name;
            }
            if (targetKegiatanId && targetDokKey) {
                payload.target_kegiatan_id = targetKegiatanId;
                payload.target_dok_key = targetDokKey;
            } else if (targetNarasumberId && targetNarasumberField) {
                payload.target_narasumber_id = targetNarasumberId;
                payload.target_narasumber_field = targetNarasumberField;
            } else if (targetHonorId) {
                payload.target_honor_id = targetHonorId;
            } else if (targetSuratType && targetSuratId) {
                payload.target_surat_type = targetSuratType;
                payload.target_surat_id = targetSuratId;
            } else {
                payload.target_parent_id = targetParentId ?? null;
            }

            const res = await api.post(endpoint, payload);
            toast.success(res.data.message || (clipboard.action === 'copy' ? 'Berhasil disalin.' : 'Berhasil dipindahkan.'));
            setClipboard(null);
            loadData(currentPath, true);
        } catch (err: any) {
            toast.danger(err?.response?.data?.message || 'Gagal memproses aksi.');
        } finally {
            setProcessingClipboard(false);
        }
    };

    const targetKegiatan = kegiatanList.find((k) => k.id === selectedKegiatanId);
    const targetKegiatanName = targetKegiatan?.nama_kegiatan || targetKegiatan?.nama || '-';

    return (
        <AppLayout title="File Manager">
            <Head title="File Manager" />

            <div className="flex flex-col gap-5">
                {/* Header Card (Konsisten dengan Surat Masuk & Data Kegiatan) */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 sm:py-4.5 rounded-2xl shadow-sm">
                    <div className="flex items-center gap-3">
                        <h1 className="text-lg sm:text-xl font-bold text-gray-900">File Manager</h1>
                        {isViewOnlyFolder && (
                            <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 border border-gray-200">
                                <EyeIcon className="w-3.5 h-3.5 text-gray-500" />
                                <span>Akses: Lihat Saja</span>
                            </span>
                        )}
                    </div>
                    <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                        <input
                            type="file"
                            ref={fileInputRef}
                            accept={currentPath.dok_key ? DOK_ACCEPTS[currentPath.dok_key] : undefined}
                            multiple
                            onChange={handleUploadFile}
                            className="hidden"
                        />

                        {/* Tombol Kelola Akses Folder bila sedang di dalam subfolder yang dapat dikelola */}
                        {currentFolderInfo.can_manage_access && currentFolderInfo.id && typeof currentFolderInfo.id === 'number' && (
                            <Button
                                variant="outline"
                                onPress={() => handleOpenAccessModal({ id: currentFolderInfo.id as number, name: currentFolderInfo.name, type: 'folder' })}
                                className="shrink-0 bg-white border-emerald-300 text-emerald-700 hover:bg-emerald-50 text-xs font-semibold flex items-center gap-1.5"
                            >
                                <UserGroupIcon className="w-4 h-4 text-emerald-600" />
                                <span>Kelola Akses Folder</span>
                            </Button>
                        )}

                        {/* Tombol Bagikan Folder Saat Ini */}
                        {(currentFolderInfo.id || currentPath.kegiatan_id || currentPath.dok_key || currentPath.parent_id || currentPath.mode === 'kegiatan') && (
                            <Button
                                variant="outline"
                                onPress={handleOpenShareCurrentFolder}
                                className={`shrink-0 text-xs font-semibold flex items-center gap-1.5 cursor-pointer ${
                                    currentFolderInfo.share_enabled
                                        ? 'bg-emerald-50 border-emerald-300 text-emerald-700 hover:bg-emerald-100'
                                        : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
                                }`}
                            >
                                <ShareIcon className={`w-4 h-4 ${currentFolderInfo.share_enabled ? 'text-emerald-600' : 'text-teal-600'}`} />
                                <span>{currentFolderInfo.share_enabled ? 'Tautan Aktif' : 'Bagikan Folder'}</span>
                            </Button>
                        )}

                        <Button
                            variant="primary"
                            isDisabled={!canUpload || isNarasumberDokFull}
                            onPress={() => fileInputRef.current?.click()}
                            className="shrink-0"
                        >
                            <ArrowUpTrayIcon className="w-4 h-4" />
                            <span>Upload Berkas</span>
                        </Button>

                        <Button
                            variant="outline"
                            isDisabled={!canCreateFolder}
                            onPress={() => setCreateFolderOpen(true)}
                            className="shrink-0 bg-white border-gray-300 text-gray-700 hover:bg-gray-50 cursor-pointer"
                        >
                            <PlusIcon className="w-4 h-4 text-sky-600" />
                            <span>Folder Baru</span>
                        </Button>

                        <Button
                            isIconOnly
                            variant="ghost"
                            onPress={() => loadData()}
                            aria-label="Refresh"
                            className="text-gray-500 hover:text-gray-700"
                        >
                            <ArrowPathIcon className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
                        </Button>
                    </div>
                </div>

                {/* Breadcrumbs Path Navigasi (Di Atas Search Bar, Font Lebih Besar) */}
                <nav className="flex items-center flex-wrap gap-2 text-sm sm:text-base font-medium px-1">
                    {breadcrumbs.map((b, idx) => {
                        const isLast = idx === breadcrumbs.length - 1;
                        return (
                            <div key={idx} className="flex items-center gap-2">
                                {idx > 0 && <ChevronRightIcon className="w-4 h-4 text-gray-400 shrink-0" />}
                                <button
                                    type="button"
                                    onClick={() => handleBreadcrumbClick(b, idx)}
                                    disabled={isLast}
                                    className={`transition-colors text-left truncate max-w-[280px] sm:max-w-[400px] ${
                                        isLast
                                            ? 'text-gray-900 font-bold text-base sm:text-lg cursor-default'
                                            : 'text-amber-600 hover:text-amber-800 hover:underline cursor-pointer'
                                    }`}
                                >
                                    {b.name}
                                </button>
                            </div>
                        );
                    })}
                </nav>

                {/* Search Bar & Bulk Selection Bar */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <div className="w-full sm:max-w-md min-w-0">
                        <SearchInput
                            value={searchQuery}
                            onChange={setSearchQuery}
                            placeholder="Cari folder atau berkas..."
                        />
                    </div>

                    {/* Quick Select All Button & Floating Bulk Action Bar */}
                    <div className="flex items-center gap-2 flex-wrap">
                        {selectedItems.length > 0 ? (
                            <div className="fixed bottom-4 sm:bottom-6 left-1/2 -translate-x-1/2 z-40 bg-gray-900/95 backdrop-blur-md text-white border border-gray-700/80 px-3 sm:px-4 py-2 sm:py-2.5 rounded-2xl shadow-2xl flex items-center justify-between sm:justify-start gap-1.5 sm:gap-3 max-w-[calc(100vw-1.5rem)] w-auto animate-in fade-in slide-in-from-bottom-4 duration-200">
                                <span className="text-[11px] sm:text-xs font-bold text-gray-200 shrink-0">
                                    {selectedItems.length} terpilih
                                </span>
                                <div className="h-4 w-px bg-gray-700 shrink-0" />
                                <div className="flex items-center gap-1 sm:gap-2 shrink-0">
                                    <button
                                        type="button"
                                        onClick={handleStartBulkCopy}
                                        className="px-2.5 py-1.5 rounded-xl bg-sky-600 hover:bg-sky-700 text-white text-[11px] sm:text-xs font-semibold flex items-center gap-1 sm:gap-1.5 cursor-pointer transition-colors shadow-xs"
                                        title="Salin item terpilih"
                                    >
                                        <DocumentDuplicateIcon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                                        <span>Salin</span>
                                    </button>
                                    <button
                                        type="button"
                                        onClick={handleStartBulkMove}
                                        className="px-2.5 py-1.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-[11px] sm:text-xs font-semibold flex items-center gap-1 sm:gap-1.5 cursor-pointer transition-colors shadow-xs"
                                        title="Pindahkan item terpilih"
                                    >
                                        <FolderArrowDownIcon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                                        <span>Pindahkan</span>
                                    </button>
                                    {canDeleteFile && (
                                        <button
                                            type="button"
                                            onClick={() => setConfirmBulkDeleteOpen(true)}
                                            className="px-2.5 py-1.5 rounded-xl bg-rose-600 hover:bg-rose-700 text-white text-[11px] sm:text-xs font-semibold flex items-center gap-1 sm:gap-1.5 cursor-pointer transition-colors shadow-xs"
                                            title="Hapus item terpilih"
                                        >
                                            <TrashIcon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                                            <span>Hapus</span>
                                        </button>
                                    )}
                                    <button
                                        type="button"
                                        onClick={() => setSelectedItems([])}
                                        className="px-1.5 sm:px-2 py-1 rounded-lg text-gray-400 hover:text-white text-[11px] sm:text-xs font-medium cursor-pointer shrink-0"
                                    >
                                        Batal
                                    </button>
                                </div>
                            </div>
                        ) : (
                            (filteredFolders.length > 0 || filteredFiles.length > 0) && (
                                <Button
                                    variant="outline"
                                    size="sm"
                                    isDisabled={Boolean(clipboard)}
                                    onPress={handleSelectAll}
                                    className="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 text-xs font-medium"
                                >
                                    <CheckCircleIcon className="w-4 h-4 text-gray-400" />
                                    <span>Pilih Semua</span>
                                </Button>
                            )
                        )}
                    </div>
                </div>

                {/* Main Content Area */}
                {loading ? (
                    <div className="py-20 flex flex-col items-center justify-center text-gray-400">
                        <ArrowPathIcon className="w-8 h-8 animate-spin text-amber-500 mb-2" />
                        <p className="text-sm">Memuat isi folder...</p>
                    </div>
                ) : (
                    <div className="space-y-6">
                        {/* Banner Aksi Salin / Pindahkan (Floating Dock at Bottom) */}
                        {clipboard && (
                            <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 bg-gray-900/95 text-white border border-gray-700/80 backdrop-blur-md px-5 py-3 rounded-2xl shadow-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 max-w-2xl w-[92vw] sm:w-auto animate-in fade-in slide-in-from-bottom-4 duration-200">
                                <div className="flex items-center gap-3 min-w-0">
                                    <div className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 shadow-xs ${
                                        clipboard.action === 'copy' ? 'bg-sky-600 text-white' : 'bg-blue-600 text-white'
                                    }`}>
                                        {clipboard.action === 'copy' ? (
                                            <DocumentDuplicateIcon className="w-5 h-5" />
                                        ) : (
                                            <FolderArrowDownIcon className="w-5 h-5" />
                                        )}
                                    </div>
                                    <div className="min-w-0">
                                        <div className="flex items-center gap-2 flex-wrap">
                                            <span className="text-xs sm:text-sm font-bold text-gray-100 truncate max-w-[240px] sm:max-w-[320px]">
                                                {clipboard.items.length === 1
                                                    ? clipboard.items[0].name
                                                    : `${clipboard.items.length} item (${clipboard.items.map((i) => i.name).slice(0, 2).join(', ')}${clipboard.items.length > 2 ? '...' : ''})`}
                                            </span>
                                        </div>
                                        <p className="text-[11px] text-gray-300 mt-0.5 truncate max-w-[260px] sm:max-w-[360px]">
                                            {isKegiatanRoot
                                                ? 'Pilih salah satu kegiatan di bawah.'
                                                : isKegiatanFolder
                                                ? 'Pilih salah satu dari 8 kategori dokumentasi di bawah.'
                                                : isNarasumberRoot
                                                ? 'Pilih salah satu narasumber di bawah.'
                                                : isNarasumberFolder
                                                ? 'Pilih salah satu kategori berkas narasumber.'
                                                : isHonorRoot
                                                ? 'Pilih salah satu folder honorarium di bawah.'
                                                : isHonorFolder
                                                ? `Lokasi: honorarium "${currentFolderName}". Klik tombol untuk menaruh.`
                                                : isSuratRoot
                                                ? 'Pilih folder Surat Masuk atau Surat Keluar di bawah.'
                                                : isSuratSub
                                                ? 'Pilih salah satu surat di bawah.'
                                                : isSuratDetail
                                                ? `Lokasi: berkas "${currentFolderName}". Klik tombol untuk menaruh.`
                                                : isKegiatanDok
                                                ? `Lokasi: dokumentasi "${currentFolderName}". Klik tombol untuk menaruh.`
                                                : isNarasumberDok
                                                ? `Lokasi: berkas "${currentFolderName}". Klik tombol untuk menaruh.`
                                                : `Lokasi: "${currentFolderName}". Klik tombol untuk menaruh.`}
                                        </p>
                                    </div>
                                </div>

                                <div className="flex items-center gap-2 self-end sm:self-auto shrink-0">
                                    <button
                                        type="button"
                                        onClick={() => setClipboard(null)}
                                        className="px-3 py-1.5 rounded-xl bg-gray-800 hover:bg-gray-700 text-gray-300 text-xs font-semibold cursor-pointer transition-colors"
                                    >
                                        Batal
                                    </button>
                                    <Button
                                        size="sm"
                                        isDisabled={
                                            processingClipboard ||
                                            isKegiatanRoot ||
                                            isKegiatanFolder ||
                                            isNarasumberRoot ||
                                            isNarasumberFolder ||
                                            isHonorRoot ||
                                            isHonorFolderFull ||
                                            isSuratRoot ||
                                            isSuratSub ||
                                            isSuratDetailFull ||
                                            isNarasumberDokFull ||
                                            isDokFolderInvalidExt
                                        }
                                        onPress={() => handleExecuteClipboard()}
                                        className={`text-xs font-bold px-3 py-1.5 shadow-sm ${
                                            clipboard.action === 'copy'
                                                ? 'bg-indigo-600 hover:bg-indigo-500 text-white'
                                                : 'bg-purple-600 hover:bg-purple-500 text-white'
                                        }`}
                                    >
                                        {processingClipboard
                                            ? 'Memproses...'
                                            : clipboard.action === 'copy'
                                            ? 'Salin ke Sini'
                                            : 'Pindahkan ke Sini'}
                                    </Button>
                                </div>
                            </div>
                        )}

                        {/* Virtual System Folders Section */}
                        {virtualFolders.length > 0 && (
                            <div className="mb-6">
                                <h2 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 px-1">
                                    Folder Utama
                                </h2>
                                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                    {virtualFolders.filter(vf => !searchQuery || (vf.name || '').toLowerCase().includes(searchQuery.toLowerCase())).map((vf) => {
                                        const subtitleMap: Record<string, string> = {
                                            virtual_kegiatan_root: 'Kegiatan',
                                            virtual_narasumber_root: 'Narasumber',
                                            virtual_honor_root: 'Honor dengan bukti',
                                            virtual_surat_root: 'Berkas surat',
                                        };
                                        const subtitle = subtitleMap[vf.type] ?? 'Item';
                                        return (
                                            <div
                                                key={String(vf.id)}
                                                onClick={() => handleFolderClick(vf)}
                                                className="group flex items-center justify-between p-3.5 bg-white rounded-xl border border-gray-200 hover:border-amber-400 hover:shadow-sm cursor-pointer transition-all"
                                            >
                                                <div className="flex items-center gap-3 min-w-0">
                                                    <div className="w-10 h-10 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
                                                        <FolderIcon className="w-6 h-6" />
                                                    </div>
                                                    <div className="min-w-0">
                                                        <p className="font-semibold text-sm text-gray-800 truncate group-hover:text-amber-700">
                                                            {vf.name}
                                                        </p>
                                                        <p className="text-xs text-gray-400 mt-0.5">
                                                            {vf.file_count} {subtitle}
                                                        </p>
                                                    </div>
                                                </div>
                                                <div className="flex items-center gap-1 shrink-0">
                                                    <button
                                                        type="button"
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                handleOpenShareFolder(vf);
                                                            }}
                                                            className={`p-1.5 rounded-lg text-xs transition-colors cursor-pointer ${
                                                                vf.share_enabled
                                                                    ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
                                                                    : 'text-gray-400 hover:text-teal-600 hover:bg-teal-50 opacity-0 group-hover:opacity-100'
                                                            }`}
                                                            title={vf.share_enabled ? 'Tautan publik aktif (Kelola Berbagi)' : 'Bagikan folder ini'}
                                                        >
                                                            <ShareIcon className="w-4 h-4" />
                                                        </button>
                                                        <ChevronRightIcon className="w-4 h-4 text-gray-300 group-hover:text-gray-500 transition-colors shrink-0" />
                                                    </div>
                                                </div>
                                            );
                                    })}
                                </div>
                            </div>
                        )}

                        {/* Regular User Folders Section */}
                        {filteredFolders.length > 0 && (
                            <div className="mb-6">
                                <h2 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 px-1">
                                    Folder
                                </h2>
                                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                    {filteredFolders.map((folder, idx) => {
                                        const isFolderBeingMoved = clipboard && clipboard.action === 'move' && clipboard.items.some((i) => i.type === 'folder' && i.id === folder.id);
                                        const isFolderSelected = selectedItems.some((i) => i.type === 'folder' && i.id === folder.id);
                                        const isCustomFolder = typeof folder.id === 'number';
                                        const canPasteIntoCustomFolder = clipboard && isCustomFolder && !(clipboard.action === 'move' && clipboard.items.some((i) => i.type === 'folder' && i.id === folder.id));
                                        const canPasteIntoDokFolder = clipboard && !clipboard.items.some((i) => i.type === 'folder') && folder.type === 'kegiatan_dok_folder' && folder.kegiatan_id && folder.dok_key && isClipboardItemExtAllowed(folder.dok_key);
                                        const folderFileCount = folder.file_count || 0;
                                        const isFolderCurrentFieldBeingMoved = clipboard && clipboard.action === 'move' && clipboard.items.some((i) => i.type === 'file' && String(i.id).includes(`-${(folder as any).narasumber_field}`));
                                        const isNsFolderEmptyForPaste = folderFileCount === 0 || isFolderCurrentFieldBeingMoved;
                                        const canPasteIntoNarasumberFolder = clipboard && !clipboard.items.some((i) => i.type === 'folder') && folder.type === 'narasumber_dok_folder' && (folder as any).narasumber_id && (folder as any).narasumber_field && isNsFolderEmptyForPaste;
                                        const canPasteIntoThisFolder = canPasteIntoCustomFolder || canPasteIntoDokFolder || canPasteIntoNarasumberFolder;

                                        const isVirtualOrDokFolder = folder.type === 'kegiatan_dok_folder' || folder.type === 'narasumber_dok_folder' || folder.type === 'virtual_kegiatan_root' || folder.type === 'virtual_narasumber_root' || folder.type === 'virtual_honor_root' || folder.type === 'virtual_surat_root';

                                        return (
                                            <div
                                                key={idx}
                                                onClick={() => handleFolderClick(folder)}
                                                className={`group flex flex-col justify-between p-3.5 bg-white rounded-xl border hover:shadow-sm cursor-pointer transition-all relative min-h-[90px] ${
                                                    isVirtualOrDokFolder
                                                        ? 'hover:border-amber-400'
                                                        : 'hover:border-sky-400'
                                                } ${
                                                    isFolderSelected
                                                        ? isVirtualOrDokFolder ? 'border-amber-500 bg-amber-50/40 ring-2 ring-amber-300' : 'border-sky-500 bg-sky-50/40 ring-2 ring-sky-300'
                                                        : 'border-gray-200'
                                                } ${
                                                    isFolderBeingMoved ? 'opacity-40 border-dashed border-sky-400 bg-sky-50/20' : ''
                                                }`}
                                            >
                                                <div className="flex items-start justify-between gap-2">
                                                    <div className="flex items-center gap-2.5 min-w-0">
                                                        {/* Checkbox for custom folders */}
                                                        {isCustomFolder && !clipboard && (
                                                            <div
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    handleToggleSelectItem({ id: folder.id as number, name: folder.name || 'Folder', type: 'folder' });
                                                                }}
                                                                className="w-5 h-5 aspect-square flex items-center justify-center shrink-0"
                                                            >
                                                                <input
                                                                    type="checkbox"
                                                                    checked={isFolderSelected}
                                                                    onChange={() => {}}
                                                                    className="w-4 h-4 aspect-square rounded text-sky-600 focus:ring-sky-500 border-gray-300 cursor-pointer shrink-0"
                                                                />
                                                            </div>
                                                        )}

                                                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform ${
                                                            isVirtualOrDokFolder
                                                                ? 'bg-amber-50 text-amber-600'
                                                                : 'bg-sky-50 text-sky-600'
                                                        }`}>
                                                            <FolderIcon className="w-6 h-6" />
                                                        </div>
                                                        <div className="min-w-0">
                                                            <p className={`font-semibold text-sm text-gray-800 truncate ${
                                                                isVirtualOrDokFolder ? 'group-hover:text-amber-700' : 'group-hover:text-sky-700'
                                                            }`} title={folder.name}>
                                                                {folder.name}
                                                            </p>
                                                            <p className="text-xs text-gray-400 mt-0.5">
                                                                {folder.file_count !== undefined ? `${folder.file_count} berkas` : folder.tanggal_mulai || 'Folder'}
                                                            </p>
                                                        </div>
                                                    </div>

                                                    {/* Quick Paste into this folder button when clipboard is active */}
                                                    {canPasteIntoThisFolder && (
                                                        <div onClick={(e) => e.stopPropagation()} className="shrink-0">
                                                            <button
                                                                type="button"
                                                                onClick={() => {
                                                                    if (canPasteIntoDokFolder) {
                                                                        handleExecuteClipboard({ kegiatan_id: folder.kegiatan_id, dok_key: folder.dok_key });
                                                                    } else if (canPasteIntoNarasumberFolder) {
                                                                        handleExecuteClipboard({ narasumber_id: (folder as any).narasumber_id, narasumber_field: (folder as any).narasumber_field });
                                                                    } else {
                                                                        handleExecuteClipboard({ id: folder.id as number });
                                                                    }
                                                                }}
                                                                disabled={processingClipboard}
                                                                className={`px-2 py-1 rounded-md text-[10px] font-semibold text-white shadow-2xs flex items-center gap-1 transition-colors cursor-pointer ${
                                                                    clipboard.action === 'copy' ? 'bg-indigo-600 hover:bg-indigo-700' : 'bg-purple-600 hover:bg-purple-700'
                                                                }`}
                                                                title={`Tempel langsung ke dalam folder "${folder.name}"`}
                                                            >
                                                                <CheckIcon className="w-3 h-3" />
                                                                <span>
                                                                    {canPasteIntoDokFolder || canPasteIntoNarasumberFolder
                                                                        ? (clipboard.action === 'copy' ? 'Salin ke sini' : 'Pindahkan ke sini')
                                                                        : (clipboard.action === 'copy' ? 'Salin ke sini' : 'Pindahkan ke sini')}
                                                                </span>
                                                            </button>
                                                        </div>
                                                    )}

                                                    {/* Action buttons for custom & system/kegiatan folders */}
                                                    {!canPasteIntoThisFolder && (
                                                        <div
                                                            onClick={(e) => e.stopPropagation()}
                                                            className={`flex items-center gap-1 transition-opacity shrink-0 ${
                                                                folder.share_enabled ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
                                                            }`}
                                                        >
                                                            {/* Tombol Bagikan Folder Publik (Bisa untuk Semua Folder) */}
                                                            <button
                                                                type="button"
                                                                onClick={() => handleOpenShareFolder(folder)}
                                                                className={`p-1 rounded-md text-white cursor-pointer transition-colors shadow-2xs ${
                                                                    folder.share_enabled
                                                                        ? 'bg-teal-600 hover:bg-teal-700 ring-2 ring-teal-300'
                                                                        : 'bg-teal-600 hover:bg-teal-700'
                                                                }`}
                                                                title={folder.share_enabled ? 'Pengaturan Berbagi Folder Publik (Aktif)' : 'Bagikan Folder Ini ke Publik'}
                                                            >
                                                                <ShareIcon className="w-3.5 h-3.5" />
                                                            </button>

                                                            {isCustomFolder && (
                                                                <>
                                                                    {/* Kelola Akses Pengguna (Hanya untuk Owner / Manager) */}
                                                                    {(folder.is_owner || folder.access_level === 'manage') && (
                                                                        <button
                                                                            type="button"
                                                                            onClick={() => handleOpenAccessModal(folder)}
                                                                            className="p-1 rounded-md bg-emerald-600 hover:bg-emerald-700 text-white cursor-pointer transition-colors shadow-2xs"
                                                                            title="Kelola Akses Pengguna Folder"
                                                                        >
                                                                            <UserGroupIcon className="w-3.5 h-3.5" />
                                                                        </button>
                                                                    )}

                                                                    {/* Salin & Pindahkan (Hanya jika memiliki izin edit / manage) */}
                                                                    {folder.access_level !== 'view' && (
                                                                        <>
                                                                            <button
                                                                                type="button"
                                                                                onClick={() => handleStartCopy({ id: folder.id as number, name: folder.name || '', type: 'folder' })}
                                                                                className="p-1 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white cursor-pointer transition-colors"
                                                                                title="Salin Folder"
                                                                            >
                                                                                <DocumentDuplicateIcon className="w-3.5 h-3.5" />
                                                                            </button>
                                                                            <button
                                                                                type="button"
                                                                                onClick={() => handleStartMove({ id: folder.id as number, name: folder.name || '', type: 'folder' })}
                                                                                className="p-1 rounded-md bg-purple-600 hover:bg-purple-700 text-white cursor-pointer transition-colors"
                                                                                title="Pindahkan Folder"
                                                                            >
                                                                                <FolderArrowDownIcon className="w-3.5 h-3.5" />
                                                                            </button>
                                                                        </>
                                                                    )}

                                                                    {/* Ganti Nama & Hapus (Hanya untuk Owner / Manager) */}
                                                                    {(folder.is_owner || folder.access_level === 'manage') && (
                                                                        <>
                                                                            <button
                                                                                type="button"
                                                                                onClick={() => { setRenameItem({ id: folder.id as number, name: folder.name || '' }); setRenameName(folder.name || ''); }}
                                                                                className="p-1 rounded-md bg-amber-500 hover:bg-amber-600 text-white cursor-pointer transition-colors"
                                                                                title="Ganti Nama"
                                                                            >
                                                                                <PencilSquareIcon className="w-3.5 h-3.5" />
                                                                            </button>
                                                                            {canDeleteFile && (
                                                                                <button
                                                                                    type="button"
                                                                                    onClick={() => setDeleteItem({ id: folder.id as number, name: folder.name || '', type: 'folder' })}
                                                                                    className="p-1 rounded-md bg-rose-600 hover:bg-rose-700 text-white cursor-pointer transition-colors"
                                                                                    title="Hapus"
                                                                                >
                                                                                    <TrashIcon className="w-3.5 h-3.5" />
                                                                                </button>
                                                                            )}
                                                                        </>
                                                                    )}
                                                                </>
                                                            )}
                                                        </div>
                                                    )}
                                                </div>

                                            {/* Folder meta info: Badges, Creator & last edit */}
                                            <div className="mt-2.5 pt-2 border-t border-gray-100 flex flex-col gap-1 text-[11px] text-gray-500">
                                                {/* Akses & Sharing Badges */}
                                                {((folder.shared_count !== undefined && folder.shared_count > 0) || folder.access_level === 'view' || folder.share_enabled) && (
                                                    <div className="flex items-center gap-1.5 flex-wrap pb-0.5">
                                                        {folder.share_enabled && (
                                                            <span
                                                                className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-teal-50 text-teal-700 border border-teal-200/80"
                                                                title="Folder ini dapat diakses publik via tautan berbagi"
                                                            >
                                                                <ShareIcon className="w-3 h-3 text-teal-600" />
                                                                <span>Tautan Publik</span>
                                                            </span>
                                                        )}
                                                        {folder.shared_count !== undefined && folder.shared_count > 0 && (
                                                            <span
                                                                className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200/80"
                                                                title={`Folder ini telah dibagikan ke ${folder.shared_count} pengguna`}
                                                            >
                                                                <UserGroupIcon className="w-3 h-3 text-emerald-600" />
                                                                <span>{folder.shared_count} dibagikan</span>
                                                            </span>
                                                        )}
                                                        {folder.access_level === 'view' && (
                                                            <span
                                                                className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 text-gray-600 border border-gray-200"
                                                                title="Anda memiliki hak akses Lihat Saja pada folder ini"
                                                            >
                                                                <EyeIcon className="w-3 h-3 text-gray-500" />
                                                                <span>Lihat Saja</span>
                                                            </span>
                                                        )}
                                                    </div>
                                                )}

                                                {(folder.creator || folder.created_at) && (
                                                    <div className="flex items-center gap-1 text-gray-500 truncate" title={`Dibuat oleh ${folder.creator || 'Admin'}${folder.created_at ? ' pada ' + folder.created_at : ''}`}>
                                                        <UserIcon className="w-3 h-3 shrink-0 text-gray-400" />
                                                        <span className="truncate">Oleh: <strong className="font-medium text-gray-700">{folder.creator || 'Admin'}</strong></span>
                                                        {folder.created_at && (
                                                            <span className="text-gray-400 shrink-0">({folder.created_at})</span>
                                                        )}
                                                    </div>
                                                )}
                                                {folder.last_editor && (
                                                    <div className="flex items-center gap-1 text-amber-700/80 truncate text-[10px]" title={`Diedit terakhir oleh ${folder.last_editor}${folder.last_edited_at ? ' (' + folder.last_edited_at + ')' : ''}`}>
                                                        <ClockIcon className="w-3 h-3 shrink-0 text-amber-500" />
                                                        <span className="truncate">Edit: {folder.last_editor} {folder.last_edited_at ? `(${folder.last_edited_at})` : ''}</span>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    );
                                })}
                                </div>
                            </div>
                        )}

                        {/* Files Section */}
                        <div>
                            <h2 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 px-1 flex items-center justify-between">
                                <span>Berkas ({filteredFiles.length})</span>
                            </h2>

                            {filteredFiles.length === 0 ? (
                                <div className="py-14 border border-dashed border-gray-200 rounded-2xl bg-white flex flex-col items-center justify-center text-gray-400">
                                    <DocumentIcon className="w-12 h-12 text-gray-300 mb-2" />
                                    <p className="text-sm font-medium text-gray-500">Tidak ada berkas di folder ini</p>
                                    <p className="text-xs text-gray-400 mt-1">
                                        {canUpload
                                            ? 'Klik "Upload Berkas" untuk menambahkan'
                                            : 'Buka folder atau subfolder di atas untuk menelusuri atau mengelola berkas'}
                                    </p>
                                </div>
                            ) : (
                                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
                                    {filteredFiles.map((file) => {
                                        const isImage = /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i.test(file.url);
                                        const isVideo = /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(file.url);
                                        const isPdf = /\.pdf(\?.*)?$/i.test(file.url);
                                        const isExcel = /\.(xlsx|xls)(\?.*)?$/i.test(file.url);
                                        const isFileBeingMoved = clipboard && clipboard.action === 'move' && clipboard.items.some((i) => i.type === 'file' && i.id === file.id);
                                        const isFileSelected = selectedItems.some((i) => i.type === 'file' && i.id === file.id);

                                        return (
                                            <div
                                                key={file.id}
                                                className={`group bg-white rounded-xl border overflow-hidden hover:border-amber-400 hover:shadow-sm transition-all flex flex-col justify-between ${
                                                    isFileSelected
                                                        ? 'border-sky-500 ring-2 ring-sky-300'
                                                        : 'border-gray-200'
                                                } ${
                                                    isFileBeingMoved ? 'opacity-40 border-dashed border-sky-400 bg-sky-50/20' : ''
                                                }`}
                                            >
                                                <div>
                                                    {/* File Preview Thumbnail */}
                                                    <div
                                                        onClick={() => setPreviewFile(file)}
                                                        className="h-36 bg-gray-50 flex items-center justify-center cursor-pointer overflow-hidden relative border-b border-gray-100 group-hover:bg-gray-100 transition-colors"
                                                    >
                                                        {/* Checkbox Selection on Top Left */}
                                                        {!clipboard && (
                                                            <div
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    handleToggleSelectItem({ id: file.id as any, name: file.name, type: 'file' });
                                                                }}
                                                                className={`absolute top-2 left-2 z-10 w-6 h-6 aspect-square flex items-center justify-center rounded-md transition-opacity ${
                                                                    isFileSelected
                                                                        ? 'opacity-100 bg-white shadow-xs'
                                                                        : 'opacity-0 group-hover:opacity-100 bg-white/90 backdrop-blur-xs'
                                                                }`}
                                                            >
                                                                <input
                                                                    type="checkbox"
                                                                    checked={isFileSelected}
                                                                    onChange={() => {}}
                                                                    className="w-4 h-4 aspect-square rounded text-sky-600 focus:ring-sky-500 border-gray-300 cursor-pointer shrink-0"
                                                                />
                                                            </div>
                                                        )}

                                                        {isImage ? (
                                                            <img src={file.url} alt={file.name} className="w-full h-full object-cover" />
                                                        ) : isVideo ? (
                                                            <video src={file.url} className="w-full h-full object-cover" />
                                                        ) : (
                                                            <div className="flex flex-col items-center gap-1.5 text-gray-400">
                                                                <DocumentIcon className="w-10 h-10" />
                                                                <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">
                                                                    {isPdf ? 'PDF' : isExcel ? 'Excel' : 'Dokumen'}
                                                                </span>
                                                            </div>
                                                        )}

                                                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/25 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all">
                                                            <span className="p-2 rounded-full bg-white/90 text-gray-800 shadow-md">
                                                                <EyeIcon className="w-4 h-4" />
                                                            </span>
                                                        </div>

                                                        {/* Badge if linked to kegiatan */}
                                                        {file.kegiatan && (
                                                            <span className="absolute bottom-2 left-2 px-2 py-0.5 rounded-md bg-emerald-500/90 backdrop-blur-xs text-white text-[10px] font-medium shadow-xs truncate max-w-[80%]">
                                                                {file.kegiatan.nama}
                                                            </span>
                                                        )}

                                                        {/* Badge if public share is enabled */}
                                                        {file.share_enabled && (
                                                            <span className="absolute top-2 right-2 px-1.5 py-0.5 rounded-md bg-emerald-600/90 backdrop-blur-xs text-white text-[10px] font-semibold shadow-xs flex items-center gap-1">
                                                                <ShareIcon className="w-3 h-3" /> Publik
                                                            </span>
                                                        )}
                                                    </div>

                                                    {/* File Info */}
                                                    <div className="p-3">
                                                        <p className="font-semibold text-sm text-gray-800 truncate" title={file.name}>
                                                            {file.name}
                                                        </p>
                                                        <div className="flex items-center justify-between text-xs text-gray-400 mt-1">
                                                            <span className="font-medium text-gray-500">{formatBytes(file.file_size)}</span>
                                                            {file.dokumentasi_key && (
                                                                <span className="text-amber-600 font-medium">
                                                                    {DOK_LABELS[file.dokumentasi_key] || file.dokumentasi_key}
                                                                </span>
                                                            )}
                                                        </div>
                                                    </div>
                                                </div>

                                                {/* Action Buttons */}
                                                <div className="px-3 pb-3">
                                                    <div className="pt-2 border-t border-gray-100 flex items-center justify-between gap-1.5 relative">
                                                        <a
                                                            href={file.url}
                                                            target="_blank"
                                                            rel="noreferrer"
                                                            download
                                                            className="px-2 py-1.5 text-xs font-medium rounded-md bg-sky-600 hover:bg-sky-700 text-white flex items-center gap-1 cursor-pointer transition-colors"
                                                            title="Unduh Berkas"
                                                        >
                                                            <ArrowDownTrayIcon className="w-4 h-4" />
                                                            <span>Unduh</span>
                                                        </a>

                                                        {/* Menu Titik Tiga (More Actions Dropdown) */}
                                                        <div className="relative">
                                                            <button
                                                                type="button"
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    setActiveFileMenuId(activeFileMenuId === file.id ? null : file.id);
                                                                }}
                                                                className={`p-1.5 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors cursor-pointer ${
                                                                    activeFileMenuId === file.id ? 'bg-gray-100 text-gray-900 ring-1 ring-gray-300' : ''
                                                                }`}
                                                                title="Menu Tindakan Berkas"
                                                            >
                                                                <EllipsisVerticalIcon className="w-5 h-5" />
                                                            </button>

                                                            {/* Dropdown Menu Popup */}
                                                            {activeFileMenuId === file.id && (
                                                                <div
                                                                    onClick={(e) => e.stopPropagation()}
                                                                    className="absolute right-0 bottom-full mb-1.5 w-44 bg-white rounded-xl shadow-xl border border-gray-100 py-1.5 z-50 flex flex-col text-xs font-medium animate-in fade-in zoom-in-95 duration-100"
                                                                >
                                                                    <button
                                                                        type="button"
                                                                        onClick={() => {
                                                                            setActiveFileMenuId(null);
                                                                            setPreviewFile(file);
                                                                        }}
                                                                        className="w-full px-3 py-2 text-left flex items-center gap-2.5 text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer"
                                                                    >
                                                                        <EyeIcon className="w-4 h-4 text-sky-600" />
                                                                        <span>Lihat Detail / Pratinjau</span>
                                                                    </button>
                                                                    <button
                                                                        type="button"
                                                                        onClick={() => {
                                                                            setActiveFileMenuId(null);
                                                                            handleOpenShareFile(file);
                                                                        }}
                                                                        className="w-full px-3 py-2 text-left flex items-center gap-2.5 text-teal-700 hover:bg-teal-50 transition-colors cursor-pointer"
                                                                    >
                                                                        <ShareIcon className="w-4 h-4 text-teal-600" />
                                                                        <span>{file.share_enabled ? 'Pengaturan Berbagi' : 'Bagikan Berkas'}</span>
                                                                    </button>

                                                                    <button
                                                                        type="button"
                                                                        onClick={() => {
                                                                            setActiveFileMenuId(null);
                                                                            handleStartCopy({ id: file.id as any, name: file.name, type: 'file', url: file.url } as any);
                                                                        }}
                                                                        className="w-full px-3 py-2 text-left flex items-center gap-2.5 text-indigo-700 hover:bg-indigo-50 transition-colors cursor-pointer"
                                                                    >
                                                                        <DocumentDuplicateIcon className="w-4 h-4 text-indigo-600" />
                                                                        <span>Salin Berkas</span>
                                                                    </button>

                                                                    {!isViewOnlyFolder && (
                                                                        <button
                                                                            type="button"
                                                                            onClick={() => {
                                                                                setActiveFileMenuId(null);
                                                                                handleStartMove({ id: file.id as any, name: file.name, type: 'file', url: file.url } as any);
                                                                            }}
                                                                            className="w-full px-3 py-2 text-left flex items-center gap-2.5 text-purple-700 hover:bg-purple-50 transition-colors cursor-pointer"
                                                                        >
                                                                            <FolderArrowDownIcon className="w-4 h-4 text-purple-600" />
                                                                            <span>Pindahkan Berkas</span>
                                                                        </button>
                                                                    )}

                                                                    <a
                                                                        href={file.url}
                                                                        target="_blank"
                                                                        rel="noreferrer"
                                                                        download
                                                                        onClick={() => setActiveFileMenuId(null)}
                                                                        className="w-full px-3 py-2 text-left flex items-center gap-2.5 text-sky-700 hover:bg-sky-50 transition-colors cursor-pointer"
                                                                    >
                                                                        <ArrowDownTrayIcon className="w-4 h-4 text-sky-600" />
                                                                        <span>Unduh Berkas</span>
                                                                    </a>

                                                                    {!isViewOnlyFolder && (
                                                                        <>
                                                                            <button
                                                                                type="button"
                                                                                onClick={() => {
                                                                                    setActiveFileMenuId(null);
                                                                                    setRenameItem({ id: file.id as any, name: file.name });
                                                                                    setRenameName(file.name);
                                                                                }}
                                                                                className="w-full px-3 py-2 text-left flex items-center gap-2.5 text-amber-700 hover:bg-amber-50 transition-colors cursor-pointer"
                                                                            >
                                                                                <PencilSquareIcon className="w-4 h-4 text-amber-600" />
                                                                                <span>Ganti Nama</span>
                                                                            </button>

                                                                            <div className="my-1 border-t border-gray-100" />

                                                                            {canDeleteFile && (
                                                                                <button
                                                                                    type="button"
                                                                                    onClick={() => {
                                                                                        setActiveFileMenuId(null);
                                                                                        setDeleteItem({ id: file.id as any, name: file.name, type: 'file', ...(file as any) });
                                                                                    }}
                                                                                    className="w-full px-3 py-2 text-left flex items-center gap-2.5 text-rose-600 hover:bg-rose-50 transition-colors cursor-pointer"
                                                                                >
                                                                                    <TrashIcon className="w-4 h-4 text-rose-500" />
                                                                                    <span>Hapus Berkas</span>
                                                                                </button>
                                                                            )}
                                                                        </>
                                                                    )}
                                                                </div>
                                                            )}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                        </div>
                    </div>
                )}
            </div>

            {/* Modal Buat Folder Baru */}
            <Modal isOpen={createFolderOpen} onOpenChange={setCreateFolderOpen}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-md w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-sky-100 text-sky-600">
                                    <FolderPlusIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div>
                                    <Modal.Heading>Buat Folder Baru</Modal.Heading>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <form onSubmit={handleCreateFolder}>
                                <Modal.Body className="py-4">
                                    <Field
                                        label="Nama Folder"
                                        value={newFolderName}
                                        onChange={setNewFolderName}
                                        placeholder="Contoh: Arsip Brosur 2026"
                                        required
                                    />
                                </Modal.Body>
                                <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end gap-2">
                                    <Button variant="outline" onPress={() => setCreateFolderOpen(false)}>
                                        Batal
                                    </Button>
                                    <Button
                                        type="submit"
                                        isDisabled={creatingFolder || !newFolderName.trim()}
                                        className="bg-sky-600 text-white font-medium hover:bg-sky-700"
                                    >
                                        {creatingFolder ? 'Menyimpan...' : 'Buat Folder'}
                                    </Button>
                                </Modal.Footer>
                            </form>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Modal Ganti Nama (Rename) */}
            <Modal isOpen={!!renameItem} onOpenChange={(open) => !open && setRenameItem(null)}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-md w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-amber-100 text-amber-600">
                                    <PencilSquareIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div>
                                    <Modal.Heading>Ganti Nama</Modal.Heading>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <form onSubmit={handleRename}>
                                <Modal.Body className="py-4">
                                    <Field
                                        label="Nama Baru"
                                        value={renameName}
                                        onChange={setRenameName}
                                        placeholder="Masukkan nama baru"
                                        required
                                    />
                                </Modal.Body>
                                <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end gap-2">
                                    <Button variant="outline" onPress={() => setRenameItem(null)}>
                                        Batal
                                    </Button>
                                    <Button
                                        type="submit"
                                        isDisabled={!renameName.trim()}
                                        className="bg-amber-500 text-white font-medium hover:bg-amber-600"
                                    >
                                        Simpan
                                    </Button>
                                </Modal.Footer>
                            </form>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Modal Hapus Konfirmasi */}
            <Modal isOpen={!!deleteItem} onOpenChange={(open) => !open && setDeleteItem(null)}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-md w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-rose-100 text-rose-600">
                                    <TrashIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div>
                                    <Modal.Heading>Hapus {deleteItem?.type === 'folder' ? 'Folder' : 'Berkas'}</Modal.Heading>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <Modal.Body className="py-4">
                                <p className="text-sm text-gray-600">
                                    Apakah Anda yakin ingin menghapus <strong className="text-gray-900">{deleteItem?.name}</strong>?
                                    {deleteItem?.type === 'folder' && ' Semua isi di dalam folder ini juga akan terhapus.'}
                                </p>
                            </Modal.Body>
                            <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end gap-2">
                                <Button variant="outline" onPress={() => setDeleteItem(null)}>
                                    Batal
                                </Button>
                                <Button
                                    onPress={handleDelete}
                                    className="bg-rose-600 text-white font-medium hover:bg-rose-700"
                                >
                                    Hapus
                                </Button>
                            </Modal.Footer>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Modal Hapus Massal (Bulk Delete) */}
            <Modal isOpen={confirmBulkDeleteOpen} onOpenChange={setConfirmBulkDeleteOpen}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-md w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-rose-100 text-rose-600">
                                    <TrashIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div>
                                    <Modal.Heading>Hapus {selectedItems.length} Item Terpilih</Modal.Heading>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <Modal.Body className="py-4">
                                <p className="text-sm text-gray-600">
                                    Apakah Anda yakin ingin menghapus <strong className="text-gray-900">{selectedItems.length} item</strong> yang dipilih?
                                    Item yang berupa folder akan menghapus seluruh isi di dalamnya.
                                </p>
                                <div className="mt-3 max-h-36 overflow-y-auto bg-white border border-gray-200 rounded-xl p-2.5 text-xs text-gray-700 space-y-1">
                                    {selectedItems.map((item, i) => (
                                        <div key={i} className="flex items-center gap-2 truncate">
                                            <span className="w-1.5 h-1.5 rounded-full bg-rose-500 shrink-0" />
                                            <span className="truncate">{item.name}</span>
                                            <span className="text-[10px] text-gray-400 shrink-0 uppercase">({item.type})</span>
                                        </div>
                                    ))}
                                </div>
                            </Modal.Body>
                            <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end gap-2">
                                <Button variant="outline" onPress={() => setConfirmBulkDeleteOpen(false)}>
                                    Batal
                                </Button>
                                <Button
                                    onPress={handleConfirmBulkDelete}
                                    isDisabled={deletingBulk}
                                    className="bg-rose-600 text-white font-medium hover:bg-rose-700"
                                >
                                    {deletingBulk ? 'Menghapus...' : `Ya, Hapus (${selectedItems.length})`}
                                </Button>
                            </Modal.Footer>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Step 1: Modal Pilih Kegiatan & Subfolder untuk Dikaitkan */}
            <Modal isOpen={!!linkFile && !confirmLinkOpen} onOpenChange={(open) => !open && setLinkFile(null)}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-lg w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-sky-100 text-sky-600">
                                    <LinkIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div>
                                    <Modal.Heading>Kaitkan ke Dokumentasi Kegiatan</Modal.Heading>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <Modal.Body className="py-4 space-y-4">
                                <div className="bg-white border border-gray-200 rounded-xl p-3.5 shadow-2xs">
                                    <p className="text-xs text-gray-500 font-semibold uppercase tracking-wider">Berkas yang akan dipindahkan</p>
                                    <p className="text-sm font-semibold text-gray-800 mt-1 break-all">{linkFile?.name}</p>
                                </div>

                                <SelectField
                                    label="Pilih Kegiatan Tujuan"
                                    items={kegiatanList.map((k) => ({ id: k.id, label: k.nama_kegiatan || k.nama || `Kegiatan #${k.id}` }))}
                                    selectedKey={selectedKegiatanId || null}
                                    onSelectionChange={(v) => setSelectedKegiatanId(v ? Number(v) : 0)}
                                    placeholder="-- Pilih Kegiatan --"
                                />

                                <SelectField
                                    label="Pilih Kategori Folder Dokumentasi"
                                    items={Object.entries(DOK_LABELS).map(([key, label]) => ({ id: key, label }))}
                                    selectedKey={selectedDokKey}
                                    onSelectionChange={(v) => v && setSelectedDokKey(String(v))}
                                    placeholder="-- Pilih Kategori Folder --"
                                />
                            </Modal.Body>
                            <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end gap-2">
                                <Button variant="outline" onPress={() => setLinkFile(null)}>
                                    Batal
                                </Button>
                                <Button
                                    onPress={handleProceedLink}
                                    isDisabled={!selectedKegiatanId}
                                    className="bg-sky-600 text-white font-medium hover:bg-sky-700"
                                >
                                    Lanjut Konfirmasi
                                </Button>
                            </Modal.Footer>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Step 2: Modal Konfirmasi Pemindahan Berkas ke Kegiatan */}
            <Modal isOpen={confirmLinkOpen} onOpenChange={setConfirmLinkOpen}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-md w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-sky-100 text-sky-600">
                                    <LinkIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div>
                                    <Modal.Heading>Konfirmasi Pemindahan Berkas</Modal.Heading>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <Modal.Body className="py-4">
                                <p className="text-sm text-gray-600 leading-relaxed">
                                    Apakah Anda yakin ingin memindahkan berkas <strong className="text-gray-900">{linkFile?.name}</strong> ke dalam Kegiatan:
                                </p>
                                <div className="mt-3 p-3 bg-white rounded-xl border border-gray-200 text-sm shadow-2xs">
                                    <p className="font-semibold text-gray-900">{targetKegiatanName}</p>
                                    <p className="text-xs text-sky-600 font-medium mt-1">
                                        Subfolder: <strong>{DOK_LABELS[selectedDokKey]}</strong>
                                    </p>
                                </div>
                                <p className="text-xs text-gray-500 mt-3">
                                    Berkas ini akan otomatis masuk dan terhubung ke halaman dokumentasi kegiatan tersebut.
                                </p>
                            </Modal.Body>
                            <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end gap-2">
                                <Button variant="outline" onPress={() => setConfirmLinkOpen(false)}>
                                    Batal
                                </Button>
                                <Button
                                    onPress={handleConfirmLink}
                                    isDisabled={linking}
                                    className="bg-sky-600 text-white font-medium hover:bg-sky-700"
                                >
                                    {linking ? 'Memindahkan...' : 'Ya, Pindahkan Berkas'}
                                </Button>
                            </Modal.Footer>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Modal Konfirmasi Unlink (Lepas Kaitan) */}
            <Modal isOpen={!!unlinkFile} onOpenChange={(open) => !open && setUnlinkFile(null)}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-md w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-rose-100 text-rose-600">
                                    <ArrowsRightLeftIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div>
                                    <Modal.Heading>Lepas Kaitan dari Kegiatan</Modal.Heading>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <Modal.Body className="py-4">
                                <p className="text-sm text-gray-600 leading-relaxed">
                                    Apakah Anda ingin melepas kaitan berkas <strong className="text-gray-900">{unlinkFile?.name}</strong> dari Kegiatan?
                                </p>
                                <p className="text-xs text-gray-500 mt-2">
                                    Berkas akan dikeluarkan dari dokumentasi kegiatan dan dipindahkan ke folder utama file manager sebagai berkas bebas.
                                </p>
                            </Modal.Body>
                            <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end gap-2">
                                <Button variant="outline" onPress={() => setUnlinkFile(null)}>
                                    Batal
                                </Button>
                                <Button
                                    onPress={handleConfirmUnlink}
                                    isDisabled={unlinking}
                                    className="bg-rose-600 text-white font-medium hover:bg-rose-700"
                                >
                                    {unlinking ? 'Melepas...' : 'Ya, Lepas Kaitan'}
                                </Button>
                            </Modal.Footer>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Modal Bagikan (Hanya Lihat, Publik) */}
            <Modal isOpen={!!shareTarget} onOpenChange={(open) => !open && setShareTarget(null)}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-md w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-teal-100 text-teal-700">
                                    <ShareIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div className="min-w-0 flex-1">
                                    <Modal.Heading className="truncate">
                                        {shareTarget?.type === 'folder' ? 'Bagikan Folder Publik' : 'Bagikan Berkas'}
                                    </Modal.Heading>
                                    <p className="text-xs text-gray-500 truncate mt-0.5">{shareTarget?.name}</p>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />
                            <Modal.Body className="py-4 space-y-4">
                                <p className="text-sm text-gray-600">
                                    {shareTarget?.type === 'folder' ? (
                                        <>
                                            Buat tautan publik <strong>hanya lihat</strong> untuk folder ini. Siapapun yang memiliki tautan dapat menelusuri subfolder, melihat foto/galeri, dan mengunduh berkas tanpa perlu login.
                                        </>
                                    ) : (
                                        <>
                                            Buat tautan publik <strong>hanya lihat</strong> untuk berkas ini. Siapapun yang memiliki tautan dapat melihat dan mengunduh berkas tanpa perlu masuk.
                                        </>
                                    )}
                                </p>

                                {shareTarget?.share_enabled && shareTarget.share_token ? (
                                    <div className="space-y-3">
                                        <div className="p-3.5 bg-teal-50 rounded-xl border border-teal-200 space-y-2.5">
                                            <div className="flex items-center justify-between">
                                                <span className="text-xs font-semibold text-teal-900 flex items-center gap-1.5">
                                                    <span className="w-2 h-2 rounded-full bg-teal-500 animate-pulse"></span>
                                                    Tautan Publik Aktif
                                                </span>
                                                <a
                                                    href={`/share/${shareTarget.share_token}`}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="text-[11px] font-medium text-teal-700 hover:text-teal-900 underline inline-flex items-center gap-0.5"
                                                >
                                                    <span>Buka Tautan</span>
                                                    <ArrowTopRightOnSquareIcon className="w-3 h-3" />
                                                </a>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <input
                                                    type="text"
                                                    readOnly
                                                    value={`${window.location.origin}/share/${shareTarget.share_token}`}
                                                    onClick={(e) => (e.target as HTMLInputElement).select()}
                                                    className="text-xs bg-white text-gray-700 border border-teal-300 rounded-lg px-2.5 py-2 w-full focus:outline-hidden select-all shadow-xs"
                                                />
                                                <button
                                                    type="button"
                                                    onClick={() => handleCopyShareLink(`${window.location.origin}/share/${shareTarget.share_token}`)}
                                                    className="shrink-0 px-3 py-2 text-xs font-medium rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition-colors flex items-center gap-1 cursor-pointer shadow-2xs"
                                                >
                                                    {copiedShareLink ? (
                                                        <>
                                                            <CheckIcon className="w-4 h-4" />
                                                            <span>Disalin</span>
                                                        </>
                                                    ) : (
                                                        <>
                                                            <ClipboardDocumentCheckIcon className="w-4 h-4" />
                                                            <span>Salin</span>
                                                        </>
                                                    )}
                                                </button>
                                            </div>
                                        </div>

                                        <div className="p-3 bg-rose-50 rounded-xl border border-rose-200 flex items-center justify-between gap-3">
                                            <div>
                                                <p className="text-xs font-semibold text-rose-800">Tutup Akses Publik?</p>
                                                <p className="text-[11px] text-rose-600">Tautan ini tidak akan bisa dibuka lagi oleh publik.</p>
                                            </div>
                                            <Button
                                                onPress={handleShareRevoke}
                                                isDisabled={sharing}
                                                className="shrink-0 bg-rose-600 text-white text-xs hover:bg-rose-700 font-medium px-3 py-1.5"
                                            >
                                                {sharing ? 'Menutup...' : 'Tutup Link'}
                                            </Button>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="p-4 bg-gray-100 rounded-xl border border-gray-200 text-center space-y-3">
                                        <p className="text-xs text-gray-500">
                                            Tautan publik saat ini belum dibuat atau sedang nonaktif.
                                        </p>
                                        <Button
                                            onPress={handleShareActivate}
                                            isDisabled={sharing}
                                            className="bg-teal-600 text-white hover:bg-teal-700 font-medium inline-flex items-center gap-1.5 shadow-2xs"
                                        >
                                            <ShareIcon className="w-4 h-4" />
                                            <span>{sharing ? 'Membuat Tautan...' : 'Aktifkan & Buat Tautan Publik'}</span>
                                        </Button>
                                    </div>
                                )}
                            </Modal.Body>
                            <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end">
                                <Button variant="outline" onPress={() => setShareTarget(null)}>
                                    Tutup
                                </Button>
                            </Modal.Footer>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Modal Kelola Akses Folder */}
            <Modal isOpen={!!accessModalFolder} onOpenChange={(open) => !open && setAccessModalFolder(null)}>
                <Modal.Backdrop>
                    <Modal.Container>
                        <Modal.Dialog className="max-w-xl w-full bg-gray-50">
                            <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                                <Modal.Icon className="bg-emerald-100 text-emerald-600">
                                    <UserGroupIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div className="min-w-0 flex-1">
                                    <Modal.Heading className="truncate">Kelola Akses: {accessModalFolder?.name}</Modal.Heading>
                                    <p className="text-xs text-gray-500 mt-0.5">
                                        Atur pengguna yang dapat melihat, mengedit, atau mengelola folder ini.
                                    </p>
                                </div>
                            </Modal.Header>
                            <Modal.CloseTrigger />

                            <Modal.Body className="py-4 space-y-4">
                                {accessLoading ? (
                                    <div className="py-12 flex flex-col items-center justify-center text-gray-400">
                                        <ArrowPathIcon className="w-6 h-6 animate-spin text-emerald-500 mb-2" />
                                        <p className="text-xs">Memuat data hak akses...</p>
                                    </div>
                                ) : accessData ? (
                                    <>
                                        {/* Section: Pemilik (Owner) */}
                                        <div className="bg-white border border-gray-200 rounded-xl p-3 shadow-2xs">
                                            <div className="flex items-center justify-between gap-2">
                                                <div className="flex items-center gap-2.5 min-w-0">
                                                    <div className="w-8 h-8 rounded-full bg-emerald-50 text-emerald-700 flex items-center justify-center font-bold text-xs shrink-0 border border-emerald-200">
                                                        {accessData.folder.owner?.name?.charAt(0).toUpperCase() || 'O'}
                                                    </div>
                                                    <div className="min-w-0">
                                                        <p className="text-xs font-bold text-gray-900 truncate">
                                                            {accessData.folder.owner?.name || 'Superadmin'}
                                                        </p>
                                                        <p className="text-[11px] text-gray-500 truncate">
                                                            {accessData.folder.owner?.email || 'superadmin@siatn.test'}
                                                        </p>
                                                    </div>
                                                </div>
                                                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-100 text-emerald-800 shrink-0">
                                                    <ShieldCheckIcon className="w-3.5 h-3.5" />
                                                    <span>Pemilik Penuh</span>
                                                </span>
                                            </div>
                                        </div>

                                        {/* Section: Tambah Pengguna Baru */}
                                        <div className="bg-white border border-gray-200 rounded-xl p-3.5 shadow-2xs space-y-2.5">
                                            <h4 className="text-xs font-bold uppercase tracking-wider text-gray-500">
                                                Beri Akses ke Pengguna Lain
                                            </h4>
                                            {accessData.available_users.length > 0 ? (
                                                <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
                                                    <div className="flex-1 min-w-0">
                                                        <select
                                                            value={selectedUserIdToAdd}
                                                            onChange={(e) => setSelectedUserIdToAdd(e.target.value ? Number(e.target.value) : '')}
                                                            className="w-full text-xs text-gray-900 rounded-lg border border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 py-2 px-2.5 bg-white cursor-pointer"
                                                        >
                                                            <option value="">-- Pilih Pengguna --</option>
                                                            {accessData.available_users.map((u) => (
                                                                <option key={u.id} value={u.id}>
                                                                    {u.name} ({u.role}) - {u.email}
                                                                </option>
                                                            ))}
                                                        </select>
                                                    </div>
                                                    <div className="w-full sm:w-40 shrink-0">
                                                        <select
                                                            value={selectedAccessToAdd}
                                                            onChange={(e) => setSelectedAccessToAdd(e.target.value as any)}
                                                            className="w-full text-xs text-gray-900 font-medium rounded-lg border border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 py-2 px-2.5 bg-white cursor-pointer"
                                                        >
                                                            <option value="view">Lihat Saja</option>
                                                            <option value="edit">Edit & Upload</option>
                                                            <option value="manage">Akses Penuh</option>
                                                        </select>
                                                    </div>
                                                    <Button
                                                        onPress={handleAddAccess}
                                                        isDisabled={!selectedUserIdToAdd || submittingAccess}
                                                        className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold shrink-0 py-2 px-3.5 shadow-2xs"
                                                    >
                                                        {submittingAccess ? 'Menyimpan...' : 'Beri Akses'}
                                                    </Button>
                                                </div>
                                            ) : (
                                                <p className="text-xs text-gray-400 italic">
                                                    Semua pengguna telah memiliki hak akses ke folder ini.
                                                </p>
                                            )}
                                        </div>

                                        {/* Section: Daftar Pengguna yang Sudah Diberi Akses */}
                                        <div className="space-y-2">
                                            <div className="flex items-center justify-between px-1">
                                                <h4 className="text-xs font-bold uppercase tracking-wider text-gray-500">
                                                    Pengguna yang Diberi Akses ({accessData.accesses.length})
                                                </h4>
                                                <span className="text-[10px] text-gray-400">
                                                    Perubahan disimpan otomatis
                                                </span>
                                            </div>

                                            {accessData.accesses.length === 0 ? (
                                                <div className="py-6 bg-white border border-dashed border-gray-200 rounded-xl text-center text-xs text-gray-400">
                                                    Belum ada pengguna lain yang diberi akses ke folder ini.
                                                </div>
                                            ) : (
                                                <div className="bg-white border border-gray-200 rounded-xl divide-y divide-gray-100 shadow-2xs max-h-56 overflow-y-auto">
                                                    {accessData.accesses.map((acc) => (
                                                        <div key={acc.id} className="p-3 flex items-center justify-between gap-3">
                                                            <div className="flex items-center gap-2.5 min-w-0">
                                                                <div className="w-8 h-8 rounded-full bg-slate-100 text-slate-700 flex items-center justify-center font-bold text-xs shrink-0 border border-slate-200">
                                                                    {acc.user_name?.charAt(0).toUpperCase()}
                                                                </div>
                                                                <div className="min-w-0">
                                                                    <p className="text-xs font-semibold text-gray-900 truncate">
                                                                        {acc.user_name}
                                                                    </p>
                                                                    <p className="text-[11px] text-gray-400 truncate">
                                                                        {acc.user_email} • <span className="font-medium text-gray-600">{acc.user_role}</span>
                                                                    </p>
                                                                </div>
                                                            </div>

                                                            <div className="flex items-center gap-2 shrink-0">
                                                                <select
                                                                    value={acc.access_level}
                                                                    disabled={updatingAccessUserId === acc.user_id}
                                                                    onChange={(e) => handleUpdateAccessLevel(acc.user_id, e.target.value as any)}
                                                                    className="text-xs text-gray-900 font-medium rounded-lg border border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 py-1.5 px-2 bg-white cursor-pointer disabled:opacity-50"
                                                                >
                                                                    <option value="view">Lihat Saja</option>
                                                                    <option value="edit">Edit & Upload</option>
                                                                    <option value="manage">Akses Penuh</option>
                                                                </select>

                                                                <button
                                                                    type="button"
                                                                    disabled={updatingAccessUserId === acc.user_id}
                                                                    onClick={() => handleRevokeAccess(acc.user_id)}
                                                                    className="p-1.5 rounded-lg text-rose-500 hover:text-rose-700 hover:bg-rose-50 transition-colors cursor-pointer"
                                                                    title="Cabut Akses Pengguna Ini"
                                                                >
                                                                    <TrashIcon className="w-4 h-4" />
                                                                </button>
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            )}
                                        </div>

                                        {/* Keterangan Hak Akses */}
                                        <div className="bg-amber-50/70 border border-amber-200/80 rounded-xl p-3 text-[11px] text-amber-900 space-y-1">
                                            <p className="font-semibold text-amber-950">Panduan Tingkatan Hak Akses:</p>
                                            <p>• <strong>Lihat Saja:</strong> Pengguna hanya bisa membuka folder, melihat berkas, dan mengunduh.</p>
                                            <p>• <strong>Edit & Upload:</strong> Bisa mengunggah berkas baru, membuat subfolder, dan mengubah nama berkas.</p>
                                            <p>• <strong>Akses Penuh:</strong> Setara pemilik (bisa menghapus folder, mengatur hak akses pengguna lain).</p>
                                        </div>
                                    </>
                                ) : null}
                            </Modal.Body>

                            <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end">
                                <Button variant="outline" onPress={() => setAccessModalFolder(null)}>
                                    Selesai
                                </Button>
                            </Modal.Footer>
                        </Modal.Dialog>
                    </Modal.Container>
                </Modal.Backdrop>
            </Modal>

            {/* Modal Preview Berkas */}
            {previewFile && (
                <FilePreviewModal file={previewFile} onClose={() => setPreviewFile(null)} />
            )}
        </AppLayout>
    );
}

function FilePreviewModal({ file, onClose }: { file: FileItem; onClose: () => void }) {
    const { url, name } = file;
    const isImage = /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i.test(url);
    const isVideo = /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url);
    const isPdf = /\.pdf(\?.*)?$/i.test(url);

    const containerRef = useRef<HTMLDivElement>(null);
    const [isFullScreen, setIsFullScreen] = useState(false);

    useEffect(() => {
        const handleFullscreenChange = () => {
            setIsFullScreen(!!document.fullscreenElement);
        };
        document.addEventListener('fullscreenchange', handleFullscreenChange);
        return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
    }, []);

    const toggleFullScreen = () => {
        if (!document.fullscreenElement) {
            if (containerRef.current?.requestFullscreen) {
                containerRef.current.requestFullscreen().catch(() => {
                    setIsFullScreen(true);
                });
            } else {
                setIsFullScreen(true);
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else {
                setIsFullScreen(false);
            }
        }
    };

    const formatDateTime = (dateStr?: string) => {
        if (!dateStr) return '-';
        try {
            const d = new Date(dateStr);
            if (isNaN(d.getTime())) return dateStr;
            return d.toLocaleString('id-ID', {
                dateStyle: 'medium',
                timeStyle: 'short',
            });
        } catch {
            return dateStr;
        }
    };

    return (
        <Modal isOpen onOpenChange={(open) => !open && onClose()}>
            <Modal.Backdrop>
                <Modal.Container>
                    <Modal.Dialog className="max-w-5xl w-full bg-white">
                        <Modal.Header className="flex-row! items-center justify-between pb-3 mb-1 border-b border-gray-100">
                            <div className="flex items-center gap-2.5 min-w-0">
                                <Modal.Icon className="bg-sky-100 text-sky-600 shrink-0">
                                    <EyeIcon className="w-5 h-5" />
                                </Modal.Icon>
                                <div className="min-w-0 flex-1">
                                    <Modal.Heading className="text-base font-bold text-gray-900 truncate" title={name}>
                                        {name || 'Pratinjau Berkas'}
                                    </Modal.Heading>
                                    <p className="text-xs text-gray-500">Pratinjau & Detail Berkas</p>
                                </div>
                            </div>
                        </Modal.Header>
                        <Modal.CloseTrigger />
                        <Modal.Body className="py-3">
                            <div className="grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
                                {/* Kolom Kiri: Pratinjau Media */}
                                <div className="lg:col-span-7 xl:col-span-8 w-full">
                                    <div
                                        ref={containerRef}
                                        className={`relative flex items-center justify-center overflow-hidden rounded-xl border border-gray-200 bg-gray-950 group min-h-[340px] max-h-[68vh] w-full ${
                                            isFullScreen ? 'fixed inset-0 z-50 w-screen h-screen max-h-screen rounded-none border-none bg-black' : ''
                                        }`}
                                    >
                                        {/* Floating Overlay Actions inside preview container */}
                                        <div className="absolute top-3 right-3 z-30 flex items-center gap-1.5 bg-black/60 backdrop-blur-md p-1.5 rounded-xl shadow-lg border border-white/10">
                                            <button
                                                type="button"
                                                onClick={toggleFullScreen}
                                                title={isFullScreen ? "Keluar Layar Penuh" : "Layar Penuh"}
                                                className="p-1.5 text-white/90 hover:text-white hover:bg-white/20 rounded-lg transition-colors cursor-pointer"
                                            >
                                                {isFullScreen ? (
                                                    <ArrowsPointingInIcon className="w-4 h-4" />
                                                ) : (
                                                    <ArrowsPointingOutIcon className="w-4 h-4" />
                                                )}
                                            </button>
                                            <a
                                                href={url}
                                                target="_blank"
                                                rel="noreferrer"
                                                download
                                                title="Unduh Berkas"
                                                className="p-1.5 text-white/90 hover:text-white hover:bg-white/20 rounded-lg transition-colors"
                                            >
                                                <ArrowDownTrayIcon className="w-4 h-4" />
                                            </a>
                                        </div>

                                        {isImage ? (
                                            <img
                                                src={url}
                                                alt={name}
                                                className={isFullScreen ? "max-h-screen max-w-screen object-contain" : "max-h-[64vh] w-full object-contain"}
                                            />
                                        ) : isPdf ? (
                                            <iframe
                                                src={url}
                                                title={name}
                                                className={isFullScreen ? "w-screen h-screen border-none" : "h-[64vh] w-full border-none rounded-lg"}
                                            />
                                        ) : isVideo ? (
                                            <video
                                                src={url}
                                                controls
                                                autoPlay
                                                className={isFullScreen ? "max-h-screen w-full" : "max-h-[64vh] w-full rounded-lg"}
                                            />
                                        ) : (
                                            <div className="flex flex-col items-center gap-2 py-16 text-gray-400">
                                                <DocumentIcon className="w-16 h-16 text-gray-500" />
                                                <span className="text-sm font-medium text-gray-300">Format tidak mendukung pratinjau langsung</span>
                                                <a
                                                    href={url}
                                                    target="_blank"
                                                    rel="noreferrer"
                                                    download
                                                    className="mt-2 inline-flex items-center gap-1.5 px-3.5 py-2 bg-sky-600 text-white text-xs font-semibold rounded-lg hover:bg-sky-700 transition-colors"
                                                    title="Unduh Berkas"
                                                >
                                                    <ArrowDownTrayIcon className="w-4 h-4" />
                                                    <span>Unduh Berkas</span>
                                                </a>
                                            </div>
                                        )}
                                    </div>
                                </div>

                                {/* Kolom Kanan: Detail Informasi */}
                                <div className="lg:col-span-5 xl:col-span-4 flex flex-col justify-between self-stretch gap-4">
                                    <div className="space-y-4">
                                        <div>
                                            <p className="text-[11px] font-bold uppercase tracking-wider text-gray-400 mb-1">
                                                Detail Berkas
                                            </p>
                                            <h3 className="text-sm font-semibold text-gray-900 break-all select-all leading-snug" title={name}>
                                                {name}
                                            </h3>
                                        </div>

                                        <div className="divide-y divide-gray-100 text-xs">
                                            <div className="py-2.5 flex items-center justify-between gap-3">
                                                <span className="text-gray-500 font-medium">Ukuran</span>
                                                <span className="text-gray-900 font-semibold">{formatBytes(file.file_size)}</span>
                                            </div>

                                            <div className="py-2.5 flex items-center justify-between gap-3">
                                                <span className="text-gray-500 font-medium">Format / Tipe</span>
                                                <span className="text-gray-900 font-semibold uppercase">{file.mime_type?.split('/').pop() || name.split('.').pop() || '-'}</span>
                                            </div>

                                            <div className="py-2.5 flex items-center justify-between gap-3">
                                                <span className="text-gray-500 font-medium">Ditambahkan Oleh</span>
                                                <div className="flex items-center gap-1.5 min-w-0">
                                                    <span className="w-5 h-5 rounded-full bg-sky-100 text-sky-700 flex items-center justify-center shrink-0">
                                                        <UserIcon className="w-3 h-3" />
                                                    </span>
                                                    <span className="text-gray-900 font-semibold truncate max-w-[140px]" title={file.user?.email || file.user?.name}>
                                                        {file.user?.name || 'Admin'}
                                                    </span>
                                                </div>
                                            </div>

                                            <div className="py-2.5 flex items-center justify-between gap-3">
                                                <span className="text-gray-500 font-medium">Waktu Unggah</span>
                                                <div className="flex items-center gap-1.5 text-gray-700 font-medium">
                                                    <ClockIcon className="w-3.5 h-3.5 text-gray-400 shrink-0" />
                                                    <span>{formatDateTime(file.created_at)}</span>
                                                </div>
                                            </div>

                                            <div className="py-2.5 flex items-center justify-between gap-3">
                                                <span className="text-gray-500 font-medium">Terakhir Diupdate</span>
                                                <div className="flex items-center gap-1.5 text-gray-700 font-medium">
                                                    <ArrowPathIcon className="w-3.5 h-3.5 text-gray-400 shrink-0" />
                                                    <span>{formatDateTime(file.updated_at || file.created_at)}</span>
                                                </div>
                                            </div>

                                            {(file.kegiatan || file.dokumentasi_key) && (
                                                <div className="py-2.5 flex items-start justify-between gap-3">
                                                    <span className="text-gray-500 font-medium shrink-0 pt-0.5">Kaitan Kegiatan</span>
                                                    <div className="flex flex-wrap gap-1 justify-end">
                                                        {file.kegiatan && (
                                                            <span className="px-2 py-0.5 rounded-md bg-emerald-50 text-emerald-700 border border-emerald-200 text-[11px] font-medium">
                                                                {file.kegiatan.nama || file.kegiatan.nama_kegiatan}
                                                            </span>
                                                        )}
                                                        {file.dokumentasi_key && (
                                                            <span className="px-2 py-0.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-[11px] font-medium">
                                                                {DOK_LABELS[file.dokumentasi_key] || file.dokumentasi_key}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                            )}

                                            {file.share_enabled && (
                                                <div className="py-2.5 flex items-center justify-between gap-3">
                                                    <span className="text-gray-500 font-medium">Status Berbagi</span>
                                                    <span className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200/60">
                                                        <ShareIcon className="w-3 h-3" /> Publik Aktif
                                                    </span>
                                                </div>
                                            )}
                                        </div>
                                    </div>

                                    {/* Action Buttons */}
                                    <div className="flex gap-2 pt-2 border-t border-gray-100">
                                        <a
                                            href={url}
                                            target="_blank"
                                            rel="noreferrer"
                                            download
                                            className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-sky-600 hover:bg-sky-700 text-white text-xs font-semibold rounded-lg transition-colors cursor-pointer shadow-xs"
                                        >
                                            <ArrowDownTrayIcon className="w-4 h-4" /> Unduh Berkas
                                        </a>
                                        <a
                                            href={url}
                                            target="_blank"
                                            rel="noreferrer"
                                            className="inline-flex items-center justify-center gap-1 px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-lg transition-colors cursor-pointer"
                                            title="Buka di tab baru"
                                        >
                                            <ArrowTopRightOnSquareIcon className="w-4 h-4" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </Modal.Body>
                        <Modal.Footer className="border-t border-gray-200 pt-3 flex justify-end">
                            <Button variant="outline" onPress={onClose}>
                                Tutup
                            </Button>
                        </Modal.Footer>
                    </Modal.Dialog>
                </Modal.Container>
            </Modal.Backdrop>
        </Modal>
    );
}