{% extends "base.html" %}
{% block title %}Comparaison de simulations{% endblock %}

{% block extra_head %}
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<style>
  .sim-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #f1f5f9; border: 1px solid #cbd5e1;
    border-radius: 20px; padding: .2rem .8rem; font-size: .85rem;
    cursor: pointer; transition: background .15s;
  }
  .sim-chip:hover  { background: #dbeafe; }
  .sim-chip.selected { background: #2563eb; color: #fff; border-color: #2563eb; }
  .metric-best  { background: #dcfce7 !important; font-weight: 700; }
  .metric-worst { background: #fee2e2 !important; color: #991b1b; }
  .delta-cell   { color: #6b7280; font-size: .8rem; }
  .delta-pos    { color: #16a34a; }
  .delta-neg    { color: #dc2626; }
  #compareNav .nav-link.active { background: #2563eb; color: #fff; }
  .tab-pane { min-height: 420px; }
</style>
{% endblock %}

{% block content %}
<h2 class="mb-3"><i class="bi bi-layout-split"></i> Comparaison de simulations</h2>

{# ── Sélecteur ── #}
<div class="card mb-3">
  <div class="card-header fw-semibold">
    <i class="bi bi-check2-square"></i> Sélectionner les simulations
  </div>
  <div class="card-body">
    <div class="d-flex flex-wrap gap-2" id="chipContainer">
      {% for s in all_sims %}{% if s.status == 'completed' %}
      <div class="sim-chip {% if s.id in selected_ids %}selected{% endif %}"
           data-id="{{ s.id }}" onclick="toggleSim(this)">
        <span>{{ s.name }}</span>
        <small class="opacity-50">{{ s.type }}</small>
      </div>
      {% endif %}{% endfor %}
    </div>
    <div class="mt-3 d-flex gap-2 flex-wrap">
      <button class="btn btn-primary btn-sm" onclick="loadComparison()">
        <i class="bi bi-arrow-repeat"></i> Comparer
      </button>
      <button class="btn btn-outline-secondary btn-sm" onclick="clearAll()">
        <i class="bi bi-x-circle"></i> Effacer
      </button>
      <button class="btn btn-outline-info btn-sm" onclick="exportCSV()">
        <i class="bi bi-download"></i> Export CSV
      </button>
    </div>
  </div>
</div>

{# ── Onglets de visualisation ── #}
<div class="card d-none" id="compareResults">
  <div class="card-header p-0">
    <ul class="nav nav-tabs border-0" id="compareNav">
      <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tabJV">
        <i class="bi bi-graph-up"></i> Courbe J-V</a></li>
      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabPV">
        <i class="bi bi-lightning-charge"></i> Puissance P-V</a></li>
      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabEQE">
        <i class="bi bi-activity"></i> EQE</a></li>
      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabRadar">
        <i class="bi bi-diagram-3"></i> Radar</a></li>
      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabMetrics">
        <i class="bi bi-table"></i> Tableau</a></li>
      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabConfig">
        <i class="bi bi-gear"></i> Config diff</a></li>
    </ul>
  </div>
  <div class="card-body tab-content p-2">

    {# J-V #}
    <div class="tab-pane fade show active" id="tabJV">
      <div id="ivPlot" style="height:420px;"></div>
    </div>

    {# P-V #}
    <div class="tab-pane fade" id="tabPV">
      <div id="pvPlot" style="height:420px;"></div>
    </div>

    {# EQE #}
    <div class="tab-pane fade" id="tabEQE">
      <div id="eqePlot" style="height:360px;"></div>
      <p id="noEQE" class="text-muted text-center d-none mt-3">Aucune donnée EQE disponible.</p>
    </div>

    {# Radar #}
    <div class="tab-pane fade" id="tabRadar">
      <div id="radarPlot" style="height:420px;"></div>
    </div>

    {# Metrics table #}
    <div class="tab-pane fade" id="tabMetrics">
      <div class="table-responsive">
        <table class="table table-bordered table-hover table-sm align-middle" id="metricsTable">
          <thead class="table-dark">
            <tr>
              <th>Simulation</th><th>Type</th>
              <th>Jsc [mA/cm²]</th><th>Voc [V]</th>
              <th>FF [%]</th><th>η [%]</th>
            </tr>
          </thead>
          <tbody id="metricsBody"></tbody>
        </table>
      </div>
      <small class="text-muted">
        <span class="badge bg-success">Vert</span> = meilleur ·
        <span class="badge bg-danger">Rouge</span> = moins bon ·
        Δ = écart vs meilleur
      </small>
    </div>

    {# Config diff #}
    <div class="tab-pane fade" id="tabConfig">
      <div id="configDiff" class="table-responsive">
        <p class="text-muted">Chargement…</p>
      </div>
    </div>

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

{% block extra_js %}
<script type="application/json" id="__sd">
  { "selected_ids": {{ selected_ids | tojson | safe }} }
</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;');
}

const SELECTED = new Set(JSON.parse(document.getElementById('__sd').textContent).selected_ids || []);
const COLORS   = ['#2563eb','#dc2626','#16a34a','#f59e0b','#7c3aed','#0891b2','#db2777','#ea580c'];
const LAY_BASE = {
  font: { family:"'Inter',sans-serif", size:12 },
  paper_bgcolor:'rgba(0,0,0,0)', plot_bgcolor:'rgba(0,0,0,0)',
  margin:{l:60,r:20,t:30,b:55}, hovermode:'x unified',
  legend:{orientation:'h',y:-0.22},
  xaxis:{showgrid:true,gridcolor:'#e5e7eb',zeroline:false},
  yaxis:{showgrid:true,gridcolor:'#e5e7eb'},
};
const PLY_CFG  = {responsive:true};

let _lastData  = [];

function toggleSim(el) {
  const id = el.dataset.id;
  if (SELECTED.has(id)) { SELECTED.delete(id); el.classList.remove('selected'); }
  else                   { SELECTED.add(id);    el.classList.add('selected'); }
}

function clearAll() {
  SELECTED.clear();
  document.querySelectorAll('.sim-chip').forEach(c => c.classList.remove('selected'));
  document.getElementById('compareResults').classList.add('d-none');
}

/* ─── LOAD ─────────────────────────────────────────────────────────────── */
async function loadComparison() {
  if (!SELECTED.size) return alert('Sélectionnez au moins une simulation.');
  const ids  = [...SELECTED].join(',');
  const data = await fetch(`/api/compare-data?ids=${ids}`).then(r => r.json());
  _lastData  = data;

  document.getElementById('compareResults').classList.remove('d-none');
  _renderJV(data);
  _renderPV(data);
  _renderEQE(data);
  _renderRadar(data);
  _renderMetrics(data);
  _renderConfigDiff(ids);
}

/* ─── J-V ───────────────────────────────────────────────────────────────── */
function _renderJV(data) {
  const traces = data
    .filter(s => (s.voltages||[]).length && (s.current_density||[]).length)
    .map((s,i) => ({
      x: s.voltages,
      y: s.current_density.map(j => j*1000),
      mode:'lines', name:s.name,
      line:{color:COLORS[i%COLORS.length],width:2.5},
      hovertemplate:`%{y:.3f} mA/cm²<extra>${s.name}</extra>`,
    }));
  Plotly.newPlot('ivPlot', traces, {
    ...LAY_BASE,
    xaxis:{...LAY_BASE.xaxis,title:'Tension [V]'},
    yaxis:{...LAY_BASE.yaxis,title:'J [mA/cm²]'},
  }, PLY_CFG);
}

/* ─── P-V ───────────────────────────────────────────────────────────────── */
function _renderPV(data) {
  const traces = data
    .filter(s => (s.voltages||[]).length && (s.current_density||[]).length)
    .map((s,i) => {
      const pv = s.voltages.map((v,k) => Math.abs(v * s.current_density[k]) * 1000);
      return {
        x: s.voltages, y: pv,
        mode:'lines', name:s.name,
        line:{color:COLORS[i%COLORS.length],width:2.5},
        fill: i===0 ? 'tozeroy' : 'none',
        fillcolor: COLORS[i%COLORS.length]+'22',
        hovertemplate:`P=%{y:.3f} mW/cm²<extra>${s.name}</extra>`,
      };
    });
  // Marqueurs Pmax
  data.forEach((s,i) => {
    if (!s.voltages || !s.current_density) return;
    const pv = s.voltages.map((v,k) => Math.abs(v * s.current_density[k]) * 1000);
    const mi = pv.indexOf(Math.max(...pv));
    traces.push({
      x:[s.voltages[mi]], y:[pv[mi]],
      mode:'markers', name:`Pmax ${s.name}`,
      marker:{color:COLORS[i%COLORS.length],size:10,symbol:'star'},
      showlegend:false,
      hovertemplate:`Pmax=${pv[mi].toFixed(3)} mW/cm²<extra>${s.name}</extra>`,
    });
  });
  Plotly.newPlot('pvPlot', traces, {
    ...LAY_BASE,
    xaxis:{...LAY_BASE.xaxis,title:'Tension [V]'},
    yaxis:{...LAY_BASE.yaxis,title:'Puissance [mW/cm²]'},
  }, PLY_CFG);
}

/* ─── EQE ────────────────────────────────────────────────────────────────── */
function _renderEQE(data) {
  const traces = data
    .filter(s => (s.wavelengths||[]).length && (s.eqe||[]).length)
    .map((s,i) => ({
      x: s.wavelengths,
      y: s.eqe.map(e => e*100),
      mode:'lines', name:s.name,
      line:{color:COLORS[i%COLORS.length],width:2},
      hovertemplate:`EQE=%{y:.2f}%<extra>${s.name}</extra>`,
    }));
  const noEQE = document.getElementById('noEQE');
  if (!traces.length) { noEQE.classList.remove('d-none'); return; }
  noEQE.classList.add('d-none');
  Plotly.newPlot('eqePlot', traces, {
    ...LAY_BASE,
    xaxis:{...LAY_BASE.xaxis,title:'Longueur d\'onde [nm]'},
    yaxis:{...LAY_BASE.yaxis,title:'EQE [%]',range:[0,105]},
  }, PLY_CFG);
}

/* ─── Radar ──────────────────────────────────────────────────────────────── */
function _renderRadar(data) {
  // Normalise chaque métrique sur [0,1] à travers les simulations
  const metrics = ['η [%]','Jsc [mA/cm²]','Voc [V]','FF [%]'];
  const getVals = s => [
    s.efficiency || 0,
    (s.jsc || 0)*1000,
    s.voc || 0,
    (s.fill_factor || 0)*100,
  ];
  const maxes = [0,1,2,3].map(k => Math.max(...data.map(s => getVals(s)[k]), 1e-9));

  const traces = data.map((s,i) => {
    const raw = getVals(s);
    const norm = raw.map((v,k) => v/maxes[k]*100);
    return {
      type:'scatterpolar', fill:'toself', name:s.name,
      r:[...norm, norm[0]],
      theta:[...metrics, metrics[0]],
      line:{color:COLORS[i%COLORS.length]},
      fillcolor:COLORS[i%COLORS.length]+'33',
    };
  });
  Plotly.newPlot('radarPlot', traces, {
    ...LAY_BASE,
    polar:{radialaxis:{visible:true,range:[0,100]}},
    showlegend:true,
  }, PLY_CFG);
}

/* ─── Metrics table ──────────────────────────────────────────────────────── */
function _renderMetrics(data) {
  const fmt = (v,d=3) => (typeof v==='number' && isFinite(v)) ? v.toFixed(d) : '—';
  const col = i => COLORS[i%COLORS.length];

  // Best per metric
  const best = {
    jsc:         Math.max(...data.map(s => (s.jsc||0)*1000)),
    voc:         Math.max(...data.map(s => s.voc||0)),
    fill_factor: Math.max(...data.map(s => (s.fill_factor||0)*100)),
    efficiency:  Math.max(...data.map(s => s.efficiency||0)),
  };

  const rows = data.map((s,i) => {
    const jsc = (s.jsc||0)*1000, voc=s.voc||0, ff=(s.fill_factor||0)*100, eta=s.efficiency||0;
    const delta = (v,b) => {
      if (!b) return '';
      const d = v - b;
      const cls = d===0 ? '' : (d>0 ? 'delta-pos' : 'delta-neg');
      return `<br><span class="delta-cell ${cls}">${d>=0?'+':''}${d.toFixed(2)}</span>`;
    };
    const cls = (v,b) => Math.abs(v-b)<1e-9 ? 'metric-best' :
                         (v === Math.min(...data.map(s2 => s2[Object.keys(best).find(k=>k==='efficiency')] || 0)) ? 'metric-worst' : '');
    return `<tr>
      <td><span style="color:${col(i)};font-weight:700;">■</span> ${escapeHtml(s.name)}</td>
      <td><code>${escapeHtml(s.type)}</code></td>
      <td class="${Math.abs(jsc-best.jsc)<1e-9?'metric-best':''}">${fmt(jsc,3)}${delta(jsc,best.jsc)}</td>
      <td class="${Math.abs(voc-best.voc)<1e-9?'metric-best':''}">${fmt(voc,4)}${delta(voc,best.voc)}</td>
      <td class="${Math.abs(ff-best.fill_factor)<1e-9?'metric-best':''}">${fmt(ff,2)}${delta(ff,best.fill_factor)}</td>
      <td class="${Math.abs(eta-best.efficiency)<1e-9?'metric-best':''}">${fmt(eta,3)}${delta(eta,best.efficiency)}</td>
    </tr>`;
  });
  document.getElementById('metricsBody').innerHTML = rows.join('');
}

/* ─── Config diff ────────────────────────────────────────────────────────── */
async function _renderConfigDiff(ids) {
  const configs = await fetch(`/api/compare-config?ids=${ids}`).then(r => r.json());
  if (!configs.length) { document.getElementById('configDiff').innerHTML = '<p class="text-muted">Aucune config.</p>'; return; }

  // Flatten configs
  function _flat(obj, prefix='') {
    const out = {};
    for (const [k,v] of Object.entries(obj||{})) {
      const key = prefix ? `${prefix}.${k}` : k;
      if (v && typeof v==='object' && !Array.isArray(v)) Object.assign(out, _flat(v,key));
      else out[key] = Array.isArray(v) ? `[${v.length}]` : String(v??'');
    }
    return out;
  }

  const flats = configs.map(c => _flat(c.config));
  const allKeys = [...new Set(configs.flatMap(c => Object.keys(_flat(c.config))))].sort();

  let html = '<table class="table table-sm table-bordered table-hover"><thead class="table-dark"><tr><th>Paramètre</th>';
  configs.forEach((c,i) => html += `<th style="color:${COLORS[i%COLORS.length]}">${c.name}</th>`);
  html += '</tr></thead><tbody>';

  for (const key of allKeys) {
    const vals = flats.map(f => f[key] ?? '—');
    const allSame = vals.every(v => v === vals[0]);
    const rowCls = allSame ? '' : 'table-warning';
    html += `<tr class="${rowCls}"><td><small>${key}</small></td>`;
    vals.forEach(v => html += `<td><small>${v}</small></td>`);
    html += '</tr>';
  }
  html += '</tbody></table>';
  html += '<small class="text-muted"><span class="badge bg-warning text-dark">Jaune</span> = paramètres différents</small>';
  document.getElementById('configDiff').innerHTML = html;
}

/* ─── Export CSV ──────────────────────────────────────────────────────────── */
function exportCSV() {
  if (!_lastData.length) return;
  const h = ['name','type','jsc_mAcm2','voc_V','ff_pct','efficiency_pct'];
  const rows = _lastData.map(s => [
    s.name, s.type,
    ((s.jsc||0)*1000).toFixed(4), (s.voc||0).toFixed(4),
    ((s.fill_factor||0)*100).toFixed(2), (s.efficiency||0).toFixed(3),
  ]);
  const csv = [h,...rows].map(r=>r.join(',')).join('\n');
  const a = document.createElement('a');
  a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
  a.download = 'sparc_comparison.csv';
  a.click();
}

// Auto-load si pré-sélectionné
if (SELECTED.size >= 1) loadComparison();
</script>
{% endblock %}