{% extends "base.html" %}

{% block title %}Nouvelle simulation - Sesame Router{% endblock %}

{% block extra_head %}
  <link href="https://cdn.jsdelivr.net/npm/jsoneditor@10.1.0/dist/jsoneditor.min.css" rel="stylesheet" />
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
  <script src="{{ url_for('static', filename='js/preview_renderer.js') }}"></script>
  <script src="{{ url_for('static', filename='js/sesame_advanced_renderer.js') }}"></script>
  <style>
    /* Contrôle de la taille de l'éditeur JSON */
    #jsonEditor {
      height: 600px; /* Modifiez cette valeur pour la hauteur */
      width: 100%;   /* Utilise toute la largeur de la colonne Bootstrap */
    }
    
    #jsonFallback {
      height: 600px;
      font-family: 'Fira Code', monospace;
    }

    /* Style pour rendre l'éditeur redimensionnable verticalement par l'utilisateur */
    .jsoneditor-wrapper {
      resize: vertical;
      overflow: auto;
      min-height: 400px;
    }

    .grid-visualization {
      background: #0f1117;
      min-height: 780px;
      display: block;
      position: relative;
      overflow: auto;
      border-radius: 0 0 6px 6px;
    }

    /* Canvas s'auto-dimensionne via le renderer */
    #previewCanvas {
      display: block;
      width: 100%;
      cursor: grab;
    }
    #previewCanvas:active { cursor: grabbing; }

    /* Contrôles de visualisation */
    .preview-controls {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
      background: rgba(22,27,34,0.92);
      border: 1px solid #30363d;
      padding: 8px;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }

    /* Multi-layer preview styles */
    .ml-structure-bar {
      display: flex;
      height: 32px;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #dee2e6;
      margin-bottom: 6px;
      background: #fff;
    }
    .ml-structure-segment {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      font-weight: 600;
      color: #333;
      border-right: 1px solid rgba(255,255,255,0.4);
      min-width: 32px;
    }
    .ml-structure-segment:last-child { border-right: none; }
    .ml-structure-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ml-structure-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 0.75rem;
    }
    .ml-structure-legend-color {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      border: 1px solid #ccc;
    }
    .ml-layer-card {
      border-left: 3px solid #0d6efd;
      padding: 8px;
      margin-bottom: 6px;
      background: #fff;
      border-radius: 4px;
    }
  </style>
{% endblock %}

{% block content %}
<h1 class="mb-3">Nouvelle simulation</h1>

<div class="row g-3">
  <div class="col-lg-4">
    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white">Paramètres de la Simulation</div>
      <div class="card-body">
        <form id="simForm">
          <div class="mb-3">
            <label class="form-label fw-bold">Identification <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-12">
                <input class="form-control" name="simulation_name" placeholder="Nom de la simulation (ex: test_pn_01)" required />
              </div>
              <div class="col-12">
                <select class="form-select" name="simulation_type" id="simType" required>
                  <option value="" disabled selected>-- Choisir une simulation --</option>
                  {% for k,v in sim_types.items() %}
                    <option value="{{ k }}">{{ k }} ({{ v.description }})</option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>

          <!-- Section Hétérojonction -->
          <div id="heteroSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-primary">
            <label class="form-label fw-bold text-primary">Configuration Hétérojonction <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Matériau N (Gauche) <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="material_n">
                  {% for k,mat in materials.items() %}
                    <option value="{{ k }}" {% if k == 'CdS' %}selected{% endif %}>{{ k }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-6">
                <label class="small mb-0">Matériau P (Droite) <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="material_p">
                  {% for k,mat in materials.items() %}
                    <option value="{{ k }}" {% if k == 'CdTe' %}selected{% endif %}>{{ k }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-12">
                <label class="small mb-0">Largeur d'interface / Gradient (cm)</label>
                <input class="form-control form-control-sm" name="mesh_refinement" value="1e-6" />
              </div>
              <div class="col-12 mt-2">
                <label class="small mb-0">Transport Quantique (Passivation)</label>
                <select class="form-select form-select-sm" name="quantum_model">
                  <option value="none" selected>Classique (Thermionique seul)</option>
                  <option value="tfe">TFE (Thermionic Field Emission - HIT/HJT)</option>
                  <option value="wkb_oxide">WKB Tunneling Oxyde (TOPCon)</option>
                </select>
                <small class="text-muted">Prend en compte l'effet tunnel</small>
              </div>
              <div class="col-12 mt-2 pt-2 border-top">
                <label class="form-label fw-bold small text-primary mb-1">Pièges d'Interface (Dit)</label>
                <div class="row g-2">
                  <div class="col-4">
                    <label class="small mb-0">Densité (cm⁻²)</label>
                    <input class="form-control form-control-sm" name="dit_density" value="0" placeholder="Ex: 1e11" />
                  </div>
                  <div class="col-4">
                    <label class="small mb-0">Capture e- (cm²)</label>
                    <input class="form-control form-control-sm" name="dit_sigma_e" value="1e-15" />
                  </div>
                  <div class="col-4">
                    <label class="small mb-0">Capture h+ (cm²)</label>
                    <input class="form-control form-control-sm" name="dit_sigma_h" value="1e-15" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Section Tandem -->
          <div id="tandemSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-primary">
            <label class="form-label fw-bold text-primary">Paramètres Tandem <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Matériau Top <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="material_top">
                   {% for k,mat in materials.items() %}<option value="{{ k }}" {% if k == 'GaAs' %}selected{% endif %}>{{ k }}</option>{% endfor %}
                </select>
              </div>
              <div class="col-6">
                <label class="small mb-0">Thick Top (cm) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="thickness_top" value="2e-4" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Matériau Bottom <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="material_bottom">
                   {% for k,mat in materials.items() %}<option value="{{ k }}" {% if k == 'Si' %}selected{% endif %}>{{ k }}</option>{% endfor %}
                </select>
              </div>
              <div class="col-6">
                <label class="small mb-0">Thick Bottom (cm) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="thickness_bottom" value="3e-4" />
              </div>
            </div>
          </div>

          <!-- Section Triple Jonction -->
          <div id="tripleJunctionSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-primary">
            <label class="form-label fw-bold text-primary">Paramètres Triple Jonction <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Matériau Top <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="tj_material_top">
                   {% for k,mat in materials.items() %}<option value="{{ k }}" {% if k == 'GaInP' %}selected{% endif %}>{{ k }}</option>{% endfor %}
                </select>
              </div>
              <div class="col-6">
                <label class="small mb-0">Thick Top (cm) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="tj_thickness_top" value="1e-4" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Matériau Middle <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="tj_material_mid">
                   {% for k,mat in materials.items() %}<option value="{{ k }}" {% if k == 'GaAs' %}selected{% endif %}>{{ k }}</option>{% endfor %}
                </select>
              </div>
              <div class="col-6">
                <label class="small mb-0">Thick Middle (cm) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="tj_thickness_mid" value="2e-4" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Matériau Bottom <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm" name="tj_material_bottom">
                   {% for k,mat in materials.items() %}<option value="{{ k }}" {% if k == 'Ge' %}selected{% endif %}>{{ k }}</option>{% endfor %}
                </select>
              </div>
              <div class="col-6">
                <label class="small mb-0">Thick Bottom (cm) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="tj_thickness_bottom" value="3e-4" />
              </div>
            </div>
          </div>

          <!-- Section Contacts -->
          <div id="contactStudySection" style="display:none;" class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold text-primary">Étude des Contacts</label>
            <div class="row g-2">
              <div class="col-12">
                <label class="small mb-0">Type de Contact</label>
                <select class="form-select form-select-sm" name="cs_contact_type" id="contactTypeSelect">
                  <option value="Schottky">Schottky (Barrière variable)</option>
                  <option value="Ohmic">Ohmic (Idéal)</option>
                  <option value="Tunneling">Tunneling (Passivation WKB)</option>
                </select>
              </div>
              <div class="col-12" id="wfRangeDiv">
                <label class="small mb-0">Plage Work Function (eV, séparées par virgule)</label>
                <input class="form-control form-control-sm" name="cs_wf_range" value="4.0, 4.5, 5.0" />
              </div>
              
              <!-- Paramètres Tunnel WKB -->
              <div class="col-6 tunnel-params" style="display:none;">
                <label class="small mb-0">Épaisseur Oxyde (nm)</label>
                <input class="form-control form-control-sm" name="tunnel_thickness_nm" value="1.5" />
              </div>
              <div class="col-6 tunnel-params" style="display:none;">
                <label class="small mb-0">Barrière (eV)</label>
                <input class="form-control form-control-sm" name="tunnel_barrier_eV" value="3.2" />
              </div>
              
              <script>
                document.getElementById('contactTypeSelect').addEventListener('change', function() {
                  const isTunnel = this.value === 'Tunneling';
                  document.querySelectorAll('.tunnel-params').forEach(el => el.style.display = isTunnel ? 'block' : 'none');
                  document.getElementById('wfRangeDiv').style.display = isTunnel ? 'none' : 'block';
                });
              </script>
            </div>
          </div>

          <!-- Section Grain Boundaries -->
          <div id="gbSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-primary">
            <label class="form-label fw-bold text-primary">Défauts & Joints de Grains <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Grain Size (cm) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="grain_size" value="1e-4" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Density (cm⁻²) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="gb_density" value="1e12" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Energy (eV) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="gb_energy" value="0.5" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Position GB (cm)</label>
                <input class="form-control form-control-sm" name="gb_pos" value="1.8e-4" />
              </div>
            </div>
          </div>

          <!-- Section Circuit -->
          <div id="circuitSection" style="display:none;" class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold text-primary">Paramètres Circuit (Rs, Rsh)</label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Rs (Ω·cm²)</label>
                <input class="form-control form-control-sm" name="rs" value="1.5" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Rsh (Ω·cm²)</label>
                <input class="form-control form-control-sm" name="rsh" value="1000" />
              </div>
            </div>
          </div>

          <!-- Section Spectres (QE/SR/Tandem) -->
          <div id="spectrumSection" style="display:none;" class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold text-primary">Spectre Personnalisé</label>
            <div class="row g-2">
              <div class="col-12">
                <label class="small mb-0">Longueurs d'onde (nm, sép. par virgule)</label>
                <input class="form-control form-control-sm" name="spectrum_wavelengths" placeholder="300, 400, 500, ..." />
              </div>
              <div class="col-12">
                <label class="small mb-0">Intensité (ph/cm²/s/nm, sép. par virgule)</label>
                <input class="form-control form-control-sm" name="spectrum_intensity" placeholder="1e15, 2e15, 1.5e15, ..." />
              </div>
            </div>
          </div>

          <!-- Section EBIC -->
          <div id="ebicSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-primary">
            <label class="form-label fw-bold text-primary">Paramètres EBIC</label>
            <div class="row g-2">
              <div class="col-6"><label class="small mb-0">Start (cm)</label><input class="form-control form-control-sm" name="beam_start" value="0" /></div>
              <div class="col-6"><label class="small mb-0">Stop (cm)</label><input class="form-control form-control-sm" name="beam_stop" value="5e-4" /></div>
              <div class="col-4"><label class="small mb-0">Points</label><input class="form-control form-control-sm" name="beam_points" value="50" /></div>
              <div class="col-4"><label class="small mb-0">Sigma (cm)</label><input class="form-control form-control-sm" name="beam_sigma" value="1e-6" /></div>
              <div class="col-4"><label class="small mb-0">Intensity</label><input class="form-control form-control-sm" name="beam_intensity" value="1e18" /></div>
            </div>
          </div>

          <!-- Étude Température -->
          <div id="tempStudySection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-danger">
            <h6 class="text-danger mb-3"><i class="fas fa-thermometer-half"></i> Étude de Température</h6>
            <div class="row g-2">
              <div class="col-12">
                <label class="small mb-0">Valeurs de Température (K)</label>
                <input class="form-control form-control-sm" name="temp_values" value="250, 300, 350, 400" />
                <small class="text-muted">Séparées par des virgules</small>
              </div>
            </div>
          </div>

          <!-- Variable Illumination -->
          <div id="illuminationStudySection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-warning">
            <h6 class="text-warning mb-3"><i class="fas fa-sun"></i> Illumination Variable</h6>
            <div class="row g-2">
              <div class="col-12">
                <label class="small mb-0">Plage d'intensité (ph/cm²/s)</label>
                <input class="form-control form-control-sm" name="illum_intensity_range" value="1e14, 1e15, 1e16, 1e17, 1e18" placeholder="ex: 1e14, 1e15..." />
                <small class="text-muted">Valeurs séparées par des virgules</small>
              </div>
              <div class="col-12">
                <label class="small mb-0">Coefficient d'absorption alpha (cm⁻¹)</label>
                <input class="form-control form-control-sm" name="illum_alpha" value="1e4" />
              </div>
            </div>
          </div>

          <!-- Section Electro-Thermique -->
          <div id="electroThermalSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-danger">
            <label class="form-label fw-bold text-danger">Couplage Électro-Thermique</label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Temp. Ambiante (K)</label>
                <input class="form-control form-control-sm" name="et_t_ambient" value="300.0" />
              </div>
              <div class="col-6">
                <label class="small mb-0">R_thermique (K·cm²/W)</label>
                <input class="form-control form-control-sm" name="et_r_thermal" value="20.0" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Puissance Illum. (W/cm²)</label>
                <input class="form-control form-control-sm" name="et_illumination" value="0.1" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Itérations Max</label>
                <input class="form-control form-control-sm" name="et_max_iterations" value="15" />
              </div>
            </div>
          </div>

          <!-- Section Degradation -->
          <div id="degradationSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-warning">
            <label class="form-label fw-bold text-warning">Étude de Dégradation (Vieillissement)</label>
            <div class="row g-2">
              <div class="col-12">
                <label class="small mb-0">Points temporels (Heures, sép. par virgule)</label>
                <input class="form-control form-control-sm" name="deg_time_points" value="0, 24, 168, 1000, 8760" />
              </div>
              <div class="col-12">
                <label class="small mb-0">Mécanismes activés</label>
                <select class="form-select form-select-sm" name="deg_mechanisms" multiple>
                  <option value="lid" selected>LID (Light Induced Deg.)</option>
                  <option value="pid" selected>PID (Potential Induced Deg.)</option>
                  <option value="perovskite">Dégradation Pérovskite / Humidité</option>
                </select>
                <small class="text-muted">Ctrl+Click pour sélection multiple</small>
              </div>
              <div class="col-4">
                <label class="small mb-0">Température (K)</label>
                <input class="form-control form-control-sm" name="deg_temperature" value="333.15" />
              </div>
              <div class="col-4">
                <label class="small mb-0">Humidité (0-1)</label>
                <input class="form-control form-control-sm" name="deg_humidity" value="0.5" />
              </div>
              <div class="col-4">
                <label class="small mb-0">V_system (V)</label>
                <input class="form-control form-control-sm" name="deg_v_system" value="1000.0" />
              </div>
            </div>
          </div>

          <!-- Section Paramétrique -->
          <div id="parametricSection" style="display:none;" class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold text-primary">Balayage Paramétrique</label>
            <div class="row g-2">
              <div class="col-12">
                <label class="small mb-0">Nom du Paramètre (ex: doping_n)</label>
                <select class="form-select form-select-sm" name="param_name">
                  <option value="doping_n" selected>Dopage N</option>
                  <option value="doping_p">Dopage P</option>
                  <option value="thickness_n">Épaisseur N</option>
                  <option value="thickness_p">Épaisseur P</option>
                  <option value="temperature">Température</option>
                  <option value="mesh_refinement">Raffinement du maillage</option>
                  <option value="generation_depth">Profondeur de génération</option>
                </select>
              </div>
              <div class="col-12">
                <label class="small mb-0">Valeurs (séparées par virgule)</label>
                <input class="form-control form-control-sm" name="param_values" placeholder="1e-4, 2e-4, 5e-4" />
              </div>
            </div>
          </div>

          <!-- Paramètres Physiques Fondamentaux -->
          <div class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold">Paramètres Physiques <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Température (K) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="temperature" value="300" />
                <small class="text-muted">Affecte Eg, Nc, Nv, mobilités</small>
              </div>
              <div class="col-6">
                <label class="small mb-0">Type de Maillage</label>
                <select class="form-select form-select-sm" name="mesh_type">
                  <option value="adaptive">Adaptif (recommandé)</option>
                  <option value="uniform">Uniforme</option>
                  <option value="custom">Personnalisé</option>
                </select>
              </div>
              <div class="col-12">
                <label class="small mb-0">Convention de signe (courant / puissance)</label>
                <select class="form-select form-select-sm" name="sign_convention">
                  <option value="pv_current_negative" selected>Option A (PV classique): J généré négatif, Jsc = -J(0), P = -V·J</option>
                  <option value="pv_current_positive">Option B: J généré positif, Jsc = J(0), P = V·J</option>
                </select>
              </div>
            </div>
          </div>

          <!-- Contacts et Surfaces -->
          <div class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold">Contacts et Surfaces <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Vitesse Recomb. Électrons (cm/s) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="sn" value="1e7" />
                <small class="text-muted">Sn: recombinaison surface électrons</small>
              </div>
              <div class="col-6">
                <label class="small mb-0">Vitesse Recomb. Trous (cm/s) <span class="text-danger">*</span></label>
                <input class="form-control form-control-sm" name="sp" value="1e7" />
                <small class="text-muted">Sp: recombinaison surface trous</small>
              </div>
            </div>
          </div>

          <!-- Paramètres du Solveur -->
          <div class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold">Paramètres du Solveur</label>
            <div class="row g-2">
              <div class="col-4">
                <label class="small mb-0">Type de Solveur</label>
                <select class="form-select form-select-sm" name="solver_type">
                  <option value="newton">Newton (rapide)</option>
                  <option value="gummel">Gummel (stable)</option>
                  <option value="mixed">Mixte</option>
                </select>
              </div>
              <div class="col-4">
                <label class="small mb-0">Tolérance</label>
                <input class="form-control form-control-sm" name="solver_tolerance" value="1e-6" />
                <small class="text-muted">Précision convergence</small>
              </div>
              <div class="col-4">
                <label class="small mb-0">Max Itérations</label>
                <input class="form-control form-control-sm" name="max_iterations" value="100" />
                <small class="text-muted">Limite convergence</small>
              </div>
            </div>
          </div>

          <!-- Défauts et Recombinaison -->
          <div class="mb-3 border p-3 rounded bg-light" id="defectsSection">
            <h6 class="text-primary mb-3"><i class="fas fa-bug"></i> Défauts (Recombinaison SRH)</h6>
            <div class="row g-2 mb-3">
              <div class="col-12">
                <label class="small fw-bold">Bibliothèque de défauts</label>
                <select class="form-select form-select-sm" id="defectLibrarySelect">
                  <option value="">-- Personnalisé --</option>
                  <!-- Options chargées via JS -->
                </select>
                <small class="text-muted" id="defectLibraryDesc"></small>
              </div>
            </div>
            <div class="row g-2">
              <div class="col-12">
                <label class="small mb-0">Type de Défaut (Charge)</label>
                <select class="form-select form-select-sm" name="defect_type">
                  <option value="neutral" selected>Neutre (SRH standard)</option>
                  <option value="donor">Donneur (+/0)</option>
                  <option value="acceptor">Accepteur (0/-)</option>
                </select>
                <small class="text-muted">Influence la charge d'espace (Poisson)</small>
              </div>
              <div class="col-6">
                <label class="small mb-0">Densité de Défauts (cm⁻³)</label>
                <input class="form-control form-control-sm" name="defect_density" value="1e12" />
                <small class="text-muted">SRH: défauts volumiques</small>
              </div>
              <div class="col-6">
                <label class="small mb-0">Énergie de Défaut (eV)</label>
                <input class="form-control form-control-sm" name="defect_energy" value="0.5" />
                <small class="text-muted">Milieu du gap typique</small>
              </div>
              <div class="col-6">
                <label class="small mb-0">Capture Électrons (cm³/s)</label>
                <input class="form-control form-control-sm" name="defect_capture_e" value="1e-7" />
              </div>
              <div class="col-6">
                <label class="small mb-0">Capture Trous (cm³/s)</label>
                <input class="form-control form-control-sm" name="defect_capture_h" value="1e-7" />
              </div>
            </div>
            <!-- Paramètres pour défauts continus -->
            <div class="row g-2 mt-2 pt-2 border-top" id="continuousDefectsFields" style="display:none;">
              <h6 class="text-primary mb-1"><i class="fas fa-chart-area"></i> Paramètres Distribution Continue</h6>
              <div class="col-4">
                <label class="small mb-0">Type de distribution</label>
                <select class="form-select form-select-sm" name="trap_distribution_type">
                  <option value="gaussian" selected>Gaussienne</option>
                  <option value="exponential">Exponentielle</option>
                  <option value="uniform">Uniforme</option>
                </select>
              </div>
              <div class="col-4">
                <label class="small mb-0">Densité Totale (cm⁻³)</label>
                <input class="form-control form-control-sm" name="trap_density" value="1e15" />
              </div>
              <div class="col-4">
                <label class="small mb-0">Centre (eV)</label>
                <input class="form-control form-control-sm" name="trap_energy" value="0.0" />
              </div>
              <div class="col-4">
                <label class="small mb-0">Largeur (eV)</label>
                <input class="form-control form-control-sm" name="trap_width" value="0.1" />
              </div>
              <div class="col-4">
                <label class="small mb-0">Niveaux discrétisés</label>
                <input class="form-control form-control-sm" name="trap_levels" value="15" />
              </div>
              <div class="col-4">
                <label class="small mb-0">Capture e- (cm²)</label>
                <input class="form-control form-control-sm" name="trap_sigma_e" value="1e-15" />
              </div>
              <div class="col-4">
                <label class="small mb-0">Capture h+ (cm²)</label>
                <input class="form-control form-control-sm" name="trap_sigma_h" value="1e-15" />
              </div>
            </div>
          </div>

          <!-- Génération Avancée -->
          <div class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold">Génération de Porteurs</label>
            <div class="row g-2">
              <div class="col-6">
                <label class="small mb-0">Profil de Génération</label>
                <select class="form-select form-select-sm" name="generation_profile">
                  <option value="exponential" selected>Exponentiel</option>
                  <option value="uniform">Uniforme</option>
                  <option value="gaussian">Gaussien</option>
                  <option value="custom">Personnalisé</option>
                </select>
              </div>
              <div class="col-6">
                <label class="small mb-0">Profondeur (cm)</label>
                <input class="form-control form-control-sm" name="generation_depth" value="1e-4" />
                <small class="text-muted">Pénétration lumière</small>
              </div>
              <div class="col-6">
                <label class="small mb-0">Modèle Optique (TMM)</label>
                <select class="form-select form-select-sm" name="optical_model">
                  <option value="auto" selected>Auto (TMM Spectral si poss.)</option>
                  <option value="tmm">Transfer Matrix Method (Forcé)</option>
                  <option value="beer_lambert">Beer-Lambert (Basique)</option>
                </select>
                <small class="text-muted">Solveur d'onde (rigoureux)</small>
              </div>
              <div class="col-12 mt-2">
                <label class="small mb-0">Texturisation / Antireflet (Ray-Tracing)</label>
                <select class="form-select form-select-sm" name="texture_type">
                  <option value="planar" selected>Planaire (Aucune texturisation)</option>
                  <option value="upright_pyramids">Pyramides droites (Silicium alcalin)</option>
                  <option value="inverted_pyramids">Pyramides inversées</option>
                  <option value="lambertian">Lambertienne (Piégeage idéal)</option>
                </select>
                <small class="text-muted">Améliore l'absorption via réflexions multiples</small>
              </div>
            </div>
          </div>

          <!-- Matériau (Homojonction / Défauts) -->
          <div class="mb-3" id="materialSection">
            <label class="form-label fw-bold">Matériau de Base <span class="text-danger">*</span></label>
            <select class="form-select" name="material">
              {% for k,mat in materials.items() %}
                <option value="{{ k }}" {% if k == 'Si' %}selected{% endif %}>{{ k }}</option>
              {% endfor %}
              <option value="__custom__">-- Matériau Personnalisé --</option>
            </select>
          </div>

          <!-- Matériau Personnalisé -->
          <div class="mb-3 border p-3 rounded bg-light border-warning" id="customMatSection" style="display:none;">
            <label class="form-label fw-bold text-primary">Propriétés Matériau Custom</label>

            <div class="mb-2">
              <label class="small mb-0">Charger un matériau enregistré</label>
              <select class="form-select form-select-sm" id="savedMaterialsList">
                <option value="">-- Sélectionner --</option>
              </select>
            </div>

            <div class="row g-2">
              <div class="col-4"><label class="small text-muted mb-0">Eg (eV)</label><input class="form-control form-control-sm" name="custom_Eg" value="1.12" /></div>
              <div class="col-4"><label class="small text-muted mb-0">Chi (eV)</label><input class="form-control form-control-sm" name="custom_affinity" value="4.05" /></div>
              <div class="col-4"><label class="small text-muted mb-0">Eps</label><input class="form-control form-control-sm" name="custom_epsilon" value="11.7" /></div>
              <div class="col-6"><label class="small text-muted mb-0">Nc (cm⁻³)</label><input class="form-control form-control-sm" name="custom_Nc" value="2.86e19" /></div>
              <div class="col-6"><label class="small text-muted mb-0">Nv (cm⁻³)</label><input class="form-control form-control-sm" name="custom_Nv" value="2.66e19" /></div>
              <div class="col-6"><label class="small text-muted mb-0">mu_e</label><input class="form-control form-control-sm" name="custom_mu_e" value="1400" /></div>
              <div class="col-6"><label class="small text-muted mb-0">mu_h</label><input class="form-control form-control-sm" name="custom_mu_h" value="450" /></div>
              <div class="col-6"><label class="small text-muted mb-0">tau_e (s)</label><input class="form-control form-control-sm" name="custom_tau_e" value="1e-5" /></div>
              <div class="col-6"><label class="small text-muted mb-0">tau_h (s)</label><input class="form-control form-control-sm" name="custom_tau_h" value="1e-5" /></div>
            </div>

            <div class="mt-2 d-grid">
              <button type="button" class="btn btn-outline-warning btn-sm" id="btnSaveMat">Enregistrer ce matériau</button>
            </div>
          </div>

          <!-- Géométrie commune -->
          <div class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold">Géométrie & Maillage <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6"><label class="small mb-0">Thick N (cm) <span class="text-danger">*</span></label><input class="form-control form-control-sm" name="thickness_n" value="0.5e-4" /></div>
              <div class="col-6"><label class="small mb-0">Thick P (cm) <span class="text-danger">*</span></label><input class="form-control form-control-sm" name="thickness_p" value="2e-4" /></div>
              <div class="col-6"><label class="small mb-0">Lx (Total, cm)</label><input class="form-control form-control-sm" name="lx" placeholder="Calculé auto" /></div>
              <div class="col-6"><label class="small mb-0">Ly (2D, cm)</label><input class="form-control form-control-sm" name="ly" placeholder="1D par défaut" /></div>
              <div class="col-6"><label class="small mb-0">Nx (Points) <span class="text-danger">*</span></label><input class="form-control form-control-sm" name="nx" value="100" /></div>
              <div class="col-6"><label class="small mb-0">Ny (Points)</label><input class="form-control form-control-sm" name="ny" value="1" /></div>
            </div>
          </div>

          <!-- Dopage commun -->
          <div class="mb-3 border p-3 rounded bg-light">
            <label class="form-label fw-bold">Dopage des Régions <span class="text-danger">*</span></label>
            <div class="row g-2">
              <div class="col-6"><label class="small mb-0">N region (cm⁻³) <span class="text-danger">*</span></label><input class="form-control form-control-sm" name="doping_n" value="1e17" /></div>
              <div class="col-6"><label class="small mb-0">P region (cm⁻³) <span class="text-danger">*</span></label><input class="form-control form-control-sm" name="doping_p" value="1e15" /></div>
            </div>
          </div>

          <!-- Tension de balayage -->
          <div class="mb-3 border p-3 rounded">
            <label class="form-label fw-bold">Balayage de Tension (V)</label>
            <div class="row g-2">
              <div class="col-4"><label class="small mb-0">Start</label><input class="form-control form-control-sm" name="voltage_start" value="0" /></div>
              <div class="col-4"><label class="small mb-0">Stop</label><input class="form-control form-control-sm" name="voltage_stop" value="0.7" /></div>
              <div class="col-4"><label class="small mb-0">Points</label><input class="form-control form-control-sm" name="voltage_points" value="50" /></div>
            </div>
          </div>

          <!-- Éclairement -->
          <div class="mb-3 border p-3 rounded bg-light">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="illum_enabled" checked>
              <label class="form-check-label fw-bold">Éclairement (AM1.5 / Laser) <span class="text-danger">*</span></label>
            </div>
            <div class="row g-2 mt-1">
              <div class="col-6"><label class="small mb-0">Flux (ph/cm²/s) <span class="text-danger">*</span></label><input class="form-control form-control-sm" name="photon_flux" value="2.5e17" /></div>
              <div class="col-6"><label class="small mb-0">Alpha (cm⁻¹) <span class="text-danger">*</span></label><input class="form-control form-control-sm" name="absorption_coefficient" value="1e4" /></div>
            </div>
          </div>

          <!-- Section Multi-Couches -->
          <div id="multiLayerSection" style="display:none;" class="mb-3 border p-3 rounded bg-light border-primary">
            <label class="form-label fw-bold text-primary">Configuration Multi-Couches <span class="text-danger">*</span></label>
            <div class="d-flex justify-content-between align-items-center mb-2">
              <span class="text-muted small">Pour chaque couche : matériau, épaisseur et dopage.</span>
              <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-outline-success" onclick="mlAddLayer()">
                  <i class="fas fa-plus"></i> Ajouter
                </button>
                <button type="button" class="btn btn-outline-danger" onclick="mlRemoveLastLayer()" id="mlBtnRemove">
                  <i class="fas fa-minus"></i> Supprimer
                </button>
              </div>
            </div>
            <div id="mlStructurePreview" class="mb-2">
              <div class="ml-structure-bar" id="mlStructureBar"></div>
              <div class="ml-structure-legend small text-muted" id="mlStructureLegend"></div>
            </div>
            <div id="mlLayerRows"></div>
          </div>

          <!-- Graphes -->
          <div class="mb-3">
            <label class="form-label fw-bold">Graphiques à Générer</label>
            <div id="plotsContainer" class="row g-1">
              <!-- Dynamiquement peuplé par JS -->
            </div>
          </div>

          <div class="d-grid gap-2">
            <button type="button" class="btn btn-primary" id="btnGen">Générer JSON</button>
            <button type="button" class="btn btn-success" id="btnRun" disabled>Lancer la Simulation</button>
            <button type="reset" class="btn btn-outline-secondary btn-sm" onclick="window.location.reload()">Réinitialiser</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span class="fw-bold">Configuration JSON de la simulation</span>
        <div class="btn-group">
           <button type="button" class="btn btn-outline-light btn-sm" id="btnFormat">Formatter</button>
        </div>
      </div>
      <div class="card-body">
        <div class="jsoneditor-wrapper">
          <div id="jsonEditor"></div>
        </div>
        <textarea id="jsonFallback" class="form-control" style="display:none; font-family: monospace;" spellcheck="false"></textarea>

        <div class="mt-3 p-3 bg-light rounded d-flex justify-content-between">
          <div>
            <span id="simInfo" class="badge bg-secondary">Aucune configuration</span>
            <span id="validationStatus" class="ms-2"></span>
          </div>
          <div class="text-muted small">ID Session: <span id="sessionId">--</span></div>
        </div>
      </div>
    </div>

    <div class="alert alert-info mt-3 small">
      <i class="bi bi-info-circle-fill me-2"></i>
      Vous pouvez modifier directement le JSON ci-dessus pour ajouter des paramètres avancés non présents dans le formulaire (ex: maillage non-uniforme, spectres personnalisés).
    </div>

    <!-- Section Visualisation Système -->
    <div class="card shadow mt-3 border-0" id="systemStateSection" style="background:#161b22; border:1px solid #30363d !important;">
      <div class="card-header d-flex justify-content-between align-items-center" style="background:#21262d; border-bottom:1px solid #30363d;">
        <span style="color:#e6edf3; font-weight:600; font-family:monospace; font-size:0.92rem;">
          <i class="bi bi-cpu"></i>&nbsp; System Preview — Band Diagram &amp; Doping Profile
        </span>
        <div class="d-flex gap-2 align-items-center">
          <span id="previewStatus" class="badge" style="background:#238636; color:#fff; font-size:0.75rem; display:none;">Live</span>
          <div class="btn-group btn-group-sm">
            <button class="btn btn-sm" style="background:#238636;color:#fff;border:none;"
                    onclick="updateSystemPreview(true)" title="Refresh from JSON">
              <i class="bi bi-arrow-clockwise"></i> Refresh
            </button>
            <button class="btn btn-sm" style="background:#21262d;color:#8b949e;border:1px solid #30363d;"
                    onclick="resetCanvasZoom()" title="Reset view">
              <i class="bi bi-fullscreen-exit"></i>
            </button>
            <button class="btn btn-sm" style="background:#21262d;color:#8b949e;border:1px solid #30363d;"
                    id="btnZoomIn" title="Zoom in">
              <i class="bi bi-zoom-in"></i>
            </button>
            <button class="btn btn-sm" style="background:#21262d;color:#8b949e;border:1px solid #30363d;"
                    id="btnZoomOut" title="Zoom out">
              <i class="bi bi-zoom-out"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="card-body p-0">
        <div class="grid-visualization" id="previewContainer">
          <canvas id="previewCanvas"></canvas>
        </div>
      </div>
      <div class="card-footer p-2 d-flex justify-content-between align-items-center"
           style="background:#161b22; border-top:1px solid #30363d;">
        <span style="color:#8b949e; font-size:0.75rem; font-family:monospace;">
          <i class="bi bi-mouse2"></i> Wheel: zoom · Drag: pan
        </span>
        <span id="previewInfo" style="color:#8b949e; font-size:0.75rem; font-family:monospace;"></span>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/jsoneditor@10.1.0/dist/jsoneditor.min.js"></script>
<script type="application/json" id="__plotData">
  {
    "plotMapping": {{ plot_defaults | tojson | safe }},
    "plotMetadata": {{ plot_metadata | tojson | safe }},
    "mlMats": {{ materials.keys()|list|tojson|safe }}
  }
</script>
<script>
(function(){
  const form = document.getElementById('simForm');
  const editorEl = document.getElementById('jsonEditor');
  const jsonFallback = document.getElementById('jsonFallback');
  const simInfo = document.getElementById('simInfo');
  const btnGen = document.getElementById('btnGen');
  const btnRun = document.getElementById('btnRun');
  const btnFormat = document.getElementById('btnFormat');
  const sessionIdSpan = document.getElementById('sessionId');

  let lastSimId = null;
  let editor = null;

  const __pd = JSON.parse(document.getElementById('__plotData').textContent);
  const plotMapping = __pd.plotMapping;
  const plotMetadata = __pd.plotMetadata;

  function setConfig(cfg){
    if(editor) {
      editor.set(cfg);
    } else if(jsonFallback){
      jsonFallback.value = JSON.stringify(cfg, null, 2);
    }
  }

  function validateSimulationParams(formData) {
    const errors = [];
    
    // Validation température
    const temp = parseFloat(formData.temperature);
    if (isNaN(temp) || temp < 4 || temp > 500) {
      errors.push("Température doit être entre 4K et 500K");
    }
    
    // Validation vitesses de recombinaison
    const sn = parseFloat(formData.sn);
    const sp = parseFloat(formData.sp);
    if (isNaN(sn) || sn < 0 || sn > 1e10) {
      errors.push("Vitesse recombinaison électrons (Sn) invalide");
    }
    if (isNaN(sp) || sp < 0 || sp > 1e10) {
      errors.push("Vitesse recombinaison trous (Sp) invalide");
    }
    
    // Validation solveur
    const tolerance = parseFloat(formData.solver_tolerance);
    if (isNaN(tolerance) || tolerance <= 0 || tolerance > 1e-2) {
      errors.push("Tolérance solveur invalide (doit être > 0 et < 0.01)");
    }
    
    const maxIter = parseInt(formData.max_iterations);
    if (isNaN(maxIter) || maxIter < 10 || maxIter > 10000) {
      errors.push("Max itérations invalide (doit être entre 10 et 10000)");
    }
    
    // Validation défauts
    const defectDensity = parseFloat(formData.defect_density);
    if (defectDensity && (defectDensity < 0 || defectDensity > 1e20)) {
      errors.push("Densité de défauts hors limites physiques (0 - 1e20 cm⁻³)");
    }
    
    const defectEnergy = parseFloat(formData.defect_energy);
    if (defectEnergy && (defectEnergy < 0 || defectEnergy > 2)) {
      errors.push("Énergie de défaut invalide (doit être entre 0 et 2 eV)");
    }
    
    // Validation génération
    const genDepth = parseFloat(formData.generation_depth);
    if (genDepth && (genDepth <= 0 || genDepth > 1e-2)) {
      errors.push("Profondeur de génération invalide (doit être > 0 et < 1e-2 cm)");
    }
    
    return errors;
  }

  // -- Gestion Bibliothèque de Défauts --
  const defectLibrarySelect = document.getElementById('defectLibrarySelect');
  const defectLibraryDesc = document.getElementById('defectLibraryDesc');
  let loadedDefects = [];

  async function loadDefectsLibrary() {
    if (!defectLibrarySelect) return;
    try {
      const res = await fetch('/api/defects');
      const data = await res.json();
      if (data.success && data.defects) {
        loadedDefects = data.defects;
        data.defects.forEach(d => {
          const opt = document.createElement('option');
          opt.value = d.id;
          opt.textContent = `${d.material} - ${d.name}`;
          defectLibrarySelect.appendChild(opt);
        });
      }
    } catch (e) {
      console.warn('Erreur chargement défauts:', e);
    }
  }

  if (defectLibrarySelect) {
    defectLibrarySelect.addEventListener('change', (e) => {
      const val = e.target.value;
      if (!val) {
        defectLibraryDesc.textContent = '';
        return;
      }
      const d = loadedDefects.find(x => x.id === val);
      if (d) {
        document.querySelector('input[name="defect_energy"]').value = d.Et_minus_Ei;
        document.querySelector('input[name="defect_capture_e"]').value = d.sigma_e;
        document.querySelector('input[name="defect_capture_h"]').value = d.sigma_h;
        defectLibraryDesc.textContent = d.description || '';
      }
    });
    loadDefectsLibrary();
  }

  // ── Multi-layer state & helpers ───────────────────────────────────────
  let mlCount = 3;
  const ML_MAX = 7, ML_MIN = 1;
  const ML_COLORS = {
    'Si': '#a8d5e5', 'GaAs': '#f4d03f', 'GaInP': '#e74c3c', 'Ge': '#95a5a6',
    'CdTe': '#3498db', 'CdS': '#85c1e9', 'CIGS': '#2ecc71', 'CZTS': '#f39c12',
    'GaP': '#9b59b6', 'GaN': '#1abc9c', 'InP': '#e67e22', 'AlGaAs': '#d2b4de',
    'CsPbI3': '#f5b7b1', 'MAPbI3': '#fadbd8'
  };
  const ML_DEFAULTS = {
    'Si': { t: 1.0, dt: 'n', d: 1e16 }, 'GaAs': { t: 0.5, dt: 'n', d: 1e17 },
    'GaInP': { t: 0.1, dt: 'n', d: 1e18 }, 'Ge': { t: 5.0, dt: 'p', d: 1e17 },
    'CdTe': { t: 3.0, dt: 'p', d: 1e16 }, 'CdS': { t: 0.05, dt: 'n', d: 1e18 },
    'CIGS': { t: 2.0, dt: 'p', d: 1e16 }, 'CZTS': { t: 1.5, dt: 'p', d: 1e16 },
    'GaP': { t: 0.5, dt: 'n', d: 1e17 }, 'GaN': { t: 0.2, dt: 'n', d: 1e18 },
    'InP': { t: 0.5, dt: 'n', d: 1e17 }, 'AlGaAs': { t: 0.1, dt: 'n', d: 1e18 },
    'CsPbI3': { t: 0.5, dt: 'i', d: 1e14 }, 'MAPbI3': { t: 0.5, dt: 'i', d: 1e14 }
  };
  let ML_MATS = __pd.mlMats;

  function mlColor(m) { return ML_COLORS[m] || '#d5dbdb'; }
  function mlDefaults(m) { return ML_DEFAULTS[m] || { t: 0.5, dt: 'n', d: 1e16 }; }
  function mlOpts(sel) {
    let o = '';
    ML_MATS.forEach(m => { o += '<option value="' + m + '"' + (m === sel ? ' selected' : '') + '>' + m + '</option>'; });
    return o;
  }

  function mlRender() {
    const c = document.getElementById('mlLayerRows');
    if (!c) return;
    const old = [];
    Array.from(c.children).forEach(r => {
      const i = parseInt(r.dataset.idx, 10);
      old[i] = {
        m: r.querySelector('select[name="ml_' + i + '_mat"]')?.value,
        t: r.querySelector('input[name="ml_' + i + '_t"]')?.value,
        dt: r.querySelector('select[name="ml_' + i + '_dt"]')?.value,
        d: r.querySelector('input[name="ml_' + i + '_d"]')?.value,
        tj: r.querySelector('input[name="ml_' + i + '_tj"]')?.checked,
        tr: r.querySelector('input[name="ml_' + i + '_tr"]')?.value,
        tw: r.querySelector('input[name="ml_' + i + '_tw"]')?.value
      };
    });
    c.innerHTML = '';
    for (let i = 0; i < mlCount; i++) {
      const s = old[i] || {};
      const mat = s.m || 'Si', t = s.t || '0.5', dt = s.dt || 'n', d = s.d || '1e16';
      const tj = !!s.tj, tr = s.tr || '', tw = s.tw || '';
      const row = document.createElement('div');
      row.className = 'ml-layer-card';
      row.dataset.idx = i;
      row.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom" style="border-color: rgba(13, 110, 253, 0.25) !important;">
          <strong class="text-primary small"><i class="fas fa-layer-group"></i> Couche ${i + 1}</strong>
          <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2" title="Supprimer cette couche" onclick="mlRemoveAt(${i})"><i class="fas fa-times"></i></button>
        </div>
        <div class="row g-2 align-items-end mb-2">
          <div class="col-6">
            <label class="small mb-0 text-muted fw-bold">Matériau</label>
            <select class="form-select form-select-sm" name="ml_${i}_mat" onchange="mlOnMat(${i})">${mlOpts(mat)}</select>
          </div>
          <div class="col-6">
            <label class="small mb-0 text-muted fw-bold">Épaisseur (μm)</label>
            <input type="number" class="form-control form-control-sm" name="ml_${i}_t" value="${t}" min="0.0001" max="100" step="0.01" oninput="mlOnInput(${i})">
          </div>
        </div>
        <div class="row g-2 align-items-end">
          <div class="col-4">
            <label class="small mb-0 text-muted fw-bold">Type</label>
            <select class="form-select form-select-sm" name="ml_${i}_dt">
              <option value="n"${dt === 'n' ? ' selected' : ''}>n</option>
              <option value="p"${dt === 'p' ? ' selected' : ''}>p</option>
              <option value="i"${dt === 'i' ? ' selected' : ''}>i</option>
            </select>
          </div>
          <div class="col-8">
            <label class="small mb-0 text-muted fw-bold">Dopage (cm⁻³)</label>
            <input type="text" class="form-control form-control-sm" name="ml_${i}_d" value="${d}">
          </div>
        </div>
        <div class="row g-2 align-items-end mt-2">
          <div class="col-4">
            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" name="ml_${i}_tj" ${tj ? 'checked' : ''}>
              <label class="form-check-label small">Jonction tunnel</label>
            </div>
          </div>
          <div class="col-4">
            <label class="small mb-0 text-muted fw-bold">R tunnel (Ω·cm²)</label>
            <input type="text" class="form-control form-control-sm" name="ml_${i}_tr" value="${tr}" placeholder="ex: 1e-3">
          </div>
          <div class="col-4">
            <label class="small mb-0 text-muted fw-bold">Largeur tunnel (nm)</label>
            <input type="text" class="form-control form-control-sm" name="ml_${i}_tw" value="${tw}" placeholder="ex: 2">
          </div>
        </div>
      `;
      c.appendChild(row);
      if (!old[i]) mlApplyDef(i, mat);
    }
    mlUpdatePreview();
    mlUpdateButtons();
  }

  function mlApplyDef(i, m) {
    const def = mlDefaults(m);
    const c = document.getElementById('mlLayerRows');
    const r = c.querySelector('[data-idx="' + i + '"]');
    if (!r) return;
    const ti = r.querySelector('input[name="ml_' + i + '_t"]');
    const ds = r.querySelector('select[name="ml_' + i + '_dt"]');
    const di = r.querySelector('input[name="ml_' + i + '_d"]');
    if (ti) ti.value = def.t;
    if (ds) ds.value = def.dt;
    if (di) di.value = def.d.toExponential();
  }

  window.mlOnMat = function(i) {
    const c = document.getElementById('mlLayerRows');
    const r = c.querySelector('[data-idx="' + i + '"]');
    if (!r) return;
    const m = r.querySelector('select[name="ml_' + i + '_mat"]').value;
    mlApplyDef(i, m);
    mlUpdatePreview();
  }
  window.mlOnInput = function(i) { mlUpdatePreview(); }

  window.mlAddLayer = function() {
    if (mlCount >= ML_MAX) return;
    mlCount++;
    mlRender();
  }
  window.mlRemoveLastLayer = function() {
    if (mlCount <= ML_MIN) return;
    mlCount--;
    mlRender();
  }
  window.mlRemoveAt = function(idx) {
    if (mlCount <= ML_MIN) return;
    const c = document.getElementById('mlLayerRows');
    const rows = Array.from(c.children);
    
    // Extract current data BEFORE removing
    const data = [];
    rows.forEach(r => {
      const i = parseInt(r.dataset.idx, 10);
      data.push({
        m: r.querySelector('select[name="ml_' + i + '_mat"]')?.value,
        t: r.querySelector('input[name="ml_' + i + '_t"]')?.value,
        dt: r.querySelector('select[name="ml_' + i + '_dt"]')?.value,
        d: r.querySelector('input[name="ml_' + i + '_d"]')?.value,
        tj: r.querySelector('input[name="ml_' + i + '_tj"]')?.checked,
        tr: r.querySelector('input[name="ml_' + i + '_tr"]')?.value,
        tw: r.querySelector('input[name="ml_' + i + '_tw"]')?.value
      });
    });
    
    // Remove the specified index
    data.splice(idx, 1);
    mlCount--;
    
    // Clear DOM and inject values into a mock so mlRender reads them correctly
    c.innerHTML = '';
    data.forEach((d, i) => {
      const temp = document.createElement('div');
      temp.dataset.idx = i;
      temp.innerHTML = `
        <select name="ml_${i}_mat"><option value="${d.m}" selected></option></select>
        <input name="ml_${i}_t" value="${d.t}">
        <select name="ml_${i}_dt"><option value="${d.dt}" selected></option></select>
        <input name="ml_${i}_d" value="${d.d}">
        <input type="checkbox" name="ml_${i}_tj" ${d.tj ? 'checked' : ''}>
        <input name="ml_${i}_tr" value="${d.tr || ''}">
        <input name="ml_${i}_tw" value="${d.tw || ''}">
      `;
      c.appendChild(temp);
    });
    
    // Let mlRender rebuild the full UI from the mock DOM
    mlRender();
  }

  function mlUpdatePreview() {
    const bar = document.getElementById('mlStructureBar');
    const leg = document.getElementById('mlStructureLegend');
    if (!bar || !leg) return;
    const c = document.getElementById('mlLayerRows');
    const rows = Array.from(c.children);
    let layers = [], total = 0;
    rows.forEach(r => {
      const i = parseInt(r.dataset.idx, 10);
      const m = r.querySelector('select[name="ml_' + i + '_mat"]')?.value || 'Si';
      const t = parseFloat(r.querySelector('input[name="ml_' + i + '_t"]')?.value) || 0.1;
      layers.push({ m, t });
      total += t;
    });
    if (total <= 0) { bar.innerHTML = ''; leg.innerHTML = ''; return; }
    let bh = '', lh = '';
    const seen = new Set();
    layers.forEach((l, idx) => {
      const pct = (l.t / total) * 100;
      const col = mlColor(l.m);
      bh += '<div class="ml-structure-segment" style="width:' + pct + '%;background:' + col + ';">' + l.m + '</div>';
      if (!seen.has(l.m)) { seen.add(l.m); lh += '<span class="ml-structure-legend-item"><span class="ml-structure-legend-color" style="background:' + col + ';"></span>' + l.m + '</span>'; }
    });
    bar.innerHTML = bh;
    leg.innerHTML = lh;
  }

  function mlUpdateButtons() {
    const b = document.getElementById('mlBtnRemove');
    if (b) b.disabled = mlCount <= ML_MIN;
  }

  function mlValidate() {
    let ok = true;
    const c = document.getElementById('mlLayerRows');
    Array.from(c.children).forEach(r => {
      const i = parseInt(r.dataset.idx, 10);
      const ti = r.querySelector('input[name="ml_' + i + '_t"]');
      const di = r.querySelector('input[name="ml_' + i + '_d"]');
      const tri = r.querySelector('input[name="ml_' + i + '_tr"]');
      const twi = r.querySelector('input[name="ml_' + i + '_tw"]');
      if (ti) { const t = parseFloat(ti.value); if (isNaN(t) || t <= 0 || t > 100) { ti.classList.add('is-invalid'); ok = false; } else { ti.classList.remove('is-invalid'); } }
      if (di) { const d = parseFloat(di.value); if (isNaN(d) || d < 1e10 || d > 1e21) { di.classList.add('is-invalid'); ok = false; } else { di.classList.remove('is-invalid'); } }
      if (tri && tri.value.trim()) { const tr = parseFloat(tri.value); if (isNaN(tr) || tr < 0 || tr > 1e6) { tri.classList.add('is-invalid'); ok = false; } else { tri.classList.remove('is-invalid'); } }
      if (twi && twi.value.trim()) { const tw = parseFloat(twi.value); if (isNaN(tw) || tw <= 0 || tw > 1000) { twi.classList.add('is-invalid'); ok = false; } else { twi.classList.remove('is-invalid'); } }
    });
    return ok;
  }

  function collect(){
    const fd = new FormData(form);
    const plots = [];
    for (const v of fd.getAll('plots')) plots.push(v);

    const payload = {
      simulation_name: fd.get('simulation_name') || null,
      simulation_type: fd.get('simulation_type'),
      material: fd.get('material'),
      material_n: fd.get('material_n'),
      material_p: fd.get('material_p'),
      custom_material: {
        Eg: fd.get('custom_Eg'),
        affinity: fd.get('custom_affinity'),
        epsilon: fd.get('custom_epsilon'),
        Nc: fd.get('custom_Nc'),
        Nv: fd.get('custom_Nv'),
        mu_e: fd.get('custom_mu_e'),
        mu_h: fd.get('custom_mu_h'),
        tau_e: fd.get('custom_tau_e'),
        tau_h: fd.get('custom_tau_h'),
      },
      thickness_n: fd.get('thickness_n'),
      thickness_p: fd.get('thickness_p'),
      lx: fd.get('lx'),
      ly: fd.get('ly'),
      nx: fd.get('nx'),
      ny: fd.get('ny'),
      doping_n: fd.get('doping_n'),
      doping_p: fd.get('doping_p'),
      voltage_start: fd.get('voltage_start'),
      voltage_stop: fd.get('voltage_stop'),
      voltage_points: fd.get('voltage_points'),
      illum_enabled: fd.get('illum_enabled') === 'on',
      photon_flux: fd.get('photon_flux'),
      absorption_coefficient: fd.get('absorption_coefficient'),
      rs: fd.get('rs'),
      rsh: fd.get('rsh'),
      grain_size: fd.get('grain_size'),
      gb_density: fd.get('gb_density'),
      gb_energy: fd.get('gb_energy'),
      gb_pos: fd.get('gb_pos'),
      material_top: fd.get('material_top'),
      thickness_top: fd.get('thickness_top'),
      material_bottom: fd.get('material_bottom'),
      thickness_bottom: fd.get('thickness_bottom'),
      tj_material_top: fd.get('tj_material_top'),
      tj_thickness_top: fd.get('tj_thickness_top'),
      tj_material_mid: fd.get('tj_material_mid'),
      tj_thickness_mid: fd.get('tj_thickness_mid'),
      tj_material_bottom: fd.get('tj_material_bottom'),
      tj_thickness_bottom: fd.get('tj_thickness_bottom'),
      temp_values: fd.get('temp_values'),
      illum_intensity_range: fd.get('illum_intensity_range'),
      illum_alpha: fd.get('illum_alpha'),
      param_name: fd.get('param_name'),
      param_values: fd.get('param_values'),
      spectrum_wavelengths: fd.get('spectrum_wavelengths'),
      spectrum_intensity: fd.get('spectrum_intensity'),
      mesh_refinement: fd.get('mesh_refinement'),
      beam_start: fd.get('beam_start'),
      beam_stop: fd.get('beam_stop'),
      beam_points: fd.get('beam_points'),
      beam_sigma: fd.get('beam_sigma'),
      beam_intensity: fd.get('beam_intensity'),
      cs_contact_type: fd.get('cs_contact_type'),
      cs_wf_range: fd.get('cs_wf_range'),
      temperature: fd.get('temperature'),
      mesh_type: fd.get('mesh_type'),
      sign_convention: fd.get('sign_convention'),
      sn: fd.get('sn'),
      sp: fd.get('sp'),
      solver_type: fd.get('solver_type'),
      solver_tolerance: fd.get('solver_tolerance'),
      max_iterations: fd.get('max_iterations'),
      defect_type: fd.get('defect_type'),
      defect_density: fd.get('defect_density'),
      defect_energy: fd.get('defect_energy'),
      defect_capture_e: fd.get('defect_capture_e'),
      defect_capture_h: fd.get('defect_capture_h'),
      trap_distribution_type: fd.get('trap_distribution_type'),
      trap_density: fd.get('trap_density'),
      trap_energy: fd.get('trap_energy'),
      trap_width: fd.get('trap_width'),
      trap_levels: fd.get('trap_levels'),
      trap_sigma_e: fd.get('trap_sigma_e'),
      trap_sigma_h: fd.get('trap_sigma_h'),
      dit_density: fd.get('dit_density'),
      dit_sigma_e: fd.get('dit_sigma_e'),
      dit_sigma_h: fd.get('dit_sigma_h'),
      generation_profile: fd.get('generation_profile'),
      generation_depth: fd.get('generation_depth'),
      optical_model: fd.get('optical_model'),
      texture_type: fd.get('texture_type'),
      quantum_model: fd.get('quantum_model'),
      tunnel_thickness_nm: fd.get('tunnel_thickness_nm'),
      tunnel_barrier_eV: fd.get('tunnel_barrier_eV'),
      et_t_ambient: fd.get('et_t_ambient'),
      et_r_thermal: fd.get('et_r_thermal'),
      et_illumination: fd.get('et_illumination'),
      et_max_iterations: fd.get('et_max_iterations'),
      deg_time_points: fd.get('deg_time_points'),
      deg_mechanisms: fd.getAll('deg_mechanisms').join(','),
      deg_temperature: fd.get('deg_temperature'),
      deg_humidity: fd.get('deg_humidity'),
      deg_v_system: fd.get('deg_v_system'),
      plots: plots
    };

    // Lecture des couches multicouche depuis le DOM
    if (payload.simulation_type === 'multi_layer') {
      const layers = [];
      const c = document.getElementById('mlLayerRows');
      if (c) {
        Array.from(c.children).forEach(r => {
          const i = parseInt(r.dataset.idx, 10);
          const mat = r.querySelector('select[name="ml_' + i + '_mat"]')?.value || 'Si';
          const t_um = parseFloat(r.querySelector('input[name="ml_' + i + '_t"]')?.value) || 0.5;
          const dt = r.querySelector('select[name="ml_' + i + '_dt"]')?.value || 'n';
          const d = parseFloat(r.querySelector('input[name="ml_' + i + '_d"]')?.value) || 1e16;
          const layer = { material: mat, thickness: t_um * 1e-4, doping_type: dt, doping: d };
          const tj = r.querySelector('input[name="ml_' + i + '_tj"]')?.checked || false;
          const trRaw = r.querySelector('input[name="ml_' + i + '_tr"]')?.value;
          const twRaw = r.querySelector('input[name="ml_' + i + '_tw"]')?.value;
          const tr = parseFloat(trRaw);
          const tw = parseFloat(twRaw);
          if (tj) layer.tunnel_junction = true;
          if (isFinite(tr) && tr >= 0) layer.tunnel_resistance_ohm_cm2 = tr;
          if (isFinite(tw) && tw > 0) layer.tunnel_width_nm = tw;
          layers.push(layer);
        });
      }
      payload.layers = layers;
    }

    return payload;
  }

  function updateSections(){
    const st = document.getElementById('simType').value;
    if(!st) return;

    const showGB = (st === 'grain_boundaries' || st === 'grain_boundary_2d');
    const showCircuit = (st === 'equivalent_circuit');
    const showTandem = (st === 'tandem');
    const showTriple = (st === 'triple_junction');
    const showTemp = (st === 'temperature_study');
    const showElectroThermal = (st === 'electro_thermal_study');
    const showDegradation = (st === 'degradation_study');
    const showParam = (st === 'parametric_sweep' || st === 'optimize_thickness');
    const showContact = (st === 'contact_study');
    const showEBIC = (st === 'ebic_simulation');
    const showSpectrum = (st === 'quantum_efficiency' || st === 'spectral_response' || st === 'tandem' || st === 'triple_junction' || st === 'spectrum_study');
    const showHetero = (st === 'heterojunction' || st === 'heterojunction_2d' || st === 'graded_heterojunction');
    const showMulti = (st === 'multi_layer');
    const showContinuousDefects = (st === 'continuous_defects');
    const showIllumStudy = (st === 'variable_illumination');

    document.getElementById('continuousDefectsFields').style.display = showContinuousDefects ? 'flex' : 'none';
    document.getElementById('gbSection').style.display = showGB ? 'block' : 'none';
    document.getElementById('circuitSection').style.display = showCircuit ? 'block' : 'none';
    document.getElementById('tandemSection').style.display = showTandem ? 'block' : 'none';
    document.getElementById('tripleJunctionSection').style.display = showTriple ? 'block' : 'none';
    document.getElementById('tempStudySection').style.display = showTemp ? 'block' : 'none';
    document.getElementById('illuminationStudySection').style.display = showIllumStudy ? 'block' : 'none';
    document.getElementById('electroThermalSection').style.display = showElectroThermal ? 'block' : 'none';
    document.getElementById('degradationSection').style.display = showDegradation ? 'block' : 'none';
    document.getElementById('parametricSection').style.display = showParam ? 'block' : 'none';
    document.getElementById('contactStudySection').style.display = showContact ? 'block' : 'none';
    document.getElementById('ebicSection').style.display = showEBIC ? 'block' : 'none';
    document.getElementById('spectrumSection').style.display = showSpectrum ? 'block' : 'none';
    document.getElementById('heteroSection').style.display = showHetero ? 'block' : 'none';
    document.getElementById('multiLayerSection').style.display = showMulti ? 'block' : 'none';

    // Matériau de base caché pour hétéro/tandem/triple/circuit/multi
    document.getElementById('materialSection').style.display = (showHetero || showTandem || showTriple || showCircuit || showMulti) ? 'none' : 'block';

    // Géométrie et dopage cachés pour multi_layer (gérés par couches)
    const geoDopSections = form.querySelectorAll('.mb-3.border.p-3.rounded.bg-light');
    geoDopSections.forEach(sec => {
      const label = sec.querySelector('label');
      if (label) {
        const txt = label.textContent || '';
        if (txt.includes('Géométrie') || txt.includes('Dopage des Régions')) {
          sec.style.display = showMulti ? 'none' : 'block';
        }
      }
    });

    const mat = form.querySelector('select[name="material"]').value;
    document.getElementById('customMatSection').style.display = (mat === '__custom__' && !showHetero && !showTandem && !showTriple && !showCircuit && !showMulti) ? 'block' : 'none';

    // Update HTML5 required attribute for better UX
    const setReq = (selector, req) => {
      form.querySelectorAll(selector).forEach(el => {
        if(req) el.setAttribute('required', 'required');
        else el.removeAttribute('required');
      });
    };

    setReq('#heteroSection select', showHetero);
    setReq('#tandemSection input, #tandemSection select', showTandem);
    setReq('#gbSection input', showGB);
    setReq('#contactStudySection input, #contactStudySection select', showContact);
    setReq('#tempStudySection input', showTemp);
    setReq('#illuminationStudySection input', showIllumStudy);
    setReq('#ebicSection input', showEBIC);
    setReq('#spectrumSection input', st === 'quantum_efficiency' || st === 'spectral_response' || st === 'spectrum_study');

    if (showMulti) { mlRender(); }
    updatePlots(st);
  }

  function updatePlots(simType){
    const container = document.getElementById('plotsContainer');
    container.innerHTML = '';
    const plots = plotMapping[simType] || ["iv_curve", "band_diagram", "electron_density", "hole_density", "recombination_profiles"];
    const esc = (s) => String(s == null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#039;');

    plots.forEach(p => {
      const info = plotMetadata[p] || {};
      const label = info.name || p;
      const col = document.createElement('div');
      col.className = 'col-6';
      col.innerHTML = `
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="plots" value="${esc(p)}" checked />
          <label class="form-check-label small" title="${esc(p)}">${esc(label)}</label>
        </div>`;
      container.appendChild(col);
    });
  }

  async function fillFormWithTemplate(simType){
    try {
      if(window.setLoading) window.setLoading(true, 'Chargement des paramètres par défaut...');
      const resp = await fetch('/api/template/' + simType);
      const data = await resp.json();
      if(window.setLoading) window.setLoading(false);

      // Reset plots checkboxes
      form.querySelectorAll('[name="plots"]').forEach(c => c.checked = false);

      for(const [k, v] of Object.entries(data)){
        const els = form.querySelectorAll(`[name="${k}"]`);
        if(els.length === 0) continue;

        els.forEach(el => {
          if(el.type === 'checkbox'){
            if(k === 'plots'){
               if(Array.isArray(v) && v.includes(el.value)) el.checked = true;
            } else {
               el.checked = !!v;
            }
          } else if(v !== null && v !== undefined) {
            el.value = v;
          }
        });
      }

      // Initialisation des couches multicouche si présentes dans le template
      if (Array.isArray(data.layers) && data.layers.length > 0) {
        mlCount = Math.min(ML_MAX, Math.max(ML_MIN, data.layers.length));
        const c = document.getElementById('mlLayerRows');
        if (c) {
          c.innerHTML = '';
          data.layers.forEach((layer, i) => {
            const mat = layer.material || 'Si';
            const t = (layer.thickness || 0.5) * 1e4; // cm -> um
            const dt = layer.doping_type || 'n';
            const d = layer.doping || 1e16;
            const tj = layer.tunnel_junction ? ' checked' : '';
            const tr = layer.tunnel_resistance_ohm_cm2 || layer.tunnel_resistance || '';
            const tw = layer.tunnel_width_nm || (layer.tunnel_width_cm ? layer.tunnel_width_cm * 1e7 : '');
            const row = document.createElement('div');
            row.className = 'ml-layer-card';
            row.dataset.idx = i;
            row.innerHTML = '<div class="row g-2 align-items-end">' +
              '<div class="col-3"><label class="small mb-0">Matériau</label>' +
              '<select class="form-select form-select-sm" name="ml_' + i + '_mat" onchange="mlOnMat(' + i + ')">' + mlOpts(mat) + '</select></div>' +
              '<div class="col-3"><label class="small mb-0">Épaisseur (μm)</label>' +
              '<input type="number" class="form-control form-control-sm" name="ml_' + i + '_t" value="' + t + '" min="0.0001" max="100" step="0.01" oninput="mlOnInput(' + i + ')"></div>' +
              '<div class="col-2"><label class="small mb-0">Type</label>' +
              '<select class="form-select form-select-sm" name="ml_' + i + '_dt">' +
              '<option value="n"' + (dt === 'n' ? ' selected' : '') + '>n</option>' +
              '<option value="p"' + (dt === 'p' ? ' selected' : '') + '>p</option>' +
              '<option value="i"' + (dt === 'i' ? ' selected' : '') + '>i</option></select></div>' +
              '<div class="col-3"><label class="small mb-0">Dopage (cm⁻³)</label>' +
              '<input type="text" class="form-control form-control-sm" name="ml_' + i + '_d" value="' + d.toExponential() + '"></div>' +
              '<div class="col-1"><button type="button" class="btn btn-sm btn-outline-danger" onclick="mlRemoveAt(' + i + ')"><i class="fas fa-trash-alt"></i></button></div>' +
              '</div>' +
              '<div class="row g-2 align-items-end mt-2">' +
              '<div class="col-4"><div class="form-check mt-3">' +
              '<input class="form-check-input" type="checkbox" name="ml_' + i + '_tj"' + tj + '>' +
              '<label class="form-check-label small">Jonction tunnel</label></div></div>' +
              '<div class="col-4"><label class="small mb-0">R tunnel (Ω·cm²)</label>' +
              '<input type="text" class="form-control form-control-sm" name="ml_' + i + '_tr" value="' + tr + '" placeholder="ex: 1e-3"></div>' +
              '<div class="col-4"><label class="small mb-0">Largeur tunnel (nm)</label>' +
              '<input type="text" class="form-control form-control-sm" name="ml_' + i + '_tw" value="' + tw + '" placeholder="ex: 2"></div>' +
              '</div>';
            c.appendChild(row);
          });
          mlUpdatePreview();
          mlUpdateButtons();
        }
      }

      // Nested objects: spectrum / tandem wavelengths & intensity
      if (data.spectrum && typeof data.spectrum === 'object') {
        const wl = form.querySelector('[name="spectrum_wavelengths"]');
        const int = form.querySelector('[name="spectrum_intensity"]');
        if (wl && Array.isArray(data.spectrum.wavelengths)) wl.value = data.spectrum.wavelengths.join(', ');
        if (int && Array.isArray(data.spectrum.intensity)) int.value = data.spectrum.intensity.join(', ');
      }
      if (data.tandem && typeof data.tandem === 'object') {
        const wl = form.querySelector('[name="spectrum_wavelengths"]');
        const int = form.querySelector('[name="spectrum_intensity"]');
        if (wl && Array.isArray(data.tandem.wavelengths)) wl.value = data.tandem.wavelengths.join(', ');
        if (int && Array.isArray(data.tandem.spectrum)) int.value = data.tandem.spectrum.join(', ');
      }

      // Re-trigger visibility
      updateSections();
    } catch(e) {
      if(window.setLoading) window.setLoading(false);
      console.error('Fill failed', e);
    }
  }

  async function refreshMaterials(){
    const list = document.getElementById('savedMaterialsList');
    if(!list) return;
    try {
      const resp = await fetch('/api/custom-materials');
      const mats = await resp.json();
      list.innerHTML = '<option value="">-- Sélectionner --</option>';
      
      const selects = [
        document.querySelector('select[name="material"]'),
        document.querySelector('select[name="material_n"]'),
        document.querySelector('select[name="material_p"]'),
        document.querySelector('select[name="material_top"]'),
        document.querySelector('select[name="material_bottom"]')
      ];

      mats.forEach(m => {
        // Add to saved materials list
        const opt = document.createElement('option');
        opt.value = m.name;
        opt.textContent = m.name;
        opt.dataset.json = JSON.stringify(m.data);
        list.appendChild(opt);
        
        // Add to main dropdowns dynamically
        selects.forEach(sel => {
          if (sel) {
            const exists = Array.from(sel.options).some(o => o.value === m.name);
            if (!exists) {
              const customOpt = sel.querySelector('option[value="__custom__"]');
              const newOpt = new Option(m.name, m.name);
              if (customOpt) {
                sel.insertBefore(newOpt, customOpt);
              } else {
                sel.appendChild(newOpt);
              }
            }
          }
        });
        
        // Add to ML_MATS for multi-layer dropdowns
        if (typeof ML_MATS !== 'undefined' && !ML_MATS.includes(m.name)) {
          ML_MATS.push(m.name);
        }
      });
      
      // Update multi-layer if rendered
      if (document.getElementById('multiLayerSection').style.display !== 'none') {
        mlRender();
      }
    } catch(e) {}
  }

  // Visualisation Système (View System) - AVANCÉ
  let lastMeshData = null;
  let zoomScale = 1.0;

  // NOUVEAU: SesameAdvancedRenderer instance
  let previewRenderer = null;

  async function updateSystemPreview(fromJSON = false) {
    let payload = {};
    
    console.log("[Preview] updateSystemPreview called, fromJSON=", fromJSON);
    
    if (fromJSON && editor) {
      try {
        const config = editor.get();
        payload = config;
        console.log("[Preview] Using config from JSON editor");
      } catch (e) {
        console.warn("[Preview] Invalid JSON in editor, falling back to form data", e);
        fromJSON = false;
      }
    }
    
    if (!fromJSON) {
      const fd = collect();
      const simType = document.getElementById('simType')?.value || 'homojunction';
      
      payload = {
        simulation_type: simType,
        geometry: {
          thickness_n: parseFloat(fd.thickness_n) || 0.5e-4,
          thickness_p: parseFloat(fd.thickness_p) || 2.0e-4,
          nx: parseInt(fd.nx) || 200,
          ny: parseInt(fd.ny) || 1,
          ly: parseFloat(fd.ly) || 1e-4
        },
        doping: {
          n_region: parseFloat(fd.doping_n) || parseFloat(fd.n_region) || 1e16,
          p_region: parseFloat(fd.doping_p) || parseFloat(fd.p_region) || 1e16
        },
        materials: {
          active: fd.material || 'Si',
          n_type: fd.material_n || 'a-Si:H',
          p_type: fd.material_p || 'c-Si'
        }
      };
      console.log("[Preview] Using form data:", payload);
    }

    try {
      console.log("[Preview] Sending request to /api/preview-system");
      const resp = await fetch('/api/preview-system', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      console.log("[Preview] Response status:", resp.status);
      
      const data = await resp.json();
      console.log("[Preview] Response data:", data);
      
      if (data.success && data.geometry) {
        let canvas = document.getElementById('previewCanvas');
        if (!canvas) {
          const container = document.getElementById('previewContainer');
          container.innerHTML = '<canvas id="previewCanvas"></canvas>';
          canvas = document.getElementById('previewCanvas');
        }

        if (!previewRenderer) {
          previewRenderer = new SesameAdvancedRenderer(canvas);
        }

        previewRenderer.setGeometry(data.geometry);

        // Status badge
        const badge = document.getElementById('previewStatus');
        if (badge) { badge.style.display = 'inline-block'; }

        // Info line
        const geo = data.geometry;
        const regions = geo.regions || [];
        const rN = regions.find(r => r.doping_type === 'n') || {};
        const rP = regions.find(r => r.doping_type === 'p') || {};
        const infoEl = document.getElementById('previewInfo');
        if (infoEl) {
          const mat = rN.material || rP.material || (geo.simulation_type || '');
          const total = ((geo.mesh || {}).total_thickness || 0) * 1e4;
          infoEl.textContent = `${mat}  ·  L=${total.toPrecision(3)} µm  ·  ${regions.length} region(s)`;
        }

        if (data.is_advanced) {
          console.log("[Preview] Advanced mode — band profiles available");
        } else if (data.warning) {
          console.warn("[Preview] Fallback mode:", data.warning);
        }
        
        // Afficher les erreurs de validation si présentes
        if (data.validation && !data.validation.is_valid) {
          console.warn("[Preview] Validation errors:", data.validation.errors);
        }
      } else {
        console.error('[Preview error]:', data.error);
        alert('Erreur: ' + (data.error || 'Réponse invalide'));
      }
    } catch (e) {
      console.error('[Preview failed]', e);
      alert('Erreur de connexion: ' + e.message);
    }
  }

  // NOUVEAU: Gestion du zoom via SesameAdvancedRenderer
  window.resetCanvasZoom = () => {
    if (previewRenderer) previewRenderer.resetView();
  };
  document.getElementById('btnZoomIn').onclick = () => {
    if (previewRenderer) previewRenderer.zoom(1.2);
  };
  document.getElementById('btnZoomOut').onclick = () => {
    if (previewRenderer) previewRenderer.zoom(0.833); // 1/1.2
  };

  // Listeners
  document.getElementById('simType').addEventListener('change', (e) => {
    updateSections();
    fillFormWithTemplate(e.target.value);
    updateSystemPreview();
  });

  // BUG FIX: Add listeners to ALL geometry form fields with BOTH 'input' and 'change' events
  // Use 'change' for more reliable triggering across different input types
  const previewFields = ['thickness_n', 'thickness_p', 'nx', 'ny', 'ly', 'doping_n', 'doping_p', 'mesh_type', 'material', 'material_n', 'material_p'];
  
  previewFields.forEach(fieldName => {
    const elements = form.querySelectorAll(`[name="${fieldName}"]`);
    elements.forEach(el => {
      // Use both 'input' and 'change' to catch all modifications
      el.addEventListener('input', () => {
        console.log(`[Form] Input changed: ${fieldName}`);
        updateSystemPreview();
      });
      el.addEventListener('change', () => {
        console.log(`[Form] Change event: ${fieldName}`);
        updateSystemPreview();
      });
    });
  });

  form.querySelector('select[name="material"]').addEventListener('change', updateSections);

  document.getElementById('savedMaterialsList').addEventListener('change', (e) => {
    const opt = e.target.selectedOptions[0];
    if(!opt || !opt.dataset.json) return;
    const data = JSON.parse(opt.dataset.json);
    for(const [k,v] of Object.entries(data)){
      const input = form.querySelector(`[name="custom_${k}"]`);
      if(input) input.value = v;
    }
  });

  document.getElementById('btnSaveMat').addEventListener('click', async () => {
    const name = prompt("Nom du matériau :");
    if(!name) return;
    const payload = collect().custom_material;
    try {
      const resp = await fetch('/api/custom-materials', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({name: name, data: payload})
      });
      if(resp.ok) {
        alert('Matériau enregistré !');
        refreshMaterials();
      }
    } catch(e) { alert('Erreur: ' + e.message); }
  });

  // JSON Editor Initialization
  (async function initEditor(){
    const options = {
      mode: 'code',
      modes: ['code', 'tree'],
      onChange: () => { btnRun.disabled = !lastSimId; }
    };
    editor = new JSONEditor(editorEl, options);
  })();

  async function apiJson(url, options = {}) {
    let resp;
    try {
      resp = await fetch(url, options);
    } catch (e) {
      throw new Error("Impossible de joindre le serveur SPARC. Vérifiez que le serveur web est toujours démarré.");
    }

    const text = await resp.text();
    let data = {};
    if (text) {
      try {
        data = JSON.parse(text);
      } catch (e) {
        data = { error: text.slice(0, 500) };
      }
    }

    if (!resp.ok) {
      throw new Error(data.error || data.message || `Erreur HTTP ${resp.status}`);
    }
    return data;
  }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async function waitForSimulation(simId) {
    const started = Date.now();
    const longRunNoticeMs = 30 * 60 * 1000;
    let longRunNoticeShown = false;

    while (true) {
      const status = await apiJson('/api/results/' + simId + '/status');
      const progress = Number.isFinite(Number(status.progress)) ? Number(status.progress) : 0;
      let message = status.message || status.status || 'Simulation en cours...';
      if (!longRunNoticeShown && Date.now() - started >= longRunNoticeMs) {
        longRunNoticeShown = true;
      }
      if (longRunNoticeShown && status.status !== 'completed' && status.status !== 'failed') {
        message = `${message} — calcul long, toujours suivi par SPARC`;
      }

      if (window.setLoading) {
        window.setLoading(true, `${message} (${Math.max(0, progress)}%)`);
      }

      if (status.status === 'completed') return;
      if (status.status === 'failed') {
        throw new Error(status.error || 'La simulation a échoué.');
      }

      await sleep(1000);
    }
  }

  btnGen.addEventListener('click', async () => {
    if(!form.checkValidity()){
      form.reportValidity();
      return;
    }

    const formData = collect();

    // Validation spécifique multicouche
    if (formData.simulation_type === 'multi_layer') {
      if (!mlValidate()) {
        window.showModalMessage('Erreur de Validation',
          '<ul><li>Valeurs invalides dans la configuration multicouche (vérifiez épaisseur et dopage).</li></ul>');
        return;
      }
    }

    // Validation des paramètres physiques
    const validationErrors = validateSimulationParams(formData);

    if(validationErrors.length > 0){
      window.showModalMessage('Erreur de Validation',
        '<ul>' + validationErrors.map(e => '<li>' + e + '</li>').join('') + '</ul>');
      return;
    }
    
    try{
      if(window.setLoading) window.setLoading(true, 'Génération du JSON...');
      const data = await apiJson('/api/generate-json', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify(formData)
      });
      if(window.setLoading) window.setLoading(false);

      if(!data.success){
        let msg = data.error;
        if(data.errors && data.errors.length > 0){
          msg += '<ul>' + data.errors.map(e => `<li><b>${e.path}</b>: ${e.message}</li>`).join('') + '</ul>';
        }
        window.showModalMessage('Erreur de génération', msg);
        return;
      }
      lastSimId = data.simulation_id;
      setConfig(data.config);
      simInfo.textContent = 'Configuration générée';
      simInfo.className = 'badge bg-success';
      sessionIdSpan.textContent = lastSimId;
      btnRun.disabled = false;
    } catch(e){
      if(window.setLoading) window.setLoading(false);
      window.showModalMessage('Erreur de génération', e.message);
    }
  });

  btnRun.addEventListener('click', async () => {
    if(!lastSimId) return;
    let cfg;
    try {
      cfg = editor.get();
    } catch(e){
      window.showModalMessage('JSON Invalide', "Veuillez corriger les erreurs dans le JSON avant de lancer.");
      return;
    }

    btnRun.disabled = true;
    btnRun.textContent = 'Calcul en cours...';
    if(window.setLoading) window.setLoading(true, 'Simulation Sesame en cours... Veuillez patienter.');

    try {
      const data = await apiJson('/api/run-simulation/' + lastSimId + '/async', {
        method:'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({config: cfg})
      });

      if(!data.success){
        window.showModalMessage('Erreur Simulation', data.error || 'Une erreur inconnue est survenue.');
        btnRun.disabled = false;
        btnRun.textContent = 'Lancer la Simulation';
        return;
      }
      await waitForSimulation(lastSimId);
      if(window.setLoading) window.setLoading(false);
      window.location.href = '/results/' + lastSimId;
    } catch(e) {
      if(window.setLoading) window.setLoading(false);
      window.showModalMessage('Erreur Simulation', e.message);
      btnRun.disabled = false;
      btnRun.textContent = 'Lancer la Simulation';
    }
  });

  btnFormat.addEventListener('click', () => {
    try { setConfig(editor.get()); } catch(e) {}
  });

  updateSections();
  refreshMaterials();
  updateSystemPreview();

})();
</script>
{% endblock %}