{% extends "planarian/base.html" %}
{% load i18n %}
{% block export_csv %}{% endblock %}
{% block content %}
<div class="w3-container w3-padding-32" style="max-width:760px; margin:auto;">
{% if current_session and current_experiment %}
    {% include "inc/alert.html" %}
    
    <!-- Formulaire d'import -->
    <form method="post" enctype="multipart/form-data" novalidate id="import-form">
        {% csrf_token %}
        <input type="hidden" id="_sid" name="_sid" value="{{ current_session.id }}">
        <input type="hidden" id="_expid" name="_expid" value="{{ current_experiment.id }}">
         
        <div class="w3-card-4 w3-margin-bottom w3-border w3-round w3-round-large">
            <header class="w3-container w3-blue-grey w3-round  w3-round-top-large">
                <h3 class="w3-text-white">{% trans "Fichier CSV à importer" %}: <span class="w3-large w3-text-lime">{{ current_experiment }}</span></h3>
            </header>
            <div class="w3-container w3-padding-24">
                <p class="w3-light-blue w3-padding w3-border w3-round" style="margin:0 0 4px;">
                    {% trans "Colonnes obligatoires : well, px_per_mm, fps." %}<br>
                    {% trans "Toutes les autres colonnes sont optionnelles." %}
            
                <!-- Zone de dépôt de fichier -->
                <div id="drop-zone"
                     class="w3-border w3-border-blue-grey w3-round-large w3-padding-32"
                     style="border-style:dashed !important; border-width:2px !important;
                            text-align:center; cursor:pointer; transition:background 0.2s;"
                     onclick="document.getElementById('id_csv_file').click()"
                     ondragover="dragOver(event)"
                     ondragleave="dragLeave(event)"
                     ondrop="dropFile(event)">

                    <p style="font-size:2.5rem; margin:0;">📄</p>
                    <p id="drop-label" class="w3-text-blue-grey">
                        <b>{% trans "Glissez-déposez votre fichier CSV ici" %}</b><br>
                        <span class="w3-small w3-text-grey">
                            {% trans "ou cliquez pour sélectionner" %}
                        </span>
                    </p>
                    <!-- Input fichier caché -->
                    <input type="file" id="id_csv_file" name="csv_file"
                           accept=".csv,text/csv"
                           style="display:none;"
                           onchange="fileSelected(this)">
                </div>
                <!-- Aperçu du fichier sélectionné -->
                <div id="file-info" class="w3-panel w3-pale-green w3-round w3-margin-top" style="display:none;">
                    <p id="file-name" class="w3-text-green"><b></b></p>
                    <p id="file-size" class="w3-small w3-text-grey" style="margin:0;"></p>
                </div>

                <!-- Option : écraser -->
                <div class="w3-margin-top w3-padding-top w3-border-top">
                    <label class="w3-text-blue-grey" style="cursor:pointer; display:flex; align-items:center; gap:10px;">
                        <input type="checkbox" name="overwriteoverwrite" class="w3-check" value="1" />
                        <span>
                            <b>{% trans "Écraser les configurations existantes" %}</b><br>
                            <span class="w3-small w3-text-grey">
                                {% trans "Si décoché, les configurations déjà existantes (même experiment + well) seront ignorées." %}
                            </span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <!-- Boutons -->
        <div class="w3-row-padding w3-margin-bottom">
            <div class="w3-col s12">
                <button type="submit" id="submit-btn" name="valid" value="ok"
                        class="w3-button w3-blue-grey w3-round w3-large w3-padding-large"
                        disabled>
                    📂 {% trans "Importer" %}
                </button>
                <a href="/"
                   class="w3-button w3-light-grey w3-round w3-large w3-padding-large w3-margin-left">
                    ✖ {% trans "Annuler" %}
                </a>
            </div>
        </div>
    </form>
    <!-- ============================================================
         Format attendu du CSV
    ============================================================ -->
    <div class="w3-card-4 w3-round-large w3-border w3-round w3-round-large">
        <header class="w3-container w3-teal w3-round w3-round-top-large">
            <h3 class="w3-text-white">{% trans "Format du fichier CSV" %}</h3>
        </header>
        <div class="w3-container w3-padding-24">

            <!-- Colonnes obligatoires -->
            <p><b>{% trans "Colonnes obligatoires" %}</b></p>
            <div class="w3-responsive w3-margin-bottom">
                <table class="w3-table w3-bordered w3-small">
                    <thead>
                        <tr class="w3-teal">
                            <th>{% trans "Colonne" %}</th>
                            <th>{% trans "Type" %}</th>
                            <th>{% trans "Exemple" %}</th>
                            <th>{% trans "Description" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>experiment</code></td>
                            <td>{% trans "texte" %}</td>
                            <td><code>exp_2026_04_25</code></td>
                            <td>{% trans "Identifiant unique de l'expérience" %}</td>
                        </tr>
                        <tr>
                            <td><code>well</code></td>
                            <td>{% trans "texte" %}</td>
                            <td><code>A1</code></td>
                            <td>{% trans "Identifiant du puits" %}</td>
                        </tr>
                        <tr>
                            <td><code>px_per_mm</code></td>
                            <td>{% trans "flottant" %}</td>
                            <td><code>26.25</code></td>
                            <td>{% trans "Calibration optique (pixels/mm)" %}</td>
                        </tr>
                        <tr>
                            <td><code>fps</code></td>
                            <td>{% trans "flottant" %}</td>
                            <td><code>10.0</code></td>
                            <td>{% trans "Fréquence de capture (images/s)" %}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Colonnes optionnelles -->
            <p><b>{% trans "Colonnes optionnelles" %}</b>
               <span class="w3-small w3-text-grey">{% trans "(valeurs par défaut utilisées si absentes)" %}</span>
            </p>
            <div class="w3-responsive w3-margin-bottom">
                <table class="w3-table w3-bordered w3-small w3-striped">
                    <thead>
                        <tr class="w3-blue-grey">
                            <th>{% trans "Colonne" %}</th>
                            <th>{% trans "Défaut" %}</th>
                            <th>{% trans "Description" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td><code>well_radius_mm</code></td>    <td>8.0</td>       <td>{% trans "Rayon du puits (mm)" %}</td></tr>
                        <tr class="w3-grey"><td><code>thresh_immobile</code></td>   <td>0.2</td>       <td>{% trans "Seuil Immobile EthoVision (mm/s)" %}</td></tr>
                        <tr><td><code>thresh_mobile</code></td>     <td>1.5</td>       <td>{% trans "Seuil Mobile EthoVision (mm/s)" %}</td></tr>
                        <tr class="w3-grey"><td><code>tube_axis</code></td>         <td>vertical</td>  <td>{% trans "Axe du tube : vertical | horizontal" %}</td></tr>
                        <tr><td><code>min_area_px</code></td>       <td>20</td>        <td>{% trans "Surface min de détection (px²)" %}</td></tr>
                        <tr class="w3-grey"><td><code>planarian_count</code></td>   <td>1</td>         <td>{% trans "Nombre de planaires par puits" %}</td></tr>
                        <tr><td><code>photo_mode</code></td>        <td>none</td>      <td>{% trans "Phototactisme : none | fixed | sine | radial" %}</td></tr>
                        <tr class="w3-grey"><td><code>photo_strength</code></td>    <td>0.0</td>       <td>{% trans "Intensité phototactisme (0-1)" %}</td></tr>
                        <tr><td><code>chemo_strength</code></td>    <td>0.0</td>       <td>{% trans "Intensité chimiotactisme (0-1)" %}</td></tr>
                        <tr class="w3-grey"><td><code>chemo_radius_mm</code></td>   <td>2.0</td>       <td>{% trans "Rayon zone nourriture (mm)" %}</td></tr>
                        <tr><td><code>avoid_radius_mm</code></td>   <td>3.0</td>       <td>{% trans "Rayon évitement inter-individus (mm)" %}</td></tr>
                        <tr class="w3-grey"><td><code>aggreg_radius_mm</code></td>  <td>6.0</td>       <td>{% trans "Rayon agrégation inter-individus (mm)" %}</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- Exemple de fichier -->
            <p><b>{% trans "Exemple minimal" %}</b></p>
            <div class="w3-code w3-round w3-text-grey" style="font-size:12px; overflow-x:auto;">
experiment,well,px_per_mm,fps,thresh_immobile,thresh_mobile,photo_mode<br>
exp_ctrl_01,A1,26.25,10,0.2,1.5,none<br>
exp_ctrl_01,A2,26.25,10,0.2,1.5,none<br>
exp_light_01,B1,26.25,10,0.2,1.5,fixed<br>
exp_light_01,B2,26.25,10,0.2,1.5,fixed<br>
            </div>
        </div>
    </div>

</div><!-- fin container -->

<style>
    /* Zone de dépôt active */
    #drop-zone.dragover {
        background-color: #e3f2fd;
        border-color: #1565c0 !important;
    }
    /* Checkbox alignée */
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        flex-shrink: 0;
    }
    /* Bouton désactivé */
    button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>

<script>
    // --- Drag & drop ---
    function dragOver(e) {
        e.preventDefault();
        document.getElementById('drop-zone').classList.add('dragover');
    }

    function dragLeave(e) {
        document.getElementById('drop-zone').classList.remove('dragover');
    }

    function dropFile(e) {
        e.preventDefault();
        document.getElementById('drop-zone').classList.remove('dragover');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            const input = document.getElementById('id_csv_file');
            // Transfert du fichier vers l'input natif via DataTransfer
            const dt = new DataTransfer();
            dt.items.add(files[0]);
            input.files = dt.files;
            showFileInfo(files[0]);
        }
    }

    // --- Sélection via clic ---
    function fileSelected(input) {
        if (input.files.length > 0) {
            showFileInfo(input.files[0]);
        }
    }

    // --- Affichage du fichier sélectionné ---
    function showFileInfo(file) {
        const info    = document.getElementById('file-info');
        const nameEl  = document.getElementById('file-name').querySelector('b');
        const sizeEl  = document.getElementById('file-size');
        const label   = document.getElementById('drop-label');
        const btn     = document.getElementById('submit-btn');

        // Vérification extension
        if (!file.name.toLowerCase().endsWith('.csv')) {
            alert('{% trans "Le fichier doit être au format .csv" %}');
            return;
        }

        nameEl.textContent  = '📄 ' + file.name;
        sizeEl.textContent  = formatSize(file.size);
        info.style.display  = 'block';
        label.innerHTML     = '<b>{% trans "Fichier prêt à importer" %}</b>';
        btn.disabled        = false;

        // Aperçu des premières lignes
        const reader = new FileReader();
        reader.onload = function (e) {
            const lines   = e.target.result.split('\n').slice(0, 4);
            const preview = document.getElementById('csv-preview');
            if (preview) {
                preview.textContent = lines.join('\n');
            }
        };
        reader.readAsText(file, 'utf-8');
    }

    function formatSize(bytes) {
        if (bytes < 1024)       return bytes + ' B';
        if (bytes < 1048576)    return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / 1048576).toFixed(1) + ' MB';
    }
</script>
{% else %}
<div class="w3-container w3-padding-64 w3-margin" style="max-width:760px; margin:auto;">
    <h3 class="w3-panel w3-blue w3-round-xlarge w3-padding-64 w3-center"> {% trans "Choisir une session" %}<br>{% trans "Puis une expérience." %}</h3>
</div>
{% endif %}
{% endblock %}