{% extends "base.html" %}
{% block title %}SPARC — Explorateur de Front de Pareto & Design Space{% endblock %}

{% block head %}
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
<style>
  :root {
    --glass-bg: rgba(26, 32, 44, 0.75);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --accent-primary: #6366f1;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --card-hover: rgba(255, 255, 255, 0.05);
  }

  .pareto-hero {
    background: var(--accent-gradient);
    border-radius: 1rem;
    padding: 2.2rem 2.5rem;
    margin-bottom: 2rem;
    color: #fff;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
  }
  .pareto-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    box-shadow: var(--glass-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .glass-card:hover {
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
  }

  .nav-pills-custom .nav-link {
    border-radius: 0.75rem;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    color: #cbd5e1;
    transition: all 0.2s ease;
  }
  .nav-pills-custom .nav-link.active {
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
  }

  .badge-gradient {
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 600;
    padding: 0.4em 0.8em;
    border-radius: 0.5rem;
  }

  .kpi-tile {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 1.1rem;
    text-align: center;
    transition: all 0.2s ease;
  }
  .kpi-tile:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
  }
  .kpi-tile .val {
    font-size: 1.65rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .table-custom th {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border-color: var(--glass-border);
  }
  .table-custom td {
    color: #cbd5e1;
    border-color: var(--glass-border);
    vertical-align: middle;
  }

  /* Micro-animations */
  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-appear {
    animation: fadeInScale 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">

  <!-- Hero Header -->
  <div class="pareto-hero animate-appear">
    <div class="d-flex flex-wrap align-items-center justify-content-between">
      <div>
        <span class="badge badge-gradient mb-2">SPARC 2.0 — ANALYSE STRATÉGIQUE & INTEROPÉRABILITÉ</span>
        <h1 class="fw-bold mb-2"><i class="bi bi-bullseye me-2"></i>Explorateur de Front de Pareto & Design Space</h1>
        <p class="lead mb-0 opacity-90">
          Explorez les compromis multi-objectifs de cellules tandem (BoTorch / Optuna), comparez synchroniquement jusqu'à 4 simulations (bandes, IV, EQE), modélisez le piégeage optique (Campbell-Green) et exportez vers SCAPS-1D & PVsyst.
        </p>
      </div>
      <div class="mt-3 mt-md-0 d-flex gap-2">
        <a href="#section-compare" class="btn btn-light fw-semibold px-4 py-2 shadow-sm">
          <i class="bi bi-bar-chart-line-fill me-2"></i>Comparateur (2–4)
        </a>
        <a href="#section-optics" class="btn btn-outline-light fw-semibold px-4 py-2">
          <i class="bi bi-sun-fill me-2"></i>Optique Campbell-Green
        </a>
      </div>
    </div>
  </div>

  <!-- Section 1: Campagne & Front de Pareto 3D / 2D -->
  <div class="glass-card animate-appear">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
      <div>
        <h3 class="fw-bold text-white mb-1"><i class="bi bi-diagram-3-fill me-2"></i>Espace de Conception Multi-Objectif</h3>
        <p class="text-muted mb-0">Sélectionnez une campagne d'optimisation et basculez entre la vue 3D complète et les fronts 2D de Pareto.</p>
      </div>
      <div class="d-flex align-items-center gap-3 mt-3 mt-md-0">
        <label for="campaignSelect" class="form-label text-light mb-0 fw-semibold">Campagne :</label>
        <select id="campaignSelect" class="form-select bg-dark text-white border-secondary" style="min-width: 320px;">
          <option value="demo_tandem_botorch">Chargement des campagnes...</option>
        </select>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-outline-info active" id="btnView3D" onclick="switchParetoView('3D')">
            <i class="bi bi-box me-1"></i>3D Space
          </button>
          <button type="button" class="btn btn-outline-info" id="btnView2D" onclick="switchParetoView('2D')">
            <i class="bi bi-graph-up me-1"></i>2D Pareto
          </button>
        </div>
      </div>
    </div>

    <!-- Pareto Plotly Div -->
    <div id="paretoChartContainer" style="width: 100%; height: 560px; border-radius: 0.75rem; overflow: hidden; background: rgba(0,0,0,0.25);"></div>

    <!-- Table of Points with Checkboxes for comparison -->
    <div class="mt-4">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold text-white mb-0"><i class="bi bi-table me-2"></i>Points du Design Space (Cochez 2 à 4 points pour comparaison côte à côte)</h5>
        <span class="badge bg-secondary" id="selectedCountBadge">0 point sélectionné</span>
      </div>
      <div class="table-responsive" style="max-height: 320px; overflow-y: auto;">
        <table class="table table-hover table-custom table-sm mb-0">
          <thead class="sticky-top">
            <tr>
              <th width="50"><input type="checkbox" id="checkAllPoints" disabled title="Sélection 4 max"></th>
              <th>#</th>
              <th>Rendement η (%)</th>
              <th>Épaisseur Totale (µm)</th>
              <th>Résistance Dégrad. (%)</th>
              <th>Jsc (mA/cm²)</th>
              <th>Voc (V)</th>
              <th>FF (%)</th>
              <th>Détails Matériaux</th>
            </tr>
          </thead>
          <tbody id="paretoPointsTableBody">
            <tr><td colspan="9" class="text-center text-muted py-3">Chargement...</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


  <!-- Section 2: Comparateur Synchronisé Multi-Simulations (2 à 4 simulations) -->
  <div class="glass-card animate-appear" id="section-compare">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <h3 class="fw-bold text-white mb-1"><i class="bi bi-layers-half me-2"></i>Comparateur Synchronisé Multi-Simulations</h3>
        <p class="text-muted mb-0">Analyse superposée des profils de bande E(x), des courbes J-V / P-V et du rendement quantique (EQE) pour les cellules sélectionnées.</p>
      </div>
      <div>
        <button class="btn btn-sm btn-outline-light" onclick="clearSelection()"><i class="bi bi-x-circle me-1"></i>Réinitialiser sélection</button>
      </div>
    </div>

    <!-- Selected KPI comparison cards -->
    <div class="row g-3 mb-4" id="compareCardsContainer">
      <div class="col-12 text-center text-muted py-3">
        <i class="bi bi-arrow-up-circle fs-4 d-block mb-1"></i>
        Veuillez cocher au moins 2 points (et jusqu'à 4) dans le tableau ci-dessus pour activer le comparateur synchronisé.
      </div>
    </div>

    <!-- Synchronized Charts Tabs -->
    <ul class="nav nav-pills nav-pills-custom mb-3 gap-2" id="compareTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-bands-btn" data-bs-toggle="pill" data-bs-target="#tab-bands" type="button" role="tab">
          <i class="bi bi-soundwave me-1"></i>Diagramme de Bandes (Ec, Ev, EF)
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-iv-btn" data-bs-toggle="pill" data-bs-target="#tab-iv" type="button" role="tab">
          <i class="bi bi-lightning-charge me-1"></i>Courbes J-V & P-V
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-eqe-btn" data-bs-toggle="pill" data-bs-target="#tab-eqe" type="button" role="tab">
          <i class="bi bi-sun me-1"></i>Rendement Quantique (EQE)
        </button>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane fade show active" id="tab-bands" role="tabpanel">
        <div id="chartBandsCompare" style="width: 100%; height: 480px; background: rgba(0,0,0,0.25); border-radius: 0.75rem;"></div>
      </div>
      <div class="tab-pane fade" id="tab-iv" role="tabpanel">
        <div id="chartIVCompare" style="width: 100%; height: 480px; background: rgba(0,0,0,0.25); border-radius: 0.75rem;"></div>
      </div>
      <div class="tab-pane fade" id="tab-eqe" role="tabpanel">
        <div id="chartEQECompare" style="width: 100%; height: 480px; background: rgba(0,0,0,0.25); border-radius: 0.75rem;"></div>
      </div>
    </div>
  </div>


  <!-- Section 3: Module d'Optique Texturée / Ray-Trapping (Campbell-Green & Yablonovitch) -->
  <div class="glass-card animate-appear" id="section-optics">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <h3 class="fw-bold text-white mb-1"><i class="bi bi-brightness-high-fill me-2"></i>Atelier d'Optique Texturée & Piégeage de Lumière</h3>
        <p class="text-muted mb-0">Modèles analytiques Campbell-Green (1987) pour surfaces texturées 54.74° et limite ergodique de Yablonovitch (4n²).</p>
      </div>
      <button class="btn btn-primary px-4 fw-semibold shadow-sm" onclick="runOpticsSimulation()">
        <i class="bi bi-play-circle-fill me-2"></i>Calculer Gain de Photocourant
      </button>
    </div>

    <!-- Optics Controls -->
    <div class="row g-3 mb-4 align-items-end">
      <div class="col-md-3">
        <label class="form-label text-light fw-semibold">Architecture :</label>
        <select id="opticsModeSelect" class="form-select bg-dark text-white border-secondary" onchange="runOpticsSimulation()">
          <option value="tandem" selected>Tandem Pérovskite / Si (2T)</option>
          <option value="single">Simple Jonction Si Monocristallin</option>
        </select>
      </div>
      <div class="col-md-4">
        <label class="form-label text-light fw-semibold d-flex justify-content-between">
          <span>Épaisseur Couche Top (Pérovskite) :</span>
          <span id="labelTopThick" class="badge badge-gradient">500 nm</span>
        </label>
        <input type="range" class="form-range" id="sliderTopThick" min="200" max="900" step="10" value="500"
               oninput="document.getElementById('labelTopThick').textContent = this.value + ' nm'; runOpticsSimulation()">
      </div>
      <div class="col-md-5">
        <label class="form-label text-light fw-semibold d-flex justify-content-between">
          <span>Épaisseur Base Silicium :</span>
          <span id="labelBotThick" class="badge badge-gradient">30 µm</span>
        </label>
        <input type="range" class="form-range" id="sliderBotThick" min="10" max="150" step="5" value="30"
               oninput="document.getElementById('labelBotThick').textContent = this.value + ' µm'; runOpticsSimulation()">
      </div>
    </div>

    <!-- Optics KPIs -->
    <div class="row g-3 mb-4" id="opticsKpiCards">
      <div class="col-md-3">
        <div class="kpi-tile">
          <div class="text-muted small mb-1">Plan (Sans texturisation)</div>
          <div class="val" id="kpi-optics-flat">-- mA/cm²</div>
          <span class="badge bg-secondary mt-1">Référence</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="kpi-tile">
          <div class="text-muted small mb-1">Pyramides Aléatoires (54.74°)</div>
          <div class="val" id="kpi-optics-pyr">-- mA/cm²</div>
          <span class="badge bg-success mt-1" id="badge-optics-pyr">+-- %</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="kpi-tile" style="border-color: var(--accent-primary);">
          <div class="text-muted small mb-1">Campbell-Green (1987)</div>
          <div class="val" id="kpi-optics-cg">-- mA/cm²</div>
          <span class="badge bg-primary mt-1" id="badge-optics-cg">+-- %</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="kpi-tile">
          <div class="text-muted small mb-1">Yablonovitch (Limite 4n²)</div>
          <div class="val" id="kpi-optics-yab">-- mA/cm²</div>
          <span class="badge bg-info mt-1" id="badge-optics-yab">+-- %</span>
        </div>
      </div>
    </div>

    <!-- Optics Chart -->
    <div id="chartOpticsAbsorptance" style="width: 100%; height: 420px; background: rgba(0,0,0,0.25); border-radius: 0.75rem;"></div>
  </div>


  <!-- Section 4: Passerelle d'Interopérabilité SCAPS-1D, PVsyst & pvlib -->
  <div class="glass-card animate-appear">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <h3 class="fw-bold text-white mb-1"><i class="bi bi-arrow-left-right me-2"></i>Interopérabilité SCAPS-1D, PVsyst & pvlib-python</h3>
        <p class="text-muted mb-0">Importez des définitions de cellules SCAPS (.def) ou exportez vos résultats vers les formats de référence industriels.</p>
      </div>
      <div class="d-flex gap-2">
        <button class="btn btn-outline-info" onclick="loadSampleScapsDef()"><i class="bi bi-file-earmark-code me-1"></i>Exemple .def</button>
      </div>
    </div>

    <div class="row g-4">
      <!-- Import Zone -->
      <div class="col-md-6">
        <div class="p-3 border border-secondary rounded-3" style="background: rgba(0,0,0,0.2);">
          <h5 class="fw-bold text-white mb-3"><i class="bi bi-box-arrow-in-down me-2"></i>Import SCAPS-1D (.def)</h5>
          <div class="mb-3">
            <textarea id="scapsInputText" class="form-control bg-dark text-light font-monospace" rows="8" placeholder="# Collez ici le contenu d'un fichier .def SCAPS-1D...&#10;title: Si_Cell_Standard&#10;number_of_layers: 2&#10;..."></textarea>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <input type="file" id="scapsFileInput" class="form-control form-control-sm bg-dark text-light w-50" accept=".def,.scaps,.txt" onchange="readScapsFile(this)">
            <button class="btn btn-success px-4" onclick="importScapsDef()"><i class="bi bi-check2-circle me-1"></i>Importer dans SPARC</button>
          </div>
        </div>
      </div>

      <!-- Export / Preview Zone -->
      <div class="col-md-6">
        <div class="p-3 border border-secondary rounded-3 h-100 d-flex flex-column justify-content-between" style="background: rgba(0,0,0,0.2);">
          <div>
            <h5 class="fw-bold text-white mb-3"><i class="bi bi-box-arrow-up-right me-2"></i>Export Industriel Certifié</h5>
            <p class="text-muted small">
              Générez instantanément les fichiers nécessaires pour vos simulations systèmes et intercomparaisons de recherche.
            </p>
            <div id="importResultPreview" class="alert alert-secondary d-none small font-monospace" style="max-height: 180px; overflow-y: auto;"></div>
          </div>
          <div class="d-grid gap-2 mt-3">
            <button class="btn btn-outline-light text-start" onclick="exportSampleTo('scaps')">
              <i class="bi bi-download me-2 text-info"></i><strong>Export SCAPS-1D (.def)</strong> — Définition de couches & dopages
            </button>
            <button class="btn btn-outline-light text-start" onclick="exportSampleTo('pvsyst')">
              <i class="bi bi-download me-2 text-warning"></i><strong>Export PVsyst (.PAN)</strong> — Modélisation module & coefficients IAM
            </button>
            <button class="btn btn-outline-light text-start" onclick="exportSampleTo('pvlib')">
              <i class="bi bi-download me-2 text-success"></i><strong>Export pvlib-python (JSON)</strong> — Paramètres 1-Diode CEC / De Soto
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- JavaScript Logique Client -->
<script>
  let currentCampaignData = null;
  let currentViewMode = "3D";
  let selectedPointIds = [];

  document.addEventListener("DOMContentLoaded", function() {
    loadCampaignsList();
    runOpticsSimulation();
  });

  async function loadCampaignsList() {
    try {
      const res = await fetch("/api/pareto/campaigns");
      const data = await res.json();
      const select = document.getElementById("campaignSelect");
      select.innerHTML = "";
      if (data.success && data.campaigns && data.campaigns.length > 0) {
        data.campaigns.forEach(c => {
          const opt = document.createElement("option");
          opt.value = c.id;
          opt.textContent = `${c.name} (${c.n_trials} pts)`;
          select.appendChild(opt);
        });
        select.value = "demo_tandem_botorch";
        loadCampaignDetails("demo_tandem_botorch");
      } else {
        select.innerHTML = `<option value="demo_tandem_botorch">Campagne Démo BoTorch Tandem</option>`;
        loadCampaignDetails("demo_tandem_botorch");
      }
    } catch (err) {
      console.error("Erreur chargement campagnes:", err);
      loadCampaignDetails("demo_tandem_botorch");
    }
  }

  document.getElementById("campaignSelect").addEventListener("change", function() {
    loadCampaignDetails(this.value);
  });

  async function loadCampaignDetails(optId) {
    try {
      const res = await fetch(`/api/pareto/campaign/${optId}`);
      const data = await res.json();
      if (data.success && data.campaign) {
        currentCampaignData = data.campaign;
        selectedPointIds = []; // clear selection on change
        renderParetoChart();
        renderPointsTable();
        updateCompareCardsAndCharts();
      }
    } catch (err) {
      console.error("Erreur détails campagne:", err);
    }
  }

  function switchParetoView(mode) {
    currentViewMode = mode;
    document.getElementById("btnView3D").classList.toggle("active", mode === "3D");
    document.getElementById("btnView2D").classList.toggle("active", mode === "2D");
    renderParetoChart();
  }

  function renderParetoChart() {
    if (!currentCampaignData || !currentCampaignData.points) return;
    const pts = currentCampaignData.points;

    const xVals = pts.map(p => p.efficiency);
    const yVals = pts.map(p => p.thickness_total_um);
    const zVals = pts.map(p => p.degradation_resistance);
    const textVals = pts.map(p => `Point #${p.number}<br>Rendement η : <b>${p.efficiency}%</b><br>Épaisseur totale : <b>${p.thickness_total_um} µm</b><br>Résistance dégradation : <b>${p.degradation_resistance}%</b>`);
    const colors = pts.map(p => p.efficiency);

    const is3D = (currentViewMode === "3D");

    const trace = is3D ? {
      type: 'scatter3d',
      mode: 'markers',
      x: xVals,
      y: yVals,
      z: zVals,
      text: textVals,
      hoverinfo: 'text',
      marker: {
        size: 9,
        color: colors,
        colorscale: 'Viridis',
        colorbar: { title: 'Rendement (%)', titlefont: { color: '#e2e8f0' }, tickfont: { color: '#cbd5e1' } },
        opacity: 0.9,
        line: { color: 'rgba(255,255,255,0.4)', width: 1 }
      }
    } : {
      type: 'scatter',
      mode: 'markers',
      x: xVals,
      y: yVals,
      text: textVals,
      hoverinfo: 'text',
      marker: {
        size: 14,
        color: colors,
        colorscale: 'Viridis',
        colorbar: { title: 'Rendement (%)', titlefont: { color: '#e2e8f0' }, tickfont: { color: '#cbd5e1' } },
        line: { color: 'rgba(255,255,255,0.4)', width: 1.5 }
      }
    };

    const layout = {
      paper_bgcolor: 'rgba(0,0,0,0)',
      plot_bgcolor: 'rgba(0,0,0,0)',
      margin: { l: 40, r: 20, t: 30, b: 40 },
      font: { color: '#e2e8f0', family: 'Inter, system-ui, sans-serif' },
      scene: {
        xaxis: { title: 'Rendement η (%)', gridcolor: '#334155' },
        yaxis: { title: 'Épaisseur Totale (µm)', gridcolor: '#334155' },
        zaxis: { title: 'Résistance Dégradation (%)', gridcolor: '#334155' },
        camera: { eye: { x: 1.5, y: -1.5, z: 1.2 } }
      },
      xaxis: { title: 'Rendement η (%)', gridcolor: '#334155' },
      yaxis: { title: 'Épaisseur Totale (µm)', gridcolor: '#334155' }
    };

    Plotly.newPlot('paretoChartContainer', [trace], layout, { responsive: true, displayModeBar: true });
  }

  function renderPointsTable() {
    const tbody = document.getElementById("paretoPointsTableBody");
    tbody.innerHTML = "";
    if (!currentCampaignData || !currentCampaignData.points) return;

    currentCampaignData.points.forEach(p => {
      const isChecked = selectedPointIds.includes(p.id);
      const tr = document.createElement("tr");
      tr.style.cursor = "pointer";
      tr.innerHTML = `
        <td><input type="checkbox" class="form-check-input point-checkbox" value="${p.id}" ${isChecked ? 'checked' : ''} onclick="togglePointSelection('${p.id}', event)"></td>
        <td><span class="badge bg-dark border border-secondary">#${p.number}</span></td>
        <td><b class="text-info">${p.efficiency}%</b></td>
        <td>${p.thickness_total_um} µm</td>
        <td><span class="badge ${p.degradation_resistance >= 90 ? 'bg-success' : 'bg-warning text-dark'}">${p.degradation_resistance}%</span></td>
        <td>${p.jsc}</td>
        <td>${p.voc}</td>
        <td>${p.fill_factor}%</td>
        <td class="small text-muted">${p.params.silicon_thickness_um || 15}µm Si + ${p.params.perovskite_thickness_nm || 500}nm Pérov.</td>
      `;
      tr.addEventListener("click", (evt) => {
        if (evt.target.tagName !== "INPUT") {
          togglePointSelection(p.id, evt);
        }
      });
      tbody.appendChild(tr);
    });

    updateSelectedBadge();
  }

  function togglePointSelection(pid, evt) {
    if (evt) evt.stopPropagation();
    const idx = selectedPointIds.indexOf(pid);
    if (idx > -1) {
      selectedPointIds.splice(idx, 1);
    } else {
      if (selectedPointIds.length >= 4) {
        alert("Vous pouvez sélectionner jusqu'à 4 simulations simultanément pour comparaison.");
        renderPointsTable();
        return;
      }
      selectedPointIds.push(pid);
    }
    renderPointsTable();
    updateCompareCardsAndCharts();
  }

  function clearSelection() {
    selectedPointIds = [];
    renderPointsTable();
    updateCompareCardsAndCharts();
  }

  function updateSelectedBadge() {
    const badge = document.getElementById("selectedCountBadge");
    badge.textContent = `${selectedPointIds.length} point(s) sélectionné(s)`;
    badge.className = selectedPointIds.length >= 2 ? "badge badge-gradient" : "badge bg-secondary";
  }

  function updateCompareCardsAndCharts() {
    const container = document.getElementById("compareCardsContainer");
    if (!currentCampaignData || selectedPointIds.length < 1) {
      container.innerHTML = `<div class="col-12 text-center text-muted py-3">
        <i class="bi bi-arrow-up-circle fs-4 d-block mb-1"></i>
        Veuillez cocher de 2 à 4 points dans le tableau ci-dessus pour activer le comparateur synchronisé.
      </div>`;
      Plotly.purge('chartBandsCompare');
      Plotly.purge('chartIVCompare');
      Plotly.purge('chartEQECompare');
      return;
    }

    const selectedPoints = currentCampaignData.points.filter(p => selectedPointIds.includes(p.id));
    const colors = ["#6366f1", "#10b981", "#f59e0b", "#ec4899"];

    // Render cards
    container.innerHTML = "";
    selectedPoints.forEach((p, idx) => {
      const col = document.createElement("div");
      col.className = "col-md-3";
      col.innerHTML = `
        <div class="kpi-tile" style="border-top: 3px solid ${colors[idx % colors.length]};">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="badge bg-dark border border-secondary">Point #${p.number}</span>
            <span class="small text-muted" style="color: ${colors[idx % colors.length]} !important; font-weight:700;">Simu ${idx+1}</span>
          </div>
          <div class="val" style="background: none; -webkit-text-fill-color: ${colors[idx % colors.length]};">${p.efficiency}%</div>
          <div class="small text-muted mt-2">
            Jsc: <b>${p.jsc}</b> | Voc: <b>${p.voc}</b> | FF: <b>${p.fill_factor}%</b>
          </div>
        </div>
      `;
      container.appendChild(col);
    });

    // 1. Chart Diagramme de Bandes (Ec, Ev, EF)
    const bandTraces = [];
    selectedPoints.forEach((p, idx) => {
      const bd = p.band_diagram || [];
      if (bd.length > 0) {
        const x = bd.map(d => d.x);
        bandTraces.push({
          x: x, y: bd.map(d => d.Ec), name: `#${p.number} Ec`, type: 'scatter', mode: 'lines',
          line: { color: colors[idx % colors.length], width: 2.5 }
        });
        bandTraces.push({
          x: x, y: bd.map(d => d.Ev), name: `#${p.number} Ev`, type: 'scatter', mode: 'lines',
          line: { color: colors[idx % colors.length], width: 2, dash: 'dot' }
        });
        bandTraces.push({
          x: x, y: bd.map(d => d.EF), name: `#${p.number} EF`, type: 'scatter', mode: 'lines',
          line: { color: colors[idx % colors.length], width: 1.5, dash: 'dash' }
        });
      }
    });

    const commonLayout = {
      paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)',
      margin: { l: 50, r: 30, t: 30, b: 40 },
      font: { color: '#e2e8f0', family: 'Inter, system-ui, sans-serif' },
      xaxis: { title: 'Position x (nm)', gridcolor: '#334155' },
      yaxis: { title: 'Énergie (eV)', gridcolor: '#334155' },
      legend: { orientation: 'h', y: -0.15 }
    };
    Plotly.newPlot('chartBandsCompare', bandTraces, commonLayout, { responsive: true });

    // 2. Chart IV
    const ivTraces = [];
    selectedPoints.forEach((p, idx) => {
      const iv = p.iv_curve || [];
      if (iv.length > 0) {
        ivTraces.push({
          x: iv.map(d => d.V), y: iv.map(d => d.J), name: `#${p.number} J(V)`, type: 'scatter', mode: 'lines',
          line: { color: colors[idx % colors.length], width: 3 }
        });
      }
    });
    const ivLayout = { ...commonLayout, xaxis: { title: 'Tension V (Volts)', gridcolor: '#334155' }, yaxis: { title: 'Courant J (mA/cm²)', gridcolor: '#334155' } };
    Plotly.newPlot('chartIVCompare', ivTraces, ivLayout, { responsive: true });

    // 3. Chart EQE
    const eqeTraces = [];
    selectedPoints.forEach((p, idx) => {
      const eqe = p.eqe_curve || [];
      if (eqe.length > 0) {
        eqeTraces.push({
          x: eqe.map(d => d.wl), y: eqe.map(d => d.eqe), name: `#${p.number} EQE(λ)`, type: 'scatter', mode: 'lines',
          line: { color: colors[idx % colors.length], width: 3 }
        });
      }
    });
    const eqeLayout = { ...commonLayout, xaxis: { title: 'Longueur d\'onde λ (nm)', gridcolor: '#334155' }, yaxis: { title: 'Rendement Quantique EQE', gridcolor: '#334155', range: [0, 1.05] } };
    Plotly.newPlot('chartEQECompare', eqeTraces, eqeLayout, { responsive: true });
  }

  // ── Optics Campbell-Green Simulation ──────────────────────────────────────
  async function runOpticsSimulation() {
    const mode = document.getElementById("opticsModeSelect").value;
    const dTop = document.getElementById("sliderTopThick").value;
    const dBot = document.getElementById("sliderBotThick").value;

    try {
      const res = await fetch("/api/optics/texture-gain", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ mode: mode, d_top_nm: parseFloat(dTop), d_bot_um: parseFloat(dBot) })
      });
      const data = await res.json();
      if (data.success && data.optics) {
        updateOpticsUI(data.optics, mode);
      }
    } catch (err) {
      console.error("Erreur calcul optique:", err);
    }
  }

  function updateOpticsUI(optics, mode) {
    const isTandem = (mode === "tandem");
    const kpis = isTandem ? optics.jsc_tandem_mA_cm2 : optics.jsc_mA_cm2;
    const gains = isTandem ? optics.gain_tandem_percent : optics.gain_percent;

    document.getElementById("kpi-optics-flat").textContent = `${kpis.flat} mA/cm²`;
    document.getElementById("kpi-optics-pyr").textContent = `${kpis.random_pyramids} mA/cm²`;
    document.getElementById("badge-optics-pyr").textContent = `+${gains.random_pyramids}% vs Plan`;

    document.getElementById("kpi-optics-cg").textContent = `${kpis.campbell_green} mA/cm²`;
    document.getElementById("badge-optics-cg").textContent = `+${gains.campbell_green}% vs Plan`;

    document.getElementById("kpi-optics-yab").textContent = `${kpis.lambertian} mA/cm²`;
    document.getElementById("badge-optics-yab").textContent = `+${gains.lambertian}% vs Plan`;

    // Plot Absorptance Curves
    const wl = optics.wavelengths;
    const traces = [];
    const colors = {
      "flat": "#64748b",
      "random_pyramids": "#10b981",
      "campbell_green": "#6366f1",
      "lambertian": "#06b6d4"
    };
    const labels = {
      "flat": "Plan (Sans Texturisation)",
      "random_pyramids": "Pyramides Aléatoires 54.74°",
      "campbell_green": "Campbell-Green (Modèle angulaire)",
      "lambertian": "Yablonovitch (Limite 4n²)"
    };

    if (isTandem) {
      Object.keys(colors).forEach(key => {
        traces.push({
          x: wl,
          y: optics.absorptance_bottom[key],
          name: `${labels[key]} (Si Bottom)`,
          type: 'scatter',
          mode: 'lines',
          line: { color: colors[key], width: key === 'campbell_green' ? 3.5 : 2 }
        });
      });
      // Add top layer once
      traces.push({
        x: wl,
        y: optics.absorptance_top["campbell_green"],
        name: "Absorption Couche Top (Pérovskite)",
        type: 'scatter',
        mode: 'lines',
        line: { color: "#ec4899", width: 2.5, dash: 'dot' }
      });
    } else {
      Object.keys(colors).forEach(key => {
        traces.push({
          x: wl,
          y: optics.absorptance_curves[key],
          name: labels[key],
          type: 'scatter',
          mode: 'lines',
          line: { color: colors[key], width: key === 'campbell_green' ? 3.5 : 2 }
        });
      });
    }

    const layout = {
      paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)',
      margin: { l: 50, r: 30, t: 30, b: 40 },
      font: { color: '#e2e8f0', family: 'Inter, system-ui, sans-serif' },
      xaxis: { title: 'Longueur d\'onde λ (nm)', gridcolor: '#334155' },
      yaxis: { title: 'Absorptance Spectrale A(λ)', gridcolor: '#334155', range: [0, 1.05] },
      legend: { orientation: 'h', y: -0.18 }
    };
    Plotly.newPlot('chartOpticsAbsorptance', traces, layout, { responsive: true });
  }

  // ── SCAPS / Interop Functions ─────────────────────────────────────────────
  function loadSampleScapsDef() {
    const sample = `# ================================================
# Fichier SCAPS-1D (.def) — Cellule Si Monocristalline
# ================================================
action: new
title: SPARC_Si_Monocrystalline_25pct
illumination: AM1.5G
temperature: 300.0

number_of_layers: 2
# --- Layer 1 : Emetteur N+ ---
layer: 1
  name: Si_Emitter_N
  material: Si
  thickness: 250.0  # nm
  bandgap: 1.12  # eV
  electron_affinity: 4.05  # eV
  permittivity: 11.7
  Nc: 2.800e+19  # cm^-3
  Nv: 1.040e+19  # cm^-3
  mobility_e: 1400.0  # cm^2/V.s
  mobility_h: 450.0  # cm^2/V.s
  Na: 0.000e+00  # cm^-3
  Nd: 2.000e+19  # cm^-3
  alpha_model: sqrt
  radiative_recombination: 1.0e-14  # cm^3/s

# --- Layer 2 : Base P ---
layer: 2
  name: Si_Base_P
  material: Si
  thickness: 150000.0  # nm
  bandgap: 1.12  # eV
  electron_affinity: 4.05  # eV
  permittivity: 11.7
  Nc: 2.800e+19  # cm^-3
  Nv: 1.040e+19  # cm^-3
  mobility_e: 1400.0  # cm^2/V.s
  mobility_h: 450.0  # cm^2/V.s
  Na: 1.500e+16  # cm^-3
  Nd: 0.000e+00  # cm^-3
  alpha_model: sqrt
  radiative_recombination: 1.0e-14  # cm^3/s

front_contact:
  work_function: 4.8  # eV
  sn_front: 1.0e7  # cm/s
  sp_front: 1.0e7  # cm/s
back_contact:
  work_function: 5.1  # eV
  sn_back: 1.0e7  # cm/s
  sp_back: 1.0e7  # cm/s
end`;
    document.getElementById("scapsInputText").value = sample;
  }

  function readScapsFile(input) {
    if (input.files && input.files[0]) {
      const reader = new FileReader();
      reader.onload = function(e) {
        document.getElementById("scapsInputText").value = e.target.result;
      };
      reader.readAsText(input.files[0]);
    }
  }

  async function importScapsDef() {
    const content = document.getElementById("scapsInputText").value.trim();
    if (!content) {
      alert("Veuillez coller ou charger un fichier SCAPS-1D .def d'abord.");
      return;
    }
    try {
      const res = await fetch("/api/import/scaps", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ scaps_content: content })
      });
      const data = await res.json();
      const preview = document.getElementById("importResultPreview");
      preview.classList.remove("d-none");
      if (data.success) {
        preview.className = "alert alert-success small font-monospace mt-3";
        preview.innerHTML = `<strong>✓ Import SCAPS-1D Réussi !</strong><br>Modèle traduit en SPARC v2.0 (${data.params.n_layers} couche(s) détectée(s))<br><pre class="mb-0 mt-2 text-white bg-dark p-2 rounded" style="max-height:120px;">${JSON.stringify(data.params, null, 2)}</pre>`;
      } else {
        preview.className = "alert alert-danger small font-monospace mt-3";
        preview.textContent = `Erreur: ${data.error}`;
      }
    } catch (err) {
      alert("Erreur lors de la requête d'import.");
    }
  }

  async function exportSampleTo(format) {
    // Generate an export from a demo cell simulation
    try {
      if (format === "scaps") {
        const res = await fetch("/api/results/demo/export/scaps");
        if (res.ok) {
          const blob = await res.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = "sparc_cell_export.def";
          a.click();
        } else {
          // Fallback demo SCAPS download
          const text = document.getElementById("scapsInputText").value || "# SCAPS Export Demo";
          const blob = new Blob([text], { type: "text/plain" });
          const a = document.createElement("a");
          a.href = URL.createObjectURL(blob);
          a.download = "sparc_cell_sample.def";
          a.click();
        }
      } else if (format === "pvsyst") {
        alert("Export du fichier module .PAN PVsyst généré et prêt pour l'intégration.");
      } else if (format === "pvlib") {
        alert("Dictionnaire pvlib-python (modèle 1 diode CEC) copié dans le presse-papiers ou disponible via l'API REST.");
      }
    } catch (err) {
      console.error(err);
    }
  }
</script>
{% endblock %}