let fileData = []; // Store file data globally
let sortOrder = { column: "uploaded", ascending: false }; // Default sorting by uploaded date (newest first)

// Load and display the file list
window.loadFileList = function () {
    fetch("checkAuth.php")
        .then(response => response.json())
        .then(authData => {
            if (!authData.authenticated) {
                console.warn("User not authenticated, hiding file list.");
                document.getElementById("fileListContainer").style.display = "none";
                return;
            }
            document.getElementById("fileListContainer").style.display = "block";
            fetch("getFileList.php")
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        document.getElementById("fileList").innerHTML = `<p style="color:red;">Error: ${data.error}</p>`;
                        return;
                    }
                    if (!Array.isArray(data.files)) {
                        console.error("Unexpected response format:", data);
                        return;
                    }
                    fileData = data.files; // Store file data globally
                    sortFiles("uploaded", false); // Sort by upload date (newest first) on load
                })
                .catch(error => console.error("Error fetching file list:", error));
        })
        .catch(error => console.error("Error checking authentication:", error));
};

// Sort files when clicking headers
function sortFiles(column, forceAscending = null) {
    if (sortOrder.column === column) {
        sortOrder.ascending = forceAscending !== null ? forceAscending : !sortOrder.ascending; // Toggle order
    } else {
        sortOrder.column = column;
        sortOrder.ascending = forceAscending !== null ? forceAscending : true; // Default to ascending when switching column
    }
    fileData.sort((a, b) => {
        let valA = a[column] || "";
        let valB = b[column] || "";
        if (typeof valA === "string") valA = valA.toLowerCase();
        if (typeof valB === "string") valB = valB.toLowerCase();
        if (valA < valB) return sortOrder.ascending ? -1 : 1;
        if (valA > valB) return sortOrder.ascending ? 1 : -1;
        return 0;
    });
    renderFileTable(); // Re-render table after sorting
}

// Function to render file table
function renderFileTable() {
    const fileListContainer = document.getElementById("fileList");
    let tableHTML = `<table class="table">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)"></th>
                <th onclick="sortFiles('name')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
                    <span>File Name</span> <span>${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
                </th>
                <th onclick="sortFiles('modified')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
                    <span>Date Modified</span> <span>${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
                </th>
                <th onclick="sortFiles('uploaded')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
                    <span>Upload Date</span> <span>${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
                </th>
                <th onclick="sortFiles('sizeBytes')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
                    <span>File Size</span> <span>${sortOrder.column === "sizeBytes" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
                </th>
                <th onclick="sortFiles('uploader')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
                    <span>Uploader</span> <span>${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
                </th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>`;
    
    fileData.forEach(file => {
        const isEditable = file.name.endsWith(".txt") || file.name.endsWith(".json") ||
                           file.name.endsWith(".ini") || file.name.endsWith(".css") || 
                           file.name.endsWith(".js") || file.name.endsWith(".csv") || 
                           file.name.endsWith(".md") || file.name.endsWith(".xml") || 
                           file.name.endsWith(".html") || file.name.endsWith(".py") ||
                           file.name.endsWith(".log") || file.name.endsWith(".conf") || 
                           file.name.endsWith(".config") || file.name.endsWith(".bat") || 
                           file.name.endsWith(".rtf") || file.name.endsWith(".doc") || 
                           file.name.endsWith(".docx");
        tableHTML += `<tr>
            <td><input type="checkbox" class="file-checkbox" value="${file.name}" onclick="toggleDeleteButton()"></td>
            <td>${file.name}</td>
            <td style="white-space: nowrap;">${file.modified}</td>
            <td style="white-space: nowrap;">${file.uploaded}</td>
            <td style="white-space: nowrap;">${file.size}</td>
            <td style="white-space: nowrap;">${file.uploader || "Unknown"}</td>
            <td>
                <div style="display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap;">
                    <a href="uploads/${file.name}" download>Download</a>
                    ${isEditable ? `<button onclick="editFile('${file.name}')">Edit</button>` : ""}
                </div>
            </td>
        </tr>`;
    });
    
    tableHTML += `</tbody></table>`;
    fileListContainer.innerHTML = tableHTML;
    
    // Always display the batch delete button if there are files; disable it if no file is selected.
    const deleteBtn = document.getElementById("deleteSelectedBtn");
    if (fileData.length > 0) {
        deleteBtn.style.display = "block";
        // Check if any checkboxes are selected to enable the button; if none, disable it.
        const selectedFiles = document.querySelectorAll(".file-checkbox:checked");
        deleteBtn.disabled = selectedFiles.length === 0;
    } else {
        deleteBtn.style.display = "none";
    }
}

// Function to toggle delete button enabled state
function toggleDeleteButton() {
    const selectedFiles = document.querySelectorAll(".file-checkbox:checked");
    const deleteBtn = document.getElementById("deleteSelectedBtn");
    deleteBtn.disabled = selectedFiles.length === 0;
}

// Select/Deselect All Checkboxes
window.toggleAllCheckboxes = function (source) {
    const checkboxes = document.querySelectorAll(".file-checkbox");
    checkboxes.forEach(checkbox => checkbox.checked = source.checked);
    toggleDeleteButton();
};

// Batch delete function
window.deleteSelectedFiles = function () {
    const selectedFiles = Array.from(document.querySelectorAll(".file-checkbox:checked"))
        .map(checkbox => checkbox.value);
    if (selectedFiles.length === 0) {
        alert("No files selected for deletion.");
        return;
    }
    if (!confirm(`Are you sure you want to delete the selected files?`)) {
        return;
    }
    fetch("deleteFiles.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ files: selectedFiles })
    })
    .then(response => response.json())
    .then(result => {
        alert(result.success || result.error);
        loadFileList();
    })
    .catch(error => console.error("Error deleting files:", error));
};

// Attach event listener to batch delete button
document.addEventListener("DOMContentLoaded", function () {
    const deleteBtn = document.getElementById("deleteSelectedBtn");
    if (deleteBtn) {
        deleteBtn.addEventListener("click", deleteSelectedFiles);
    }
});

window.editFile = function(fileName) {
  const threshold = 10 * 1024 * 1024; // 10 MB threshold

  // Check file size via HEAD request.
  fetch(`uploads/${encodeURIComponent(fileName)}`, { method: 'HEAD' })
    .then(response => {
      const fileSize = parseInt(response.headers.get('Content-Length') || "0", 10);
      if (fileSize > threshold) {
        alert("This file is too large to edit in the browser.");
        return;
      }
      return fetch(`uploads/${encodeURIComponent(fileName)}?t=${new Date().getTime()}`);
    })
    .then(response => {
      if (!response) return;
      if (!response.ok) throw new Error("HTTP error! Status: " + response.status);
      return response.text();
    })
    .then(content => {
      if (!content) return;
      const modal = document.createElement("div");
      modal.id = "editorContainer";
      // Use your existing classes for styling.
      modal.classList.add("modal", "editor-modal");
      modal.innerHTML = `
          <h3>Editing: ${fileName}</h3>
          <textarea id="fileEditor" style="width:100%; height:60%; resize:none;">${content}</textarea>
          <div style="margin-top:10px; text-align:right;">
            <button onclick="saveFile('${fileName}')" class="btn btn-primary">Save</button>
            <button onclick="document.getElementById('editorContainer').remove()" class="btn btn-secondary">Close</button>
          </div>
      `;
      document.body.appendChild(modal);
      modal.style.display = "block";
    })
    .catch(error => console.error("Error in editFile:", error));
};

window.saveFile = function(fileName) {
    const editor = document.getElementById("fileEditor");
    if (!editor) {
        console.error("Editor not found!");
        return;
    }
    const fileData = {
        fileName: fileName,
        content: editor.value
    };
    fetch("saveFile.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(fileData)
    })
    .then(response => response.json())
    .then(result => {
        alert(result.success || result.error);
        document.getElementById("editorContainer")?.remove();
        loadFileList();
    })
    .catch(error => console.error("Error saving file:", error));
};