{% extends "base.html" %}

{% block title %}Résultats — {{ simulation.name }}{% endblock %}

{% block extra_head %}
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<style>
  /* --- Progress bar animation --- */
  .progress-animated .progress-bar {
    transition: width 0.6s ease;
  }

  /* --- Metric cards --- */
  .metric-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  }

  .metric-label {
    font-size: 0.78rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  .metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2563eb;
    line-height: 1.1;
  }

  .metric-value.warning {
    color: #d97706;
  }

  .metric-value.error {
    color: #dc2626;
  }

  .metric-value.success {
    color: #16a34a;
  }

  .metric-unit {
    font-size: 0.75rem;
    color: #888;
  }

  /* --- Plot cards --- */
  .plot-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
    margin-bottom: 1.5rem;
  }

  .band-diagram-card .card-header {
    background: #0f172a;
    color: #38bdf8;
  }

  .plot-card .card-header {
    background: #1e293b;
    color: #e2e8f0;
    font-weight: 600;
  }

  .badge-physics {
    font-size: 0.72rem;
    background: #1e293b;
    color: #7dd3fc;
    padding: .25em .6em;
    border-radius: 4px;
  }

  /* --- Status badge --- */
  .badge-status-completed {
    background: #16a34a !important;
  }

  .badge-status-failed {
    background: #dc2626 !important;
  }

  .badge-status-running {
    background: #d97706 !important;
  }

  .badge-status-invalid {
    background: #7f1d1d !important;
  }

  .badge-status-partial {
    background: #b45309 !important;
  }

  /* --- Validation Alert --- */
  .alert-danger {
    border-left: 4px solid #dc2626;
  }

  /* --- Print --- */
  @media print {
    .d-print-none {
      display: none !important;
    }

    .plot-card {
      break-inside: avoid;
      margin-bottom: 20px;
    }

    body {
      font-size: 11pt;
    }
  }
</style>
{% endblock %}

{% block content %}

{# ─── Top Action Bar ─── #}
<div class="d-flex justify-content-between align-items-center mb-3 d-print-none">
  <div class="d-flex gap-2">
    <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('history') }}">
      <i class="bi bi-arrow-left"></i> Historique
    </a>
    <a class="btn btn-outline-primary btn-sm" href="{{ url_for('compare_page') }}">
      <i class="bi bi-layout-split"></i> Comparer
    </a>
  </div>
  <div class="d-flex gap-2">
    {% set page_status = simulation.display_status or simulation.status %}
    {% set export_disabled = page_status in ['failed', 'running', 'queued'] %}
    <a class="btn btn-success btn-sm{% if export_disabled %} disabled{% endif %}"
       href="{% if export_disabled %}#{% else %}{{ url_for('api_csv', sim_id=simulation.id) }}{% endif %}"
       id="btnCSV" {% if export_disabled %}aria-disabled="true" tabindex="-1" title="Export désactivé: résultat PV non qualifié"{% endif %}>
      <i class="bi bi-file-earmark-spreadsheet"></i> Export CSV
    </a>
    <a class="btn btn-primary btn-sm{% if export_disabled %} disabled{% endif %}"
       href="{% if export_disabled %}#{% else %}{{ url_for('api_pdf', sim_id=simulation.id) }}{% endif %}"
       id="btnPDF" {% if export_disabled %}aria-disabled="true" tabindex="-1" title="Rapport désactivé: résultat PV non qualifié"{% endif %}>
      <i class="bi bi-file-earmark-pdf"></i> Rapport PDF
    </a>
    <a class="btn btn-warning btn-sm text-dark fw-bold{% if export_disabled %} disabled{% endif %}"
       href="{% if export_disabled %}#{% else %}{{ url_for('api_certified_pdf', sim_id=simulation.id) }}{% endif %}"
       id="btnCertifiedPDF" {% if export_disabled %}aria-disabled="true" tabindex="-1" title="Rapport désactivé: résultat PV non qualifié"{% endif %}>
      <i class="bi bi-patch-check-fill"></i> Rapport Certifié STC
    </a>
    <button class="btn btn-outline-secondary btn-sm" onclick="window.print()">
      <i class="bi bi-printer"></i> Imprimer
    </button>
  </div>
</div>

{# ─── Header Card ─── #}
<div class="card mb-3">
  <div class="card-body d-flex justify-content-between align-items-start flex-wrap gap-2">
    <div>
      <h4 class="mb-1">{{ simulation.name }}</h4>
      <div class="text-muted small">
        ID&nbsp;<code>{{ simulation.id }}</code>
        &nbsp;·&nbsp;Type&nbsp;<strong>{{ simulation.type }}</strong>
        {% if simulation.created_at %}
        &nbsp;·&nbsp;<i class="bi bi-clock"></i> {{ simulation.created_at }}
        {% endif %}
      </div>
    </div>
    <div>
      {% set st = simulation.display_status or simulation.status %}
      <span class="badge badge-status-{{ st }} fs-6">{{ st }}</span>
    </div>
  </div>
  {% if simulation.status == 'running' %}
  <div class="card-footer">
    <div id="progressWrap">
      <div class="d-flex justify-content-between small mb-1">
        <span id="progressMsg">Simulation en cours…</span>
        <span id="progressPct">0%</span>
      </div>
      <div class="progress progress-animated" style="height:8px;">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" id="progressBar"
          style="width:0%"></div>
      </div>
    </div>
  </div>
  {% endif %}
  {% if simulation.error %}
  <div class="card-footer text-danger"><i class="bi bi-exclamation-triangle"></i> {{ simulation.error }}</div>
  {% endif %}
</div>

{# ─── Validation Alert (shown when physical validation detects issues) ─── #}
<div class="alert alert-danger mb-3 d-none" id="validationAlert">
  <div class="d-flex align-items-center">
    <i class="bi bi-exclamation-triangle-fill fs-4 me-2"></i>
    <div>
      <strong>⚠️ Anomalies détectées dans la simulation</strong>
      <p class="mb-0 small" id="validationMessage"></p>
    </div>
  </div>
</div>

{# ─── Performance Metrics ─── #}
<div class="row g-3 mb-3" id="metricsRow">
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Jsc</div>
      <div class="metric-value" id="mJsc">—</div>
      <div class="metric-unit">mA/cm²</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Voc</div>
      <div class="metric-value" id="mVoc">—</div>
      <div class="metric-unit">V</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Fill Factor</div>
      <div class="metric-value" id="mFf">—</div>
      <div class="metric-unit">%</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Efficacité PCE</div>
      <div class="metric-value" id="mEff">—</div>
      <div class="metric-unit">%</div>
    </div>
  </div>
</div>

{# ─── Theoretical SQ Metrics ─── #}
<div class="row g-3 mb-3 d-none" id="sqMetricsRow">
  <div class="col-12 mb-0">
    <h6 class="text-muted mb-0 mt-2" style="font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;">
      <i class="bi bi-stars text-warning"></i> Limites Thermodynamiques (Shockley-Queisser)
    </h6>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card" style="border-left-color: #6366f1; background-color: rgba(99, 102, 241, 0.03);">
      <div class="metric-label" title="Courant de court-circuit absolu">Jsc Théorique</div>
      <div class="metric-value text-muted" id="mSqJsc">—</div>
      <div class="metric-unit">mA/cm²</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card" style="border-left-color: #8b5cf6; background-color: rgba(139, 92, 246, 0.03);">
      <div class="metric-label" title="Tension purement radiative">Voc Théorique</div>
      <div class="metric-value text-muted" id="mSqVoc">—</div>
      <div class="metric-unit">V</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card" style="border-left-color: #a855f7; background-color: rgba(168, 85, 247, 0.03);">
      <div class="metric-label">FF Idéal</div>
      <div class="metric-value text-muted" id="mSqFf">—</div>
      <div class="metric-unit">%</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card" style="border-left-color: #d946ef; background-color: rgba(217, 70, 239, 0.03);">
      <div class="metric-label" title="Efficacité limite absolue radiatif">Efficacité SQ</div>
      <div class="metric-value text-muted" id="mSqEff">—</div>
      <div class="metric-unit">%</div>
    </div>
  </div>
</div>

{# ─── EBIC Metrics ─── #}
<div class="row g-3 mb-3 d-none" id="ebicMetricsRow">
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">EBIC Max</div>
      <div class="metric-value" id="mEbicMax">—</div>
      <div class="metric-unit">A/cm²</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">EBIC Mean</div>
      <div class="metric-value" id="mEbicMean">—</div>
      <div class="metric-unit">A/cm²</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Longueur de diffusion Ld</div>
      <div class="metric-value" id="mDiffusionLength">—</div>
      <div class="metric-unit">µm</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Beam σ (FWHM)</div>
      <div class="metric-value" id="mBeamSigma">—</div>
      <div class="metric-unit">µm</div>
    </div>
  </div>
</div>

{# ─── CV Metrics ─── #}
<div class="row g-3 mb-3 d-none" id="cvMetricsRow">
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Potentiel interne Vbi</div>
      <div class="metric-value" id="mCvVbi">—</div>
      <div class="metric-unit">V</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Dopage effectif Neff</div>
      <div class="metric-value" id="mCvNeff">—</div>
      <div class="metric-unit">cm⁻³</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">C (V=0)</div>
      <div class="metric-value" id="mCvC0">—</div>
      <div class="metric-unit">F/cm²</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">C max / C min</div>
      <div class="metric-value" id="mCvCrange">—</div>
      <div class="metric-unit">F/cm²</div>
    </div>
  </div>
</div>

{# ─── Luminescence Metrics ─── #}
<div class="row g-3 mb-3 d-none" id="lumMetricsRow">
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Type</div>
      <div class="metric-value" id="mLumType">—</div>
      <div class="metric-unit">PL / EL</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Intensité max</div>
      <div class="metric-value" id="mLumMax">—</div>
      <div class="metric-unit">ph/cm²/s</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Intensité moyenne</div>
      <div class="metric-value" id="mLumMean">—</div>
      <div class="metric-unit">ph/cm²/s</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Intensité totale</div>
      <div class="metric-value" id="mLumTotal">—</div>
      <div class="metric-unit">ph/cm²</div>
    </div>
  </div>
</div>

{# ─── Junction Parameters (homojunction only) ─── #}
<div class="row g-3 mb-3 d-none" id="junctionMetricsRow">
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Potentiel interne Vbi</div>
      <div class="metric-value" id="mVbi">—</div>
      <div class="metric-unit">V</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Largeur ZCE Wd</div>
      <div class="metric-value" id="mWd">—</div>
      <div class="metric-unit">µm</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Champ max Epeak</div>
      <div class="metric-value" id="mEpeak">—</div>
      <div class="metric-unit">kV/cm</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Longueur diffusion Ld</div>
      <div class="metric-value" id="mLd">—</div>
      <div class="metric-unit">µm</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Durée de vie τₑ</div>
      <div class="metric-value" id="mTauE">—</div>
      <div class="metric-unit">µs</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Durée de vie τₕ</div>
      <div class="metric-value" id="mTauH">—</div>
      <div class="metric-unit">µs</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Diffusivité électrons</div>
      <div class="metric-value" id="mDiffE">—</div>
      <div class="metric-unit">cm²/s</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Diffusivité trous</div>
      <div class="metric-value" id="mDiffH">—</div>
      <div class="metric-unit">cm²/s</div>
    </div>
  </div>
</div>

{# ─── Heterojunction Parameters ─── #}
<div class="row g-3 mb-3 d-none" id="heteroMetricsRow">
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Offset ΔEc</div>
      <div class="metric-value" id="mDeltaEc">—</div>
      <div class="metric-unit">eV</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Offset ΔEv</div>
      <div class="metric-value" id="mDeltaEv">—</div>
      <div class="metric-unit">eV</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Type de jonction</div>
      <div class="metric-value" id="mHjType">—</div>
      <div class="metric-unit">—</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Gap n-side Egₙ</div>
      <div class="metric-value" id="mEgn">—</div>
      <div class="metric-unit">eV</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Gap p-side Egₚ</div>
      <div class="metric-value" id="mEgp">—</div>
      <div class="metric-unit">eV</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Affinité χₙ</div>
      <div class="metric-value" id="mChiN">—</div>
      <div class="metric-unit">eV</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="metric-label">Affinité χₚ</div>
      <div class="metric-value" id="mChiP">—</div>
      <div class="metric-unit">eV</div>
    </div>
  </div>
</div>

{# ─── Advanced IV parameters (two-diode + dVoc/dT) ─── #}
<div class="card mb-3 d-none" id="advancedIVCard">
  <div class="card-header"><i class="bi bi-cpu"></i> Paramètres avancés — Modèle 2 diodes &amp; Coefficient thermique</div>
  <div class="card-body">
    <div class="row g-3">
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">J₀₁ (diffusion)</div>
          <div class="metric-value" id="mJ01">—</div>
          <div class="metric-unit">A/cm²</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">J₀₂ (SRH)</div>
          <div class="metric-value" id="mJ02">—</div>
          <div class="metric-unit">A/cm²</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">n apparent</div>
          <div class="metric-value" id="mNapp">—</div>
          <div class="metric-unit">—</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">dVoc/dT</div>
          <div class="metric-value" id="mDvocDt">—</div>
          <div class="metric-unit">mV/K</div>
        </div>
      </div>
    </div>
    <div class="row g-3 mt-1">
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">Rs (série)</div>
          <div class="metric-value" id="mRs">—</div>
          <div class="metric-unit">Ω·cm²</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">Rsh (shunt)</div>
          <div class="metric-value" id="mRsh">—</div>
          <div class="metric-unit">Ω·cm²</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">n₁ (idéalité)</div>
          <div class="metric-value" id="mN1">—</div>
          <div class="metric-unit">—</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="metric-card">
          <div class="metric-label">n₂ (SRH)</div>
          <div class="metric-value" id="mN2">—</div>
          <div class="metric-unit">—</div>
        </div>
      </div>
    </div>
  </div>
</div>

{# ─── Custom Analysis Card (Specialized Simulations) ─── #}
<div class="card mb-3 d-none" id="customAnalysisCard">
  <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
    <span><i class="bi bi-cpu-fill text-warning"></i> Analyse Scientifique Spécifique</span>
    <span class="badge bg-primary" id="customAnalysisBadge">Simulation</span>
  </div>
  <div class="card-body" id="customAnalysisContent">
    <!-- Dynamic content injected via JS -->
  </div>
</div>

{# ─── Plotly IV Curve (interactive) ─── #}
<div class="card mb-3 plot-card d-none" id="ivCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-graph-up"></i> Courbe J-V (interactive)</span>
    <small class="text-secondary">Zoom · Pan · Survol pour les valeurs</small>
  </div>
  <div class="card-body p-2">
    <div id="ivPlotly" style="height:380px;"></div>
  </div>
</div>

{# ─── Plotly C-V Curve (interactive) ─── #}
<div class="card mb-3 plot-card d-none" id="cvCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-graph-up"></i> Capacité-Tension C(V) (interactive)</span>
    <small class="text-secondary">Zoom · Pan · Survol pour les valeurs</small>
  </div>
  <div class="card-body p-2">
    <div id="cvPlotly" style="height:380px;"></div>
  </div>
</div>

{# ─── Plotly Mott-Schottky (interactive) ─── #}
<div class="card mb-3 plot-card d-none" id="msCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-graph-up"></i> Mott-Schottky 1/C²(V) (interactive)</span>
    <small class="text-secondary">Zoom · Pan · Survol pour les valeurs</small>
  </div>
  <div class="card-body p-2">
    <div id="msPlotly" style="height:380px;"></div>
  </div>
</div>

{# ─── Plotly Luminescence (interactive) ─── #}
<div class="card mb-3 plot-card d-none" id="lumCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-lightbulb"></i> Luminescence (interactive)</span>
    <small class="text-secondary">Zoom · Pan · Survol pour les valeurs</small>
  </div>
  <div class="card-body p-2">
    <div id="lumPlotly" style="height:380px;"></div>
  </div>
</div>

{# ─── Plotly Transient Photovoltage (TPV) ─── #}
<div class="card mb-3 plot-card d-none" id="tpvCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-stopwatch"></i> Déclin Photovoltage (TPV)</span>
    <small class="text-secondary">Zoom · Pan · Survol pour les valeurs</small>
  </div>
  <div class="card-body p-2">
    <div id="tpvPlotly" style="height:380px;"></div>
  </div>
</div>

{# ─── Plotly EQE (interactive) ─── #}
<div class="card mb-3 plot-card d-none" id="eqeCard">
  <div class="card-header">
    <i class="bi bi-activity"></i> EQE &amp; Réponse spectrale (interactive)
  </div>
  <div class="card-body p-2">
    <div id="eqePlotly" style="height:320px;"></div>
  </div>
</div>

{# ─── Plotly Temperature study ─── #}
<div class="card mb-3 plot-card d-none" id="tempCard">
  <div class="card-header">
    <i class="bi bi-thermometer-half"></i> Étude en température (interactive)
  </div>
  <div class="card-body p-2">
    <div id="tempPlotly" style="height:320px;"></div>
  </div>
</div>

{# ─── Plotly Band Diagram (interactive) ─── #}
<div class="card mb-3 plot-card band-diagram-card d-none" id="bandCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-layers"></i> Diagramme de Bandes d'Énergie (V=0)</span>
    <span class="badge bg-primary">Interactif</span>
  </div>
  <div class="card-body p-2">
    <div id="bandPlotly" style="height:450px;"></div>
    <div class="mt-2 small text-muted px-2">
      <i class="bi bi-info-circle"></i> 
      <strong>Ec</strong> (Conduction), <strong>Ev</strong> (Valence), 
      <strong>EFn/EFp</strong> (Niveaux de Quasi-Fermi). 
      Visualisation des barrières de potentiel et des zones de charge d'espace.
    </div>
  </div>
</div>

{# ─── Plotly 2D Spatial Cartography (interactive) ─── #}
<div class="card mb-3 plot-card spatial-2d-card d-none" id="spatial2DCard">
  <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span><i class="bi bi-grid-3x3"></i> Cartographies Spatiales 2D (Interactif)</span>
    <div class="d-flex align-items-center gap-2">
      <select class="form-select form-select-sm" id="spatial2DSelect" style="width: auto;">
        <option value="potential">Potentiel Électrostatique V(x, y)</option>
        <option value="electron_density">Densité d'Électrons n(x, y)</option>
        <option value="hole_density">Densité de Trous p(x, y)</option>
        <option value="srh_recombination">Recombinaisons SRH(x, y)</option>
      </select>
      <span class="badge bg-success">Plotly 2D Heatmap</span>
    </div>
  </div>
  <div class="card-body p-2">
    <div id="spatial2DPlotly" style="height:450px; width:100%;"></div>
    <div class="mt-2 small text-muted px-2">
      <i class="bi bi-info-circle"></i> 
      Visualisation de la carte 2D (x en µm, y en µm). Survolez pour afficher les valeurs locales du champ, du potentiel ou de densité de porteurs.
    </div>
  </div>
</div>

{# ─── Static PNG plots ─── #}
<div class="card mb-3">
  <div class="card-header"><i class="bi bi-images"></i> Graphes scientifiques</div>
  <div class="card-body">
    <div class="row g-3" id="plotsGrid"></div>
    <div class="text-muted small mt-2 d-none" id="plotsEmpty">
      <i class="bi bi-exclamation-circle"></i> Aucun graphe PNG disponible.
    </div>
  </div>
</div>

{# ─── Raw data accordion ─── #}
<div class="card mb-3 d-none" id="allResultsCard">
  <div class="card-header d-flex justify-content-between">
    Données brutes
    <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('api_results', sim_id=simulation.id) }}"
      target="_blank">JSON brut</a>
  </div>
  <div class="card-body">
    <div class="accordion" id="resultsAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseScalars">
            Scalaires (Jsc, Voc, FF, η…)
          </button>
        </h2>
        <div id="collapseScalars" class="accordion-collapse collapse show" data-bs-parent="#resultsAccordion">
          <div class="accordion-body">
            <table class="table table-sm" id="scalarsTable">
              <thead>
                <tr>
                  <th>Paramètre</th>
                  <th>Valeur</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseArrays">
            Tableaux (voltages, courants, EQE…)
          </button>
        </h2>
        <div id="collapseArrays" class="accordion-collapse collapse" data-bs-parent="#resultsAccordion">
          <div class="accordion-body" id="arraysBody"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{# ─── Heatmap balayage paramétrique ─── #}
<div class="card mb-3 d-none" id="sweepCard">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-grid-3x3"></i> Balayage paramétrique — Heatmap interactive</span>
    <div class="d-flex gap-2 align-items-center">
      <select class="form-select form-select-sm" id="sweepMetric" onchange="loadSweepHeatmap()" style="width:auto;">
        <option value="efficiency">η Efficacité [%]</option>
        <option value="jsc">Jsc [A/cm²]</option>
        <option value="voc">Voc [V]</option>
        <option value="fill_factor">FF</option>
      </select>
    </div>
  </div>
  <div class="card-body p-2">
    <div id="sweepPlot" style="height:380px;"></div>
  </div>
</div>

{# ─── Profiling timeline ─── #}
<div class="card mb-3 d-none" id="profilingCard">
  <div class="card-header">
    <i class="bi bi-stopwatch"></i> Profiling — Temps d'exécution par étape
  </div>
  <div class="card-body p-2">
    <div id="profilingPlot" style="height:260px;"></div>
    <div class="mt-2" id="profilingTable"></div>
  </div>
</div>

{# ─── Config ─── #}
<div class="card">
  <div class="card-header"><i class="bi bi-gear"></i> Configuration</div>
  <div class="card-body">
    <pre class="bg-light p-2 rounded small overflow-auto"
      style="max-height:300px;"><code>{{ simulation.config | tojson(indent=2) }}</code></pre>
  </div>
</div>

{% endblock %}

{% block extra_js %}
{# Inject server-side data as JSON to avoid Jinja2 syntax errors in the IDE JS parser #}
<script type="application/json" id="__simData">
  { "sim_id": {{ simulation.id | tojson | safe }}, "sim_status": {{ simulation.status | tojson | safe }}, "sim_display_status": {{ (simulation.display_status or simulation.status) | tojson | safe }}, "sim_type": {{ (simulation.type or '') | 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 __sd = JSON.parse(document.getElementById('__simData').textContent);
  const SIM_ID = __sd.sim_id;
  const SIM_STATUS = __sd.sim_status;
  const SIM_DISPLAY_STATUS = __sd.sim_display_status;
  const SIM_TYPE = __sd.sim_type || '';

  /* ═══════════════════════════════════════════════════════════
     PLOTLY COLORS & LAYOUT HELPERS
     ═══════════════════════════════════════════════════════════ */
  const PLOTLY_LAYOUT = {
    font: { family: "'Inter', 'Segoe UI', sans-serif", size: 13, color: '#1f2937' },
    paper_bgcolor: 'rgba(0,0,0,0)',
    plot_bgcolor: 'rgba(248,250,252,0.7)',
    margin: { l: 70, r: 30, t: 45, b: 70 },
    hovermode: 'x unified',
    legend: {
      orientation: 'h', yanchor: 'bottom', y: 1.02, xanchor: 'right', x: 1,
      bgcolor: 'rgba(255,255,255,0.9)', bordercolor: '#d1d5db', borderwidth: 1,
      font: { size: 12 },
    },
    xaxis: {
      showgrid: true, gridcolor: '#e5e7eb', gridwidth: 1,
      zeroline: true, zerolinecolor: '#9ca3af', zerolinewidth: 1.5,
      linecolor: '#6b7280', linewidth: 1.5, mirror: true,
      tickfont: { size: 12 },
      title: { font: { size: 14, color: '#374151' } },
    },
    yaxis: {
      showgrid: true, gridcolor: '#e5e7eb', gridwidth: 1,
      zeroline: true, zerolinecolor: '#9ca3af', zerolinewidth: 1.5,
      linecolor: '#6b7280', linewidth: 1.5, mirror: true,
      tickfont: { size: 12 },
      title: { font: { size: 14, color: '#374151' } },
    },
  };
  const PLOTLY_CONFIG = {
    responsive: true, displayModeBar: true,
    modeBarButtonsToRemove: ['lasso2d', 'select2d', 'autoScale2d'],
    toImageButtonOptions: { format: 'png', width: 1200, height: 800, scale: 2 },
  };

  /* ═══════════════════════════════════════════════════════════
     PROGRESS : SSE (CLI sync) + polling fallback (web runs)
     ═══════════════════════════════════════════════════════════ */

  function _applyProgress(d) {
    const bar = document.getElementById('progressBar');
    const msg = document.getElementById('progressMsg');
    const pct = document.getElementById('progressPct');
    if (bar && d.progress != null && d.progress >= 0) {
      bar.style.width = Math.min(d.progress, 100) + '%';
      if (pct) pct.textContent = d.progress + '%';
      if (msg && d.message) msg.textContent = d.message;
    }
  }

  // ── SSE web-simulation progress (nouveau endpoint granulaire) ─────────────
  let _sseActive = false;

  function startWebProgressSSE() {
    if (!window.EventSource) return false;
    try {
      const es = new EventSource(`/api/simulation/${SIM_ID}/progress-stream`);
      _sseActive = true;
      es.onmessage = (e) => {
        try {
          const d = JSON.parse(e.data);
          _applyProgress(d);
          if (d.status === 'completed' || d.status === 'failed') {
            es.close(); _sseActive = false;
            setTimeout(() => location.reload(), 800);
          }
        } catch (_) {}
      };
      es.onerror = () => { es.close(); _sseActive = false; startPolling(); };
      return true;
    } catch (_) { return false; }
  }

  // ── SSE CLI sync (CLI → browser) ──────────────────────────────────────────
  function startSSE() {
    if (!window.EventSource) return false;
    try {
      const es = new EventSource(`/api/events/${SIM_ID}`);
      _sseActive = true;
      es.onmessage = (e) => {
        try {
          const d = JSON.parse(e.data);
          if (d.event === 'ping' || d.event === 'timeout') return;
          _applyProgress(d);
          if (d.event === 'completed' || d.event === 'failed') {
            es.close(); _sseActive = false;
            setTimeout(() => location.reload(), 1000);
          }
        } catch (_) {}
      };
      es.onerror = () => { es.close(); _sseActive = false; startPolling(); };
      return true;
    } catch (_) { return false; }
  }

  // ── Polling fallback ──────────────────────────────────────────────────────
  let _pollInterval = null;
  function startPolling() {
    if (_sseActive) return;
    if (SIM_STATUS !== 'running' && SIM_STATUS !== 'queued') return;
    _pollInterval = setInterval(async () => {
      try {
        const r = await fetch(`/api/results/${SIM_ID}/status`);
        const d = await r.json();
        _applyProgress(d);
        if (d.status === 'completed' || d.status === 'failed') {
          clearInterval(_pollInterval);
          setTimeout(() => location.reload(), 800);
        }
      } catch (e) { }
    }, 1200);
  }

  if (SIM_STATUS === 'running' || SIM_STATUS === 'queued') {
    // Essayer SSE web-progress en premier, puis SSE CLI, puis polling
    const webSSE = startWebProgressSSE();
    if (!webSSE) {
      const cliSSE = startSSE();
      if (!cliSSE) startPolling();
    }
  }

  /* ═══════════════════════════════════════════════════════════
     MAIN — fetch results and render charts
     ═══════════════════════════════════════════════════════════ */
  (async function () {
    let res;
    try {
      const resp = await fetch(`/api/results/${SIM_ID}`);
      res = await resp.json();
    } catch (e) { console.error('fetch results failed', e); return; }
    if (!res || typeof res !== 'object') return;

    /* ═══════════════════════════════════════════════════════════
      VALIDATION ERROR CHECK - Display diagnostic alerts
      ═══════════════════════════════════════════════════════════ */
    const diag = res.diagnostic_report;
    const validationAlert = document.getElementById('validationAlert');
    const validationMessage = document.getElementById('validationMessage');
    
    if ((diag && diag.has_errors) || res.status === 'error') {
      // Show the validation alert
      if (validationAlert) {
        validationAlert.classList.remove('d-none');
        
        // Build error message from diagnostic report or direct error
        let errorSummary = [];
        if (res.status === 'error' && res.message) {
            errorSummary.push('<strong>Erreur fatale:</strong> ' + res.message);
        }
        if (diag && diag.errors && diag.errors.length > 0) {
          for (const err of diag.errors) {
            if (err.message) errorSummary.push(err.message);
          }
        }
        if (diag && diag.warnings && diag.warnings.length > 0) {
          for (const warn of diag.warnings) {
            if (warn.message) errorSummary.push('⚠️ ' + warn.message);
          }
        }
        
        if (validationMessage) {
          validationMessage.innerHTML = errorSummary.join('<br>');
        }
      }
    }
    
    /* Also check for overall_status to flag failed simulations */
    const overallStatus = res.overall_status;
    if (overallStatus && overallStatus.includes('PARTIAL')) {
      // Show warning for partial success
      if (validationAlert && !validationAlert.classList.contains('alert-danger')) {
        validationAlert.classList.remove('alert-danger');
        validationAlert.classList.add('alert-warning');
      }
    }

    /* ═══════════════════════════════════════════════════════════
      METRICS EXTRACTION - Robust with fallbacks
      ═══════════════════════════════════════════════════════════ */
    
    // Helper to safely get nested values
    const getNested = (obj, path) => {
      if (!obj || typeof obj !== 'object') return undefined;
      const parts = path.split('.');
      let val = obj;
      for (const p of parts) {
        if (val && typeof val === 'object' && p in val) {
          val = val[p];
        } else {
          return undefined;
        }
      }
      return val;
    };
    
    // Helper to get value from results with multiple fallback paths
    const getMetric = (res, ...paths) => {
      for (const path of paths) {
        const val = getNested(res, path);
        if (val !== undefined && val !== null && typeof val === 'number' && isFinite(val)) {
          return val;
        }
      }
      return undefined;
    };

    // Helper: résout les alias de clés selon le type de simulation
    // (tandem → jsc_tandem, parametric → jsc_scalar, etc.)
    const resolveSimKeys = (res) => {
      const t = (res.simulation_type || res.sim_type || '').toLowerCase();
      if (t.includes('tandem') || t.includes('multijunction')) {
        if (res.jsc === undefined && res.jsc_tandem !== undefined) res.jsc = res.jsc_tandem;
        if (res.voc === undefined && res.voc_tandem !== undefined) res.voc = res.voc_tandem;
        if (res.fill_factor === undefined && res.ff_tandem !== undefined) res.fill_factor = res.ff_tandem;
        if (res.efficiency === undefined && res.efficiency_tandem !== undefined) res.efficiency = res.efficiency_tandem;
      }
      if (t.includes('parametric') || t.includes('sweep')) {
        if (typeof res.jsc !== 'number' && res.jsc_scalar !== undefined)         res.jsc         = res.jsc_scalar;
        if (typeof res.voc !== 'number' && res.voc_scalar !== undefined)         res.voc         = res.voc_scalar;
        if (typeof res.fill_factor !== 'number' && res.fill_factor_scalar !== undefined) res.fill_factor = res.fill_factor_scalar;
        if (typeof res.efficiency !== 'number' && res.efficiency_scalar !== undefined)   res.efficiency  = res.efficiency_scalar;
        if (typeof res.efficiency !== 'number' && res.efficiency_best !== undefined)     res.efficiency  = res.efficiency_best;
      }
    };
    resolveSimKeys(res);

    const physicsValidity = (res.physics_validity && typeof res.physics_validity === 'object') ? res.physics_validity : {};
    const pvMetricsBlocked = (
      res.iv_metrics_valid === false ||
      res.equilibrium_only === true ||
      physicsValidity.pv_metrics_applicable === false
    );
    const pvInvalidReason = res.iv_metrics_invalid_reason ||
      (Array.isArray(physicsValidity.blocking_limitations) ? physicsValidity.blocking_limitations.join('; ') : '') ||
      'Métriques PV invalidées par la validation physique';

    if (pvMetricsBlocked && validationAlert && validationMessage) {
      validationAlert.classList.remove('d-none');
      validationAlert.classList.remove('alert-warning');
      validationAlert.classList.add('alert-danger');
      const existing = validationMessage.innerHTML ? validationMessage.innerHTML + '<br>' : '';
      validationMessage.innerHTML = existing +
        '<strong>Résultat PV non exploitable:</strong> ' + escapeHtml(pvInvalidReason);
    }
    
    // Format helper
    const fmt = (v, d = 3) => (typeof v === 'number' && isFinite(v)) ? v.toFixed(d) : '—';
    const fmtExp = (v) => (typeof v === 'number' && isFinite(v)) ? v.toExponential(3) : '—';
    
    // Extract Jsc - check multiple possible paths
    // Backend stores Jsc in A/cm², UI shows mA/cm²
    const jscVal = getMetric(res, 'jsc', 'jsc_scalar', 'jsc_best', 'jsc_tandem', 'jsc_value', 'computation_summary.calculations.jsc', 'calculations.jsc');
    document.getElementById('mJsc').textContent = (!pvMetricsBlocked && jscVal !== undefined) ? (jscVal * 1000).toFixed(3) : '—';

    // Extract Voc
    const vocVal = getMetric(res, 'voc', 'voc_scalar', 'voc_best', 'voc_tandem', 'voc_value', 'computation_summary.calculations.voc', 'calculations.voc');
    document.getElementById('mVoc').textContent = !pvMetricsBlocked ? fmt(vocVal, 4) : '—';

    // Extract Fill Factor - may be stored as decimal or percentage
    const ffVal = getMetric(res, 'fill_factor', 'fill_factor_scalar', 'fill_factor_best', 'ff_tandem', 'fillFactor', 'ff', 'computation_summary.calculations.fill_factor', 'calculations.fill_factor');
    if (!pvMetricsBlocked && ffVal !== undefined) {
      // If value > 1, assume it's already in percentage form
      const ffDisplay = ffVal > 1 ? ffVal : ffVal * 100;
      document.getElementById('mFf').textContent = ffDisplay.toFixed(2);
    } else {
      document.getElementById('mFf').textContent = '—';
    }
    
    // Extract Efficiency (PCE) - backend retourne en pourcentage selon SPARC_CANONICAL_UNITS_V1.
    let effVal = getMetric(res, 'efficiency', 'efficiency_scalar', 'efficiency_best', 'efficiency_tandem', 'pce', 'eta', 'computation_summary.calculations.efficiency', 'calculations.efficiency', 'iv_parameters.efficiency');
    if (!pvMetricsBlocked && effVal !== undefined && effVal !== null && isFinite(effVal)) {
      document.getElementById('mEff').textContent = effVal.toFixed(3);
    } else {
      document.getElementById('mEff').textContent = '—';
    }

    if (pvMetricsBlocked) {
      ['mJsc', 'mVoc', 'mFf', 'mEff'].forEach(id => {
        const el = document.getElementById(id);
        if (el) {
          el.classList.add('error');
          el.title = pvInvalidReason;
        }
      });
    }

    // ─── Shockley-Queisser Metrics ───
    if (res.sq_limit && typeof res.sq_limit === 'object') {
      const sqRow = document.getElementById('sqMetricsRow');
      if (sqRow) sqRow.classList.remove('d-none');
      
      document.getElementById('mSqJsc').textContent = fmt(res.sq_limit.jsc * 1000, 3);
      document.getElementById('mSqVoc').textContent = fmt(res.sq_limit.voc, 4);
      document.getElementById('mSqFf').textContent = fmt(res.sq_limit.ff * 100, 2);
      document.getElementById('mSqEff').textContent = fmt(res.sq_limit.efficiency, 3);
    }

    // ─── EBIC metrics ─────────────────────────────────────────────
    const isEbic = (res.simulation_type || res.sim_type || '').toLowerCase().includes('ebic');
    if (isEbic) {
      const ebicRow = document.getElementById('ebicMetricsRow');
      if (ebicRow) ebicRow.classList.remove('d-none');

      const ebicMax = getMetric(res, 'ebic_max');
      document.getElementById('mEbicMax').textContent =
        ebicMax !== undefined ? ebicMax.toExponential(3) : '—';

      const ebicMean = getMetric(res, 'ebic_mean');
      document.getElementById('mEbicMean').textContent =
        ebicMean !== undefined ? ebicMean.toExponential(3) : '—';

      const diffLen = getMetric(res, 'diffusion_length');
      document.getElementById('mDiffusionLength').textContent =
        (diffLen !== undefined && diffLen > 0) ? (diffLen * 1e4).toFixed(3) : '—';

      const bSigma = getMetric(res, 'beam_sigma');
      document.getElementById('mBeamSigma').textContent =
        bSigma !== undefined ? (bSigma * 1e4).toFixed(3) : '—';
    }
    
    // ─── CV metrics ─────────────────────────────────────────────────
    const isCv = (res.result_category === 'cv_no_iv') || (res.simulation_type || res.sim_type || '').toLowerCase().includes('cv') || (res.capacitance && Array.isArray(res.capacitance) && res.capacitance.length > 0);
    if (isCv) {
      const cvRow = document.getElementById('cvMetricsRow');
      if (cvRow) cvRow.classList.remove('d-none');
      // Hide PV metrics for CV
      const pvMetrics = document.getElementById('metricsRow');
      if (pvMetrics) pvMetrics.classList.add('d-none');

      const cvVbi = getMetric(res, 'vbi');
      document.getElementById('mCvVbi').textContent =
        cvVbi !== undefined ? cvVbi.toFixed(4) : '—';

      const cvNeff = getMetric(res, 'n_eff');
      document.getElementById('mCvNeff').textContent =
        (cvNeff !== undefined && cvNeff > 0) ? cvNeff.toExponential(3) : '—';

      const c0 = getMetric(res, 'c_zero_bias');
      document.getElementById('mCvC0').textContent =
        c0 !== undefined ? c0.toExponential(3) : '—';

      const cMax = getMetric(res, 'c_max');
      const cMin = getMetric(res, 'c_min');
      document.getElementById('mCvCrange').textContent =
        (cMax !== undefined && cMin !== undefined)
          ? `${cMax.toExponential(2)} / ${cMin.toExponential(2)}`
          : '—';
    }

    // ─── Luminescence metrics ───────────────────────────────────────
    const isLum = (res.result_category === 'luminescence_no_iv') || (res.simulation_type || res.sim_type || '').toLowerCase().includes('luminescence') || (res.lum_intensity && Array.isArray(res.lum_intensity) && res.lum_intensity.length > 0);
    if (isLum) {
      const lumRow = document.getElementById('lumMetricsRow');
      if (lumRow) lumRow.classList.remove('d-none');
      // Hide PV metrics for luminescence
      const pvMetrics = document.getElementById('metricsRow');
      if (pvMetrics) pvMetrics.classList.add('d-none');

      const lumType = res.is_pl ? 'PL' : (res.is_el ? 'EL' : '—');
      document.getElementById('mLumType').textContent = lumType;

      const lumMax = getMetric(res, 'lum_max');
      document.getElementById('mLumMax').textContent =
        lumMax !== undefined ? lumMax.toExponential(3) : '—';

      const lumMean = getMetric(res, 'lum_mean');
      document.getElementById('mLumMean').textContent =
        lumMean !== undefined ? lumMean.toExponential(3) : '—';

      const lumTotal = getMetric(res, 'lum_total');
      document.getElementById('mLumTotal').textContent =
        lumTotal !== undefined ? lumTotal.toExponential(3) : '—';
    }

    // ─── Junction parameters (homojunction) ───────────────────────
    const isHj = (res.simulation_type || res.sim_type || '').toLowerCase().includes('homojunction');
    if (isHj) {
      const jRow = document.getElementById('junctionMetricsRow');
      if (jRow) jRow.classList.remove('d-none');

      const vbi = getMetric(res, 'vbi');
      document.getElementById('mVbi').textContent =
        vbi !== undefined ? vbi.toFixed(4) : '—';

      const wd = getMetric(res, 'depletion_width_total');
      document.getElementById('mWd').textContent =
        (wd !== undefined && wd > 0) ? (wd * 1e4).toFixed(3) : '—';

      const epeak = getMetric(res, 'electric_field_max');
      document.getElementById('mEpeak').textContent =
        (epeak !== undefined) ? (epeak / 1000).toFixed(2) : '—';

      const ldn = getMetric(res, 'diffusion_length_n');
      const ldp = getMetric(res, 'diffusion_length_p');
      const ldDisplay = (ldn !== undefined && ldp !== undefined)
        ? `${(ldn * 1e4).toFixed(2)} / ${(ldp * 1e4).toFixed(2)}`
        : '—';
      document.getElementById('mLd').textContent = ldDisplay;

      const tauE = getMetric(res, 'electron_lifetime');
      document.getElementById('mTauE').textContent =
        (tauE !== undefined && tauE > 0) ? (tauE * 1e6).toFixed(2) : '—';

      const tauH = getMetric(res, 'hole_lifetime');
      document.getElementById('mTauH').textContent =
        (tauH !== undefined && tauH > 0) ? (tauH * 1e6).toFixed(2) : '—';

      const diffE = getMetric(res, 'electron_diffusivity');
      document.getElementById('mDiffE').textContent =
        diffE !== undefined ? diffE.toFixed(1) : '—';

      const diffH = getMetric(res, 'hole_diffusivity');
      document.getElementById('mDiffH').textContent =
        diffH !== undefined ? diffH.toFixed(1) : '—';
    }

    // ─── Heterojunction parameters ────────────────────────────────
    const isHetero = (res.simulation_type || res.sim_type || '').toLowerCase().includes('heterojunction');
    if (isHetero) {
      const hRow = document.getElementById('heteroMetricsRow');
      if (hRow) hRow.classList.remove('d-none');

      const bo = res.band_offsets || {};

      const dEc = bo.delta_Ec;
      document.getElementById('mDeltaEc').textContent =
        (dEc !== undefined && isFinite(dEc)) ? dEc.toFixed(3) : '—';

      const dEv = bo.delta_Ev;
      document.getElementById('mDeltaEv').textContent =
        (dEv !== undefined && isFinite(dEv)) ? dEv.toFixed(3) : '—';

      const hjType = bo.junction_type;
      const hjDir = bo.offset_direction || '';
      const typeMap = {
        'type_I': 'Type I (Straddling)',
        'type_II': 'Type II (Staggered)',
        'type_III': 'Type III (Broken gap)'
      };
      document.getElementById('mHjType').textContent =
        typeMap[hjType] || (hjType || '—');
      if (hjDir) {
        const el = document.getElementById('mHjType');
        if (el) el.title = hjDir;
      }

      const egn = bo.Eg_n;
      document.getElementById('mEgn').textContent =
        (egn !== undefined && isFinite(egn)) ? egn.toFixed(3) : '—';

      const egp = bo.Eg_p;
      document.getElementById('mEgp').textContent =
        (egp !== undefined && isFinite(egp)) ? egp.toFixed(3) : '—';

      const chiN = bo.chi_n;
      document.getElementById('mChiN').textContent =
        (chiN !== undefined && isFinite(chiN)) ? chiN.toFixed(3) : '—';

      const chiP = bo.chi_p;
      document.getElementById('mChiP').textContent =
        (chiP !== undefined && isFinite(chiP)) ? chiP.toFixed(3) : '—';
    }

    // ─── Advanced IV parameters (two-diode model + dVoc/dT) ─────────────────
    const td = res.two_diode_fit;
    const hasRsRsh = (res.rs !== undefined || res.rsh !== undefined);
    const isCircuit = (res.simulation_type || res.sim_type || '').toLowerCase().includes('circuit');
    if (!pvMetricsBlocked && ((td && typeof td === 'object') || hasRsRsh || isCircuit)) {
      document.getElementById('advancedIVCard').classList.remove('d-none');
      const rsVal = (td && td.rs !== undefined) ? td.rs : res.rs;
      const rshVal = (td && td.rsh !== undefined) ? td.rsh : res.rsh;
      
      document.getElementById('mRs').textContent = fmt(rsVal, 4);
      document.getElementById('mRsh').textContent = (typeof rshVal === 'number' && isFinite(rshVal)) ? rshVal.toExponential(3) : '—';
      
      if (td && typeof td === 'object') {
        document.getElementById('mJ01').textContent = fmtExp(td.j01);
        document.getElementById('mJ02').textContent = fmtExp(td.j02);
        document.getElementById('mNapp').textContent = fmt(td.n_apparent, 3);
        document.getElementById('mN1').textContent = fmt(td.n1, 3);
        document.getElementById('mN2').textContent = fmt(td.n2, 3);
      }
    }
    const dvocDt = getMetric(res, 'dvoc_dt_mv_per_k', 'dvoc_dt');
    if (!pvMetricsBlocked && dvocDt !== undefined && isFinite(dvocDt)) {
      document.getElementById('advancedIVCard').classList.remove('d-none');
      // dvoc_dt est en V/K, dvoc_dt_mv_per_k est en mV/K
      const dvocDisplay = res.dvoc_dt_mv_per_k !== undefined ? dvocDt : dvocDt * 1000;
      document.getElementById('mDvocDt').textContent = dvocDisplay.toFixed(3);
    }

    // Check for input warnings (extreme parameters)
    const inputWarnings = res.input_warnings;
    if (inputWarnings && inputWarnings.length > 0) {
      const validationAlert = document.getElementById('validationAlert');
      const validationMessage = document.getElementById('validationMessage');
      if (validationAlert && validationMessage) {
        validationAlert.classList.remove('d-none');
        const warningList = inputWarnings.map(w => '⚠️ ' + w.message).join('<br>');
        const existing = validationMessage.innerHTML ? validationMessage.innerHTML + '<br>' : '';
        validationMessage.innerHTML = existing + '<strong>Avertissements de configuration:</strong><br>' + warningList;
      }
    }
    
    // If validation has errors, mark metrics as potentially invalid
    const hasValidationErrors = diag && diag.has_errors;
    if (hasValidationErrors) {
      const resultTypeForMetrics = (res.simulation_type || res.sim_type || '').toLowerCase();
      const effUpperBound = (resultTypeForMetrics === 'tandem' || resultTypeForMetrics === 'triple_junction' )
        ? 86.8
        : 33.5;
      // Check for specific problematic values
      const isVocInvalid = vocVal !== undefined && vocVal < 0.01;  // Voc < 0.01V is suspicious
      const isJscInvalid = jscVal !== undefined && (jscVal < 1e-6 || jscVal > 1);  // Jsc unrealistic
      const isEffInvalid = effVal !== undefined && (effVal > effUpperBound || effVal === 0);
      
      // Mark metrics with error styling if values are suspicious
      if (isVocInvalid || isJscInvalid || isEffInvalid) {
        const metricIds = ['mJsc', 'mVoc', 'mFf', 'mEff'];
        metricIds.forEach(id => {
          const el = document.getElementById(id);
          if (el) {
            el.classList.add('error');
            el.title = 'Valeur potentiellement invalide - voir les erreurs de validation ci-dessous';
          }
        });
      }
    }

    // Expose sign convention in scalars table for traceability
    if (res.sign_convention) {
      const tbody = document.querySelector('#scalarsTable tbody');
      if (tbody) {
        const tr = document.createElement('tr');
        const tdK = document.createElement('td');
        const tdV = document.createElement('td');
        tdK.textContent = 'sign_convention';
        tdV.textContent = String(res.sign_convention);
        tr.appendChild(tdK);
        tr.appendChild(tdV);
        tbody.prepend(tr);
      }
    }

    /* Enable CSV/PDF buttons when results are available */
    if (['completed', 'partial', 'invalid'].includes(SIM_DISPLAY_STATUS)) {
      document.getElementById('btnCSV')?.removeAttribute('disabled');
      document.getElementById('btnPDF')?.removeAttribute('disabled');
      document.getElementById('btnCertifiedPDF')?.removeAttribute('disabled');
    }

    /* ═══════════════════════════════════════════════════════════
       CUSTOM ANALYSIS RENDERING
       ═══════════════════════════════════════════════════════════ */
    const simType = (res.simulation_type || res.sim_type || '').toLowerCase();
    const customCard = document.getElementById('customAnalysisCard');
    const customContent = document.getElementById('customAnalysisContent');
    const customBadge = document.getElementById('customAnalysisBadge');
    
    if (simType === 'tandem') {
      customCard.classList.remove('d-none');
      customBadge.textContent = 'Cellule Tandem';
      customContent.innerHTML = `
        <div class="row text-center">
          <div class="col-md-3"><h5>Jsc Top</h5><p class="text-primary fw-bold">${fmt((res.top_cell_jsc || 0)*1000, 2)} mA/cm²</p></div>
          <div class="col-md-3"><h5>Jsc Bottom</h5><p class="text-success fw-bold">${fmt((res.bottom_cell_jsc || 0)*1000, 2)} mA/cm²</p></div>
          <div class="col-md-3"><h5>Mismatch</h5><p class="text-danger fw-bold">${fmt((res.mismatch_ratio || 0)*100, 1)} %</p></div>
          <div class="col-md-3"><h5>Cellule Limitante</h5><p class="text-dark fw-bold text-uppercase">${res.limiting_cell || 'N/A'}</p></div>
        </div>
        <hr>
        <p class="mb-0 text-muted small"><i class="bi bi-info-circle"></i> Longueur d'onde de coupure spectrale : <strong>${fmt(res.cutoff_wavelength, 1)} nm</strong></p>
      `;
    } else if (simType === 'contact_study') {
      customCard.classList.remove('d-none');
      customBadge.textContent = 'Étude de Contact';
      customContent.innerHTML = `
        <div class="alert alert-info py-2 mb-2">
          Meilleur travail de sortie identifié : <strong>${fmt(res.best_work_function, 2)} eV</strong>
        </div>
        <p class="mb-0 text-muted small"><i class="bi bi-info-circle"></i> Voir le graphique de superposition des courbes J-V pour comparer l'influence de la barrière de potentiel.</p>
      `;
    } else if (simType === 'quantum_efficiency' || simType === 'spectral_response') {
      customCard.classList.remove('d-none');
      customBadge.textContent = simType === 'quantum_efficiency' ? 'Efficacité Quantique' : 'Réponse Spectrale';
      customContent.innerHTML = `
        <div class="row text-center">
          <div class="col-md-12">
            <h5>Courant de Court-Circuit Intégré (Jsc)</h5>
            <p class="text-primary fw-bold fs-4">${fmt((res.jsc_integrated || res.jsc || 0)*1000, 3)} mA/cm²</p>
          </div>
        </div>
        <p class="mb-0 text-muted small text-center"><i class="bi bi-info-circle"></i> Calculé par intégration de l'EQE sur le spectre solaire incident.</p>
      `;
    } else if (simType === 'equivalent_circuit') {
      customCard.classList.remove('d-none');
      customBadge.textContent = 'Circuit Équivalent';
      customContent.innerHTML = `
        <div class="row text-center">
          <div class="col-md-6"><h5>Résistance Série (Rs)</h5><p class="text-danger fw-bold">${fmt(res.rs || 0, 2)} Ω·cm²</p></div>
          <div class="col-md-6"><h5>Résistance Shunt (Rsh)</h5><p class="text-success fw-bold">${fmtExp(res.rsh || 0)} Ω·cm²</p></div>
        </div>
        <hr>
        <p class="mb-0 text-muted small"><i class="bi bi-info-circle"></i> L'impact de ces résistances est visualisable sur le graphique comparatif Idéal vs Réel (rs_rsh_effect).</p>
      `;
    } else if (simType === 'electro_thermal_study') {
      customCard.classList.remove('d-none');
      customBadge.textContent = 'Couplage Électro-Thermique';
      
      const history = res.electro_thermal_history || [];
      let tableHtml = `<table class="table table-sm table-striped mt-3" style="max-height: 400px; display: block; overflow-y: auto;">
        <thead class="table-dark" style="position: sticky; top: 0;"><tr><th>Itération</th><th>Température (K)</th><th>P_heat (W/cm²)</th><th>Efficacité (%)</th></tr></thead><tbody>`;
      
      history.forEach(h => {
        tableHtml += `<tr>
          <td>${h.iteration || 0}</td>
          <td>${fmt(h.temperature, 2)}</td>
          <td>${fmt(h.p_heat, 4)}</td>
          <td>${fmt(h.efficiency, 2)}</td>
        </tr>`;
      });
      tableHtml += `</tbody></table>`;

      customContent.innerHTML = `
        <div class="row text-center mb-3">
          <div class="col-md-6"><h5>Température Finale</h5><p class="text-danger fw-bold fs-4">${fmt(res.final_temperature, 2)} K</p></div>
          <div class="col-md-6"><h5>Chaleur Dissipée</h5><p class="text-warning fw-bold fs-4">${fmt(res.heat_dissipated_w_cm2, 4)} W/cm²</p></div>
        </div>
        <div class="row">
          <div class="col-lg-7"><div id="etPlotly" style="height: 400px; width: 100%;"></div></div>
          <div class="col-lg-5">${tableHtml}</div>
        </div>
      `;
      
      if (history.length > 0) {
        const iter = history.map(h => h.iteration);
        const temp = history.map(h => h.temperature);
        const eff = history.map(h => h.efficiency);
        Plotly.newPlot('etPlotly', [
          { x: iter, y: temp, name: 'Température (K)', mode: 'lines+markers', line: { color: '#dc2626', width: 2.5 } },
          { x: iter, y: eff, name: 'η (%)', mode: 'lines+markers', yaxis: 'y2', line: { color: '#2563eb', width: 2.5 } }
        ], {
          ...PLOTLY_LAYOUT,
          margin: { l: 60, r: 60, t: 30, b: 50 },
          xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Itération' } },
          yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Température (K)', font: { color: '#dc2626' } }, tickfont: { color: '#dc2626' } },
          yaxis2: { title: { text: 'Efficacité (%)', font: { color: '#2563eb' } }, tickfont: { color: '#2563eb' }, overlaying: 'y', side: 'right', showgrid: false }
        }, PLOTLY_CONFIG);
      }
    } else if (simType === 'degradation_study') {
      customCard.classList.remove('d-none');
      customBadge.textContent = 'Dégradation & Vieillissement';
      
      const history = res.history || [];
      let tableHtml = `<table class="table table-sm table-striped mt-0" style="max-height: 400px; display: block; overflow-y: auto;">
        <thead class="table-dark" style="position: sticky; top: 0;"><tr><th>Temps (h)</th><th>Jsc (mA)</th><th>Voc (V)</th><th>FF (%)</th><th>η (%)</th></tr></thead><tbody>`;
      
      history.forEach(h => {
        tableHtml += `<tr>
          <td>${h.time_hours || 0}</td>
          <td>${fmt((h.jsc || 0)*1000, 2)}</td>
          <td>${fmt(h.voc, 3)}</td>
          <td>${fmt((h.fill_factor || 0)*100, 1)}</td>
          <td>${fmt(h.efficiency, 2)}</td>
        </tr>`;
      });
      tableHtml += `</tbody></table>`;

      customContent.innerHTML = `
        <div class="alert alert-warning py-2 mb-3">
          Suivi des dégradations au cours du temps (LID, PID, Vieillissement)
        </div>
        <div class="row">
          <div class="col-lg-7"><div id="degPlotly" style="height: 400px; width: 100%;"></div></div>
          <div class="col-lg-5">${tableHtml}</div>
        </div>
      `;
      
      if (history.length > 0) {
        const t = history.map(h => h.time_hours);
        const eff = history.map(h => h.efficiency);
        const voc = history.map(h => h.voc);
        const jsc = history.map(h => (h.jsc || 0)*1000);
        Plotly.newPlot('degPlotly', [
          { x: t, y: eff, name: 'η (%)', mode: 'lines+markers', line: { color: '#d97706', width: 2.5 } },
          { x: t, y: voc, name: 'Voc (V)', mode: 'lines+markers', yaxis: 'y2', line: { color: '#1d4ed8', width: 2.5 } },
          { x: t, y: jsc, name: 'Jsc (mA/cm²)', mode: 'lines+markers', yaxis: 'y3', line: { color: '#059669', width: 2.5 } }
        ], {
          ...PLOTLY_LAYOUT,
          margin: { l: 60, r: 80, t: 30, b: 50 },
          xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Temps (heures)' } },
          yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Efficacité (%)', font: { color: '#d97706' } }, tickfont: { color: '#d97706' } },
          yaxis2: { title: { text: 'Voc (V)', font: { color: '#1d4ed8' } }, tickfont: { color: '#1d4ed8' }, overlaying: 'y', side: 'right', showgrid: false },
          yaxis3: { title: { text: 'Jsc', font: { color: '#059669' } }, tickfont: { color: '#059669' }, overlaying: 'y', side: 'right', position: 1.0, showgrid: false }
        }, PLOTLY_CONFIG);
      }
    }

    /* ═══════════════════════════════════════════════════════════
      IV CURVE - Robust with fallbacks
      ═══════════════════════════════════════════════════════════ */
    const v = Array.isArray(res.voltages) ? res.voltages : [];
    const j = Array.isArray(res.current_density) ? res.current_density : [];
    
    // Get MPP values with fallbacks
    const vmax = pvMetricsBlocked ? undefined : getMetric(res, 'vmax', 'vmp', 'voltage_max', 'computation_summary.calculations.vmax', 'calculations.vmax');
    const jmax = pvMetricsBlocked ? undefined : getMetric(res, 'jmax', 'jmp', 'current_max', 'computation_summary.calculations.jmax', 'calculations.jmax');
    const pmax = pvMetricsBlocked ? undefined : getMetric(res, 'pmp', 'pmax', 'power_max', 'computation_summary.calculations.pmp', 'calculations.pmp');
    
    if (v.length && j.length) {
      document.getElementById('ivCard')?.classList.remove('d-none');
      
      // Calculate current in mA/cm²
      const jma = j.map(x => {
        const val = (typeof x === 'number' && isFinite(x)) ? x : 0;
        return val * 1000;
      });
      
      // Handle sign convention
      const sc = (res.sign_convention === 'pv_current_positive') ? 'pv_current_positive' : 'pv_current_negative';
      const vocForPlot = pvMetricsBlocked ? undefined : getMetric(res, 'voc', 'voc_value', 'computation_summary.calculations.voc', 'calculations.voc');
      
      // Calculate power in mW/cm²
      const power = v.map((vi, i) => {
        const jVal = (typeof j[i] === 'number' && isFinite(j[i])) ? j[i] : 0;
        if (vi < 0) return 0;
        if (vocForPlot && isFinite(vocForPlot) && vi > vocForPlot) return 0;
        return vi * Math.abs(jVal) * 1000;
      });

      const traceJV = {
        x: v, y: jma, mode: 'lines', name: 'J(V)',
        line: { color: '#1d4ed8', width: 3 },
        hovertemplate: 'V = %{x:.4f} V<br>J = %{y:.3f} mA/cm²<extra></extra>',
      };
      const tracePow = {
        x: v, y: power, mode: 'lines', name: 'P(V) [mW/cm²]', yaxis: 'y2',
        line: { color: '#d97706', width: 2, dash: 'dot' },
        hovertemplate: 'P = %{y:.3f} mW/cm²<extra></extra>',
      };

      // Get Voc for annotation
      const ffVal_iv = pvMetricsBlocked ? undefined : getMetric(res, 'fill_factor', 'computation_summary.calculations.fill_factor', 'calculations.fill_factor');

      /* Jsc at V=0 */
      const jscAtZero = (!pvMetricsBlocked && v.length && j.length) ? (() => {
        let best = null, bestDist = Infinity;
        for (let i = 0; i < v.length; i++) {
          const d = Math.abs(v[i]);
          if (d < bestDist) { bestDist = d; best = i; }
        }
        return best !== null ? jma[best] : null;
      })() : null;

      /* MPP marker + shaded rectangle */
      const traces = [traceJV, tracePow];
      const shapes = [
        { type:'line', x0:0, x1:Math.max(...v), y0:0, y1:0, line:{ color:'#6b7280', width:1.5, dash:'dash' } }
      ];
      const annotations = [];

      if (jscAtZero !== null && isFinite(jscAtZero)) {
        traces.push({
          x: [0], y: [jscAtZero], mode: 'markers', name: 'Jsc',
          marker: { color: '#059669', size: 11, symbol: 'circle', line: { color: '#fff', width: 2 } },
          hovertemplate: `Jsc = ${jscAtZero.toFixed(3)} mA/cm²<extra></extra>`,
        });
        annotations.push({
          x: 0, y: jscAtZero,
          text: `<b>Jsc = ${jscAtZero.toFixed(2)} mA/cm²</b>`,
          showarrow: true, arrowhead: 2, ax: 60, ay: 0,
          font: { color: '#059669', size: 12 }, arrowcolor: '#059669',
          bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#059669', borderwidth: 1, borderpad: 4,
        });
      }

      if (vocForPlot && isFinite(vocForPlot)) {
        traces.push({
          x: [vocForPlot], y: [0], mode: 'markers', name: 'Voc',
          marker: { color: '#7c3aed', size: 11, symbol: 'circle', line: { color: '#fff', width: 2 } },
          hovertemplate: `Voc = ${vocForPlot.toFixed(3)} V<extra></extra>`,
        });
        annotations.push({
          x: vocForPlot, y: 0,
          text: `<b>Voc = ${vocForPlot.toFixed(3)} V</b>`,
          showarrow: true, arrowhead: 2, ax: 0, ay: 45,
          font: { color: '#7c3aed', size: 12 }, arrowcolor: '#7c3aed',
          bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#7c3aed', borderwidth: 1, borderpad: 4,
        });
      }

      if (vmax != null && jmax != null && isFinite(vmax) && isFinite(jmax)) {
        const jRawAtMpp = (sc === 'pv_current_negative') ? (-jmax) : jmax;
        const pmaxVal = (pmax != null && isFinite(pmax)) ? pmax * 1000 : vmax * Math.abs(jmax) * 1000;
        traces.push({
          x: [vmax], y: [jRawAtMpp * 1000], mode: 'markers', name: 'MPP',
          marker: { color: '#dc2626', size: 14, symbol: 'star', line: { color: '#fff', width: 1.5 } },
          hovertemplate: `<b>MPP</b><br>Vmpp = ${vmax.toFixed(3)} V<br>Jmpp = ${(jRawAtMpp * 1000).toFixed(3)} mA/cm²<br>Pmax = ${pmaxVal.toFixed(3)} mW/cm²<extra></extra>`,
        });
        // FF shading rectangle (Vmpp × Jmpp area)
        if (jscAtZero !== null && vocForPlot && isFinite(jscAtZero) && isFinite(vocForPlot)) {
          shapes.push({
            type: 'rect', x0: 0, y0: 0, x1: vmax, y1: jRawAtMpp * 1000,
            fillcolor: 'rgba(220,38,38,0.08)', line: { color: 'rgba(220,38,38,0.4)', width: 1, dash: 'dot' },
          });
          const effDisplay = getMetric(res, 'efficiency', 'computation_summary.calculations.efficiency', 'calculations.efficiency');
          const ffDisplay = ffVal_iv ? (ffVal_iv * 100).toFixed(1) : '—';
          annotations.push({
            x: vmax / 2, y: (jRawAtMpp * 1000) / 2,
            text: `FF = ${ffDisplay}%${effDisplay ? '<br>η = ' + effDisplay.toFixed(2) + '%' : ''}`,
            showarrow: false,
            font: { color: '#dc2626', size: 12, family: 'monospace' },
            bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#dc2626', borderwidth: 1, borderpad: 5,
          });
        }
      }

      const layout = {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Voltage (V)', font: { size: 14 } }, range: [Math.min(0, Math.min(...v)) - 0.02, Math.max(...v) * 1.05] },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Current Density (mA/cm²)', font: { size: 14 } } },
        yaxis2: { title: { text: 'Power (mW/cm²)', font: { size: 13 } }, overlaying: 'y', side: 'right', showgrid: false, zeroline: false, tickfont: { size: 11 } },
        annotations,
        shapes,
      };
      Plotly.newPlot('ivPlotly', traces, layout, PLOTLY_CONFIG);
    } else {
      // No IV data: hide card for CV/luminescence sims, show placeholder otherwise
      const ivCard = document.getElementById('ivCard');
      if (ivCard) {
        if (!isCv && !isLum) {
          ivCard.classList.remove('d-none');
          const plotDiv = document.getElementById('ivPlotly');
          if (plotDiv) {
            plotDiv.innerHTML = '<div class="text-center text-muted p-4">Aucune donnée IV disponible</div>';
          }
        }
      }
    }

    /* ── C-V — Plotly ── */
    const cvV = res.cv_voltages || res.voltages || [];
    const cvC = res.capacitance || [];
    if (cvV.length && cvC.length) {
      document.getElementById('cvCard')?.classList.remove('d-none');
      const cvValid = cvV.map((vi, i) => ({ v: vi, c: cvC[i] })).filter(pt => typeof pt.c === 'number' && isFinite(pt.c));
      const cvX = cvValid.map(pt => pt.v);
      const cvY = cvValid.map(pt => pt.c * 1e9); // F/cm² -> nF/cm²
      Plotly.newPlot('cvPlotly', [{
        x: cvX, y: cvY, mode: 'lines+markers', name: 'C(V)',
        line: { color: '#1d4ed8', width: 3 },
        marker: { size: 6, color: '#1d4ed8', line: { color: '#fff', width: 1.5 } },
        hovertemplate: 'V = %{x:.3f} V<br>C = %{y:.3f} nF/cm²<extra></extra>',
      }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Voltage (V)', font: { size: 14 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Capacitance (nF/cm²)', font: { size: 14 } } },
      }, PLOTLY_CONFIG);
    }

    /* ── Mott-Schottky — Plotly ── */
    const msInvC2 = res.inv_c2 || [];
    if (cvV.length && msInvC2.length) {
      document.getElementById('msCard')?.classList.remove('d-none');
      const msValid = cvV.map((vi, i) => ({ v: vi, ic2: msInvC2[i] })).filter(pt => typeof pt.ic2 === 'number' && isFinite(pt.ic2));
      const msX = msValid.map(pt => pt.v);
      const msY = msValid.map(pt => pt.ic2);
      const msAnnotations = [];
      const msVbi = getMetric(res, 'vbi');
      const msNeff = getMetric(res, 'n_eff');
      if (msVbi && isFinite(msVbi)) {
        msAnnotations.push({
          x: msVbi, y: 0,
          text: `<b>Vbi = ${msVbi.toFixed(3)} V</b>`,
          showarrow: true, arrowhead: 2, ax: 0, ay: -40,
          font: { color: '#dc2626', size: 12 }, arrowcolor: '#dc2626',
          bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#dc2626', borderwidth: 1, borderpad: 4,
        });
      }
      Plotly.newPlot('msPlotly', [{
        x: msX, y: msY, mode: 'lines+markers', name: '1/C²(V)',
        line: { color: '#dc2626', width: 3 },
        marker: { size: 6, color: '#dc2626', line: { color: '#fff', width: 1.5 } },
        hovertemplate: 'V = %{x:.3f} V<br>1/C² = %{y:.3e} cm⁴/F²<extra></extra>',
      }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Voltage (V)', font: { size: 14 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: '1/C² (cm⁴/F²)', font: { size: 14 } } },
        annotations: msAnnotations,
      }, PLOTLY_CONFIG);
    }

    /* ── Luminescence — Plotly ── */
    const lumV = res.voltages || [];
    const lumI = res.lum_intensity || [];
    if (lumV.length && lumI.length) {
      document.getElementById('lumCard')?.classList.remove('d-none');
      const lumValid = lumV.map((vi, i) => ({ v: vi, li: lumI[i] })).filter(pt => typeof pt.li === 'number' && isFinite(pt.li) && pt.li > 0);
      const lumX = lumValid.map(pt => pt.v);
      const lumY = lumValid.map(pt => pt.li);
      const lumLabel = res.is_pl ? 'Photoluminescence (PL)' : 'Électroluminescence (EL)';
      Plotly.newPlot('lumPlotly', [{
        x: lumX, y: lumY, mode: 'lines+markers', name: lumLabel,
        line: { color: '#16a34a', width: 3 },
        marker: { size: 6, color: '#16a34a', line: { color: '#fff', width: 1.5 } },
        hovertemplate: 'V = %{x:.3f} V<br>I = %{y:.3e} ph/cm²/s<extra></extra>',
      }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Voltage (V)', font: { size: 14 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Intensité (ph/cm²/s)', font: { size: 14 } }, type: 'log' },
      }, PLOTLY_CONFIG);
    }

    /* ── Transient Photovoltage (TPV) — Plotly ── */
    const tpvTime = res.time || [];
    const tpvV = res.voltage || [];
    const tpvTau = res.tau_eff || [];
    if (tpvTime.length && tpvV.length && SIM_TYPE.includes('transient_photovoltage')) {
      document.getElementById('tpvCard')?.classList.remove('d-none');
      const timeMs = tpvTime.map(t => t * 1000); // Convert to ms
      Plotly.newPlot('tpvPlotly', [
        {
          x: timeMs, y: tpvV, mode: 'lines', name: 'Voc(t)',
          line: { color: '#eab308', width: 3 },
          hovertemplate: 'Temps = %{x:.3f} ms<br>Voc = %{y:.3f} V<extra></extra>',
        },
        {
          x: timeMs, y: tpvTau.map(tau => tau * 1e6), mode: 'lines', name: 'τ_eff(t) [µs]',
          yaxis: 'y2',
          line: { color: '#3b82f6', width: 2, dash: 'dot' },
          hovertemplate: 'Temps = %{x:.3f} ms<br>τ_eff = %{y:.2f} µs<extra></extra>',
        }
      ], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Temps (ms)', font: { size: 14 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Tension (V)', font: { size: 14 } } },
        yaxis2: {
          title: { text: 'Temps de vie effectif (µs)', font: { size: 14, color: '#3b82f6' } },
          tickfont: { color: '#3b82f6' },
          overlaying: 'y', side: 'right', showgrid: false,
        },
        legend: { orientation: 'h', x: 0.5, xanchor: 'center', y: 1.15 }
      }, PLOTLY_CONFIG);
    }

    /* ── EQE — Plotly ── */
    const wl = res.wavelengths || [];
    const eqe = res.eqe || [];
    if (wl.length && eqe.length) {
      document.getElementById('eqeCard')?.classList.remove('d-none');
      const h_p = 6.626e-34, c_l = 3e8, q_e = 1.6e-19;

      // Filtrer les NaN/Infinity pour des graphes propres
      const eqePts = wl.map((w, i) => ({ w: w, e: eqe[i] })).filter(pt => Number.isFinite(pt.w) && Number.isFinite(pt.e));
      const wlClean = eqePts.map(pt => pt.w);
      const eqeClean = eqePts.map(pt => pt.e);
      const srClean = eqePts.map(pt => pt.e * q_e * (pt.w * 1e-9) / (h_p * c_l));

      // Bandgap cutoff wavelength (λ_g = hc/Eg)
      const Eg_eqe = res.Eg || res.eg || null;
      const lambda_g = Eg_eqe ? Math.round(1240 / Eg_eqe) : null;

      // EQE peak annotation
      const eqeMax = Math.max(...eqeClean.map(e => e * 100));
      const eqePeakIdx = eqeClean.findIndex(e => e * 100 >= eqeMax * 0.99);
      const eqePeakWl = eqePeakIdx >= 0 ? wlClean[eqePeakIdx] : null;

      const eqeShapes = [];
      const eqeAnnotations = [];
      if (lambda_g && lambda_g > Math.min(...wlClean) && lambda_g < Math.max(...wlClean)) {
        eqeShapes.push({
          type: 'line', x0: lambda_g, x1: lambda_g, y0: 0, y1: 105,
          line: { color: '#dc2626', width: 1.5, dash: 'dashdot' },
        });
        eqeAnnotations.push({
          x: lambda_g, y: 102,
          text: `<b>λ<sub>g</sub> = ${lambda_g} nm</b><br>(Eg = ${Eg_eqe.toFixed(2)} eV)`,
          showarrow: false,
          font: { color: '#dc2626', size: 11 },
          xanchor: 'left',
          bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#dc2626', borderwidth: 1, borderpad: 3,
        });
      }
      if (eqePeakWl && eqeMax > 5) {
        eqeAnnotations.push({
          x: eqePeakWl, y: eqeMax,
          text: `Peak: ${eqeMax.toFixed(1)}%`,
          showarrow: true, arrowhead: 2, ax: 30, ay: -25,
          font: { color: '#1d4ed8', size: 11 },
          bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#1d4ed8', borderwidth: 1, borderpad: 3,
        });
      }

      const srMax = Math.max(...srClean);
      Plotly.newPlot('eqePlotly', [
        {
          x: wlClean, y: eqeClean.map(e => e * 100), mode: 'lines', name: 'EQE (%)',
          fill: 'tozeroy', fillcolor: 'rgba(29,78,216,0.1)',
          line: { color: '#1d4ed8', width: 3 },
          hovertemplate: 'λ = %{x:.0f} nm<br>EQE = %{y:.2f} %<extra></extra>',
        },
        {
          x: wlClean, y: srClean, mode: 'lines', name: 'Réponse spectrale (A/W)', yaxis: 'y2',
          line: { color: '#dc2626', width: 2, dash: 'dot' },
          hovertemplate: 'SR = %{y:.4f} A/W<extra></extra>',
        }
      ], {
        ...PLOTLY_LAYOUT,
        xaxis: {
          ...PLOTLY_LAYOUT.xaxis,
          title: { text: 'Longueur d\'onde (nm)', font: { size: 14 } },
          range: [Math.min(...wlClean), Math.max(...wlClean)]
        },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'EQE (%)', font: { size: 14 } }, range: [0, 110] },
        yaxis2: {
          title: { text: 'Réponse spectrale (A/W)', font: { size: 13 } },
          overlaying: 'y', side: 'right', showgrid: false,
          zeroline: false, tickfont: { size: 11 },
          range: [0, srMax * 1.15],
        },
        shapes: eqeShapes,
        annotations: eqeAnnotations,
      }, PLOTLY_CONFIG);
    }

    /* ── Temperature study — Plotly ── */
    const T = res.temperatures || [];
    if (T.length) {
      const eff = Array.isArray(res.efficiency) ? res.efficiency : [];
      const voc_arr = Array.isArray(res.voc) ? res.voc : [];
      const jsc_arr = Array.isArray(res.jsc) ? res.jsc.map(x => x * 1000) : [];
      if (eff.length || voc_arr.length || jsc_arr.length) {
        document.getElementById('tempCard')?.classList.remove('d-none');
        const ds = [];
        if (eff.length) ds.push({
          x: T, y: eff, name: 'η (%)', mode: 'lines+markers',
          line: { color: '#d97706', width: 3 },
          marker: { size: 7, color: '#d97706', line: { color: '#fff', width: 1.5 } },
          hovertemplate: 'T = %{x:.0f} K<br>η = %{y:.3f} %<extra></extra>',
        });
        if (voc_arr.length) ds.push({
          x: T, y: voc_arr, name: 'Voc (V)', mode: 'lines+markers', yaxis: 'y2',
          line: { color: '#1d4ed8', width: 2.5 },
          marker: { size: 6, color: '#1d4ed8', line: { color: '#fff', width: 1.5 } },
          hovertemplate: 'T = %{x:.0f} K<br>Voc = %{y:.4f} V<extra></extra>',
        });
        if (jsc_arr.length) ds.push({
          x: T, y: jsc_arr, name: 'Jsc (mA/cm²)', mode: 'lines+markers', yaxis: 'y3',
          line: { color: '#059669', width: 2.5 },
          marker: { size: 6, color: '#059669', line: { color: '#fff', width: 1.5 } },
          hovertemplate: 'T = %{x:.0f} K<br>Jsc = %{y:.4f} mA/cm²<extra></extra>',
        });
        Plotly.newPlot('tempPlotly', ds, {
          ...PLOTLY_LAYOUT,
          margin: { l: 70, r: 100, t: 45, b: 70 },
          xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Température (K)', font: { size: 14 } } },
          yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Efficacité (%)', font: { size: 14, color: '#d97706' } }, tickfont: { color: '#d97706' } },
          yaxis2: {
            title: { text: 'Voc (V)', font: { size: 14, color: '#1d4ed8' } },
            overlaying: 'y', side: 'right', showgrid: false, zeroline: false,
            tickfont: { color: '#1d4ed8', size: 12 },
          },
          yaxis3: {
            title: { text: 'Jsc (mA/cm²)', font: { size: 13, color: '#059669' } },
            overlaying: 'y', side: 'right', anchor: 'free', position: 1.0,
            showgrid: false, zeroline: false,
            tickfont: { color: '#059669', size: 11 },
          },
        }, PLOTLY_CONFIG);
      }
    }

    /* ── Band Diagram — Plotly ── */
    const bands = res.band_diagram || {};
    const bandX = bands.x_mesh || bands.x || [];
    const bandEc = bands.ec || bands.Ec || [];
    const bandEv = bands.ev || bands.Ev || [];
    const bandEFn = bands.efn || bands.EFn || [];
    const bandEFp = bands.efp || bands.EFp || [];
    if (bandX.length && bandEc.length) {
      document.getElementById('bandCard')?.classList.remove('d-none');
      
      const x_um = bandX.map(xi => xi * 1e4); // cm to um
      
      // Forbidden-gap shading: fill between Ec and Ev
      const bandTraces = [
        // Shaded forbidden gap (Ec fill down to Ev using tonexty)
        {
          x: x_um, y: bandEv, mode: 'lines', name: 'Ev (Valence)',
          line: { color: '#1d4ed8', width: 2.5 },
          hovertemplate: 'x = %{x:.3f} μm<br>Ev = %{y:.3f} eV<extra></extra>',
        },
        {
          x: x_um, y: bandEc, mode: 'lines', name: 'Ec (Conduction)',
          line: { color: '#dc2626', width: 2.5 },
          fill: 'tonexty', fillcolor: 'rgba(209,213,219,0.35)',
          hovertemplate: 'x = %{x:.3f} μm<br>Ec = %{y:.3f} eV<extra></extra>',
        },
        {
          x: x_um, y: bandEFn, mode: 'lines', name: 'EFn (quasi-Fermi e⁻)',
          line: { color: '#16a34a', width: 2, dash: 'dashdot' },
          hovertemplate: 'x = %{x:.3f} μm<br>EFn = %{y:.3f} eV<extra></extra>',
        },
        {
          x: x_um, y: bandEFp, mode: 'lines', name: 'EFp (quasi-Fermi h⁺)',
          line: { color: '#ea580c', width: 2, dash: 'dashdot' },
          hovertemplate: 'x = %{x:.3f} μm<br>EFp = %{y:.3f} eV<extra></extra>',
        },
      ];

      // Add vacuum level if available
      if (bands.evac) {
        bandTraces.push({
          x: x_um, y: bands.evac, mode: 'lines', name: 'Evac',
          line: { color: '#6b7280', width: 1.5, dash: 'dot' },
          hovertemplate: 'Evac = %{y:.3f} eV<extra></extra>',
        });
      }

      // Junction position line
      const bandShapes = [];
      const bandAnnotations = [];
      const junction_um = res.junction_position != null ? res.junction_position * 1e4 : null;
      if (junction_um !== null && isFinite(junction_um)) {
        bandShapes.push({
          type: 'line', x0: junction_um, x1: junction_um,
          y0: 0, y1: 1, yref: 'paper',
          line: { color: '#7c3aed', width: 1.5, dash: 'dash' },
        });
        bandAnnotations.push({
          x: junction_um, y: 1, yref: 'paper',
          text: '<b>Jonction</b>', showarrow: false,
          font: { color: '#7c3aed', size: 11 },
          xanchor: 'left', yanchor: 'top',
          bgcolor: 'rgba(255,255,255,0.8)', bordercolor: '#7c3aed', borderwidth: 1, borderpad: 3,
        });
      }

      // Bandgap annotation (Eg = Ec - Ev at first point)
      if (bandEc.length && bandEv.length) {
        const eg_bd = bandEc[0] - bandEv[0];
        if (eg_bd > 0.3 && eg_bd < 5) {
          const xMid = x_um[Math.floor(x_um.length / 4)];
          const ecMid = bandEc[Math.floor(x_um.length / 4)];
          const evMid = bandEv[Math.floor(x_um.length / 4)];
          bandAnnotations.push({
            x: xMid, y: (ecMid + evMid) / 2,
            text: `<b>Eg = ${eg_bd.toFixed(2)} eV</b>`,
            showarrow: false,
            font: { color: '#374151', size: 12 },
            bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#9ca3af', borderwidth: 1, borderpad: 4,
          });
        }
      }

      Plotly.newPlot('bandPlotly', bandTraces, {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Position (μm)', font: { size: 14 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Énergie (eV)', font: { size: 14 } } },
        hovermode: 'x unified',
        shapes: bandShapes,
        annotations: bandAnnotations,
      }, PLOTLY_CONFIG);
    }

    /* ── Plotly 2D Spatial Cartography ── */
    fetch('/api/results/{{ simulation.id }}/spatial_2d')
      .then(resp => resp.ok ? resp.json() : null)
      .then(data2d => {
        if (!data2d || data2d.error || !data2d.x || !data2d.y) return;
        const card2d = document.getElementById('spatial2DCard');
        if (card2d) card2d.classList.remove('d-none');

        const MAP_LABELS = {
          potential: { title: 'Potentiel Électrostatique V(x,y)', unit: 'V', colorscale: 'Viridis' },
          electron_density: { title: 'Densité d\'Électrons n(x,y)', unit: 'cm⁻³', colorscale: 'Plasma' },
          hole_density: { title: 'Densité de Trous p(x,y)', unit: 'cm⁻³', colorscale: 'Plasma' },
          srh_recombination: { title: 'Recombinaisons SRH(x,y)', unit: 'cm⁻³s⁻¹', colorscale: 'Inferno' }
        };

        const render2DMap = (key) => {
          const zData = data2d[key];
          if (!zData) return;
          const info = MAP_LABELS[key] || { title: key, unit: '', colorscale: 'Viridis' };

          const trace2d = {
            x: data2d.x,
            y: data2d.y,
            z: zData,
            type: 'heatmap',
            colorscale: info.colorscale,
            colorbar: { title: info.unit },
            hovertemplate: 'x = %{x:.3f} µm<br>y = %{y:.3f} µm<br>Valeur = %{z:.3e} ' + info.unit + '<extra></extra>'
          };

          Plotly.newPlot('spatial2DPlotly', [trace2d], {
            ...PLOTLY_LAYOUT,
            title: { text: info.title, font: { size: 14 } },
            margin: { l: 65, r: 25, t: 35, b: 65 },
            xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'x (µm - profondeur)', font: { size: 14 } } },
            yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'y (µm - largeur)', font: { size: 14 } } }
          }, PLOTLY_CONFIG);
        };

        render2DMap('potential');

        const select2d = document.getElementById('spatial2DSelect');
        if (select2d) {
          select2d.addEventListener('change', (e) => {
            render2DMap(e.target.value);
          });
        }
      })
      .catch(err => console.warn('2D cartography fetch skipped:', err));

    /* ── Raw data accordion ── */
    const card = document.getElementById('allResultsCard');
    const sTbody = document.querySelector('#scalarsTable tbody');
    const aBody = document.getElementById('arraysBody');

    const scalars = [], arrays = [];
    for (const [k, val] of Object.entries(res)) {
      if (val === null || typeof val === 'number' || typeof val === 'string' || typeof val === 'boolean') scalars.push([k, val]);
      else if (Array.isArray(val)) arrays.push([k, val]);
    }
    if ((scalars.length || arrays.length) && card) card.classList.remove('d-none');

    const esc = s => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    const units_map = { jsc: 'A/cm²', voc: 'V', fill_factor: '—', efficiency: '%', vmax: 'V', jmax: 'A/cm²' };

    if (sTbody) {
      scalars.sort((a, b) => a[0].localeCompare(b[0]));
      for (const [k, val] of scalars) {
        const unit = units_map[k] || '';
        const displayVal = (typeof val === 'number') ? val.toExponential(4) : esc(val);
        sTbody.insertAdjacentHTML('beforeend',
          `<tr><td><code>${esc(k)}</code></td><td>${displayVal} <small class="text-muted">${unit}</small></td></tr>`);
      }
    }

    if (aBody) {
      for (const [k, arr] of arrays) {
        const sk = k.replace(/[^a-zA-Z0-9_-]/g, '_');
        const preview = arr.slice(0, 20);
        aBody.insertAdjacentHTML('beforeend', `
        <div class="border rounded p-2 mb-2">
          <div class="d-flex justify-content-between">
            <div><strong>${esc(k)}</strong> <span class="text-muted small">(${arr.length} pts)</span></div>
            <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#arr_${sk}">Voir</button>
          </div>
          <div class="collapse mt-1" id="arr_${sk}">
            <pre class="bg-light p-2 rounded mb-0 small">${esc(JSON.stringify(preview, null, 1))}${arr.length > 20 ? '\n…' : ''}</pre>
          </div>
        </div>`);
      }
    }

  })();

  /* ═══════════════════════════════════════════════════════════
     PNG PLOTS GRID
     ═══════════════════════════════════════════════════════════ */
  (async function () {
    const grid = document.getElementById('plotsGrid');
    if (!grid) return;

    const [namesR, metaR] = await Promise.all([
      fetch(`/api/results/${SIM_ID}/plots`),
      fetch('/api/plot-info'),
    ]);
    const names = await namesR.json().catch(() => []);
    const meta = await metaR.json().catch(() => ({}));

    // Utiliser uniquement la liste retournée par l'API
    const finalNames = names;
    
    if (!finalNames.length) {
      document.getElementById('plotsEmpty')?.classList.remove('d-none');
      return;
    }

    for (const name of finalNames) {
      const info = meta[name] || {};
      const col = document.createElement('div');
      col.className = 'col-12 mb-4';
      col.innerHTML = `
      <div class="card plot-card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span>${escapeHtml(info.name || name)}</span>
          <a class="btn btn-sm btn-outline-light" href="/api/results/${SIM_ID}/plot/${encodeURIComponent(name)}" target="_blank" download="${name}.png">
            <i class="bi bi-download"></i>
          </a>
        </div>
        <div class="card-body">
          <div class="row align-items-start">
            <div class="col-md-8">
              <img class="img-fluid rounded border" loading="lazy"
                   src="/api/results/${SIM_ID}/plot/${encodeURIComponent(name)}"
                   alt="${name}" />
            </div>
            <div class="col-md-4 pt-2">
              ${info.description ? `<p class="small text-muted">${info.description}</p>` : ''}
              ${info.simple_explanation ? `<div class="mb-2"><span class="badge bg-info text-dark">Explication</span><br/><small>${info.simple_explanation}</small></div>` : ''}
              ${info.physical_explanation ? `<div><span class="badge-physics">Physique</span><br/><small class="text-muted">${info.physical_explanation}</small></div>` : ''}
            </div>
          </div>
        </div>
      </div>`;
      grid.appendChild(col);
    }
  })();

  /* ═══════════════════════════════════════════════════════════
     SWEEP HEATMAP
     ═══════════════════════════════════════════════════════════ */
  async function loadSweepHeatmap() {
    const metric = document.getElementById('sweepMetric')?.value || 'efficiency';
    const r = await fetch(`/api/results/${SIM_ID}/sweep-heatmap?metric=${metric}`).catch(() => null);
    if (!r || !r.ok) return;
    const d = await r.json().catch(() => null);
    if (!d || d.type === 'none') return;

    const card = document.getElementById('sweepCard');
    card.classList.remove('d-none');

    const metricLabels = { efficiency:'Efficacité η (%)', jsc:'Jsc (A/cm²)', voc:'Voc (V)', fill_factor:'Facteur de forme FF' };
    if (d.type === '1d') {
      const yMax = Math.max(...d.data.filter(isFinite));
      const yMin = Math.min(...d.data.filter(isFinite));
      const optIdx = d.data.indexOf(yMax);
      const sweepAnnotations = [];
      if (optIdx >= 0 && isFinite(d.values[optIdx])) {
        sweepAnnotations.push({
          x: d.values[optIdx], y: yMax,
          text: `<b>Optimal: ${yMax.toFixed(4)}</b>`,
          showarrow: true, arrowhead: 2, ax: 0, ay: -35,
          font: { color: '#dc2626', size: 12 },
          bgcolor: 'rgba(255,255,255,0.9)', bordercolor: '#dc2626', borderwidth: 1, borderpad: 4,
        });
      }
      Plotly.newPlot('sweepPlot', [{
        x: d.values, y: d.data,
        mode: 'lines+markers', type: 'scatter',
        line: { color: '#1d4ed8', width: 3 },
        marker: { color: '#1d4ed8', size: 8, line: { color: '#fff', width: 1.5 } },
        name: metricLabels[metric] || metric,
        hovertemplate: `${d.param} = %{x:.3e}<br>${metricLabels[metric] || metric} = %{y:.5f}<extra></extra>`,
        fill: 'tozeroy', fillcolor: 'rgba(29,78,216,0.07)',
      }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: d.param, font: { size: 14 } }, type: 'log' },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: metricLabels[metric] || metric, font: { size: 14 } } },
        annotations: sweepAnnotations,
      }, PLOTLY_CONFIG);
    } else if (d.type === '2d' && d.grid) {
      const g = d.grid;
      Plotly.newPlot('sweepPlot', [{
        type: 'heatmap', z: g.z, x: g.x, y: g.y,
        colorscale: 'RdBu', showscale: true, reversescale: false,
        colorbar: { title: { text: metricLabels[metric] || metric, side: 'right', font: { size: 12 } }, tickfont: { size: 11 } },
        hovertemplate: `${g.param1||'x'} = %{x:.3e}<br>${g.param2||'y'} = %{y:.3e}<br>${metricLabels[metric]||metric} = %{z:.5f}<extra></extra>`,
      }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: g.param1 || 'Paramètre 1', font: { size: 14 } }, type: 'log' },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: g.param2 || 'Paramètre 2', font: { size: 14 } }, type: 'log' },
      }, PLOTLY_CONFIG);
    }
  }

  // Auto-charger si type parametric_sweep
  (async function() {
    if (SIM_TYPE && SIM_TYPE.includes('parametric')) loadSweepHeatmap();
  })();

  /* ═══════════════════════════════════════════════════════════
     PROFILING TIMELINE
     ═══════════════════════════════════════════════════════════ */
  (async function() {
    const r = await fetch(`/api/results/${SIM_ID}/profiling`).catch(() => null);
    if (!r || !r.ok) return;
    const d = await r.json().catch(() => null);
    const prof = d?.profile;
    if (!prof || !prof.steps || !prof.steps.length) return;

    document.getElementById('profilingCard').classList.remove('d-none');

    const steps  = prof.steps;
    const labels = steps.map(s => s.name || '?');
    const times  = steps.map(s => parseFloat(s.elapsed || 0));
    const colors = steps.map(s => s.ok === false ? '#dc2626' : '#2563eb');

    Plotly.newPlot('profilingPlot', [{
      type:'bar', orientation:'h',
      y: labels, x: times,
      marker:{color:colors},
      hovertemplate:'%{y}: %{x:.3f}s<extra></extra>',
      text: times.map(t => t.toFixed(3)+'s'),
      textposition:'outside',
    }], {
      ...PLOTLY_LAYOUT,
      xaxis:{...PLOTLY_LAYOUT.xaxis, title:'Durée (s)'},
      yaxis:{...PLOTLY_LAYOUT.yaxis, autorange:'reversed'},
      margin:{l:160,r:80,t:20,b:40},
    }, PLOTLY_CONFIG);

    // Tableau récapitulatif
    const total = prof.total_s || times.reduce((a,b)=>a+b,0);
    let html = '<table class="table table-sm table-bordered mt-2"><thead class="table-dark"><tr><th>Étape</th><th>Durée (s)</th><th>% total</th><th>Statut</th></tr></thead><tbody>';
    steps.forEach(s => {
      const pct = (parseFloat(s.elapsed||0)/total*100).toFixed(1);
      const ok = s.ok !== false;
      html += `<tr class="${ok?'':'table-danger'}">
        <td>${s.name||'?'}</td>
        <td>${parseFloat(s.elapsed||0).toFixed(3)}</td>
        <td>${pct}%</td>
        <td>${ok?'<span class="badge bg-success">✓</span>':'<span class="badge bg-danger">✗</span>'}</td>
      </tr>`;
    });
    html += `<tr class="table-info fw-bold"><td>TOTAL</td><td>${total.toFixed(3)}</td><td>100%</td><td></td></tr></tbody></table>`;
    document.getElementById('profilingTable').innerHTML = html;
  })();
</script>
{% endblock %}