{% extends "base.html" %}
{% block title %}SPARC — Semiconductor Physics Analysis and Research Code{% endblock %}

{% block content %}

<!-- Hero -->
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
  <div>
    <h1 class="page-title mb-1">
      <i class="bi bi-sun-fill me-2" style="color:#fbbf24"></i>SPARC
    </h1>
    <p class="page-subtitle">
      Plateforme de simulation photovoltaïque basée sur Sesame (NIST) — Physique ab initio
    </p>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('form') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg"></i> Nouvelle simulation
    </a>
    <a href="{{ url_for('optimize_page') }}" class="btn btn-warning btn-sm">
      <i class="bi bi-lightning-fill"></i> Optimiser
    </a>
  </div>
</div>

<!-- 3 Mode cards -->
<div class="row g-3 mb-4">

  <div class="col-md-4">
    <a href="{{ url_for('form') }}" class="mode-card mode-web">
      <div class="mode-icon" style="background:var(--sparc-blue-bg);color:var(--sparc-blue-lt)">
        <i class="bi bi-globe2"></i>
      </div>
      <div class="mode-title">Mode Web</div>
      <div class="mode-desc">
        Interface visuelle complète. Configurez vos simulations via formulaire,
        visualisez les courbes J-V et téléchargez les rapports PDF.
      </div>
      <div class="mode-chips">
        <span class="mode-chip">Formulaire guidé</span>
        <span class="mode-chip">Courbes Plotly</span>
        <span class="mode-chip">Export PDF</span>
        <span class="mode-chip">Historique</span>
      </div>
      <span class="mode-cta" style="color:var(--sparc-blue-lt)">
        Lancer une simulation <i class="bi bi-arrow-right"></i>
      </span>
    </a>
  </div>

  <div class="col-md-4">
    <div class="mode-card mode-cli" style="cursor:default">
      <div class="mode-icon" style="background:var(--sparc-green-bg);color:var(--sparc-green)">
        <i class="bi bi-terminal-fill"></i>
      </div>
      <div class="mode-title">Mode CLI</div>
      <div class="mode-desc">
        Interface Rich interactive dans le terminal. 12 écrans, raccourcis
        clavier, affichage ASCII des courbes, export CSV/PDF.
      </div>
      <div class="mode-chips">
        <span class="mode-chip">Rich / Questionary</span>
        <span class="mode-chip">12 écrans</span>
        <span class="mode-chip">ASCII plots</span>
        <span class="mode-chip">Raccourcis</span>
      </div>
      <code class="text-mono text-xs" style="color:var(--sparc-green)">
        docker compose run --rm cli
      </code>
    </div>
  </div>

  <div class="col-md-4">
    <div class="mode-card mode-ai" style="cursor:default">
      <div class="mode-icon" style="background:var(--sparc-amber-bg);color:var(--sparc-amber)">
        <i class="bi bi-cpu-fill"></i>
      </div>
      <div class="mode-title">Mode IA</div>
      <div class="mode-desc">
        Optimisation bayésienne automatique via Optuna & BoTorch.
        Trouve les paramètres optimaux en 500–1000 simulations.
        Assistant LLM en langage naturel.
      </div>
      <div class="mode-chips">
        <span class="mode-chip">Optuna TPE/GP</span>
        <span class="mode-chip">BoTorch qEI</span>
        <span class="mode-chip">Sobol</span>
        <span class="mode-chip">LLM Agent</span>
      </div>
      <div class="d-flex gap-2 flex-wrap mt-auto">
        <a href="{{ url_for('optimize_page') }}" class="mode-cta" style="color:var(--sparc-amber)">
          Optimiseur <i class="bi bi-arrow-right"></i>
        </a>
        <a href="{{ url_for('chat_page') }}" class="mode-cta ms-3" style="color:var(--sparc-primary)">
          <i class="bi bi-stars me-1"></i>Assistant IA
        </a>
      </div>
    </div>
  </div>

</div>

<!-- Simulations récentes + Types disponibles -->
<div class="row g-3">

  <!-- Recent simulations -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">
        <span class="card-icon blue"><i class="bi bi-clock-history"></i></span>
        Simulations récentes
        <a href="{{ url_for('history') }}" class="btn btn-outline-secondary btn-sm ms-auto">
          Voir tout <i class="bi bi-arrow-right"></i>
        </a>
      </div>
      <div class="card-body p-0">
        {% if recent %}
        <table class="table mb-0">
          <thead>
            <tr>
              <th style="padding-left:20px">Nom</th>
              <th>Type</th>
              <th>Statut</th>
              <th>Date</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
          {% for s in recent %}
          <tr>
            <td style="padding-left:20px">
              <a href="{{ url_for('results', sim_id=s.id) }}" class="fw-semibold text-mono text-sm">
                {{ s.name or s.id[:12] }}
              </a>
            </td>
            <td>
              <span class="badge bg-light text-secondary border text-mono" style="font-size:.72rem">
                {{ s.type }}
              </span>
            </td>
            <td>
              <span class="status-badge {{ s.status }}">{{ s.status }}</span>
            </td>
            <td class="text-muted text-sm">{{ s.created_at[:16] if s.created_at else '—' }}</td>
            <td>
              <a href="{{ url_for('results', sim_id=s.id) }}"
                 class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-eye"></i>
              </a>
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="text-center py-5 text-muted">
          <i class="bi bi-inbox fs-3 d-block mb-2"></i>
          Aucune simulation pour le moment.
          <br>
          <a href="{{ url_for('form') }}" class="btn btn-primary btn-sm mt-3">
            <i class="bi bi-plus-lg"></i> Première simulation
          </a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Types disponibles -->
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-header">
        <span class="card-icon green"><i class="bi bi-list-check"></i></span>
        Types de simulation
      </div>
      <div class="card-body p-0">
        <div style="max-height:340px;overflow-y:auto">
          <table class="table mb-0">
            <tbody>
            {% for k, v in sim_types.items() %}
            <tr>
              <td style="padding:8px 20px">
                <code class="text-mono" style="font-size:.78rem">{{ k }}</code>
                <div class="text-muted text-xs">{{ v.description }}</div>
              </td>
            </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>

{% endblock %}