<?php
// =========================================================================
// CYBERFILE MANAGER V9 - SERVER SIDE CORE
// Real File System Access | No Simulation | Single File
// =========================================================================

session_start();
error_reporting(0); // Anti Error Display (Clean UI)
$CONFIG = [
    'password' => 'admin', // GANTI PASSWORD DISINI
    'root' => __DIR__,     // Root direktori (bisa diganti misal: $_SERVER['DOCUMENT_ROOT'])
    'upload_limit' => 100 * 1024 * 1024 // 100MB
];

// --- BACKEND API HANDLER ---

// 1. Auth Check
if (isset($_POST['req']) && $_POST['req'] === 'login') {
    if ($_POST['pass'] === $CONFIG['password']) {
        $_SESSION['cyber_auth'] = true;
        echo json_encode(['status' => true]);
    } else {
        echo json_encode(['status' => false]);
    }
    exit;
}

// 2. Logout
if (isset($_POST['req']) && $_POST['req'] === 'logout') {
    session_destroy();
    echo json_encode(['status' => true]);
    exit;
}

// Security Gate
if (!isset($_SESSION['cyber_auth']) || $_SESSION['cyber_auth'] !== true) {
    // Jika request API tapi belum login
    if(isset($_POST['req']) || isset($_GET['req']) || isset($_GET['dl']) || isset($_GET['raw'])) {
        if(!empty($_POST) || isset($_GET['req'])) { echo json_encode(['error' => 'Unauthorized']); exit; }
    }
} else {
    // --- AUTHORIZED ACTIONS ---
    
    // Helper: Resolve Path
    function get_path($p) {
        global $CONFIG;
        $p = str_replace('..', '', $p); // Basic anti-traversal
        $path = $CONFIG['root'] . ($p ? DIRECTORY_SEPARATOR . $p : '');
        return $path;
    }

    // Helper: Recursive Delete
    function delTree($dir) {
        $files = array_diff(scandir($dir), array('.','..'));
        foreach ($files as $file) {
            (is_dir("$dir/$file")) ? delTree("$dir/$file") : unlink("$dir/$file");
        }
        return rmdir($dir);
    }

    // Action: List Files
    if (isset($_POST['req']) && $_POST['req'] === 'list') {
        $dir = isset($_POST['path']) ? $_POST['path'] : '';
        $target = get_path($dir);
        
        $items = [];
        if (is_dir($target)) {
            $scan = scandir($target);
            foreach ($scan as $f) {
                if ($f === '.' || $f === '..') continue;
                $full = $target . DIRECTORY_SEPARATOR . $f;
                $items[] = [
                    'id' => base64_encode($f), // ID unik sederhana
                    'name' => $f,
                    'type' => is_dir($full) ? 'folder' : 'file',
                    'path' => $dir, // Relative path untuk JS
                    'size' => is_dir($full) ? 'DIR' : round(filesize($full)/1024, 1) . ' KB',
                    'perms' => substr(sprintf('%o', fileperms($full)), -4)
                ];
            }
        }
        echo json_encode($items);
        exit;
    }

    // Action: Read File
    if (isset($_POST['req']) && $_POST['req'] === 'read') {
        $target = get_path($_POST['path']);
        if(is_file($target)) echo file_get_contents($target);
        else echo "Error: File not found or is a directory.";
        exit;
    }

    // Action: Save File
    if (isset($_POST['req']) && $_POST['req'] === 'save') {
        $target = get_path($_POST['path']);
        $content = $_POST['content'];
        if(file_put_contents($target, $content) !== false) echo json_encode(['status'=>true]);
        else echo json_encode(['status'=>false, 'msg'=>'Write permission denied']);
        exit;
    }

    // Action: New Folder
    if (isset($_POST['req']) && $_POST['req'] === 'mkdir') {
        $target = get_path($_POST['path']);
        if(mkdir($target)) echo json_encode(['status'=>true]);
        else echo json_encode(['status'=>false]);
        exit;
    }

    // Action: New File
    if (isset($_POST['req']) && $_POST['req'] === 'mkfile') {
        $target = get_path($_POST['path']);
        if(file_put_contents($target, "") !== false) echo json_encode(['status'=>true]);
        else echo json_encode(['status'=>false]);
        exit;
    }

    // Action: Rename
    if (isset($_POST['req']) && $_POST['req'] === 'rename') {
        $old = get_path($_POST['old']);
        $new = get_path($_POST['new']);
        if(rename($old, $new)) echo json_encode(['status'=>true]);
        else echo json_encode(['status'=>false]);
        exit;
    }

    // Action: Delete
    if (isset($_POST['req']) && $_POST['req'] === 'delete') {
        $target = get_path($_POST['path']);
        $res = is_dir($target) ? delTree($target) : unlink($target);
        echo json_encode(['status'=>$res]);
        exit;
    }

    // Action: Upload
    if (isset($_FILES['file'])) {
        $target_dir = get_path($_POST['path']);
        $target_file = $target_dir . DIRECTORY_SEPARATOR . basename($_FILES["file"]["name"]);
        if(move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
            echo "OK";
        } else {
            echo "FAILED";
        }
        exit;
    }

    // Action: Download
    if (isset($_GET['dl'])) {
        $file = get_path($_GET['dl']);
        if (file_exists($file)) {
            header('Content-Description: File Transfer');
            header('Content-Type: application/octet-stream');
            header('Content-Disposition: attachment; filename="'.basename($file).'"');
            header('Content-Length: ' . filesize($file));
            readfile($file);
            exit;
        }
    }

    // Action: RAW VIEW (Fitur Baru)
    if (isset($_GET['raw'])) {
        $file = get_path($_GET['raw']);
        if (file_exists($file) && !is_dir($file)) {
            header('Content-Type: text/plain');
            readfile($file);
            exit;
        } else {
            echo "File not found or is directory.";
            exit;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>CyberFile V9 - Server Edition</title>
    
    <!-- LIBRARIES -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] },
                    colors: { cyber: { dark: '#0f172a', accent: '#3b82f6' } },
                    animation: { 'fade-in': 'fadeIn 0.3s ease-out', 'slide-up': 'slideUp 0.3s ease-out' },
                    keyframes: {
                        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
                        slideUp: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } }
                    }
                }
            }
        }
    </script>

    <style>
        .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
        .dark .glass { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); }
        .bg-animated { background-color: #020617; background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%); background-attachment: fixed; background-size: cover; }
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
        .loader-line { height: 3px; width: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background: transparent; z-index: 9999; display: none; }
        .loader-line:before { display: block; position: absolute; content: ""; left: -200px; width: 200px; height: 3px; background: #3b82f6; animation: loading 2s linear infinite; }
        @keyframes loading { from {left: -200px; width: 30%;} 50% {width: 30%;} 80% { left: 50%;} to {left: 100%;} }
        .no-scrollbar::-webkit-scrollbar { display: none; }
    </style>
</head>
<body class="bg-gray-100 dark:bg-[#020617] text-slate-800 dark:text-slate-200 h-screen w-screen overflow-hidden font-sans selection:bg-blue-500 selection:text-white">

    <!-- LOGIN UI (Visible if not auth) -->
    <?php if(!isset($_SESSION['cyber_auth'])): ?>
    <div id="loginOverlay" class="fixed inset-0 z-[100] bg-animated flex items-center justify-center p-4">
        <div class="glass w-full max-w-md p-8 rounded-2xl shadow-2xl border border-white/10 animate-fade-in relative overflow-hidden">
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div>
            <div class="text-center mb-8">
                <div class="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.5)]">
                    <i class="fas fa-server text-3xl text-blue-400"></i>
                </div>
                <h1 class="text-2xl font-bold text-white tracking-tight">CyberFile V9</h1>
                <p class="text-slate-400 text-xs mt-1 uppercase tracking-widest">Real Server Access</p>
            </div>
            <form id="loginForm" class="space-y-4">
                <input type="text" value="admin" disabled class="w-full bg-slate-900/50 border border-slate-700 rounded-xl py-3 px-4 text-slate-500 cursor-not-allowed">
                <input type="password" id="password" placeholder="Password (default: admin)" class="w-full bg-slate-900/50 border border-slate-700 rounded-xl py-3 px-4 text-white focus:outline-none focus:border-blue-500 transition-all">
                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3 rounded-xl shadow-lg mt-2">CONNECT TO SERVER</button>
            </form>
            <p id="loginError" class="text-red-400 text-sm text-center mt-4 hidden"><i class="fas fa-exclamation-triangle"></i> Password Salah!</p>
        </div>
    </div>
    <script>
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const pass = document.getElementById('password').value;
            const fd = new FormData(); fd.append('req', 'login'); fd.append('pass', pass);
            const res = await fetch('', {method:'POST', body:fd}).then(r=>r.json());
            if(res.status) location.reload();
            else document.getElementById('loginError').classList.remove('hidden');
        });
    </script>
    </body></html>
    <?php exit; endif; ?>

    <!-- MAIN APP -->
    <div id="app" class="flex h-full w-full">
        <div id="loader" class="loader-line"></div>

        <!-- SIDEBAR -->
        <aside id="sidebar" class="fixed inset-y-0 left-0 z-40 w-72 transform -translate-x-full md:translate-x-0 md:static md:flex flex-col glass border-r border-white/5 transition-transform duration-300 ease-in-out bg-[#0f172a]/95 backdrop-blur-xl">
            <div class="h-16 flex items-center px-6 border-b border-white/5 bg-gradient-to-r from-blue-900/20 to-transparent">
                <i class="fas fa-shield-alt text-blue-400 text-xl mr-3"></i>
                <span class="font-bold text-lg tracking-wide text-white">CYBER<span class="text-blue-500">FILE</span></span>
                <button id="sidebarCloseBtn" class="md:hidden ml-auto text-slate-400 hover:text-white"><i class="fas fa-times"></i></button>
            </div>
            
            <div class="flex-1 overflow-y-auto p-4 space-y-1">
                <div class="px-3 mb-4">
                    <div class="text-[10px] font-bold bg-emerald-900/50 text-emerald-300 py-1 px-2 rounded border border-emerald-700 text-center uppercase tracking-wider animate-pulse">
                        <i class="fas fa-link mr-1"></i> CONNECTED: LIVE SERVER
                    </div>
                </div>

                <div class="text-xs font-bold text-slate-500 uppercase tracking-wider px-3 mb-2">Navigation</div>
                <button onclick="FS.navigate('')" class="w-full flex items-center px-4 py-3 rounded-xl text-sm font-medium transition-all hover:bg-blue-600/10 hover:text-blue-400 text-slate-300 group">
                    <i class="fas fa-hdd w-6 text-slate-500 group-hover:text-blue-400"></i> Root Directory
                </button>

                <div class="text-xs font-bold text-slate-500 uppercase tracking-wider px-3 mb-2 mt-6">Actions</div>
                <button onclick="UI.modal('uploadModal')" class="w-full flex items-center px-4 py-3 rounded-xl text-sm font-medium transition-all hover:bg-emerald-500/10 hover:text-emerald-400 text-slate-300 group">
                    <i class="fas fa-cloud-upload-alt w-6 text-emerald-500/70"></i> Upload File
                </button>
                <button onclick="UI.modal('newFolderModal')" class="w-full flex items-center px-4 py-3 rounded-xl text-sm font-medium transition-all hover:bg-yellow-500/10 hover:text-yellow-400 text-slate-300 group">
                    <i class="fas fa-folder-plus w-6 text-yellow-500/70"></i> New Folder
                </button>
                <button onclick="UI.modal('newFileModal')" class="w-full flex items-center px-4 py-3 rounded-xl text-sm font-medium transition-all hover:bg-purple-500/10 hover:text-purple-400 text-slate-300 group">
                    <i class="fas fa-file-code w-6 text-purple-500/70"></i> New File
                </button>
            </div>
            
            <div class="p-4 border-t border-white/5 bg-black/20 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold shadow-lg">S</div>
                <div class="overflow-hidden">
                    <p class="text-sm font-bold text-white truncate">Server Admin</p>
                    <button onclick="Auth.logout()" class="text-xs text-red-400 hover:text-red-300">Logout Session</button>
                </div>
            </div>
        </aside>

        <!-- CONTENT -->
        <main class="flex-1 flex flex-col h-full overflow-hidden relative bg-animated">
            <div id="sidebarOverlay" class="fixed inset-0 bg-black/80 z-30 hidden backdrop-blur-sm md:hidden"></div>

            <header class="h-16 border-b border-white/5 glass flex items-center justify-between px-4 sticky top-0 z-20">
                <div class="flex items-center gap-3 overflow-hidden">
                    <button id="sidebarToggle" class="md:hidden w-10 h-10 rounded-lg bg-white/5 text-slate-300"><i class="fas fa-bars"></i></button>
                    <nav id="breadcrumbs" class="flex items-center text-sm overflow-x-auto no-scrollbar mask-linear pr-4"></nav>
                </div>
                <div class="flex items-center gap-3 flex-shrink-0">
                    <div class="hidden sm:flex relative">
                        <i class="fas fa-search absolute left-3 top-2.5 text-slate-500 text-xs"></i>
                        <input type="text" id="searchInput" placeholder="Search files..." class="bg-black/20 border border-white/10 rounded-full pl-9 pr-4 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-blue-500 w-48">
                    </div>
                </div>
            </header>

            <div id="fileContainer" class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar">
                <div id="backLink" class="hidden mb-4">
                    <button onclick="FS.goUp()" class="flex items-center gap-2 text-slate-400 hover:text-blue-400 text-sm font-medium"><i class="fas fa-level-up-alt"></i> <span>Up Level</span></button>
                </div>
                <div id="fileGrid" class="grid grid-cols-2 min-[450px]:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4 pb-20"></div>
                <div id="emptyState" class="hidden h-64 flex flex-col items-center justify-center text-slate-500 animate-fade-in">
                    <div class="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center mb-4"><i class="fas fa-folder-open text-3xl opacity-50"></i></div>
                    <p class="text-sm">Folder ini kosong</p>
                </div>
            </div>
        </main>
    </div>

    <!-- TOAST -->
    <div id="toast" class="fixed top-5 right-5 z-[200] glass pl-4 pr-6 py-3 rounded-lg shadow-2xl border-l-4 border-blue-500 flex items-center gap-3 transform translate-x-[150%] transition-transform duration-300">
        <i class="fas fa-check-circle text-blue-400 text-lg"></i>
        <div><h4 class="text-sm font-bold text-white">Success</h4><p id="toastMsg" class="text-xs text-slate-300">Action completed.</p></div>
    </div>

    <!-- MODALS -->
    <div id="modalBackdrop" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden" onclick="UI.closeAll()"></div>

    <!-- Upload -->
    <div id="uploadModal" class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-md glass bg-[#1e293b] rounded-2xl shadow-2xl z-[60] hidden p-6 border border-slate-600/50">
        <h3 class="text-lg font-bold text-white mb-1">Upload to Server</h3>
        <p class="text-xs text-slate-400 mb-4">Path: <span id="uploadTarget">Root</span></p>
        <div class="border-2 border-dashed border-slate-600 rounded-xl p-8 text-center hover:border-blue-500 relative cursor-pointer">
            <input type="file" id="fileInput" multiple class="absolute inset-0 opacity-0 cursor-pointer z-10">
            <i class="fas fa-cloud-arrow-up text-3xl text-slate-500 mb-2"></i>
            <p id="uploadLabel" class="text-sm text-slate-300">Klik atau drop file</p>
        </div>
        <div class="flex justify-end mt-6 gap-3">
            <button onclick="UI.closeAll()" class="px-4 py-2 rounded-lg text-slate-300 hover:bg-slate-700 text-sm">Batal</button>
            <button onclick="FS.upload()" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm">Upload</button>
        </div>
    </div>

    <!-- New Folder -->
    <div id="newFolderModal" class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-sm glass bg-[#1e293b] rounded-2xl z-[60] hidden p-6 border border-slate-600/50">
        <h3 class="text-lg font-bold text-white mb-4">Server Directory</h3>
        <input type="text" id="folderNameInput" placeholder="Folder Name" class="w-full bg-black/30 border border-slate-600 rounded-lg px-4 py-2.5 text-white outline-none mb-4">
        <div class="flex justify-end gap-3">
            <button onclick="UI.closeAll()" class="px-4 py-2 rounded-lg text-slate-300 hover:bg-slate-700 text-sm">Batal</button>
            <button onclick="FS.createFolder()" class="px-4 py-2 bg-yellow-600 text-white rounded-lg text-sm">Buat</button>
        </div>
    </div>

    <!-- New File -->
    <div id="newFileModal" class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-sm glass bg-[#1e293b] rounded-2xl z-[60] hidden p-6 border border-slate-600/50">
        <h3 class="text-lg font-bold text-white mb-4">Create File</h3>
        <input type="text" id="fileNameInput" placeholder="script.php" class="w-full bg-black/30 border border-slate-600 rounded-lg px-4 py-2.5 text-white outline-none mb-4">
        <div class="flex justify-end gap-3">
            <button onclick="UI.closeAll()" class="px-4 py-2 rounded-lg text-slate-300 hover:bg-slate-700 text-sm">Batal</button>
            <button onclick="FS.createFile()" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm">Buat</button>
        </div>
    </div>

    <!-- Context Menu -->
    <div id="contextModal" class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-sm glass bg-[#1e293b] rounded-2xl z-[60] hidden overflow-hidden border border-slate-600/50">
        <div class="p-4 bg-slate-800/50 border-b border-slate-600/50 flex justify-between items-center">
            <h3 id="contextTitle" class="font-bold text-white truncate max-w-[200px]">Filename</h3>
            <button onclick="UI.closeAll()" class="text-slate-400 hover:text-white"><i class="fas fa-times"></i></button>
        </div>
        <div class="p-3 grid grid-cols-2 gap-2">
            <button id="ctxDownload" onclick="FS.download()" class="flex flex-col items-center justify-center p-3 rounded-xl bg-slate-800/50 hover:bg-blue-600/20 hover:text-blue-400 text-slate-300 transition-all">
                <i class="fas fa-download text-xl mb-1"></i> <span class="text-xs">Download</span>
            </button>
            <button id="ctxRaw" onclick="FS.viewRaw()" class="flex flex-col items-center justify-center p-3 rounded-xl bg-slate-800/50 hover:bg-pink-600/20 hover:text-pink-400 text-slate-300 transition-all">
                <i class="fas fa-file-code text-xl mb-1"></i> <span class="text-xs">Raw View</span>
            </button>
            <button onclick="UI.openRename()" class="flex flex-col items-center justify-center p-3 rounded-xl bg-slate-800/50 hover:bg-orange-600/20 hover:text-orange-400 text-slate-300 transition-all">
                <i class="fas fa-edit text-xl mb-1"></i> <span class="text-xs">Rename</span>
            </button>
            <button id="ctxEdit" onclick="UI.openEditor()" class="flex flex-col items-center justify-center p-3 rounded-xl bg-slate-800/50 hover:bg-emerald-600/20 hover:text-emerald-400 text-slate-300 transition-all">
                <i class="fas fa-code text-xl mb-1"></i> <span class="text-xs">Editor</span>
            </button>
            <button onclick="FS.deleteItem()" class="col-span-2 flex items-center justify-center gap-2 p-3 rounded-xl bg-red-500/10 text-red-400 hover:bg-red-600 hover:text-white mt-1">
                <i class="fas fa-trash-alt"></i> <span>Hapus Permanen</span>
            </button>
        </div>
    </div>

    <!-- Rename -->
    <div id="renameModal" class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-sm glass bg-[#1e293b] rounded-2xl z-[70] hidden p-6 border border-slate-600/50">
        <h3 class="text-lg font-bold text-white mb-4">Rename</h3>
        <input type="text" id="renameInput" class="w-full bg-black/30 border border-slate-600 rounded-lg px-4 py-2.5 text-white outline-none mb-4">
        <div class="flex justify-end gap-3">
            <button onclick="document.getElementById('renameModal').classList.add('hidden')" class="px-4 py-2 rounded-lg text-slate-300 hover:bg-slate-700 text-sm">Batal</button>
            <button onclick="FS.rename()" class="px-4 py-2 bg-orange-600 text-white rounded-lg text-sm">Simpan</button>
        </div>
    </div>

    <!-- Editor -->
    <div id="editorModal" class="fixed inset-0 z-[80] bg-[#0f172a] hidden flex flex-col">
        <div class="h-14 bg-[#1e293b] border-b border-slate-700 flex items-center justify-between px-4">
            <div class="flex items-center gap-3">
                <i class="fas fa-code text-emerald-400"></i>
                <span id="editorFilename" class="text-sm font-mono text-slate-200 font-bold">file.php</span>
            </div>
            <div class="flex gap-2">
                <button onclick="document.getElementById('editorModal').classList.add('hidden')" class="px-3 py-1.5 text-xs font-bold text-slate-400 bg-slate-800 rounded-lg">CLOSE</button>
                <button onclick="FS.saveContent()" class="px-4 py-1.5 text-xs font-bold text-white bg-emerald-600 rounded-lg"><i class="fas fa-save mr-1"></i> SAVE</button>
            </div>
        </div>
        <div class="flex-1 relative bg-[#0b1120]">
            <textarea id="editorContent" class="w-full h-full bg-transparent text-slate-300 p-4 font-mono text-sm outline-none resize-none" spellcheck="false"></textarea>
        </div>
    </div>

    <script>
        // --- AUTH & CORE ---
        const Auth = {
            logout: async () => {
                await fetch('', { method: 'POST', body: new URLSearchParams({req: 'logout'}) });
                location.reload();
            }
        };

        // --- REAL FILE SYSTEM ENGINE (AJAX) ---
        const FS = {
            currentPath: '',
            selectedItem: null,
            
            init: () => { FS.render(); },

            // Helper for AJAX
            api: async (data) => {
                const fd = new FormData();
                for(let k in data) fd.append(k, data[k]);
                try {
                    const res = await fetch('', { method: 'POST', body: fd });
                    return await res.json();
                } catch(e) { console.error(e); return {error: true}; }
            },

            render: async () => {
                const grid = document.getElementById('fileGrid');
                const loader = document.getElementById('loader');
                loader.style.display = 'block';
                
                // Breadcrumbs
                const bc = document.getElementById('breadcrumbs');
                let htmlPath = `<button onclick="FS.navigate('')" class="hover:text-blue-400 font-bold text-slate-400 px-1"><i class="fas fa-hdd"></i></button>`;
                if(FS.currentPath) {
                    const parts = FS.currentPath.split('/');
                    let build = '';
                    parts.forEach(p => {
                        build += (build ? '/' : '') + p;
                        htmlPath += `<span class="text-slate-600 mx-1">/</span><button onclick="FS.navigate('${build}')" class="hover:text-blue-400 text-slate-300 font-medium whitespace-nowrap">${p}</button>`;
                    });
                }
                bc.innerHTML = htmlPath;
                document.getElementById('backLink').className = FS.currentPath ? 'block mb-4' : 'hidden';

                // Fetch Data from PHP
                const items = await FS.api({ req: 'list', path: FS.currentPath });
                grid.innerHTML = '';
                loader.style.display = 'none';

                if(!items || items.length === 0) {
                    document.getElementById('emptyState').classList.remove('hidden');
                } else {
                    document.getElementById('emptyState').classList.add('hidden');
                    items.forEach(item => {
                        const div = document.createElement('div');
                        div.className = "group relative bg-[#1e293b]/50 backdrop-blur-sm border border-slate-700/50 hover:border-blue-500/50 hover:bg-[#1e293b] rounded-xl p-4 flex flex-col items-center gap-3 cursor-pointer transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/10 active:scale-95 animate-fade-in select-none";
                        
                        let icon = '';
                        if(item.type === 'folder') {
                            icon = `<i class="fas fa-folder text-4xl text-yellow-500 drop-shadow-lg group-hover:scale-110 transition-transform"></i>`;
                            div.onclick = () => FS.navigate(FS.currentPath ? FS.currentPath + '/' + item.name : item.name);
                        } else {
                            const ext = item.name.split('.').pop().toLowerCase();
                            let color = 'text-slate-400'; let ico = 'fa-file';
                            if(['html','php','js','css'].includes(ext)) { color = 'text-blue-400'; ico = 'fa-file-code'; }
                            else if(['jpg','png','gif'].includes(ext)) { color = 'text-purple-400'; ico = 'fa-file-image'; }
                            else if(['zip','rar'].includes(ext)) { color = 'text-yellow-600'; ico = 'fa-file-zipper'; }
                            icon = `<i class="fas ${ico} text-4xl ${color} drop-shadow-lg group-hover:scale-110 transition-transform"></i>`;
                        }

                        div.innerHTML = `${icon}<div class="w-full text-center"><p class="text-xs font-medium text-slate-200 truncate px-1">${item.name}</p><p class="text-[10px] text-slate-500">${item.size}</p></div>
                        <button onclick="event.stopPropagation(); UI.openContext('${item.id}', '${item.name}', '${item.type}')" class="absolute top-2 right-2 text-slate-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity p-1"><i class="fas fa-ellipsis-v"></i></button>`;
                        
                        // Mobile Long Press
                        let pressTimer;
                        div.addEventListener('touchstart', () => { pressTimer = setTimeout(() => UI.openContext(item.id, item.name, item.type), 500); });
                        div.addEventListener('touchend', () => clearTimeout(pressTimer));

                        grid.appendChild(div);
                    });
                }
            },

            navigate: (path) => {
                FS.currentPath = path;
                FS.render();
            },

            goUp: () => {
                const parts = FS.currentPath.split('/');
                parts.pop();
                FS.navigate(parts.join('/'));
            },

            createFolder: async () => {
                const name = document.getElementById('folderNameInput').value;
                if(!name) return;
                const path = FS.currentPath ? FS.currentPath + '/' + name : name;
                await FS.api({ req: 'mkdir', path: path });
                UI.closeAll(); FS.render();
            },

            createFile: async () => {
                const name = document.getElementById('fileNameInput').value;
                if(!name) return;
                const path = FS.currentPath ? FS.currentPath + '/' + name : name;
                await FS.api({ req: 'mkfile', path: path });
                UI.closeAll(); FS.render();
            },

            rename: async () => {
                const newName = document.getElementById('renameInput').value;
                if(!newName || !FS.selectedItem) return;
                const oldPath = FS.currentPath ? FS.currentPath + '/' + FS.selectedItem.name : FS.selectedItem.name;
                const newPath = FS.currentPath ? FS.currentPath + '/' + newName : newName;
                await FS.api({ req: 'rename', old: oldPath, new: newPath });
                UI.closeAll(); FS.render();
            },

            deleteItem: async () => {
                if(!FS.selectedItem) return;
                if(confirm('Hapus ' + FS.selectedItem.name + ' permanen?')) {
                    const path = FS.currentPath ? FS.currentPath + '/' + FS.selectedItem.name : FS.selectedItem.name;
                    await FS.api({ req: 'delete', path: path });
                    UI.closeAll(); FS.render(); UI.toast('Item dihapus');
                }
            },

            upload: async () => {
                const files = document.getElementById('fileInput').files;
                UI.closeAll(); document.getElementById('loader').style.display = 'block';
                
                for (let file of files) {
                    const fd = new FormData();
                    fd.append('file', file);
                    fd.append('path', FS.currentPath);
                    await fetch('', { method: 'POST', body: fd });
                }
                FS.render(); document.getElementById('loader').style.display = 'none';
            },

            // --- RAW VIEW & EDITOR ---
            viewRaw: () => {
                if(!FS.selectedItem) return;
                const path = FS.currentPath ? FS.currentPath + '/' + FS.selectedItem.name : FS.selectedItem.name;
                window.open('?raw=' + encodeURIComponent(path), '_blank');
                UI.closeAll();
            },

            download: () => {
                if(!FS.selectedItem) return;
                const path = FS.currentPath ? FS.currentPath + '/' + FS.selectedItem.name : FS.selectedItem.name;
                window.location.href = '?dl=' + encodeURIComponent(path);
                UI.closeAll();
            },

            openEditor: async () => {
                if(!FS.selectedItem) return;
                const path = FS.currentPath ? FS.currentPath + '/' + FS.selectedItem.name : FS.selectedItem.name;
                document.getElementById('editorModal').classList.remove('hidden');
                document.getElementById('editorFilename').innerText = FS.selectedItem.name;
                
                const content = await fetch('', { method: 'POST', body: new URLSearchParams({req: 'read', path: path}) }).then(r=>r.text());
                document.getElementById('editorContent').value = content;
                UI.closeAll();
            },

            saveContent: async () => {
                const content = document.getElementById('editorContent').value;
                const path = FS.currentPath ? FS.currentPath + '/' + FS.selectedItem.name : FS.selectedItem.name;
                await FS.api({ req: 'save', path: path, content: content });
                UI.toast('Saved to Server!');
            }
        };

        const UI = {
            modal: (id) => { document.getElementById('modalBackdrop').classList.remove('hidden'); document.getElementById(id).classList.remove('hidden'); },
            closeAll: () => { document.getElementById('modalBackdrop').classList.add('hidden'); document.querySelectorAll('[id$="Modal"]').forEach(el => el.classList.add('hidden')); },
            openContext: (id, name, type) => {
                FS.selectedItem = {id, name, type};
                document.getElementById('contextTitle').innerText = name;
                
                const isFolder = type === 'folder';
                ['ctxEdit','ctxDownload','ctxRaw'].forEach(id => {
                    const el = document.getElementById(id);
                    if(isFolder) el.classList.add('opacity-50','pointer-events-none');
                    else el.classList.remove('opacity-50','pointer-events-none');
                });
                UI.modal('contextModal');
            },
            openRename: () => { document.getElementById('contextModal').classList.add('hidden'); document.getElementById('renameInput').value = FS.selectedItem.name; UI.modal('renameModal'); },
            openEditor: () => { FS.openEditor(); },
            toast: (msg, type='success') => {
                const el = document.getElementById('toast');
                document.getElementById('toastMsg').innerText = msg;
                el.className = `fixed top-5 right-5 z-[200] glass pl-4 pr-6 py-3 rounded-lg shadow-2xl border-l-4 flex items-center gap-3 transform transition-transform duration-300 ${type==='error'?'border-red-500':'border-blue-500'}`;
                el.classList.remove('translate-x-[150%]'); setTimeout(() => el.classList.add('translate-x-[150%]'), 3000);
            }
        };

        // --- EVENTS ---
        document.getElementById('fileInput').addEventListener('change', function() { document.getElementById('uploadLabel').innerText = `${this.files.length} file dipilih`; });
        document.addEventListener('keydown', (e) => { if((e.ctrlKey||e.metaKey) && e.key === 's') { e.preventDefault(); if(!document.getElementById('editorModal').classList.contains('hidden')) FS.saveContent(); }});
        
        const sidebar = document.getElementById('sidebar'); const overlay = document.getElementById('sidebarOverlay');
        const toggleSidebar = () => { sidebar.classList.toggle('-translate-x-full'); overlay.classList.toggle('hidden'); };
        document.getElementById('sidebarToggle').onclick = toggleSidebar; document.getElementById('sidebarCloseBtn').onclick = toggleSidebar; overlay.onclick = toggleSidebar;
        
        let touchStart = 0;
        document.addEventListener('touchstart', e => touchStart = e.changedTouches[0].screenX);
        document.addEventListener('touchend', e => { if(touchStart < 30 && e.changedTouches[0].screenX > 80) toggleSidebar(); if(!sidebar.classList.contains('-translate-x-full') && touchStart > e.changedTouches[0].screenX + 50) toggleSidebar(); });

        // Start
        FS.init();
    </script>
</body>
</html>