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

{% block title %}Import des opérations{% endblock %}

{% block stylesheets %}
<style>
    :root { --primary: #4A90E2; --success: #2ECC71; --bg: #F5F7FA; }
    body { background-color: var(--bg); font-family: 'Segoe UI', Roboto, sans-serif; color: #333; }
    .import-card { background: white; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 2rem; margin-top: 1.5rem; border: none; }
    .file-input-wrapper { position: relative; border: 2px dashed #D1D5DB; border-radius: 18px; background: #F9FAFB; padding: 40px 20px; text-align: center; transition: all 0.3s; }
    .file-input-wrapper:hover { border-color: var(--primary); background: #EFF6FF; }
    .file-input-wrapper input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
    .btn-import { background: linear-gradient(135deg, var(--primary), #357ABD); color: white; border: none; border-radius: 14px; padding: 16px; width: 100%; font-weight: 600; font-size: 1.1rem; cursor: pointer; }
    .bg-success-soft { background-color: rgba(46, 204, 113, 0.1); color: var(--success); }
    #loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.95); z-index: 9999; flex-direction: column; align-items: center; justify-content: center; }
    .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    canvas { max-width: 100% !important; height: auto !important; }
</style>
{% endblock %}

{% block body %}
<div id="loading-overlay">
    <div class="spinner"></div>
    <p class="mt-4 fw-bold text-primary">Analyse des opérations en cours...</p>
</div>

<div class="container d-flex justify-content-center pb-5">
    <div class="col-12 col-md-6">
        {% for label, messages in app.flashes %} 
            {% for message in messages %}
                {{ message }} 
            {% endfor %} 
        {% endfor %}

        {# FORMULAIRE D'IMPORT #}
        {% if app.flashes('success') is empty %}
            <div class="import-card shadow-lg">
                <header class="text-center mb-4">
                    <h4 class="fw-bold">Nouveau Relevé</h4>
                    <p class="text-muted small">Sélectionnez votre fichier CSV</p>
                </header>

                {{ form_start(form, {'attr': {'id': 'import-form'}}) }}
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase">Compte</label>
                        {{ form_widget(form.account, {'attr': {'class': 'form-select form-select-lg border-2'}}) }}
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase">Fichier</label>
                        <div class="file-input-wrapper">
                            <i class="fas fa-file-upload fa-2x text-muted mb-2"></i><br>
                            <span id="file-name-display" class="text-muted">Cliquez pour choisir le CSV</span>
                            {{ form_widget(form.csvFilename) }}
                        </div>
                    </div>

                    <div class="mt-5">
                        <button type="submit" class="btn-import">Lancer l'importation</button>
                    </div>
                    <div style="display:none">{{ form_rest(form) }}</div>
                {{ form_end(form, {'render_rest': false}) }}
            </div>
        {% endif %}
        
        {# AFFICHAGE DU RÉSULTAT #}
        {% for message in app.flashes('success') %}
            <div class="import-card border-0">
                <div class="text-center mb-4">
                    <div class="badge bg-success-soft px-3 py-2 rounded-pill mb-2">Succès</div>
                    <h5 class="fw-bold">{{ message }}</h5>
                </div>

                <div style="max-width: 180px; margin: 0 auto; min-height: 180px;" class="mb-4 d-flex align-items-center justify-content-center">
                    <canvas id="importChart"></canvas>
                </div>

                <div class="stats-box bg-light p-3 rounded-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="small fw-bold">Classées par l'IA</span>
                        <span class="badge bg-primary rounded-pill" id="js-ia-count">0</span>
                    </div>
                    <div class="progress mb-3" style="height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden;">
                        <div id="js-ia-progress" class="progress-bar bg-primary" role="progressbar" style="width: 0%"></div>
                    </div>
                </div>
                
                <div class="d-grid gap-2 mt-4">
                    <a href="{{ path('app_operations') }}" class="btn btn-dark py-3 rounded-4 fw-bold text-decoration-none text-center">Voir mes opérations</a>
                    <a href="{{ path('app_conf_import') }}" class="btn btn-outline-secondary btn-sm text-decoration-none text-center">Nouvel import</a>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const realInput = document.querySelector('.file-input-wrapper input[type="file"]');
        const display = document.getElementById('file-name-display');
        const form = document.getElementById('import-form');
        const loader = document.getElementById('loading-overlay');

        if (realInput && display) {
            realInput.addEventListener('change', function() {
                if (this.files && this.files.length > 0) {
                    display.innerText = "Fichier : " + this.files[0].name;
                    display.style.color = "#4A90E2";
                    display.style.fontWeight = "bold";
                }
            });
        }

        if (form) {
            form.addEventListener('submit', () => { loader.style.display = 'flex'; });
        }

        // --- PARTIE GRAPHIQUE ---
        {% for dataRaw in app.flashes('chartData') %}
            try {
                // Utilisation de JSON.parse pour s'assurer que les données sont propres
                const chartData = JSON.parse('{{ dataRaw|raw }}');
                const countIA = parseInt(chartData['Classées']) || 0;
                const countManual = parseInt(chartData['À catégoriser']) || 0;
                const total = countIA + countManual;
                const percent = total > 0 ? Math.round((countIA / total) * 100) : 0;

                const iaCountEl = document.getElementById('js-ia-count');
                const iaProgressEl = document.getElementById('js-ia-progress');
                const canvas = document.getElementById('importChart');

                if (iaCountEl) iaCountEl.innerText = countIA;
                if (iaProgressEl) iaProgressEl.style.width = percent + '%';

                if (canvas) {
                    new Chart(canvas.getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: ['IA', 'Manuel'],
                            datasets: [{
                                data: [countIA, countManual],
                                backgroundColor: ['#4A90E2', '#E5E7EB'],
                                borderWidth: 0,
                                cutout: '80%'
                            }]
                        },
                        options: { 
                            responsive: true,
                            maintainAspectRatio: true,
                            plugins: { legend: { display: false } } 
                        }
                    });
                }
            } catch (e) {
                console.error("Erreur ChartData:", e);
            }
        {% endfor %}
    });
</script>
{% endblock %}