{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ _('My Files') }}</h1>
</div>

<div class="card shadow-sm border-0 mb-4 bg-light">
    <div class="card-body">
        <div id="drop-zone" class="border border-2 border-primary rounded p-4 text-center bg-white" style="border-style: dashed !important; cursor: pointer; transition: all 0.3s ease;">
            <i class="bi bi-cloud-arrow-up display-4 text-primary mb-2"></i>
            <h5 class="text-secondary fw-normal">{{ _('Drag & Drop STL files here or Click to Select') }}</h5>
            <input type="file" id="file" name="file" accept=".stl" class="d-none" multiple>
        </div>
        
        <div id="upload-progress-container" class="mt-3 d-none">
            <div class="d-flex justify-content-between mb-1">
                <span class="text-muted small" id="upload-status-text"><i class="bi bi-cloud-arrow-up-fill me-1"></i>{{ _('Uploading...') }}</span>
                <span class="text-primary small fw-bold" id="upload-progress-text">0%</span>
            </div>
            <div class="progress shadow-sm" style="height: 10px;">
                <div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%;"></div>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-striped mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4 fw-semibold text-secondary">{{ _('Date Uploaded') }}</th>
                        <th class="fw-semibold text-secondary">{{ _('Original Name') }}</th>
                        <th class="fw-semibold text-secondary">{{ _('Status') }}</th>
                        <th class="pe-4 fw-semibold text-secondary">{{ _('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for file in files %}
                    {% set is_gcode = file.original_filename.lower().endswith('.gcode') or file.original_filename.lower().endswith('.gco') or file.original_filename.lower().endswith('.g') %}
                    <tr id="file-row-{{ file.id }}" data-status="{{ file.status }}" data-is-gcode="{{ 'true' if is_gcode else 'false' }}">
                        <td class="ps-4 text-muted">
                            <i class="bi bi-clock me-1"></i>
                            <span class="local-time" data-utc="{{ file.created_at.isoformat() }}">{{ file.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
                        </td>
                        <td class="fw-medium">
                            <i class="bi {{ 'bi-file-earmark-code text-success' if is_gcode else 'bi-box text-primary' }} me-2"></i>{{ file.original_filename }}
                        </td>
                        <td id="status-{{ file.id }}">
                            {% if file.status == 'waiting' %}
                                <span class="badge bg-info text-dark rounded-pill fw-normal px-2" title="{{ _('Waiting in queue for slicing') }}"><i class="bi bi-hourglass-split me-1"></i>{{ _('Waiting') }}...</span>
                            {% elif file.status == 'simplifying' %}
                                <span class="badge bg-secondary text-dark rounded-pill fw-normal px-2" style="background-color: #e2e3e5 !important;"><i class="bi bi-funnel bi-spin me-1"></i>{{ _('Simplifying') }}...</span>
                            {% elif file.status == 'uploaded' %}
                                <span class="badge bg-secondary text-light rounded-pill fw-normal px-2"><i class="bi bi-cloud-check me-1"></i>{{ _('Uploaded') }}</span>
                            {% elif file.status == 'merging' %}
                                <span class="badge bg-primary text-light rounded-pill fw-normal px-2"><i class="bi bi-intersect me-1"></i>{{ _('Merging') }}...</span>
                            {% elif file.status == 'slicing' %}
                                <span class="badge bg-warning text-dark rounded-pill fw-normal px-2"><i class="bi bi-gear-wide-connected bi-spin me-1"></i>{{ _('Slicing') }}...</span>
                            {% elif file.status == 'sliced' %}
                                <span class="badge bg-success rounded-pill fw-normal px-2"><i class="bi bi-check-circle me-1"></i>{{ _('Sliced') }}</span>
                            {% elif file.status == 'failed' %}
                                <span class="badge bg-danger rounded-pill fw-normal px-2"><i class="bi bi-x-circle me-1"></i>{{ _('Failed') }}</span>
                            {% endif %}
                        </td>
                        <td class="pe-4">
                            <div class="d-flex gap-2" id="actions-container-{{ file.id }}">
                                {% if not is_gcode %}
                                <a href="{{ url_for('main.plater') }}?add={{ file.id }}" class="btn btn-sm btn-outline-warning shadow-sm" title="{{ _('Slice') }}"><i class="bi bi-braces"></i> {{ _('Slice') }}</a>
                                {% endif %}
                                {% if file.status == 'sliced' %}
                                    <a href="{{ url_for('main.download_gcode', file_id=file.id) }}" class="btn btn-sm btn-outline-primary shadow-sm" title="{{ _('Download GCode') }}"><i class="bi bi-download"></i></a>
                                    <a href="{{ url_for('main.preview_gcode', file_id=file.id) }}" class="btn btn-sm btn-outline-info shadow-sm" title="{{ _('GCode Preview') }}"><i class="bi bi-eye"></i></a>
                                {% endif %}
                                <form action="{{ url_for('main.delete_file', file_id=file.id) }}" method="POST" onsubmit="event.preventDefault(); window.customConfirm('{{ _('Are you sure you want to delete this file?') }}', () => { this.submit(); });">
                                    <button type="submit" class="btn btn-sm btn-outline-danger shadow-sm" title="{{ _('Delete') }}"><i class="bi bi-trash3"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center text-muted py-5">
                            <i class="bi bi-folder-x display-4 d-block mb-3 opacity-50"></i>
                            {{ _('No files uploaded yet.') }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Convert UTC to local time
    document.querySelectorAll('.local-time').forEach(el => {
        let utcStr = el.getAttribute('data-utc');
        if (!utcStr) return;
        if (!utcStr.endsWith('Z') && !utcStr.includes('+')) {
            utcStr += 'Z';
        }
        const localDate = new Date(utcStr);
        if (!isNaN(localDate)) {
            const year = localDate.getFullYear();
            const month = String(localDate.getMonth() + 1).padStart(2, '0');
            const day = String(localDate.getDate()).padStart(2, '0');
            const hours = String(localDate.getHours()).padStart(2, '0');
            const minutes = String(localDate.getMinutes()).padStart(2, '0');
            const seconds = String(localDate.getSeconds()).padStart(2, '0');
            el.textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
    });

    const checkInterval = 1000;
    let pollTimer = null;
    
    function fetchStatus() {
        fetch(`{{ url_for('main.files_status') }}`)
            .then(response => response.json())
            .then(data => {
                let hasPending = false;
                for (const [id, status] of Object.entries(data)) {
                    const tr = document.getElementById('file-row-' + id);
                    if (!tr) continue;
                    
                    const currentStatus = tr.getAttribute('data-status');
                    if (currentStatus !== status) {
                        tr.setAttribute('data-status', status);
                        const statusTd = document.getElementById('status-' + id);
                        const actionsTd = document.getElementById('actions-container-' + id);
                        
                        if (status === 'waiting') statusTd.innerHTML = '<span class="badge bg-info text-dark rounded-pill fw-normal px-2"><i class="bi bi-hourglass-split me-1"></i>{{ _("Waiting") }}...</span>';
                        else if (status === 'simplifying') statusTd.innerHTML = '<span class="badge bg-secondary text-dark rounded-pill fw-normal px-2" style="background-color: #e2e3e5 !important;"><i class="bi bi-funnel bi-spin me-1"></i>{{ _("Simplifying") }}...</span>';
                        else if (status === 'uploaded') statusTd.innerHTML = '<span class="badge bg-secondary text-light rounded-pill fw-normal px-2"><i class="bi bi-cloud-check me-1"></i>{{ _("Uploaded") }}</span>';
                        else if (status === 'merging') statusTd.innerHTML = '<span class="badge bg-primary text-light rounded-pill fw-normal px-2"><i class="bi bi-intersect me-1"></i>{{ _("Merging") }}...</span>';
                        else if (status === 'slicing') statusTd.innerHTML = '<span class="badge bg-warning text-dark rounded-pill fw-normal px-2"><i class="bi bi-gear-wide-connected bi-spin me-1"></i>{{ _("Slicing") }}...</span>';
                        else if (status === 'sliced') statusTd.innerHTML = '<span class="badge bg-success rounded-pill fw-normal px-2"><i class="bi bi-check-circle me-1"></i>{{ _("Sliced") }}</span>';
                        else if (status === 'failed') statusTd.innerHTML = '<span class="badge bg-danger rounded-pill fw-normal px-2"><i class="bi bi-x-circle me-1"></i>{{ _("Failed") }}</span>';
                        
                        let actionsHtml = '';
                        const platerUrl = `{{ url_for('main.plater') }}?add=${id}`;
                        const isGcode = tr.getAttribute('data-is-gcode') === 'true';
                        if (!isGcode) {
                            actionsHtml += `<a href="${platerUrl}" class="btn btn-sm btn-outline-warning shadow-sm" title="{{ _('Slice') }}"><i class="bi bi-braces"></i> {{ _('Slice') }}</a>\n`;
                        }
                        
                        if (status === 'sliced') {
                            const downloadUrl = `{{ url_for('main.download_gcode', file_id=999999999) }}`.replace('999999999', id);
                            const previewUrl = `{{ url_for('main.preview_gcode', file_id=999999999) }}`.replace('999999999', id);
                            actionsHtml += `<a href="${downloadUrl}" class="btn btn-sm btn-outline-primary shadow-sm" title="{{ _('Download GCode') }}"><i class="bi bi-download"></i></a>\n`;
                            actionsHtml += `<a href="${previewUrl}" class="btn btn-sm btn-outline-info shadow-sm" title="{{ _('GCode Preview') }}"><i class="bi bi-eye"></i></a>\n`;
                        }
                        const deleteUrl = `{{ url_for('main.delete_file', file_id=999999999) }}`.replace('999999999', id);
                        actionsHtml += `<form action="${deleteUrl}" method="POST" onsubmit="event.preventDefault(); window.customConfirm('{{ _('Are you sure you want to delete this file?') }}', () => { this.submit(); });">
                            <button type="submit" class="btn btn-sm btn-outline-danger shadow-sm" title="{{ _('Delete') }}"><i class="bi bi-trash3"></i></button>
                        </form>`;
                        actionsTd.innerHTML = actionsHtml;
                    }
                    
                    if (status === 'waiting' || status === 'slicing' || status === 'merging' || status === 'simplifying') {
                        hasPending = true;
                    }
                }
                
                if (!hasPending) {
                    clearInterval(pollTimer);
                    pollTimer = null;
                }
            })
            .catch(error => console.error('Error fetching status:', error));
    }

    pollTimer = setInterval(fetchStatus, checkInterval);
    
    // Drag & Drop File Upload Logic
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file');
    const progressContainer = document.getElementById('upload-progress-container');
    const progressBar = document.getElementById('upload-progress-bar');
    const progressText = document.getElementById('upload-progress-text');
    const statusText = document.getElementById('upload-status-text');

    dropZone.addEventListener('click', () => fileInput.click());

    ['dragover', 'dragenter'].forEach(evt => {
        dropZone.addEventListener(evt, e => {
            e.preventDefault();
            e.stopPropagation();
            dropZone.classList.add('bg-light');
            dropZone.classList.replace('border-primary', 'border-success');
        });
    });

    ['dragleave', 'dragend', 'drop'].forEach(evt => {
        dropZone.addEventListener(evt, e => {
            e.preventDefault();
            e.stopPropagation();
            dropZone.classList.remove('bg-light');
            dropZone.classList.replace('border-success', 'border-primary');
        });
    });

    dropZone.addEventListener('drop', e => {
        const files = e.dataTransfer.files;
        if (files.length) {
            handleFileUpload(files);
        }
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length) {
            handleFileUpload(fileInput.files);
        }
    });

    function handleFileUpload(files) {
        const formData = new FormData();
        let hasValidFile = false;
        
        for (let i = 0; i < files.length; i++) {
            if (files[i].name.toLowerCase().endsWith('.stl')) {
                formData.append('file', files[i]);
                hasValidFile = true;
            }
        }
        
        if (!hasValidFile) {
            window.customAlert('{{ _("Please upload valid .stl files!") }}');
            return;
        }

        progressContainer.classList.remove('d-none');
        dropZone.classList.add('d-none');
        progressBar.style.width = '0%';
        progressText.innerText = '0%';

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ url_for("main.files") }}', true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                const percentComplete = Math.floor((e.loaded / e.total) * 100);
                progressBar.style.width = percentComplete + '%';
                progressText.innerText = percentComplete + '%';
            }
        };

        xhr.onload = function() {
            if (xhr.status === 200) {
                statusText.innerHTML = '<i class="bi bi-check-circle-fill text-success me-1"></i>{{ _("Upload Complete!") }}';
                progressBar.classList.replace('progress-bar-animated', 'bg-success');
                setTimeout(() => window.location.reload(), 500);
            } else {
                try {
                    let response = JSON.parse(xhr.responseText);
                    if (response.error) {
                        window.customAlert('{{ _("Validation Failed") }}:\n' + response.error);
                        progressContainer.classList.add('d-none');
                        dropZone.classList.remove('d-none');
                        return;
                    }
                } catch(e) {
                    console.log('No JSON error response');
                }
                window.customAlert('{{ _("Upload failed.") }}');
                progressContainer.classList.add('d-none');
                dropZone.classList.remove('d-none');
            }
        };

        xhr.onerror = function() {
            window.customAlert('{{ _("Upload error.") }}');
            progressContainer.classList.add('d-none');
            dropZone.classList.remove('d-none');
        };

        xhr.send(formData);
    }
});
</script>
{% endblock %}