{% extends 'base.html.twig' %}

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Produits</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-car"></i>Importer des produits</div>

        </div>
        <div class="portlet-body">
            {% if errors is not empty %}
                <div class="alert alert-danger">
                    <ul>
                        {% for err in errors %}
                            <li>{{ err }}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            <div id="import-section">
                <form id="import-form">
                    <div class="form-group">
                        <label for="file_produit" class="control-label">Fichier CSV ou Excel</label>
                        <input type="file" name="file_produit" id="file_produit" class="form-control" accept=".csv,.xls,.xlsx">
                        <span class="help-block">Colonnes: référence, codebar (asin), titre, catégorie, sous-catégorie, prix, marque</span>
                    </div>
                    <div class="form-group">
                        <label style="margin-top:10px; display:block;">
                            <input type="checkbox" name="update_only" id="update_only" value="1">
                            <span>Insérer les nouveaux produits uniquement</span>
                        </label>
                        <span class="help-block">Si coché, seuls les nouveaux produits seront créés. Les produits existants seront ignorés.</span>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn blue btn-md" onclick="startImport()"><i class="fa fa-upload"></i> Importer</button>
                    </div>
                </form>

                <div class="alert alert-info" style="margin-top:15px;">
                    Le taux TVA est fixé à 20 et le magasin courant est appliqué automatiquement.
                </div>
            </div>

            <!-- Progress Section (hidden until import starts) -->
            <div id="progress-section" style="display:none; margin-top:20px;">
                <h4>Progression de l'import</h4>
                
                <div class="progress" style="height: 25px; margin-bottom: 10px;">
                    <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%; line-height: 25px;">
                        <span id="progress-text">0%</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="panel panel-default">
                            <div class="panel-body text-center">
                                <h5 style="margin: 0; color: #27ae60;">
                                    <i class="fa fa-check"></i> Créés
                                </h5>
                                <h3 id="count-created" style="margin: 10px 0;">0</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel panel-default">
                            <div class="panel-body text-center">
                                <h5 style="margin: 0; color: #3498db;">
                                    <i class="fa fa-refresh"></i> Mis à jour
                                </h5>
                                <h3 id="count-updated" style="margin: 10px 0;">0</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel panel-default">
                            <div class="panel-body text-center">
                                <h5 style="margin: 0; color: #f39c12;">
                                    <i class="fa fa-skip"></i> Ignorés
                                </h5>
                                <h3 id="count-skipped" style="margin: 10px 0;">0</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel panel-default">
                            <div class="panel-body text-center">
                                <h5 style="margin: 0; color: #e74c3c;">
                                    <i class="fa fa-times"></i> Erreurs
                                </h5>
                                <h3 id="count-errors" style="margin: 10px 0;">0</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-info" id="status-message" style="margin-top: 15px;">
                    Préparation de l'import...
                </div>

                <div id="error-messages" style="margin-top: 10px;"></div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@latest/dist/xlsx.full.min.js"></script>
    <script type="text/javascript">
        let allData = [];
        let currentChunk = 0;
        let chunkSize = 100;
        let stats = {
            created: 0,
            updated: 0,
            skipped: 0,
            errors: 0
        };
        let updateOnly = false;

        function startImport() {
            const fileInput = document.getElementById('file_produit');
            if (!fileInput.files.length) {
                alert('Veuillez sélectionner un fichier');
                return;
            }

            const file = fileInput.files[0];
            const extension = file.name.split('.').pop().toLowerCase();

            // Reset stats
            stats = { created: 0, updated: 0, skipped: 0, errors: 0 };
            currentChunk = 0;
            updateOnly = document.getElementById('update_only').checked;

            // Show progress section
            document.getElementById('import-section').style.display = 'none';
            document.getElementById('progress-section').style.display = 'block';

            if (extension === 'csv') {
                Papa.parse(file, {
                    header: true,
                    skipEmptyLines: true,
                    complete: function(results) {
                        allData = results.data;
                        if (allData.length === 0) {
                            showError('Le fichier est vide ou n\'a pu être lu correctement');
                            return;
                        }
                        processNextChunk();
                    },
                    error: function(error) {
                        showError('Erreur lors de la lecture du CSV: ' + error.message);
                    }
                });
            } else if (extension === 'xlsx' || extension === 'xls') {
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        const data = new Uint8Array(e.target.result);
                        const workbook = XLSX.read(data, { type: 'array' });
                        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                        allData = XLSX.utils.sheet_to_json(worksheet);
                        
                        if (allData.length === 0) {
                            showError('Le fichier est vide');
                            return;
                        }
                        processNextChunk();
                    } catch (error) {
                        showError('Erreur lors de la lecture du fichier Excel: ' + error.message);
                    }
                };
                reader.readAsArrayBuffer(file);
            } else {
                showError('Format de fichier non supporté. Utilisez CSV ou Excel.');
            }
        }

        function processNextChunk() {
            const startIdx = currentChunk * chunkSize;
            const endIdx = Math.min(startIdx + chunkSize, allData.length);

            if (startIdx >= allData.length) {
                // Import terminé
                completeImport();
                return;
            }

            const chunk = allData.slice(startIdx, endIdx);
            const totalRows = allData.length;
            const processedRows = endIdx;

            document.getElementById('status-message').textContent = 'Traitement: ' + processedRows + ' / ' + totalRows + ' produits...';

            // Send chunk to backend
            fetch('{{ path('produit_import_chunk') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    chunk: chunk,
                    update_only: updateOnly
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erreur réseau: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    stats.created += data.created || 0;
                    stats.updated += data.updated || 0;
                    stats.skipped += data.skipped || 0;

                    if (data.errors && data.errors.length > 0) {
                        stats.errors += data.errors.length;
                        displayChunkErrors(data.errors);
                    }

                    updateProgress(processedRows, totalRows);
                    currentChunk++;
                    
                    // Petit délai avant le prochain chunk
                    setTimeout(processNextChunk, 100);
                } else {
                    showError(data.message || 'Erreur lors du traitement du chunk');
                }
            })
            .catch(error => {
                showError('Erreur réseau: ' + error.message);
            });
        }

        function updateProgress(current, total) {
            const percentage = Math.round((current / total) * 100);
            document.getElementById('progress-bar').style.width = percentage + '%';
            document.getElementById('progress-text').textContent = percentage + '%';
            
            document.getElementById('count-created').textContent = stats.created;
            document.getElementById('count-updated').textContent = stats.updated;
            document.getElementById('count-skipped').textContent = stats.skipped;
            document.getElementById('count-errors').textContent = stats.errors;
        }

        function displayChunkErrors(errors) {
            const errorDiv = document.getElementById('error-messages');
            errors.forEach(error => {
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-warning';
                alertDiv.innerHTML = '<i class="fa fa-warning"></i> ' + error;
                errorDiv.appendChild(alertDiv);
            });
        }

        function showError(message) {
            document.getElementById('status-message').className = 'alert alert-danger';
            document.getElementById('status-message').innerHTML = '<i class="fa fa-exclamation-circle"></i> ' + message;
            document.getElementById('progress-bar').className = 'progress-bar progress-bar-danger';
            
            // Add retry button
            const retryBtn = document.createElement('button');
            retryBtn.type = 'button';
            retryBtn.className = 'btn btn-default btn-sm';
            retryBtn.style.marginTop = '10px';
            retryBtn.innerHTML = '<i class="fa fa-refresh"></i> Réessayer';
            retryBtn.onclick = function() {
                resetImport();
            };
            document.getElementById('status-message').appendChild(document.createElement('br'));
            document.getElementById('status-message').appendChild(retryBtn);
        }

        function resetImport() {
            // Reset variables
            allData = [];
            currentChunk = 0;
            stats = { created: 0, updated: 0, skipped: 0, errors: 0 };
            updateOnly = false;
            
            // Clear file input
            document.getElementById('file_produit').value = '';
            
            // Hide progress section and show import form
            document.getElementById('progress-section').style.display = 'none';
            document.getElementById('error-messages').innerHTML = '';
            document.getElementById('import-section').style.display = 'block';
            
            // Reset progress bar
            document.getElementById('progress-bar').style.width = '0%';
            document.getElementById('progress-bar').className = 'progress-bar progress-bar-striped active';
            document.getElementById('progress-text').textContent = '0%';
            
            // Reset counts
            document.getElementById('count-created').textContent = '0';
            document.getElementById('count-updated').textContent = '0';
            document.getElementById('count-skipped').textContent = '0';
            document.getElementById('count-errors').textContent = '0';
            
            // Reset status message
            document.getElementById('status-message').className = 'alert alert-info';
            document.getElementById('status-message').textContent = 'Prêt à importer';
        }

        function completeImport() {
            const total = stats.created + stats.updated + stats.skipped;
            document.getElementById('progress-bar').className = 'progress-bar progress-bar-success';
            document.getElementById('progress-text').textContent = '100%';
            document.getElementById('status-message').className = 'alert alert-success';
            document.getElementById('status-message').innerHTML = '<strong>Import terminé avec succès!</strong><br>' +
                'Créés: ' + stats.created + ' | Mis à jour: ' + stats.updated + ' | Ignorés: ' + stats.skipped + ' | Total: ' + total;

            // Add reset button
            const resetBtn = document.createElement('button');
            resetBtn.type = 'button';
            resetBtn.className = 'btn btn-default btn-sm';
            resetBtn.style.marginTop = '10px';
            resetBtn.innerHTML = '<i class="fa fa-refresh"></i> Nouvel import';
            resetBtn.onclick = function() {
                resetImport();
            };
            document.getElementById('status-message').appendChild(document.createElement('br'));
            document.getElementById('status-message').appendChild(resetBtn);
        }

        // Save checkbox state
        document.addEventListener('DOMContentLoaded', function() {
            const checkbox = document.getElementById('update_only');
            const storageKey = 'karizma_produit_import_insert_only';
            
            const savedState = localStorage.getItem(storageKey);
            if (savedState === 'true') {
                checkbox.checked = true;
            }
            
            checkbox.addEventListener('change', function() {
                localStorage.setItem(storageKey, this.checked ? 'true' : 'false');
            });
        });
    </script>
{% endblock %}