{% extends "base.html" %}
{% block title %}Optimiseur IA — SPARC{% endblock %}

{% block extra_head %}
<style>
.param-row { border: 1px solid #dee2e6; border-radius:6px; padding:12px; margin-bottom:8px; background:#f8f9fa; }
.param-row:hover { background:#e9ecef; }
.engine-card { cursor:pointer; transition:all .2s; }
.engine-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.engine-card.selected { border:2px solid #0d6efd; background:#e7f1ff; }
.obj-badge { cursor:pointer; user-select:none; }
.obj-badge.active { background:#0d6efd !important; color:#fff !important; }
#convergenceChart { height:260px; }
.trial-row:hover { background:#f8f9fa; cursor:default; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h1 class="h3 mb-1"><i class="bi bi-cpu text-primary me-2"></i>Optimiseur IA</h1>
    <p class="text-muted mb-0">Optimisation Bayésienne des paramètres de cellule solaire · Optuna / BoTorch</p>
  </div>
  <a href="{{ url_for('index') }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left me-1"></i>Accueil
  </a>
</div>

<div class="row g-4">

  <!-- ── Colonne gauche : formulaire ─────────────────────────────────────── -->
  <div class="col-lg-7">
    <form id="optForm">

      <!-- Nom + Type de simulation -->
      <div class="card mb-3">
        <div class="card-header fw-semibold"><i class="bi bi-gear me-1"></i>Configuration générale</div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Nom de l'optimisation</label>
              <input type="text" id="optName" class="form-control" placeholder="opt_homojunction_Si" value="opt_{{ sim_types.keys()|list|first }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Type de simulation</label>
              <select id="simType" class="form-select" onchange="updateParamDefaults()">
                {% for k, v in sim_types.items() %}
                <option value="{{ k }}">{{ k }} — {{ v.description[:50] }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6" id="materialContainer">
              <label class="form-label">Matériau</label>
              <select id="materialSelect" class="form-select">
                <option value="">Chargement...</option>
              </select>
            </div>
            <div class="col-md-6" id="material2Container" style="display:none">
              <label class="form-label">Second matériau</label>
              <select id="material2Select" class="form-select">
                <option value="">Chargement...</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Nombre de trials</label>
              <input type="number" id="nTrials" class="form-control" value="100" min="10" max="2000">
            </div>
            <div class="col-md-8">
              <label class="form-label">Objectifs à maximiser</label>
              <div class="d-flex gap-2 flex-wrap">
                <span class="badge bg-secondary obj-badge active" data-obj="efficiency" onclick="toggleObj(this)">η PCE (%)</span>
                <span class="badge bg-secondary obj-badge" data-obj="jsc" onclick="toggleObj(this)">Jsc (mA/cm²)</span>
                <span class="badge bg-secondary obj-badge" data-obj="voc" onclick="toggleObj(this)">Voc (V)</span>
                <span class="badge bg-secondary obj-badge" data-obj="fill_factor" onclick="toggleObj(this)">Fill Factor</span>
              </div>
              <div class="form-text text-muted">Sélectionnez un objectif pour mono-objectif, plusieurs pour Pareto.</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Moteur IA -->
      <div class="card mb-3">
        <div class="card-header fw-semibold"><i class="bi bi-robot me-1"></i>Moteur d'optimisation</div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-3">
              <div class="card engine-card selected h-100" data-engine="optuna" data-sampler="tpe" onclick="selectEngine(this)">
                <div class="card-body text-center p-2">
                  <div class="fs-5">🧠</div>
                  <div class="fw-semibold small">Optuna TPE</div>
                  <div class="text-muted" style="font-size:0.7rem">Défaut · Robuste</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card engine-card h-100" data-engine="optuna" data-sampler="gp" onclick="selectEngine(this)">
                <div class="card-body text-center p-2">
                  <div class="fs-5">📈</div>
                  <div class="fw-semibold small">Optuna GP</div>
                  <div class="text-muted" style="font-size:0.7rem">Gaussian Process</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card engine-card h-100" data-engine="optuna" data-sampler="cmaes" onclick="selectEngine(this)">
                <div class="card-body text-center p-2">
                  <div class="fs-5">🧬</div>
                  <div class="fw-semibold small">CMA-ES</div>
                  <div class="text-muted" style="font-size:0.7rem">Evolution</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card engine-card h-100" data-engine="botorch" data-sampler="" onclick="selectEngine(this)">
                <div class="card-body text-center p-2">
                  <div class="fs-5">⚡</div>
                  <div class="fw-semibold small">BoTorch GP</div>
                  <div class="text-muted" style="font-size:0.7rem">Avancé · qEI</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Paramètres à optimiser -->
      <div class="card mb-3">
        <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
          <span><i class="bi bi-sliders me-1"></i>Paramètres à optimiser</span>
          <button type="button" class="btn btn-sm btn-outline-primary" onclick="addParamRow()">
            <i class="bi bi-plus-circle me-1"></i>Ajouter
          </button>
        </div>
        <div class="card-body">
          <div id="paramList"></div>
          <div class="text-muted small mt-2">
            <i class="bi bi-info-circle me-1"></i>
            Utilisez la notation pointée pour les paramètres imbriqués :
            <code>doping.n_region</code>, <code>geometry.thickness_p</code>
          </div>
        </div>
      </div>

      <!-- Bouton lancer -->
      <div class="d-grid">
        <button type="button" class="btn btn-primary btn-lg" onclick="launchOptimization()">
          <i class="bi bi-play-fill me-2"></i>Lancer l'optimisation
        </button>
      </div>
    </form>
  </div>

  <!-- ── Colonne droite : résultats live + historique ─────────────────────── -->
  <div class="col-lg-5">

    <!-- Progression en direct -->
    <div class="card mb-3 d-none" id="progressCard">
      <div class="card-header fw-semibold"><i class="bi bi-activity me-1"></i>Progression</div>
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span id="progressMsg" class="text-muted small d-flex align-items-center gap-2">
            <span class="spinner-border spinner-border-sm" id="progressSpinner"></span>
            En attente...
          </span>
          <span id="progressPct" class="fw-bold">0%</span>
        </div>
        <div class="progress mb-3" style="height:8px">
          <!-- min-width:5% pour que la barre soit visible même à 0% -->
          <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
               style="width:5%"></div>
        </div>
        <div class="d-flex gap-2 text-center mb-3">
          <div class="flex-fill border rounded p-2 shadow-sm">
            <div class="small text-muted">Meilleur η</div>
            <div class="fw-bold text-success fs-5" id="liveBestValue">—</div>
          </div>
          <div class="flex-fill border rounded p-2 shadow-sm">
            <div class="small text-muted">Trials</div>
            <div class="fw-bold fs-5" id="liveTrials">0</div>
          </div>
          <div class="flex-fill border rounded p-2 shadow-sm bg-light">
            <div class="small text-muted">Temps restant (ETA)</div>
            <div class="fw-bold fs-5 text-secondary" id="liveETA">—</div>
          </div>
        </div>
        <div class="mb-3 d-none" id="liveParamsDiv">
          <div class="d-flex justify-content-between align-items-center mb-1">
             <span class="small text-muted fw-semibold"><i class="bi bi-cpu me-1"></i>Essai courant</span>
          </div>
          <div class="bg-light border rounded p-2 text-dark" id="liveParams" style="font-family: monospace; font-size: 0.8rem; max-height: 80px; overflow-y: auto;">
            —
          </div>
        </div>
        <div id="convergenceChart"></div>
        <div class="text-center mt-2" id="liveResultLink" style="display:none">
          <a id="resultLink" href="#" class="btn btn-success btn-sm">
            <i class="bi bi-graph-up me-1"></i>Voir les résultats complets
          </a>
        </div>
        <div class="text-center mt-3 mb-1" id="cancelOptDiv">
          <button id="cancelOptBtn" class="btn btn-sm btn-outline-danger" onclick="cancelOptimization()">
            <i class="bi bi-stop-circle me-1"></i>Annuler l'optimisation
          </button>
        </div>
      </div>
    </div>

    <!-- Historique des optimisations -->
    <div class="card">
      <div class="card-header fw-semibold d-flex justify-content-between">
        <span><i class="bi bi-clock-history me-1"></i>Historique</span>
        <button class="btn btn-sm btn-outline-secondary" onclick="loadHistory()">
          <i class="bi bi-arrow-clockwise"></i>
        </button>
      </div>
      <div class="card-body p-0">
        <div id="historyList">
          {% for opt in recent_opts %}
          <div class="d-flex align-items-center px-3 py-2 border-bottom">
            <div class="flex-fill">
              <div class="fw-semibold small">{{ opt.name }}</div>
              <div class="text-muted" style="font-size:.75rem">
                {{ opt.sim_type }} · {{ opt.engine }} · {{ opt.n_trials }} trials
              </div>
            </div>
            <div class="text-end ms-2">
              {% if opt.best_value is not none %}
              <span class="badge bg-success">η={{ "%.2f"|format(opt.best_value) }}%</span>
              {% endif %}
              <span class="badge bg-{% if opt.status=='completed' %}primary{% elif opt.status=='failed' %}danger{% elif opt.status=='running' %}warning text-dark{% else %}secondary{% endif %}">
                {{ opt.status }}
              </span>
              {% if opt.status == 'completed' %}
              <a href="{{ url_for('optimize_results_page', opt_id=opt.id) }}"
                 class="btn btn-sm btn-outline-primary ms-1">
                <i class="bi bi-eye"></i>
              </a>
              {% endif %}
            </div>
          </div>
          {% else %}
          <div class="p-3 text-muted text-center">Aucune optimisation pour l'instant</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.plot.ly/plotly-2.30.0.min.js"></script>
<script>
function escapeHtml(s) {
  return String(s == null ? '' : s)
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;').replace(/'/g,'&#039;');
}

// ── État ──────────────────────────────────────────────────────────────────
let selectedEngine = "optuna";
let selectedSampler = "tpe";
let activeObjectives = ["efficiency"];
let currentOptId = null;
let convergenceData = [];
let trialCount = 0;
let optStartTime = 0;

// ── Paramètres par défaut par type ────────────────────────────────────────
const DEFAULT_PARAMS = {
  homojunction: [
    {name:"doping.n_region",      type:"log_float", low:1e15, high:1e18, label:"Dopage N (cm⁻³)"},
    {name:"doping.p_region",      type:"log_float", low:1e14, high:1e17, label:"Dopage P (cm⁻³)"},
    {name:"geometry.thickness_n", type:"log_float", low:1e-5, high:5e-4, label:"Épaisseur N (cm)"},
    {name:"geometry.thickness_p", type:"log_float", low:5e-5, high:2e-3, label:"Épaisseur P (cm)"},
  ],
  heterojunction: [
    {name:"doping.n_region",      type:"log_float", low:1e15, high:1e18, label:"Dopage N (cm⁻³)"},
    {name:"doping.p_region",      type:"log_float", low:1e14, high:1e17, label:"Dopage P (cm⁻³)"},
    {name:"geometry.thickness_n", type:"log_float", low:5e-6, high:1e-4, label:"Épaisseur ETL (cm)"},
    {name:"geometry.thickness_p", type:"log_float", low:5e-5, high:2e-3, label:"Épaisseur Abs. (cm)"},
  ],
  tandem: [
    {name:"doping_n_top",      type:"log_float", low:1e15, high:1e18, label:"Dopage N Top"},
    {name:"doping_p_top",      type:"log_float", low:1e14, high:1e17, label:"Dopage P Top"},
    {name:"doping_n_bottom",   type:"log_float", low:1e15, high:1e18, label:"Dopage N Bottom"},
    {name:"doping_p_bottom",   type:"log_float", low:1e14, high:1e17, label:"Dopage P Bottom"},
    {name:"thickness_n",       type:"log_float", low:1e-5, high:5e-4, label:"Épaisseur N (cm)"},
    {name:"thickness_p",       type:"log_float", low:5e-5, high:2e-3, label:"Épaisseur P (cm)"},
  ],
  graded_heterojunction: [
    {name:"doping.n_region",      type:"log_float", low:1e15, high:1e18, label:"Dopage N (cm⁻³)"},
    {name:"doping.p_region",      type:"log_float", low:1e14, high:1e17, label:"Dopage P (cm⁻³)"},
    {name:"geometry.thickness_n", type:"log_float", low:5e-6, high:1e-4, label:"Épaisseur ETL (cm)"},
    {name:"geometry.thickness_p", type:"log_float", low:5e-5, high:2e-3, label:"Épaisseur P (cm)"},
  ],
};

const PARAM_TYPES = [
  {value:"float", label:"Float linéaire"},
  {value:"log_float", label:"Float log-scale"},
  {value:"int", label:"Entier linéaire"},
  {value:"log_int", label:"Entier log-scale"},
];

// ── Initialisation ────────────────────────────────────────────────────────
const baseConfig = {{ base_config_json|safe if base_config_json else 'null' }};
const selectedSimType = "{{ selected_sim_type if selected_sim_type else '' }}";
const baseSimName = "{{ base_sim_name if base_sim_name else '' }}";

document.addEventListener("DOMContentLoaded", async () => {
  if (selectedSimType) {
    document.getElementById("simType").value = selectedSimType;
    updateMaterialVisibility();
  }
  if (baseSimName) {
    document.getElementById("optName").value = "opt_" + baseSimName;
  }
  await loadMaterials();
  
  if (baseConfig && baseConfig.materials) {
    const mat1 = document.getElementById("materialSelect");
    const mat2 = document.getElementById("material2Select");
    
    if (selectedSimType === 'homojunction' && baseConfig.materials.active) {
       mat1.value = baseConfig.materials.active;
    } else if (selectedSimType === 'heterojunction' || selectedSimType === 'graded_heterojunction') {
       if (baseConfig.materials.n_type) mat1.value = baseConfig.materials.n_type;
       if (baseConfig.materials.p_type) mat2.value = baseConfig.materials.p_type;
    } else if (selectedSimType === 'tandem') {
       if (baseConfig.materials.top_cell && baseConfig.materials.top_cell.material) mat1.value = baseConfig.materials.top_cell.material;
       if (baseConfig.materials.bottom_cell && baseConfig.materials.bottom_cell.material) mat2.value = baseConfig.materials.bottom_cell.material;
    }
  }

  updateParamDefaults();
});

// ── Chargement des matériaux ────────────────────────────────────────────────
async function loadMaterials() {
  try {
    const response = await fetch('/api/materials/list');
    const materials = await response.json();
    
    const materialSelect = document.getElementById('materialSelect');
    const material2Select = document.getElementById('material2Select');
    
    // Vider les dropdowns
    materialSelect.innerHTML = '<option value="">Sélectionner...</option>';
    material2Select.innerHTML = '<option value="">Sélectionner...</option>';
    
    // Ajouter les matériaux
    materials.forEach(material => {
      materialSelect.innerHTML += `<option value="${material}">${material}</option>`;
      material2Select.innerHTML += `<option value="${material}">${material}</option>`;
    });
    
    // Mettre à jour la visibilité des conteneurs
    updateMaterialVisibility();
  } catch (error) {
    console.error('Erreur lors du chargement des matériaux:', error);
  }
}

// ── Mise à jour de la visibilité des matériaux ────────────────────────────────
function updateMaterialVisibility() {
  const simType = document.getElementById('simType').value;
  const materialContainer = document.getElementById('materialContainer');
  const material2Container = document.getElementById('material2Container');
  
  // Cacher tous les conteneurs par défaut
  materialContainer.style.display = 'none';
  material2Container.style.display = 'none';
  
  // Afficher selon le type de simulation
  if (simType === 'homojunction') {
    materialContainer.style.display = 'block';
  } else if (simType === 'heterojunction' || simType === 'graded_heterojunction') {
    materialContainer.style.display = 'block';
    material2Container.style.display = 'block';
  } else if (simType === 'tandem') {
    materialContainer.style.display = 'block';
    material2Container.style.display = 'block';
  }
}

function updateParamDefaults() {
  const simType = document.getElementById("simType").value;
  const defaults = DEFAULT_PARAMS[simType] || DEFAULT_PARAMS.homojunction;
  document.getElementById("paramList").innerHTML = "";
  defaults.forEach(p => addParamRow(p));
  
  // Mettre à jour la visibilité des matériaux
  updateMaterialVisibility();
}

// ── Gestion des objectifs ─────────────────────────────────────────────────
function toggleObj(el) {
  const obj = el.dataset.obj;
  el.classList.toggle("active");
  activeObjectives = Array.from(document.querySelectorAll(".obj-badge.active"))
                         .map(e => e.dataset.obj);
  if (activeObjectives.length === 0) {
    el.classList.add("active");
    activeObjectives = [obj];
  }
}

// ── Gestion moteur ────────────────────────────────────────────────────────
function selectEngine(el) {
  document.querySelectorAll(".engine-card").forEach(c => c.classList.remove("selected"));
  el.classList.add("selected");
  selectedEngine = el.dataset.engine;
  selectedSampler = el.dataset.sampler || "";
}

// ── Gestion des lignes de paramètres ─────────────────────────────────────
function addParamRow(defaults) {
  defaults = defaults || {name:"", type:"log_float", low:"", high:""};
  const idx = document.querySelectorAll(".param-row").length;
  const typeOpts = PARAM_TYPES.map(t =>
    `<option value="${t.value}" ${t.value===defaults.type?"selected":""}>${t.label}</option>`
  ).join("");

  const html = `
  <div class="param-row" id="prow_${idx}">
    <div class="row g-2 align-items-end">
      <div class="col-md-4">
        <label class="form-label small fw-semibold">Paramètre</label>
        <input type="text" class="form-control form-control-sm p-name"
               placeholder="doping.n_region" value="${defaults.name||""}">
        ${defaults.label ? `<div class="form-text">${defaults.label}</div>` : ""}
      </div>
      <div class="col-md-2">
        <label class="form-label small fw-semibold">Type</label>
        <select class="form-select form-select-sm p-type">${typeOpts}</select>
      </div>
      <div class="col-md-2">
        <label class="form-label small fw-semibold">Min</label>
        <input type="text" class="form-control form-control-sm p-low"
               placeholder="1e15" value="${defaults.low||""}">
      </div>
      <div class="col-md-2">
        <label class="form-label small fw-semibold">Max</label>
        <input type="text" class="form-control form-control-sm p-high"
               placeholder="1e18" value="${defaults.high||""}">
      </div>
      <div class="col-md-2 text-end">
        <button type="button" class="btn btn-sm btn-outline-danger"
                onclick="this.closest('.param-row').remove()">
          <i class="bi bi-trash"></i>
        </button>
      </div>
    </div>
  </div>`;
  document.getElementById("paramList").insertAdjacentHTML("beforeend", html);
}

function collectParamRanges() {
  const rows = document.querySelectorAll(".param-row");
  const params = [];
  let valid = true;
  rows.forEach(row => {
    const name  = row.querySelector(".p-name").value.trim();
    const type  = row.querySelector(".p-type").value;
    const lowS  = row.querySelector(".p-low").value.trim();
    const highS = row.querySelector(".p-high").value.trim();
    if (!name || !lowS || !highS) { valid = false; return; }
    params.push({name, type, low: parseFloat(lowS), high: parseFloat(highS)});
  });
  return valid ? params : null;
}

// ── Lancer l'optimisation ─────────────────────────────────────────────────
async function launchOptimization() {
  const paramRanges = collectParamRanges();
  if (!paramRanges || paramRanges.length === 0) {
    alert("Définissez au moins un paramètre avec des bornes valides.");
    return;
  }

  const simType = document.getElementById("simType").value;
  
  // Collecter les matériaux sélectionnés
  const materials = {};
  const materialSelect = document.getElementById('materialSelect');
  const material2Select = document.getElementById('material2Select');
  
  if (simType === 'homojunction') {
    if (materialSelect.value) {
      materials.active = materialSelect.value;
    }
  } else if (simType === 'heterojunction' || simType === 'graded_heterojunction') {
    if (materialSelect.value && material2Select.value) {
      materials.n_type = materialSelect.value;
      materials.p_type = material2Select.value;
    }
  } else if (simType === 'tandem') {
    if (materialSelect.value && material2Select.value) {
      materials.top_cell = { material: materialSelect.value };
      materials.bottom_cell = { material: material2Select.value };
    }
  }
  
  const payload = {
    name:         document.getElementById("optName").value || "opt_" + Date.now(),
    sim_type:     simType,
    engine:       selectedEngine,
    sampler:      selectedSampler,
    n_trials:     parseInt(document.getElementById("nTrials").value),
    objectives:   activeObjectives,
    param_ranges: paramRanges,
    materials:     materials,
  };

  // Fetch full nested config template (not the flattened form version)
  // The router needs the nested structure: materials.active, geometry.*, etc.
  if (baseConfig) {
    payload.base_config = baseConfig;
  } else {
    try {
      const r = await fetch(`/api/template-full/${simType}`);
      if (r.ok) payload.base_config = await r.json();
    } catch(e) {}
  }

  // Créer le job
  let createResp;
  try {
    const r = await fetch("/api/optimize/create", {
      method:"POST", headers:{"Content-Type":"application/json"},
      body: JSON.stringify(payload),
    });
    createResp = await r.json();
  } catch(e) {
    alert("Erreur réseau : " + e.message);
    return;
  }
  if (!createResp.success) {
    alert("Erreur : " + createResp.error);
    return;
  }

  currentOptId = createResp.opt_id;
  convergenceData = [];
  trialCount = 0;
  optStartTime = Date.now();

  // Afficher la carte de progression
  const card = document.getElementById("progressCard");
  card.classList.remove("d-none");
  document.getElementById("progressBar").style.width = "0%";
  document.getElementById("progressPct").textContent = "0%";
  document.getElementById("progressMsg").textContent = "Démarrage...";
  document.getElementById("liveResultLink").style.display = "none";
  document.getElementById("cancelOptBtn").style.display = "inline-block";
  document.getElementById("cancelOptBtn").disabled = false;

  // Lancer
  await fetch(`/api/optimize/${currentOptId}/run`, {method:"POST"});

  // SSE progression
  streamProgress(currentOptId);
}

function streamProgress(optId) {
  let completed = false;
  let es = null;

  function connect() {
    es = new EventSource(`/api/optimize/${optId}/progress`);

    es.onmessage = (e) => {
      let d;
      try { d = JSON.parse(e.data); } catch(_) { return; }
      if (d.keepalive) return;

      const pct = Math.max(0, d.progress || 0);
      // min 5% pour que la barre reste visible pendant le démarrage
      document.getElementById("progressBar").style.width = Math.max(5, pct) + "%";
      document.getElementById("progressPct").textContent = pct + "%";

      // Mise à jour du message avec spinner
      const msgEl = document.getElementById("progressMsg");
      const spinner = document.getElementById("progressSpinner");
      if (d.status !== "completed" && d.status !== "failed" && d.status !== "cancelled") {
        msgEl.innerHTML = '<span class="spinner-border spinner-border-sm me-2" id="progressSpinner"></span>';
        msgEl.appendChild(document.createTextNode(d.message || ""));
      } else {
        msgEl.textContent = d.message || d.status;
      }

      if (d.best_value != null && isFinite(parseFloat(d.best_value)) && parseFloat(d.best_value) > -1e6) {
        document.getElementById("liveBestValue").textContent = parseFloat(d.best_value).toFixed(3) + "%";
      } else if (d.best_value != null) {
        document.getElementById("liveBestValue").textContent = "— (en cours)";
      }

      if (d.convergence && d.convergence.length > 0) {
        convergenceData = d.convergence;
        renderMiniConvergence();
      }

      trialCount = Math.round(pct / 100 * parseInt(document.getElementById("nTrials").value));
      document.getElementById("liveTrials").textContent = trialCount;

      if (pct > 0 && pct < 100) {
        const elapsed = (Date.now() - optStartTime) / 1000;
        const total = elapsed / (pct / 100);
        const rem = total - elapsed;
        let remStr = "";
        if (rem < 60) remStr = Math.round(rem) + " s";
        else if (rem < 3600) remStr = Math.floor(rem/60) + " m " + Math.round(rem%60) + " s";
        else remStr = Math.floor(rem/3600) + " h " + Math.floor((rem%3600)/60) + " m";
        document.getElementById("liveETA").textContent = "~" + remStr;
      } else if (pct === 100) {
        document.getElementById("liveETA").textContent = "Terminé";
      }

      if (d.current_params && Object.keys(d.current_params).length > 0) {
        document.getElementById("liveParamsDiv").classList.remove("d-none");
        let html = "";
        for (let k in d.current_params) {
           let v = d.current_params[k];
           let valStr = typeof v === 'number' ? (Math.abs(v) < 0.001 || Math.abs(v) > 9999 ? v.toExponential(3) : v.toFixed(4)) : escapeHtml(v);
           html += `<div class="d-flex justify-content-between border-bottom border-light pb-1 mb-1"><span>${escapeHtml(k)}</span><strong class="text-primary">${valStr}</strong></div>`;
        }
        document.getElementById("liveParams").innerHTML = html;
      }

      if (d.status === "completed" || d.status === "failed" || d.status === "cancelled") {
        completed = true;
        es.close();
        document.getElementById("cancelOptBtn").style.display = "none";
        
        if (d.status === "completed") {
          document.getElementById("progressBar").classList.remove("progress-bar-animated");
          document.getElementById("progressBar").classList.add("bg-success");
          const link = document.getElementById("resultLink");
          link.href = `/optimize/results/${optId}`;
          document.getElementById("liveResultLink").style.display = "block";
          loadHistory();
          // Redirection automatique après 2 secondes
          setTimeout(() => { window.location.href = `/optimize/results/${optId}`; }, 2000);
        } else {
          document.getElementById("progressBar").classList.remove("progress-bar-animated");
          document.getElementById("progressBar").classList.add("bg-danger");
          document.getElementById("progressMsg").textContent = (d.status === "cancelled" ? "Annulé : " : "Échec : ") + (d.message || "Erreur inconnue");
        }
      }
    };

    es.onerror = () => {
      if (completed) return;
      // Reconnexion automatique après 3 s si l'optimisation n'est pas finie
      es.close();
      setTimeout(connect, 3000);
    };
  }

  connect();
}

function renderMiniConvergence() {
  if (convergenceData.length < 1) return;
  
  const trials = convergenceData.map(c => c.trial);
  const bestVals = convergenceData.map(c => c.best);
  const curVals = convergenceData.map(c => c.current);
  
  const traceScatter = {
    x: trials,
    y: curVals,
    type: "scatter", mode: "markers",
    marker: {color:"rgba(25,135,84,0.4)", size: 5},
    name: "Trial η",
  };

  const traceLine = {
    x: trials,
    y: bestVals,
    type: "scatter", mode: "lines",
    line: {color:"#198754", width:2},
    fill: "tozeroy", fillcolor: "rgba(25,135,84,0.1)",
    name: "Meilleur η",
  };

  Plotly.react("convergenceChart", [traceScatter, traceLine], {
    margin:{t:10,l:40,r:10,b:30},
    xaxis:{title:"Trial"},
    yaxis:{title:"η (%)"},
    height:200, paper_bgcolor:"transparent", plot_bgcolor:"transparent",
    font:{size:11},
    showlegend: false
  }, {displayModeBar:false, responsive:true});
}

async function cancelOptimization() {
  if (!currentOptId) return;
  if (!confirm("Voulez-vous vraiment annuler cette optimisation ?")) return;
  
  document.getElementById("cancelOptBtn").disabled = true;
  try {
    const res = await fetch(`/api/optimize/${currentOptId}/cancel`, {method:"POST"});
    const data = await res.json();
    if (!data.success) {
      alert("Erreur lors de l'annulation: " + (data.error || "Inconnue"));
      document.getElementById("cancelOptBtn").disabled = false;
    }
  } catch(e) {
    alert("Erreur réseau");
    document.getElementById("cancelOptBtn").disabled = false;
  }
}

// ── Historique ────────────────────────────────────────────────────────────
async function loadHistory() {
  const r = await fetch("/api/optimize/history?limit=10");
  const opts = await r.json();
  const container = document.getElementById("historyList");
  if (!opts.length) {
    container.innerHTML = '<div class="p-3 text-muted text-center">Aucune optimisation pour l\'instant</div>';
    return;
  }
  container.innerHTML = opts.map(opt => {
    const statusClass = {completed:"primary",failed:"danger",running:"warning text-dark"}[opt.status] || "secondary";
    const bestBadge = opt.best_value !== null && opt.best_value !== undefined
      ? `<span class="badge bg-success">η=${parseFloat(opt.best_value).toFixed(2)}%</span>` : "";
    const viewBtn = opt.status === "completed"
      ? `<a href="/optimize/results/${opt.id}" class="btn btn-sm btn-outline-primary ms-1"><i class="bi bi-eye"></i></a>` : "";
    return `
    <div class="d-flex align-items-center px-3 py-2 border-bottom">
      <div class="flex-fill">
        <div class="fw-semibold small">${escapeHtml(opt.name||opt.id)}</div>
        <div class="text-muted" style="font-size:.75rem">${escapeHtml(opt.sim_type||"")} · ${escapeHtml(opt.engine||"")} · ${escapeHtml(opt.n_trials||"?")} trials</div>
      </div>
      <div class="text-end ms-2">
        ${bestBadge}
        <span class="badge bg-${statusClass}">${opt.status}</span>
        ${viewBtn}
      </div>
    </div>`;
  }).join("");
}
</script>
{% endblock %}