{% extends "layout.html" %}
{% block title %}Condition bio-informatique : {{ proc_id }} — BEx{% endblock %}

{% block page_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/process_detail.css') }}" />
{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-10">

  {# ── Breadcrumb ── #}
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb small">
      <li class="breadcrumb-item">
        <a href="{{ url_for('routes.show_bi_processes') }}">
          <i class="bi bi-cpu-fill me-1"></i>Conditions bio-informatiques
        </a>
      </li>
      <li class="breadcrumb-item active">{{ proc_id }}</li>
    </ol>
  </nav>

  {# ── Hero ── #}
  <div class="pd-hero pd-hero--bi rounded-3 p-4 mb-4">
    <span class="pd-hero-badge mb-2 d-inline-flex align-items-center">
      <i class="bi bi-cpu-fill me-1"></i>Condition bio-informatique
    </span>
    <h1 class="pd-hero-title mb-0">{{ proc_id }}</h1>
  </div>

  {% if error %}
    <div class="alert alert-danger d-flex align-items-center gap-2">
      <i class="bi bi-exclamation-triangle-fill"></i>
      <span>{{ error.message }}</span>
    </div>

  {% else %}

    {# ── Métadonnées ── #}
    {% if bi_process.metadata is defined and bi_process.metadata %}
    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-list-ul"></i>
        <span class="fw-semibold">Métadonnées</span>
      </div>
      <div class="card-body p-3">
        <div class="row g-2">
          {% for key, value in bi_process.metadata.items() %}
            {% if key != 'steps' %}
            <div class="col-sm-6 col-md-4">
              <div class="pd-meta-item p-2 rounded h-100">
                <div class="pd-meta-key">{{ key.replace('_', ' ') }}</div>
                <div class="pd-meta-val">{{ value if value is not none and value != '' else '—' }}</div>
              </div>
            </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    {# ── Informations générales ── #}
    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-info-circle"></i>
        <span class="fw-semibold">Informations générales</span>
      </div>
      <table class="table table-sm table-striped table-hover mb-0">
        <tbody>
          {% for key, value in bi_process.items() %}
            {% if key != 'metadata' and key != 'steps' %}
            <tr>
              <td class="fw-semibold text-capitalize ps-3" style="width:35%;color:var(--sub)">
                {{ key.replace('_', ' ') }}
              </td>
              <td class="font-monospace small">
                {{ value if value is not none and value != '' else '—' }}
              </td>
            </tr>
            {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>

    {# ── Steps du pipeline ── #}
    {% set steps = bi_process.steps if bi_process.steps is defined else
                   (bi_process.metadata.steps if bi_process.metadata is defined
                    and bi_process.metadata.steps is defined else none) %}
    {% if steps %}
    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-list-ol"></i>
        <span class="fw-semibold">Étapes du pipeline</span>
        <span class="badge ms-auto" style="background:var(--inset);color:var(--soft);">
          {{ steps | length }} étape(s)
        </span>
      </div>
      <div class="table-responsive">
        <table class="table table-sm table-striped table-hover mb-0">
          <thead>
            <tr>
              <th class="ps-3">Nom</th>
              <th>Commande</th>
              <th>Version</th>
              <th>Sortie</th>
            </tr>
          </thead>
          <tbody>
            {% for step in steps %}
            <tr>
              <td class="fw-semibold ps-3">{{ step.name }}</td>
              <td><code class="small">{{ step.cmd }}</code></td>
              <td>{{ step.version }}</td>
              <td>{{ step.output if 'output' in step else '—' }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

    {# ── Comparaison ── #}
    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-arrow-left-right"></i>
        <span class="fw-semibold">Comparer avec une condition expérimentale</span>
      </div>
      <div class="card-body p-3">
        <form method="get" class="d-flex align-items-center gap-2 flex-wrap">
          <select name="compare_with" id="compare_with" class="form-select form-select-sm" style="max-width:320px">
            <option value="">— Choisir une condition —</option>
            {% for wp in wet_processes %}
              <option value="{{ wp }}" {% if selected_wet == wp %}selected{% endif %}>{{ wp }}</option>
            {% endfor %}
          </select>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-arrow-left-right me-1"></i>Comparer
          </button>
        </form>

        {% if wet_process_data %}
          {% if wet_process_data.error %}
            <div class="alert alert-danger mt-3 mb-0">{{ wet_process_data.error }}</div>
          {% else %}
            <div class="mt-3 p-3 rounded pd-compare-result">
              <p class="small fw-bold mb-2" style="color:var(--sub)">
                <i class="bi bi-droplet-fill me-1"></i>Wet Process : <strong>{{ selected_wet }}</strong>
              </p>
              <div class="row g-2">
                {% for key, value in wet_process_data.items() %}
                  {% if key == 'metadata' and value is mapping %}
                    {% for mk, mv in value.items() %}
                    <div class="col-sm-6 col-md-4">
                      <div class="pd-meta-item p-2 rounded h-100">
                        <div class="pd-meta-key">{{ mk.replace('_', ' ') }}</div>
                        <div class="pd-meta-val">{{ mv if mv is not none and mv != '' else '—' }}</div>
                      </div>
                    </div>
                    {% endfor %}
                  {% elif key != 'steps' %}
                  <div class="col-sm-6 col-md-4">
                    <div class="pd-meta-item p-2 rounded h-100">
                      <div class="pd-meta-key">{{ key.replace('_', ' ') }}</div>
                      <div class="pd-meta-val">{{ value if value is not none and value != '' else '—' }}</div>
                    </div>
                  </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endif %}
      </div>
    </div>

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