{% extends 'base.html.twig' %}
{% block title %}Importer un fichier Excel{% endblock %}
{% block body_class %}admin-layout{% endblock %}

{% block header_banner %}
<div class="page-banner page-banner-admin">
    <div class="container">
        <h1 class="page-title">Import Excel</h1>
        <p class="page-sub">Chargement des amendes disciplinaires</p>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="admin-layout-inner">
    {% include 'admin/_sidebar.html.twig' %}

    <div class="admin-content">
        <div class="import-page">

            {# ── Zone de dépôt ── #}
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Sélectionner le fichier</h2>
                </div>
                <form method="post" enctype="multipart/form-data" id="form-import" action="{{ path('admin_import_process') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('import') }}">

                    <div class="dropzone" id="dropzone">
                        <input type="file" name="fichier_excel" id="file-input" accept=".xlsx,.xls" class="dropzone-input">
                        <div class="dropzone-content" id="dropzone-content">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
                            <p class="dropzone-title">Glissez votre fichier Excel ici</p>
                            <p class="dropzone-sub">ou <label for="file-input" class="dropzone-link">cliquez pour parcourir</label></p>
                            <p class="dropzone-hint">.xlsx ou .xls · Colonnes attendues : Numéro dossier, Nom de club, Date match, Somme totale…</p>
                        </div>
                        <div class="dropzone-selected" id="dropzone-selected" style="display:none">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2e7d32" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><polyline points="12 18 15 15 18 18"/><line x1="15" y1="15" x2="15" y2="21"/></svg>
                            <div>
                                <p class="file-name" id="file-name"></p>
                                <p class="file-size" id="file-size"></p>
                            </div>
                            <button type="button" class="btn btn-outline btn-sm" id="btn-change-file">Changer</button>
                        </div>
                    </div>

                    <div class="import-options">
                        <label class="checkbox-label">
                            <input type="checkbox" name="update_existing" value="1">
                            <span>Mettre à jour les dossiers existants (motif, décision) — le statut de paiement est préservé</span>
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" name="dry_run" value="1" id="dry-run">
                            <span>Simulation uniquement (aucune modification en base)</span>
                        </label>
                    </div>

                    <div class="import-actions">
                        <button type="submit" class="btn btn-primary btn-lg" id="btn-import" disabled>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
                            Lancer l'import
                        </button>
                    </div>
                </form>
            </div>

            {# ── Résultat import (affiché après traitement) ── #}
            {% if importResult is defined %}
            <div class="card card-import-result">
                <div class="card-header">
                    <h2 class="card-title">Résultat de l'import</h2>
                    {% if importResult.dryRun %}
                        <span class="badge badge-info">Simulation</span>
                    {% endif %}
                </div>

                <div class="import-stats">
                    <div class="import-stat import-stat-success">
                        <div class="import-stat-value"></div>
                        <div class="import-stat-label">{{ importResult.new }} Nouveaux dossiers</div>
                    </div>
                    <div class="import-stat import-stat-warning">
                        <div class="import-stat-value"></div>
                        <div class="import-stat-label">{{ importResult.skipped }} Doublons ignorés</div>
                    </div>
                    <div class="import-stat {% if importResult.errors > 0 %}import-stat-danger{% else %}import-stat-neutral{% endif %}">
                        <div class="import-stat-value"></div>
                        <div class="import-stat-label">{{ importResult.errors }} Erreurs</div>
                    </div>
                </div>

                {% if importResult.details|length > 0 %}
                <div class="import-details">
                    <h4>Détail des lignes traitées</h4>
                    <ul class="import-log-list">
                        {% for detail in importResult.details %}
                            <li class="{% if 'doublon' in detail or 'ignoré' in detail %}log-skip{% elseif 'erreur' in detail|lower %}log-error{% else %}log-info{% endif %}">
                                {{ detail }}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
            {% endif %}

            {# ── Format attendu ── #}
            <div class="card card-help">
                <div class="card-header">
                    <h2 class="card-title">Format du fichier Excel attendu</h2>
                </div>
                <div class="columns-help">
                    <div class="col-required">
                        <h4>Colonnes obligatoires</h4>
                        <ul>
                            <li><code>Numéro dossier</code> — Identifiant unique</li>
                            <li><code>Numéro de club</code></li>
                            <li><code>Nom de club</code></li>
                            <li><code>Date match</code> — Format JJ/MM/AAAA</li>
                            <li><code>Somme totale</code> — Montant en euros</li>
                            <li><code>Nom, prénom personne</code></li>
                        </ul>
                    </div>
                    <div class="col-optional">
                        <h4>Colonnes optionnelles</h4>
                        <ul>
                            <li><code>Nom commission</code></li>
                            <li><code>Libellé motif</code></li>
                            <li><code>Libellé décision</code></li>
                            <li><code>Compétition</code></li>
                            <li><code>Date d'effet</code></li>
                            <li><code>Rôle</code> — Joueur / Entraîneur…</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('file-input');
const btnImport = document.getElementById('btn-import');

function handleFile(file) {
    if (!file || !file.name.match(/\.xlsx?$/i)) {
        alert('Veuillez sélectionner un fichier .xlsx ou .xls');
        return;
    }
    document.getElementById('dropzone-content').style.display = 'none';
    document.getElementById('dropzone-selected').style.display = 'flex';
    document.getElementById('file-name').textContent = file.name;
    document.getElementById('file-size').textContent = (file.size / 1024).toFixed(1) + ' Ko';
    btnImport.disabled = false;
}

fileInput.addEventListener('change', () => handleFile(fileInput.files[0]));
document.getElementById('btn-change-file').addEventListener('click', () => {
    fileInput.value = '';
    document.getElementById('dropzone-content').style.display = 'flex';
    document.getElementById('dropzone-selected').style.display = 'none';
    btnImport.disabled = true;
});

dropzone.addEventListener('dragover', e => { e.preventDefault(); dropzone.classList.add('drag-over'); });
dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
dropzone.addEventListener('drop', e => {
    e.preventDefault();
    dropzone.classList.remove('drag-over');
    const file = e.dataTransfer.files[0];
    const dt = new DataTransfer();
    dt.items.add(file);
    fileInput.files = dt.files;
    handleFile(file);
});
</script>
{% endblock %}