// --- Documentación de Proyecto ---
let currentDocProjectId = null;
let currentDocProjectName = '';
let currentDocFolderId = null;
let currentDocPath = [];

async function openProjectDocs(projectId, projectName) {
    currentDocProjectId = projectId;
    currentDocProjectName = projectName;
    currentDocFolderId = null;
    currentDocPath = [];
    
    document.getElementById('board').style.display = 'none';
    document.getElementById('btn-add-task').style.display = 'none';
    document.getElementById('admin-board').style.display = 'none';
    document.getElementById('docs-board').style.display = 'block';
    document.getElementById('current-view-title').innerText = `Documentación: ${projectName}`;
    
    await loadFavorites();
    await loadDocs();
}

async function loadDocs() {
    let data;
    if (currentDocFolderId === null) {
        data = await fetchAPI(`projects/${currentDocProjectId}/docs`);
    } else {
        const folder = await fetchAPI(`docs/folders/${currentDocFolderId}`);
        data = { folders: folder.subfolders || [], files: folder.files || [] };
    }
    renderDocs(data);
    renderDocBreadcrumb();
}

function renderDocBreadcrumb() {
    const breadcrumb = document.getElementById('docs-breadcrumb');
    let html = `<span style="cursor: pointer;" onclick="openDocFolder(null, 'Raíz')">🏠 Raíz</span>`;
    
    currentDocPath.forEach((step, index) => {
        html += ` <span style="color: var(--text-muted); margin: 0 5px;">></span> <span style="cursor: pointer; color: var(--text-color);" onclick="goDocBackTo(${index})">${step.name}</span>`;
    });
    
    breadcrumb.innerHTML = html;
}

function openDocFolder(folderId, folderName) {
    if (folderId === null) {
        currentDocFolderId = null;
        currentDocPath = [];
    } else {
        currentDocFolderId = folderId;
        currentDocPath.push({ id: folderId, name: folderName });
    }
    loadDocs();
}

function goDocBackTo(index) {
    currentDocPath = currentDocPath.slice(0, index + 1);
    const lastStep = currentDocPath[currentDocPath.length - 1];
    currentDocFolderId = lastStep ? lastStep.id : null;
    loadDocs();
}

function renderDocs(data) {
    const list = document.getElementById('docs-list');
    list.innerHTML = '';
    
    if (currentDocFolderId !== null) {
        const backDiv = document.createElement('div');
        backDiv.className = 'card';
        backDiv.style.padding = '10px';
        backDiv.style.cursor = 'pointer';
        backDiv.style.display = 'flex';
        backDiv.style.background = 'rgba(255,255,255,0.02)';
        backDiv.innerHTML = `<span>⬆️ .. (Subir un nivel)</span>`;
        backDiv.onclick = () => {
            currentDocPath.pop();
            const lastStep = currentDocPath[currentDocPath.length - 1];
            currentDocFolderId = lastStep ? lastStep.id : null;
            loadDocs();
        };
        list.appendChild(backDiv);
    }
    
    data.folders.forEach(f => {
        const div = document.createElement('div');
        div.className = 'card';
        div.style.padding = '10px';
        div.style.display = 'flex';
        div.style.justifyContent = 'space-between';
        div.style.alignItems = 'center';
        div.innerHTML = `
            <div style="cursor: pointer; display: flex; align-items: center; gap: 10px; flex: 1;" onclick="openDocFolder(${f.id}, '${f.name}')">
                <span style="font-size: 1.5rem;">📁</span>
                <span style="font-weight: bold; color: var(--text-color);">${f.name}</span>
            </div>
            <button type="button" class="btn-small" style="background: rgba(244, 67, 54, 0.2); color: #f44336; padding: 4px 8px; border: none;" onclick="deleteDocFolder(${f.id})">Borrar</button>
        `;
        list.appendChild(div);
    });
    
    data.files.forEach(f => {
        const div = document.createElement('div');
        div.className = 'card';
        div.style.padding = '10px';
        div.style.display = 'flex';
        div.style.justifyContent = 'space-between';
        div.style.alignItems = 'center';
        const starColor = f.is_favorite ? '#ffc107' : 'rgba(255,255,255,0.3)';
        div.innerHTML = `
            <div style="display: flex; align-items: center; gap: 10px; flex: 1; overflow: hidden;">
                <span style="cursor: pointer; font-size: 1.2rem; color: ${starColor};" onclick="toggleFavoriteDoc(${f.id}, ${!f.is_favorite})">${f.is_favorite ? '⭐' : '☆'}</span>
                <span style="font-size: 1.2rem;">📄</span>
                <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${f.filename}">${f.filename}</span>
            </div>
            <div style="display: flex; gap: 5px; flex-shrink: 0;">
                <button type="button" class="btn-small" style="background: rgba(59, 130, 246, 0.2); color: var(--primary-color); padding: 4px 8px; border: none;" onclick="openDocLocal('${f.file_path}')">Ver</button>
                <a href="${f.file_path}" download="${f.filename}" class="btn-small" style="background: rgba(76, 175, 80, 0.2); color: #4caf50; padding: 4px 8px; text-decoration: none;">Descargar</a>
                <button type="button" class="btn-small" style="background: rgba(244, 67, 54, 0.2); color: #f44336; padding: 4px 8px; border: none;" onclick="deleteDocFile(${f.id})">Borrar</button>
            </div>
        `;
        list.appendChild(div);
    });
    
    if (data.folders.length === 0 && data.files.length === 0) {
        list.innerHTML += `<div style="text-align: center; color: var(--text-muted); margin-top: 20px;">La carpeta está vacía.</div>`;
    }
}

async function createDocFolder(e) {
    e.preventDefault();
    const name = document.getElementById('docFolderName').value;
    if (!name) return;
    
    await fetchAPI('docs/folders', 'POST', {
        project_id: currentDocProjectId,
        parent_id: currentDocFolderId,
        name: name
    });
    
    closeModal('docFolderModal');
    document.getElementById('docFolderName').value = '';
    loadDocs();
}

async function deleteDocFolder(id) {
    if (!confirm('¿Seguro que quieres borrar esta carpeta y todo su contenido?')) return;
    await fetchAPI(`docs/folders/${id}`, 'DELETE');
    loadDocs();
}

async function uploadDocFile(e) {
    e.preventDefault();
    const fileInput = document.getElementById('newDocFile');
    const folderInput = document.getElementById('newDocFolder');
    
    let inputToUse = null;
    if (currentDocUploadMode === 'file') inputToUse = fileInput;
    else if (currentDocUploadMode === 'folder') inputToUse = folderInput;
    
    if (!inputToUse || !inputToUse.files || inputToUse.files.length === 0) return;
    
    const formData = new FormData();
    for (let i = 0; i < inputToUse.files.length; i++) {
        formData.append('files', inputToUse.files[i]);
    }
    
    let url = `/api/docs/files?project_id=${currentDocProjectId}`;
    if (currentDocFolderId) {
        url += `&folder_id=${currentDocFolderId}`;
    }
    
    try {
        const res = await fetch(url, { method: 'POST', body: formData });
        if (res.ok) {
            closeModal('docFileModal');
            fileInput.value = '';
            folderInput.value = '';
            updateDocFileCount(null);
            loadDocs();
        }
    } catch (e) {
        alert('Error al subir archivos');
    }
}

let currentDocUploadMode = null;
function updateDocFileCount(mode) {
    currentDocUploadMode = mode;
    const fileInput = document.getElementById('newDocFile');
    const folderInput = document.getElementById('newDocFolder');
    const textDiv = document.getElementById('docFileSelectionText');
    
    if (mode === 'file' && fileInput.files.length > 0) {
        folderInput.value = '';
        textDiv.innerText = `${fileInput.files.length} archivo(s) seleccionado(s)`;
    } else if (mode === 'folder' && folderInput.files.length > 0) {
        fileInput.value = '';
        textDiv.innerText = `Carpeta seleccionada con ${folderInput.files.length} archivo(s)`;
    } else {
        textDiv.innerText = 'Ningún archivo seleccionado';
    }
}

async function deleteDocFile(id) {
    if (!confirm('¿Seguro que quieres borrar este archivo?')) return;
    await fetchAPI(`docs/files/${id}`, 'DELETE');
    loadDocs();
    loadFavorites();
}

async function toggleFavoriteDoc(id, isFav) {
    await fetchAPI(`docs/files/${id}/favorite?favorite=${isFav}`, 'PUT');
    loadDocs();
    loadFavorites();
}

async function loadFavorites() {
    if (!currentDocProjectId) return;
    const favs = await fetchAPI(`projects/${currentDocProjectId}/favorites`);
    const dropdown = document.getElementById('fav-dropdown');
    
    if (favs.length === 0) {
        dropdown.innerHTML = `<div style="padding: 15px; color: var(--text-muted); text-align: center; font-size: 0.9rem;">No tienes favoritos en este proyecto.</div>`;
        return;
    }
    
    let html = '';
    favs.forEach(f => {
        html += `
            <div style="padding: 10px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.05)'" onmouseout="this.style.background='transparent'">
                <div style="color: var(--text-color); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; display: flex; align-items: center; gap: 8px;" title="${f.filename}" onclick="openDocLocal('${f.file_path}')">
                    <span style="color: #ffc107; font-size: 1.1rem;">⭐</span> ${f.filename}
                </div>
            </div>
        `;
    });
    dropdown.innerHTML = html;
}

function openDocLocal(filePath) {
    window.open(filePath, '_blank');
}

// Drag and drop logic
document.addEventListener('DOMContentLoaded', () => {
    const docsBoard = document.getElementById('docs-board');
    const dragOverlay = document.getElementById('docs-drag-overlay');
    
    let dragCounter = 0;
    
    docsBoard.addEventListener('dragenter', (e) => {
        e.preventDefault();
        dragCounter++;
        dragOverlay.style.display = 'flex';
    });
    
    docsBoard.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dragCounter--;
        if (dragCounter === 0) {
            dragOverlay.style.display = 'none';
        }
    });
    
    docsBoard.addEventListener('dragover', (e) => {
        e.preventDefault();
    });
    
    docsBoard.addEventListener('drop', async (e) => {
        e.preventDefault();
        dragCounter = 0;
        dragOverlay.style.display = 'none';
        
        if (currentDocProjectId === null) return;
        
        const files = e.dataTransfer.files;
        if (!files || files.length === 0) return;
        
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append('files', files[i]);
        }
        
        let url = `/api/docs/files?project_id=${currentDocProjectId}`;
        if (currentDocFolderId) {
            url += `&folder_id=${currentDocFolderId}`;
        }
        
        try {
            const res = await fetch(url, { method: 'POST', body: formData });
            if (res.ok) {
                loadDocs();
            } else {
                alert('Error al subir archivos');
            }
        } catch (error) {
            alert('Error al subir archivos');
        }
    });
});