<?php
// ==========================================
// BACKEND PHP API: Directory Scanner & Global Search
// ==========================================

// 1. GLOBAL SEARCH ENDPOINT
if (isset($_GET['api']) && $_GET['api'] === 'search') {
    header('Content-Type: application/json');
    
    $baseDir = __DIR__ . DIRECTORY_SEPARATOR . 'drawing';
    $query = isset($_GET['q']) ? strtolower($_GET['q']) : '';
    
    if (!file_exists($baseDir)) {
        mkdir($baseDir, 0755, true);
    }

    $items = [];
    $realBaseDir = realpath($baseDir);

    if ($query !== '' && $realBaseDir) {
        // Recursive search through all subdirectories
        $iterator = new RecursiveIteratorIterator(
            new RecursiveDirectoryIterator($realBaseDir, RecursiveDirectoryIterator::SKIP_DOTS),
            RecursiveIteratorIterator::SELF_FIRST
        );
        
        foreach ($iterator as $file) {
            // Only match PDF files for global search
            if ($file->isFile() && strtolower($file->getExtension()) === 'pdf') {
                $filename = $file->getFilename();
                if (strpos(strtolower($filename), $query) !== false) {
                    $filePath = $file->getPathname();
                    $relativePath = ltrim(str_replace($realBaseDir, '', $filePath), DIRECTORY_SEPARATOR);
                    $relativePath = str_replace('\\', '/', $relativePath); // Normalize slashes
                    
                    $folderPath = dirname($relativePath);
                    if ($folderPath === '.') $folderPath = 'Root Directory';
                    
                    $items[] = [
                        'name' => $filename,
                        'path' => $relativePath,
                        'url'  => 'drawing/' . str_replace('#', '%23', $relativePath),
                        'type' => 'file',
                        'folder' => $folderPath,
                        'size' => @filesize($filePath) ?: 0,
                        'date' => @filemtime($filePath) ?: 0
                    ];
                }
            }
        }
    }
    
    // Default Sort alphabetically
    usort($items, function($a, $b) {
        return strcasecmp($a['name'], $b['name']);
    });

    echo json_encode([
        'success' => true, 
        'items' => $items, 
        'currentPath' => 'Search Results'
    ]);
    exit;
}

// 2. DIRECTORY LISTING ENDPOINT
if (isset($_GET['api']) && $_GET['api'] === 'list') {
    header('Content-Type: application/json');
    
    // Define the base directory for drawings
    $baseDir = __DIR__ . DIRECTORY_SEPARATOR . 'drawing';
    
    // Auto-create the drawing folder if it doesn't exist
    if (!file_exists($baseDir)) {
        mkdir($baseDir, 0755, true);
    }

    $requestPath = isset($_GET['path']) ? $_GET['path'] : '';
    // Security: Prevent directory traversal attacks
    $requestPath = str_replace(['../', '..\\'], '', $requestPath); 
    
    $targetDir = realpath($baseDir . DIRECTORY_SEPARATOR . $requestPath);
    $realBaseDir = realpath($baseDir);

    // Security: Ensure target directory is strictly inside the base directory
    if ($targetDir === false || strpos($targetDir, $realBaseDir) !== 0 || !is_dir($targetDir)) {
        echo json_encode(['success' => false, 'error' => 'Invalid directory path.']);
        exit;
    }

    $items = [];
    $files = scandir($targetDir);
    
    foreach ($files as $file) {
        if ($file === '.' || $file === '..') continue;
        
        $filePath = $targetDir . DIRECTORY_SEPARATOR . $file;
        $relativePath = ltrim(str_replace($realBaseDir, '', $filePath), DIRECTORY_SEPARATOR);
        $relativePath = str_replace('\\', '/', $relativePath); // Normalize slashes for web
        
        if (is_dir($filePath)) {
            $items[] = [
                'name' => $file,
                'path' => $relativePath . '/',
                'type' => 'folder',
                'size' => 0,
                'date' => @filemtime($filePath) ?: 0
            ];
        } else if (strtolower(pathinfo($file, PATHINFO_EXTENSION)) === 'pdf') {
            $items[] = [
                'name' => $file,
                'path' => $relativePath,
                'url'  => 'drawing/' . str_replace('#', '%23', $relativePath), // Encode # for URL
                'type' => 'file',
                'size' => @filesize($filePath) ?: 0,
                'date' => @filemtime($filePath) ?: 0
            ];
        }
    }
    
    // Sort array: Folders first, then alphabetically (Default)
    usort($items, function($a, $b) {
        if ($a['type'] === $b['type']) return strcasecmp($a['name'], $b['name']);
        return $a['type'] === 'folder' ? -1 : 1;
    });

    echo json_encode([
        'success' => true, 
        'items' => $items, 
        // Return cleaned current path for breadcrumbs
        'currentPath' => str_replace('\\', '/', ltrim(str_replace($realBaseDir, '', $targetDir), DIRECTORY_SEPARATOR))
    ]);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Engineering Drawings Vault</title>
    
    <!-- Tailwind CSS for Styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        cad: {
                            900: '#0f172a', // Deep slate
                            800: '#1e293b', // Sidebar slate
                            700: '#334155', // Hover states
                            accent: '#3b82f6' // Blue accent
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'sans-serif'],
                        mono: ['JetBrains Mono', 'Menlo', 'monospace']
                    }
                }
            }
        }
    </script>

    <!-- Phosphor Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>

    <style>
        /* Custom Scrollbar for a sleek look */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        
        /* Smooth transitions */
        .transition-sidebar {
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Prevent text selection on UI elements */
        .no-select {
            user-select: none;
            -webkit-user-select: none;
        }

        /* Hide iframe default white background while loading */
        iframe {
            background-color: transparent;
            color-scheme: dark;
        }
        
        /* Utility for line clamping long filenames */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;  
            overflow: hidden;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-cad-900 text-gray-900 dark:text-gray-100 h-screen w-screen overflow-hidden flex font-sans transition-colors duration-200">

    <!-- Sidebar Overlay for Mobile -->
    <div id="mobileOverlay" class="fixed inset-0 bg-black/50 z-20 hidden lg:hidden" onclick="toggleSidebar()"></div>

    <!-- Sidebar (File List) -->
    <aside id="sidebar" class="fixed lg:static inset-y-0 left-0 z-30 w-80 bg-white dark:bg-cad-800 border-r border-gray-200 dark:border-gray-700 flex flex-col transition-sidebar transform -translate-x-full lg:translate-x-0">
        
        <!-- Sidebar Header -->
        <div class="h-16 flex items-center px-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-cad-900/50">
            <i class="ph-fill ph-compass-tool text-blue-500 text-2xl mr-3"></i>
            <h1 class="text-lg font-bold tracking-wide no-select truncate">Drawing Vault</h1>
            <!-- Close button (Mobile only) -->
            <button onclick="toggleSidebar()" class="ml-auto p-1 lg:hidden text-gray-500 hover:text-gray-800 dark:hover:text-white rounded-md">
                <i class="ph ph-x text-xl"></i>
            </button>
        </div>

        <!-- Search & Filters -->
        <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex flex-col gap-3">
            <div class="relative">
                <i class="ph ph-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                <input type="text" id="searchInput" placeholder="Search drawings globally..." 
                       class="w-full bg-gray-100 dark:bg-cad-900 border border-transparent dark:border-gray-700 rounded-lg pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-gray-800 dark:text-gray-200 placeholder-gray-400">
            </div>
            
            <div class="flex justify-between items-center text-sm gap-2">
                <select id="sortSelect" onchange="applySortingAndRender()" class="bg-gray-100 dark:bg-cad-900 border border-transparent dark:border-gray-700 rounded-md px-2 py-1.5 text-xs text-gray-600 dark:text-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer flex-1">
                    <option value="name-asc">Name (A-Z)</option>
                    <option value="name-desc">Name (Z-A)</option>
                    <option value="date-desc">Newest First</option>
                    <option value="date-asc">Oldest First</option>
                    <option value="size-desc">Largest Size</option>
                </select>
                
                <button onclick="refreshCurrentView()" class="flex items-center hover:text-blue-500 transition-colors bg-gray-100 dark:bg-cad-900 rounded-md px-2 py-1.5 text-xs text-gray-600 dark:text-gray-300" title="Rescan folder">
                    <i class="ph ph-arrows-clockwise mr-1"></i> Refresh
                </button>
            </div>
            
            <div class="text-xs text-gray-500 dark:text-gray-400 font-medium px-1 no-select">
                <span id="fileCount">0 files detected</span>
            </div>
        </div>

        <!-- Breadcrumbs Navigation -->
        <div id="breadcrumbContainer" class="px-4 py-2 bg-gray-50 dark:bg-cad-900/40 border-b border-gray-200 dark:border-gray-700 flex items-center overflow-x-auto whitespace-nowrap text-sm hidden no-select" style="scrollbar-width: none;">
            <!-- Populated by JS -->
        </div>

        <!-- File List Container -->
        <div class="flex-1 overflow-y-auto p-2" id="fileListContainer">
            <ul id="fileList" class="space-y-1">
                <!-- Javascript will populate this -->
            </ul>
            
            <!-- Loading State -->
            <div id="loadingState" class="hidden flex flex-col items-center justify-center h-40 text-gray-400">
                <i class="ph ph-spinner animate-spin text-3xl mb-2 text-blue-500"></i>
                <span class="text-sm">Scanning folder...</span>
            </div>

            <!-- Empty State -->
            <div id="emptyState" class="hidden flex flex-col items-center justify-center text-center p-6 h-64 text-gray-400">
                <i class="ph ph-folder-open text-4xl mb-3 opacity-50"></i>
                <p class="text-sm mb-4">No PDF drawings found in this folder.</p>
                <button onclick="showSetupModal()" class="px-4 py-2 bg-blue-500/10 text-blue-500 hover:bg-blue-500 hover:text-white border border-blue-500/20 rounded-lg text-sm font-medium transition-all">
                    Show Server Guide
                </button>
            </div>
        </div>

        <!-- Sidebar Footer -->
        <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-400 flex justify-between items-center">
            <span>PHP API Connected</span>
            <div class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></div>
        </div>
    </aside>

    <!-- Main Content Area -->
    <main class="flex-1 flex flex-col min-w-0 relative">
        
        <!-- Top Toolbar -->
        <header class="h-16 bg-white dark:bg-cad-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4 z-10 shadow-sm">
            
            <div class="flex items-center gap-3 overflow-hidden">
                <button onclick="toggleSidebar()" class="p-2 -ml-2 text-gray-500 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-cad-700 rounded-lg transition-colors focus:outline-none">
                    <i class="ph ph-list text-xl"></i>
                </button>
                
                <!-- Current File Info -->
                <div class="flex items-center gap-2 min-w-0">
                    <div id="fileIconBadge" class="hidden w-8 h-8 rounded bg-red-500/10 text-red-500 flex items-center justify-center flex-shrink-0">
                        <i class="ph-fill ph-file-pdf text-lg"></i>
                    </div>
                    <div class="truncate">
                        <h2 id="currentFileName" class="text-sm lg:text-base font-semibold text-gray-800 dark:text-gray-100 truncate no-select">Select a drawing to view</h2>
                        <p id="currentFileStatus" class="text-xs text-gray-500 dark:text-gray-400 hidden lg:block">Ready</p>
                    </div>
                </div>
            </div>

            <!-- Right Actions -->
            <div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
                <button onclick="copyShareLink()" id="shareBtn" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-cad-700 rounded-lg transition-colors hidden sm:block relative group" title="Copy Link to Drawing">
                    <i class="ph ph-link text-xl"></i>
                    <span id="shareTooltip" class="absolute top-10 right-0 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity pointer-events-none whitespace-nowrap">Link Copied!</span>
                </button>
                <div class="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1"></div>
                <button onclick="showSetupModal()" class="p-2 text-gray-500 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-cad-700 rounded-lg transition-colors" title="Server Setup Instructions">
                    <i class="ph ph-info text-xl"></i>
                </button>
                <button onclick="toggleTheme()" class="p-2 text-gray-500 hover:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-cad-700 rounded-lg transition-colors" title="Toggle Light/Dark Mode">
                    <i id="themeIcon" class="ph-fill ph-moon text-xl"></i>
                </button>
                <!-- Fullscreen button -->
                <button onclick="toggleFullScreen()" class="p-2 text-gray-500 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-cad-700 rounded-lg transition-colors hidden sm:block" title="Full Screen">
                    <i id="fsIcon" class="ph ph-corners-out text-xl"></i>
                </button>
            </div>
        </header>

        <!-- PDF Viewer Container -->
        <div class="flex-1 bg-gray-200 dark:bg-cad-900 p-2 lg:p-4 overflow-hidden relative">
            
            <!-- Default Placeholder -->
            <div id="viewerPlaceholder" class="absolute inset-4 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-xl flex flex-col items-center justify-center text-gray-400 bg-white/50 dark:bg-cad-800/50 backdrop-blur-sm z-10">
                <i class="ph-fill ph-blueprint text-6xl mb-4 text-gray-300 dark:text-gray-600"></i>
                <h3 class="text-lg font-medium text-gray-500 dark:text-gray-300 mb-1">No Drawing Selected</h3>
                <p class="text-sm text-center px-4 max-w-md">Select a PDF file from the sidebar to view it here. The viewer prevents direct downloading via standard UI elements.</p>
            </div>

            <!-- The Iframe that holds the PDF -->
            <div class="w-full h-full rounded-xl overflow-hidden shadow-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-white relative z-0">
                <!-- Using object/iframe. #toolbar=0 hides the download/print bar in most modern browsers to prevent easy downloading -->
                <iframe id="pdfViewer" class="w-full h-full border-none hidden" src=""></iframe>
                
                <!-- Loading overlay for iframe -->
                <div id="pdfLoading" class="absolute inset-0 bg-white dark:bg-cad-800 flex flex-col items-center justify-center hidden z-20">
                    <div class="relative w-16 h-16 mb-4">
                        <div class="absolute inset-0 border-4 border-blue-200 rounded-full"></div>
                        <div class="absolute inset-0 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
                    </div>
                    <span class="text-gray-600 dark:text-gray-300 font-medium">Rendering Drawing...</span>
                </div>
            </div>
        </div>
    </main>

    <!-- Setup Modal -->
    <div id="setupModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
        <div class="bg-white dark:bg-cad-800 w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden transform scale-95 transition-transform duration-300" id="setupModalContent">
            
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center bg-gray-50 dark:bg-cad-900/50">
                <h3 class="text-xl font-bold flex items-center gap-2">
                    <i class="ph-fill ph-wrench text-blue-500"></i> PHP Server Configuration
                </h3>
                <button onclick="closeSetupModal()" class="text-gray-400 hover:text-gray-700 dark:hover:text-white transition-colors">
                    <i class="ph ph-x text-2xl"></i>
                </button>
            </div>
            
            <div class="p-6 overflow-y-auto max-h-[70vh] text-sm text-gray-700 dark:text-gray-300 space-y-4">
                <div class="p-4 bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-800 rounded-lg flex gap-3 text-green-800 dark:text-green-200">
                    <i class="ph-fill ph-check-circle text-2xl flex-shrink-0"></i>
                    <p>This application now uses a robust PHP backend. It completely bypasses HTML limitations and directory index blocking.</p>
                </div>

                <ol class="list-decimal list-inside space-y-4 pl-2 mt-4">
                    <li class="font-semibold text-gray-900 dark:text-gray-100">
                        Rename the File
                        <p class="font-normal text-gray-600 dark:text-gray-400 mt-1 pl-5">Ensure this file is saved and uploaded to your cPanel specifically as <code class="bg-gray-100 dark:bg-cad-900 px-1 py-0.5 rounded text-blue-500 font-mono">index.php</code> (not .html).</p>
                    </li>
                    <li class="font-semibold text-gray-900 dark:text-gray-100">
                        The 'drawing' Folder
                        <p class="font-normal text-gray-600 dark:text-gray-400 mt-1 pl-5">The PHP script will <strong>automatically create</strong> the <code class="bg-gray-100 dark:bg-cad-900 px-1 py-0.5 rounded text-blue-500 font-mono">drawing</code> folder next to it if it doesn't exist. You don't need any special .htaccess file anymore.</p>
                    </li>
                    <li class="font-semibold text-gray-900 dark:text-gray-100">
                        Upload your PDFs
                        <p class="font-normal text-gray-600 dark:text-gray-400 mt-1 pl-5">Simply drag and drop your folders and PDF files into the newly created <code class="bg-gray-100 dark:bg-cad-900 px-1 py-0.5 rounded text-blue-500 font-mono">drawing</code> folder on your server. Click the refresh button in the sidebar to view them.</p>
                    </li>
                </ol>

                <div class="mt-6 p-4 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg">
                    <h4 class="font-semibold mb-2 flex items-center gap-2"><i class="ph-fill ph-flask text-yellow-500"></i> Local Testing / Demo Mode</h4>
                    <p class="text-xs text-gray-500 dark:text-gray-400">If you double-click this file directly on your computer without a PHP server (like XAMPP or cPanel), the script cannot run. It will fall back to Demo mode to display the UI.</p>
                </div>
            </div>

            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-cad-900/50 flex justify-end">
                <button onclick="closeSetupModal()" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors shadow-lg shadow-blue-500/20">
                    Understood
                </button>
            </div>
        </div>
    </div>

    <!-- Application Logic -->
    <script>
        // State
        let allItems = []; 
        let currentPath = ''; // Root path is empty string
        let currentFileUrl = null;

        // DOM Elements
        const fileListEl = document.getElementById('fileList');
        const searchInput = document.getElementById('searchInput');
        const sortSelect = document.getElementById('sortSelect');
        const fileCountEl = document.getElementById('fileCount');
        const breadcrumbContainer = document.getElementById('breadcrumbContainer');
        const loadingState = document.getElementById('loadingState');
        const emptyState = document.getElementById('emptyState');
        const pdfViewer = document.getElementById('pdfViewer');
        const viewerPlaceholder = document.getElementById('viewerPlaceholder');
        const pdfLoading = document.getElementById('pdfLoading');
        const currentFileName = document.getElementById('currentFileName');
        const currentFileStatus = document.getElementById('currentFileStatus');
        const fileIconBadge = document.getElementById('fileIconBadge');
        const sidebar = document.getElementById('sidebar');
        const mobileOverlay = document.getElementById('mobileOverlay');

        // Initialize App
        document.addEventListener('DOMContentLoaded', () => {
            initTheme();
            scanDirectory(); // Initial fetch
            
            // Search listener with Debounce
            let searchTimeout;
            searchInput.addEventListener('input', (e) => {
                const query = e.target.value.trim();
                clearTimeout(searchTimeout);
                
                if (query.length > 0) {
                    searchTimeout = setTimeout(() => {
                        performGlobalSearch(query);
                    }, 300); // 300ms delay to prevent spamming the server
                } else {
                    // Return to normal folder browsing mode
                    scanDirectory(currentPath);
                }
            });
        });
        
        function refreshCurrentView() {
            const query = searchInput.value.trim();
            if (query.length > 0) {
                performGlobalSearch(query);
            } else {
                scanDirectory(currentPath);
            }
        }

        // Utils: Formatting
        function formatBytes(bytes, decimals = 2) {
            if (!+bytes) return '0 Bytes';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
        }

        function formatDate(timestamp) {
            if (!timestamp) return '';
            const date = new Date(timestamp * 1000); // PHP timestamp is in seconds
            return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
        }

        // ==========================================
        // 1. GLOBAL SEARCH LOGIC (Backend Recursive Search)
        // ==========================================
        async function performGlobalSearch(query) {
            showLoading(true);
            try {
                const response = await fetch(`?api=search&q=${encodeURIComponent(query)}`, { cache: "no-store" });
                
                if (!response.headers.get("content-type")?.includes("application/json")) {
                    throw new Error("Server did not return JSON. PHP is likely not processing the file.");
                }

                const data = await response.json();
                
                if (!data.success) {
                    throw new Error(data.error || "Server backend error");
                }

                allItems = data.items;
                showLoading(false);
                
                if (allItems.length === 0) {
                    emptyState.classList.remove('hidden');
                    emptyState.innerHTML = `<i class="ph ph-magnifying-glass text-4xl mb-3 opacity-50"></i><p class="text-sm mb-4">No drawings found matching "<span class="text-blue-500">${query}</span>".</p>`;
                    fileListEl.innerHTML = '';
                    fileCountEl.textContent = '0 files found';
                    breadcrumbContainer.classList.add('hidden');
                } else {
                    emptyState.classList.add('hidden');
                    applySortingAndRender(true); // true = isGlobal mode
                }

            } catch (error) {
                console.warn('Backend search failed.', error);
                showLoading(false);
                applySortingAndRender(false);
            }
        }

        // ==========================================
        // 2. DIRECTORY FETCHING LOGIC (Folder by Folder)
        // ==========================================
        async function scanDirectory(path = '') {
            currentPath = path;
            showLoading(true);
            try {
                // Fetch from the embedded PHP API endpoint
                const response = await fetch(`?api=list&path=${encodeURIComponent(path)}`, { cache: "no-store" });
                
                // If the response isn't JSON, it means PHP isn't running (e.g. opened locally)
                if (!response.headers.get("content-type")?.includes("application/json")) {
                    throw new Error("Server did not return JSON. PHP is likely not processing the file.");
                }

                const data = await response.json();
                
                if (!data.success) {
                    throw new Error(data.error || "Server backend error");
                }

                allItems = data.items;
                currentPath = data.currentPath || '';
                
                showLoading(false);
                
                if (allItems.length === 0) {
                    emptyState.classList.remove('hidden');
                    // Reset empty state HTML format
                    emptyState.innerHTML = `<i class="ph ph-folder-open text-4xl mb-3 opacity-50"></i>
                        <p class="text-sm mb-4">No PDF drawings found in this folder.</p>
                        <button onclick="showSetupModal()" class="px-4 py-2 bg-blue-500/10 text-blue-500 hover:bg-blue-500 hover:text-white border border-blue-500/20 rounded-lg text-sm font-medium transition-all">
                            Show Server Guide
                        </button>`;
                    fileListEl.innerHTML = '';
                    fileCountEl.textContent = '0 files detected';
                    renderBreadcrumbs();
                } else {
                    emptyState.classList.add('hidden');
                    applySortingAndRender(false);
                }

            } catch (error) {
                console.warn('Backend fetch failed. Activating demo mode.', error);
                showLoading(false);
                if (path === '') activateDemoMode();
            }
        }

        // Demo mode for local testing without PHP
        function activateDemoMode() {
            if (currentPath === '') {
                allItems = [
                    { name: "01_Architectural", path: "01_Architectural/", type: "folder", size: 0, date: 1698240000 },
                    { name: "02_Electrical", path: "02_Electrical/", type: "folder", size: 0, date: 1698245000 },
                    { name: "Floor_Plan_Level_1_Final_Revised_V2_Approved.pdf", path: "Floor_Plan.pdf", url: "#demo", type: "file", size: 2450000, date: 1698300000 }
                ];
            } else {
                allItems = [
                    { name: "Electrical_Schematic_A4_With_Long_Name_Details.pdf", path: "Elec.pdf", url: "#demo", type: "file", size: 1200000, date: 1698200000 }
                ];
            }
            applySortingAndRender(false);
            if(!sessionStorage.getItem('setupModalShown')) {
                setTimeout(showSetupModal, 1000);
                sessionStorage.setItem('setupModalShown', 'true');
            }
        }

        function showLoading(isLoading) {
            if (isLoading) {
                fileListEl.innerHTML = '';
                loadingState.classList.remove('hidden');
                emptyState.classList.add('hidden');
                fileCountEl.textContent = "Scanning...";
            } else {
                loadingState.classList.add('hidden');
            }
        }

        // ==========================================
        // 3. RENDERING AND SORTING LOGIC
        // ==========================================
        function applySortingAndRender(isGlobalOverride = null) {
            const isGlobal = isGlobalOverride !== null ? isGlobalOverride : (searchInput.value.trim().length > 0);
            const sortBy = sortSelect.value;
            const searchQuery = searchInput.value.trim().toLowerCase();

            // Filter logic
            let filteredItems = isGlobal ? allItems : allItems.filter(item => 
                item.name.toLowerCase().includes(searchQuery)
            );

            // Sorting logic
            filteredItems.sort((a, b) => {
                // Always keep folders on top unless sorting specifically by size
                if (sortBy !== 'size-desc' && a.type !== b.type) {
                    return a.type === 'folder' ? -1 : 1;
                }

                switch (sortBy) {
                    case 'name-asc':
                        return a.name.localeCompare(b.name);
                    case 'name-desc':
                        return b.name.localeCompare(a.name);
                    case 'date-desc':
                        return b.date - a.date;
                    case 'date-asc':
                        return a.date - b.date;
                    case 'size-desc':
                        // If sorting by size, push folders to the bottom since size is 0
                        if (a.type === 'folder' && b.type === 'file') return 1;
                        if (b.type === 'folder' && a.type === 'file') return -1;
                        return b.size - a.size;
                    default:
                        return 0;
                }
            });

            renderFileList(filteredItems, isGlobal);
        }

        function renderFileList(itemsToRender, isGlobal = false) {
            fileListEl.innerHTML = '';
            
            if (isGlobal) {
                // In global search, hide breadcrumbs and just show total files
                breadcrumbContainer.classList.add('hidden');
                fileCountEl.textContent = `${itemsToRender.length} matches found globally`;
            } else {
                // Normal folder view
                renderBreadcrumbs();
                const folderCount = itemsToRender.filter(i => i.type === 'folder').length;
                const fileCount = itemsToRender.filter(i => i.type === 'file').length;
                fileCountEl.textContent = `${folderCount} folders, ${fileCount} files`;
            }

            if (itemsToRender.length === 0 && allItems.length > 0) {
                fileListEl.innerHTML = `<div class="text-center p-4 text-sm text-gray-500">No matching items in this folder.</div>`;
                return;
            }

            itemsToRender.forEach((item) => {
                const li = document.createElement('li');
                // We keep the original name visible. We drop the .pdf for a cleaner look.
                const displayName = item.type === 'file' ? item.name.replace(/\.pdf$/i, '').replace(/_/g, ' ') : item.name.replace(/_/g, ' ');
                const isActive = item.type === 'file' && item.url === currentFileUrl;
                
                let iconHtml = item.type === 'folder' 
                    ? `<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-blue-50 dark:bg-blue-500/10 text-blue-500 flex items-center justify-center mr-3"><i class="ph-fill ph-folder text-xl"></i></div>`
                    : `<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-red-50 dark:bg-red-500/10 text-red-500 flex items-center justify-center mr-3 ${isActive ? 'bg-red-100 dark:bg-red-500/20' : ''}"><i class="${isActive ? 'ph-fill' : 'ph'} ph-file-pdf text-xl"></i></div>`;

                li.className = `group flex items-start p-3 cursor-pointer rounded-lg border border-transparent hover:bg-white dark:hover:bg-cad-700 hover:border-gray-200 dark:hover:border-gray-600 transition-all ${isActive ? 'bg-blue-50 dark:bg-cad-700 border-blue-200 dark:border-blue-500/30 shadow-sm' : ''}`;
                
                // Construct metadata details
                let detailsHtml = '';
                if (item.type === 'file') {
                    const sizeStr = formatBytes(item.size);
                    const dateStr = formatDate(item.date);
                    
                    if (isGlobal && item.folder) {
                        detailsHtml = `<span class="truncate text-blue-500 dark:text-blue-400 font-mono mb-1 block">Path: ${item.folder}</span>`;
                    }
                    
                    detailsHtml += `
                        <div class="flex items-center gap-2 mt-1.5 text-[10px] text-gray-400 dark:text-gray-500 font-mono">
                            <span class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded border border-gray-200 dark:border-gray-700">${sizeStr}</span>
                            <span>${dateStr}</span>
                        </div>
                    `;
                } else {
                    detailsHtml = `<div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500 font-mono">Folder</div>`;
                }

                li.innerHTML = `
                    ${iconHtml}
                    <div class="flex-1 min-w-0 pt-0.5">
                        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-2 leading-snug break-words ${isActive ? 'text-blue-600 dark:text-blue-400' : ''}" title="${displayName}">${displayName}</h4>
                        ${detailsHtml}
                    </div>
                    <div class="opacity-0 group-hover:opacity-100 transition-opacity ml-2 pt-2">
                        <i class="ph ${item.type === 'folder' ? 'ph-caret-right text-blue-400' : 'ph-caret-right text-gray-400'}"></i>
                    </div>
                `;

                li.onclick = () => {
                    if (item.type === 'folder') {
                        if (item.path.includes('demo')) {
                            currentPath = 'demo/'; activateDemoMode(); // Mock navigation
                        } else {
                            searchInput.value = '';
                            scanDirectory(item.path);
                        }
                    } else {
                        loadPdf(item.name, item.url);
                    }
                };
                fileListEl.appendChild(li);
            });
        }

        function renderBreadcrumbs() {
            if (!breadcrumbContainer) return;
            
            if (!currentPath || currentPath === '') {
                breadcrumbContainer.classList.add('hidden');
                return;
            }
            
            breadcrumbContainer.classList.remove('hidden');
            
            const parts = currentPath.split('/').filter(p => p); 
            
            let html = `
                <button onclick="scanDirectory('')" class="text-gray-500 hover:text-blue-500 flex items-center shrink-0 transition-colors">
                    <i class="ph-fill ph-house mr-1"></i> Root
                </button>
            `;
            
            let buildPath = '';
            parts.forEach((part, index) => {
                buildPath += part + '/';
                const isLast = index === parts.length - 1;
                html += `
                    <i class="ph ph-caret-right text-gray-400 text-xs shrink-0 mx-1"></i>
                    <button onclick="scanDirectory('${buildPath}')" class="truncate max-w-[100px] hover:text-blue-500 transition-colors ${isLast ? 'text-blue-600 dark:text-blue-400 font-medium pointer-events-none' : 'text-gray-500'}">
                        ${decodeURIComponent(part).replace(/_/g, ' ')}
                    </button>
                `;
            });
            
            breadcrumbContainer.innerHTML = html;
        }

        // ==========================================
        // 4. PDF Viewer Logic
        // ==========================================
        function loadPdf(fileName, url) {
            currentFileUrl = url;
            
            // Re-render to update highlighted state
            applySortingAndRender();
            
            // Close sidebar on mobile
            if(window.innerWidth < 1024) toggleSidebar();

            // Update Header Status
            fileIconBadge.classList.remove('hidden');
            currentFileName.textContent = fileName.replace(/\.pdf$/i, '').replace(/_/g, ' ');
            currentFileName.setAttribute('title', fileName); // Add tooltip to header too
            currentFileStatus.textContent = "Loading document...";
            
            // Manage Viewer visibility
            viewerPlaceholder.classList.add('hidden');
            pdfViewer.classList.add('hidden');
            pdfLoading.classList.remove('hidden');

            if (url === '#demo') {
                setTimeout(() => {
                    pdfLoading.classList.add('hidden');
                    viewerPlaceholder.classList.remove('hidden');
                    viewerPlaceholder.innerHTML = `<i class="ph-fill ph-warning-circle text-6xl mb-4 text-yellow-500"></i><h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-1">Demo Mode Active</h3><p class="text-sm text-center px-4 text-gray-500 max-w-md">You clicked: <strong>${fileName}</strong><br>Rename this file to index.php and upload to a server to view real PDFs.</p>`;
                    currentFileStatus.textContent = "Demo file";
                }, 600);
                return;
            }

            // Secure viewer payload
            const secureUrl = `${url}#toolbar=0&navpanes=0&view=FitH`;
            pdfViewer.src = secureUrl;

            pdfViewer.onload = () => {
                pdfLoading.classList.add('hidden');
                pdfViewer.classList.remove('hidden');
                currentFileStatus.textContent = "Viewing mode active";
            };
        }

        // ==========================================
        // 5. UI Interaction Functions
        // ==========================================
        function copyShareLink() {
            if (!currentFileUrl || currentFileUrl === '#demo') return;
            
            // Construct absolute URL
            const fullUrl = new URL(currentFileUrl.replace('#toolbar=0&navpanes=0&view=FitH', ''), window.location.origin + window.location.pathname).href;
            
            navigator.clipboard.writeText(fullUrl).then(() => {
                const tooltip = document.getElementById('shareTooltip');
                tooltip.classList.remove('opacity-0');
                setTimeout(() => {
                    tooltip.classList.add('opacity-0');
                }, 2000);
            });
        }

        function toggleSidebar() {
            const isClosed = sidebar.classList.contains('-translate-x-full');
            if (isClosed) {
                sidebar.classList.remove('-translate-x-full');
                mobileOverlay.classList.remove('hidden');
            } else {
                sidebar.classList.add('-translate-x-full');
                mobileOverlay.classList.add('hidden');
            }
        }

        function initTheme() {
            if (!localStorage.getItem('theme')) localStorage.setItem('theme', 'dark');
            if (localStorage.getItem('theme') === 'dark') {
                document.documentElement.classList.add('dark');
                document.getElementById('themeIcon').classList.replace('ph-moon', 'ph-sun');
            } else {
                document.documentElement.classList.remove('dark');
                document.getElementById('themeIcon').classList.replace('ph-sun', 'ph-moon');
            }
        }

        function toggleTheme() {
            const html = document.documentElement;
            const icon = document.getElementById('themeIcon');
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                localStorage.setItem('theme', 'light');
                icon.classList.replace('ph-sun', 'ph-moon');
            } else {
                html.classList.add('dark');
                localStorage.setItem('theme', 'dark');
                icon.classList.replace('ph-moon', 'ph-sun');
            }
        }

        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => console.log(err));
                document.getElementById('fsIcon').classList.replace('ph-corners-out', 'ph-corners-in');
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    document.getElementById('fsIcon').classList.replace('ph-corners-in', 'ph-corners-out');
                }
            }
        }

        function showSetupModal() {
            const modal = document.getElementById('setupModal');
            const content = document.getElementById('setupModalContent');
            modal.classList.remove('hidden');
            setTimeout(() => {
                modal.classList.remove('opacity-0');
                content.classList.remove('scale-95');
            }, 10);
        }

        function closeSetupModal() {
            const modal = document.getElementById('setupModal');
            const content = document.getElementById('setupModalContent');
            modal.classList.add('opacity-0');
            content.classList.add('scale-95');
            setTimeout(() => modal.classList.add('hidden'), 300);
        }
    </script>
</body>
</html>