{% extends 'base.html' %}

{% block title %}{% if folder_path %}{{ folder_path }}{% else %} {{ app_name }} {% endif %}{% endblock %}

{% block head %}
<style>
/* Make the entire content area a drop target */
.content-drop-target {
    position: relative;
    min-height: 100%;
}

.content-drop-target.drag-over::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 110, 253, 0.1);
    border: 2px dashed #0d6efd;
    z-index: 1000;
    pointer-events: none;
}

.upload-progress {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    z-index: 1050;
    background: #2c2c2c;
    border-radius: 4px;
    padding: 10px;
    display: none;
}

.progress {
    background-color: rgba(255,255,255,0.1);
}
</style>
{% endblock %}

{% block content %}
<div id="content" class="content-drop-target">
    {% include '_breadcrumbs.html' %}
    {% include '_image_viewer.html' %}
    <div class="mb-3">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="m-0">{% if folder_path %}Folder: {{ folder_path }}{% else %}All Notes{% endif %}</h4>
        <div class="d-flex gap-2">
            <a href="{{ url_for('md_viewer.create_note', folder=folder_path) }}" class="btn btn-primary btn-sm">New Note</a>
            <button type="button" class="btn btn-outline-primary btn-sm" id="uploadButton">
                <i class="fa fa-upload me-1"></i> Upload File
            </button>
        </div>
    </div>

    <!-- Dropzone for file uploads -->
    <div id="dropzone" class="dropzone">
        <div>Drag & drop files here or click to select</div>
        <input type="file" id="fileInput" multiple style="display: none">
        <div class="upload-progress">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
            </div>
        </div>
    </div>
    
    {% if folder_contents %}
        <div class="list-group">
        {% for item in folder_contents %}
            {% if item.type == 'dir' %}
                <a href="{{ url_for('md_viewer.folder', folder_path=item.path) }}" 
                   class="list-group-item list-group-item-action d-flex align-items-center"
                   data-item-type="dir"
                   data-item-path="{{ item.path }}">
                    <i class="fa fa-folder text-warning me-2"></i>
                    <span>{{ item.display_name }}</span>
                </a>
            {% elif item.type == 'md' %}
                <a href="{{ url_for('md_viewer.note', note_path=item.path) }}" 
                   class="list-group-item list-group-item-action d-flex align-items-center"
                   data-item-type="md"
                   data-item-path="{{ item.path }}">
                    <i class="fa fa-file-text-o text-secondary me-2"></i>
                    <span>{{ item.display_name }}</span>
                </a>
            {% elif item.type == 'images' %}
                <a href="#" 
                   class="list-group-item list-group-item-action d-flex align-items-center"
                   data-bs-toggle="image-viewer"
                   data-image-url="{{ url_for('md_viewer.view_file', file_path=item.path) }}"
                   data-image-title="{{ item.display_name }}"
                   data-item-type="images"
                   data-item-path="{{ item.path }}">
                    <i class="fa fa-file-image-o text-info me-2"></i>
                    <span>{{ item.display_name }}</span>
                </a>
            {% elif item.type == 'text' %}
                {% if item.name.lower().endswith('.txt') %}
                <a href="{{ url_for('md_viewer.view_file', file_path=item.path) }}" 
                   class="list-group-item list-group-item-action d-flex align-items-center"
                   data-item-type="text"
                   data-item-path="{{ item.path }}">
                    <i class="fa fa-file-text text-success me-2"></i>
                    <span>{{ item.display_name }}</span>
                </a>
                {% else %}
                <a href="{{ url_for('md_viewer.view_file', file_path=item.path) }}" 
                   class="list-group-item list-group-item-action d-flex align-items-center"
                   data-item-type="text"
                   target="_blank"
                   data-item-path="{{ item.path }}">
                    <i class="fa fa-file-text text-success me-2"></i>
                    <span>{{ item.display_name }}</span>
                </a>
                {% endif %}
            {% elif item.type == 'documents' %}
                <a href="{{ url_for('md_viewer.view_file', file_path=item.path) }}" 
                   class="list-group-item list-group-item-action d-flex align-items-center"
                   target="_blank"
                   data-item-type="documents"
                   data-item-path="{{ item.path }}">
                    <i class="fa fa-file-pdf-o text-danger me-2"></i>
                    <span>{{ item.display_name }}</span>
                </a>
            {% endif %}
        {% endfor %}
        </div>
    {% else %}
        <p>This folder is empty.</p>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
// Initialize image viewer
function initializeImageViewer() {
    // Create the popup element if it doesn't exist
    let popup = document.getElementById('imagePopup');
    if (!popup) {
        popup = document.createElement('div');
        popup.id = 'imagePopup';
        popup.className = 'image-popup';
        popup.innerHTML = `
            <span class="close-btn">&times;</span>
            <img id="popupImage" src="" alt="Image Preview">
        `;
        document.body.appendChild(popup);
    }

    const popupImg = document.getElementById('popupImage');
    const closeBtn = popup.querySelector('.close-btn');
    if (!popupImg || !closeBtn) return;

    // Function to close the popup
    function closePopup() {
        popup.style.display = 'none';
        document.body.style.overflow = '';
        if (popupImg) {
            popupImg.classList.remove('zoomed');
        }
    }

    // Handle image link clicks
    document.querySelectorAll('.image-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const imageUrl = this.getAttribute('data-image-url');
            if (popupImg && imageUrl) {
                popupImg.src = imageUrl;
                popup.style.display = 'block';
                document.body.style.overflow = 'hidden';
            }
        });
    });

    // Close on X button click
    if (closeBtn) {
        closeBtn.addEventListener('click', closePopup);
    }

    // Close on background click
    popup.addEventListener('click', function(e) {
        if (e.target === popup) {
            closePopup();
        }
    });

    // Handle image zoom toggle
    if (popupImg) {
        popupImg.addEventListener('click', function(e) {
            e.stopPropagation();
            this.classList.toggle('zoomed');
        });
    }

    // Close on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && popup.style.display === 'block') {
            closePopup();
        }
    });
}

document.addEventListener('DOMContentLoaded', initializeImageViewer);

// File upload functionality
document.addEventListener('DOMContentLoaded', function() {
    const contentArea = document.querySelector('.content-drop-target');
    const uploadButton = document.getElementById('uploadButton');
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.multiple = true;
    fileInput.style.display = 'none';
    document.body.appendChild(fileInput);
    
    const progressBar = document.createElement('div');
    progressBar.className = 'upload-progress';
    progressBar.innerHTML = `
        <div class="mb-2">Uploading files...</div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
        </div>
    `;
    document.body.appendChild(progressBar);
    
    // Allowed extensions
    const allowedExtensions = new Set([
        {% for ext in allowed_image_extensions %}
            '{{ ext }}',
        {% endfor %}
        {% for ext in allowed_file_extensions %}
            '{{ ext }}',
        {% endfor %}
    ]);

    // Open file dialog when upload button is clicked
    uploadButton.addEventListener('click', () => {
        fileInput.click();
    });

    // Handle drag & drop events for the entire content area
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        contentArea.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    // Show visual feedback when dragging over the content area
    ['dragenter', 'dragover'].forEach(eventName => {
        contentArea.addEventListener(eventName, () => {
            contentArea.classList.add('drag-over');
        });
    });

    ['dragleave', 'drop'].forEach(eventName => {
        contentArea.addEventListener(eventName, () => {
            contentArea.classList.remove('drag-over');
        });
    });

    // Handle file selection and drops
    fileInput.addEventListener('change', handleFiles);
    contentArea.addEventListener('drop', handleDrop);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles({ target: { files: files } });
    }

    function handleFiles(e) {
        const files = [...e.target.files];
        
        // Validate files
        const invalidFiles = files.filter(file => {
            const ext = '.' + file.name.split('.').pop().toLowerCase();
            return !allowedExtensions.has(ext);
        });

        if (invalidFiles.length > 0) {
            const invalidNames = invalidFiles.map(f => f.name).join(', ');
            window.showNotification(`Invalid file type(s): ${invalidNames}`, 'danger');
            return;
        }

        // Check file sizes (10MB limit)
        const largeFiles = files.filter(file => file.size > 10 * 1024 * 1024);
        if (largeFiles.length > 0) {
            const largeNames = largeFiles.map(f => f.name).join(', ');
            window.showNotification(`Files too large (>10MB): ${largeNames}`, 'danger');
            return;
        }

        // Show progress bar
        progressBar.style.display = 'block';
        const progressBarInner = progressBar.querySelector('.progress-bar');
        let uploaded = 0;
        const totalFiles = files.length;

        files.forEach(file => {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('folder', '{{ folder_path }}');

            fetch('{{ url_for("md_viewer.upload_file") }}', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                uploaded++;
                progressBarInner.style.width = (uploaded / totalFiles * 100) + '%';
                
                if (uploaded === totalFiles) {
                    // All files uploaded
                    window.showNotification('Files uploaded successfully', 'success');
                    setTimeout(() => {
                        progressBar.style.display = 'none';
                        progressBarInner.style.width = '0%';
                        window.location.reload();
                    }, 1500);
                }
            })
            .catch(error => {
                window.showNotification('Error uploading file: ' + error, 'danger');
                progressBar.style.display = 'none';
                progressBarInner.style.width = '0%';
            });
        });
    }

    // Context menu functionality
    const contextMenu = document.createElement('div');
    contextMenu.className = 'custom-context-menu';
    document.body.appendChild(contextMenu);

    // Hide context menu on click outside
    document.addEventListener('click', () => {
        contextMenu.style.display = 'none';
    });

    // Add context menu to list items
    document.querySelectorAll('.list-group-item').forEach(item => {
        item.addEventListener('contextmenu', e => {
            e.preventDefault();
            const type = item.getAttribute('data-item-type');
            const path = item.getAttribute('data-item-path');
            const rect = item.getBoundingClientRect();

            // Position the menu
            contextMenu.style.left = e.clientX + 'px';
            contextMenu.style.top = e.clientY + 'px';

            // Build menu items based on type
            let menuHTML = '';
            
            // Open in new tab option (for everything)
            menuHTML += `
                <a href="${item.href}" class="menu-item" target="_blank">
                    <i class="fa fa-external-link"></i>Open in new tab
                </a>
            `;

            // Download option (for files only)
            if (type !== 'dir') {
                menuHTML += `
                    <a href="{{ url_for('md_viewer.download_file') }}?path=${encodeURIComponent(path)}" 
                       class="menu-item" download>
                        <i class="fa fa-download"></i>Download
                    </a>
                `;
            }

            contextMenu.innerHTML = menuHTML;
            contextMenu.style.display = 'block';
        });
    });
});

// Initialize image viewer
document.addEventListener('DOMContentLoaded', initializeImageViewer);
</script>
{% endblock %}