{% extends "layout.html" %}
{% block title %}Recherche — BEx{% endblock %}

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

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

    <div class="mb-4">
      <h1 class="h3 fw-bold mb-1 text-primary">Recherche d'analyse</h1>
    </div>

    {# ── Toggle mode ── #}
    <div class="d-flex align-items-center gap-2 mb-3">
      <span class="small text-muted fw-semibold">Mode :</span>
      <div class="btn-group btn-group-sm" role="group">
        <button class="btn btn-primary mode-btn active" data-mode="guided">Guidé</button>
        <button class="btn btn-outline-secondary mode-btn" data-mode="free">Libre</button>
      </div>
    </div>

    {# ══ MODE GUIDÉ ══ #}
    <div id="guidedMode">
      <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-4">
          <div class="row g-3 mb-4">
            {% for sel_id, label, items in [
              ('selectSample',     'Échantillon',              sample_names),
              ('selectSource',     'Source',                   sources),
              ('selectWetProcess', 'Cond. expérimentale',      wet_processes),
              ('selectBiProcess',  'Cond. bio-informatique',   bi_processes),
              ('selectBarcode',    'Barcode',                  barcodes),
              ('selectGenome',     'Génome de référence',      reference_genomes),
            ] %}
            <div class="col-md-4 col-sm-6">
              <label for="{{ sel_id }}" class="form-label small text-muted mb-1">{{ label }}</label>
              <select id="{{ sel_id }}" class="form-select form-select-sm search-select">
                <option value="">Choisir…</option>
                {% for item in items %}<option value="{{ item }}">{{ item }}</option>{% endfor %}
              </select>
            </div>
            {% endfor %}
          </div>

          <div class="bg-light rounded p-3 mb-3 search-preview">
            <div class="d-flex align-items-center gap-2 flex-wrap">
              <span class="text-muted small me-1">ID :</span>
              <span class="search-seg" id="prevSample">?</span><span class="text-muted">_</span>
              <span class="search-seg" id="prevSource">?</span><span class="text-muted">_</span>
              <span class="search-seg search-seg--wet" id="prevWet">?</span><span class="text-muted">_</span>
              <span class="search-seg" id="prevBi">?</span><span class="text-muted">_</span>
              <span class="search-seg" id="prevBarcode">?</span><span class="text-muted">_</span>
              <span class="search-seg search-seg--genome" id="prevGenome">?</span>
            </div>
          </div>

          <div id="selectedTags" class="d-flex flex-wrap gap-1 mb-3 min-height-tags"></div>

          <div class="d-flex align-items-center gap-2 flex-wrap border-top pt-3">
            <button class="btn btn-primary btn-sm px-3" id="searchBtn">Rechercher</button>
            <button class="btn btn-outline-secondary btn-sm px-3" id="addToCartBtn" disabled>
              Ajouter au comparateur
            </button>
            <button class="btn reset-error-btn btn-sm px-3" id="resetBtn">Réinitialiser</button>
            <div class="ms-auto">
              <button class="btn btn-outline-secondary btn-sm"
                      data-bs-toggle="collapse" data-bs-target="#cartPanel">
                Comparateur
                <span class="badge bg-secondary ms-1" id="cartCount">0</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    {# ══ MODE LIBRE ══ #}
    <div id="freeMode" class="d-none">
      <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-4">

          {# Champ d'ajout #}
          <div class="d-flex gap-2 mb-3">
            <input type="text" id="freeInput"
                   class="form-control form-control-sm"
                   placeholder="Renseigner une métadonnée…">
            <button class="btn btn-outline-secondary btn-sm px-3 flex-shrink-0"
                    id="addSegmentBtn">Ajouter</button>
          </div>

          {# Liste des segments ajoutés #}
          <div id="freeSegments" class="free-segments-list mb-3"></div>

          {# Prévisualisation #}
          <div class="bg-light rounded p-3 mb-3 search-preview">
            <div class="d-flex align-items-center gap-2 flex-wrap">
              <span class="text-muted small me-1">ID :</span>
              <span id="freePreview" class="font-monospace small text-muted fst-italic">—</span>
            </div>
          </div>

          <div class="d-flex align-items-center gap-2 flex-wrap border-top pt-3">
            <button class="btn btn-primary btn-sm px-3" id="freeSearchBtn">Rechercher</button>
            <button class="btn btn-outline-secondary btn-sm px-3" id="freeAddToCartBtn" disabled>
              Ajouter au comparateur
            </button>
            <button class="btn reset-error-btn btn-sm px-3" id="freeResetBtn">Réinitialiser</button>
            <div class="ms-auto">
              <button class="btn btn-outline-secondary btn-sm"
                      data-bs-toggle="collapse" data-bs-target="#cartPanel">
                Comparateur
                <span class="badge bg-secondary ms-1" id="cartCount2">0</span>
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>

    {# ── Comparateur ── #}
    <div class="collapse mb-3" id="cartPanel">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom d-flex align-items-center py-2">
          <span class="small fw-semibold">Comparateur</span>
          <span class="badge bg-secondary ms-2 small" id="cartCountHeader">0</span>
          <div class="ms-auto d-flex gap-2">
            <button class="btn btn-outline-secondary btn-sm py-0 px-2" id="clearCartBtn">Vider</button>
            <button class="btn btn-primary btn-sm py-0 px-2" id="compareBtn" disabled>Comparer</button>
          </div>
        </div>
        <div class="card-body p-3" id="cartItems">
          <p class="text-muted small text-center mb-0 fst-italic">
            Ajoutez des analyses pour les comparer.
          </p>
        </div>
      </div>
    </div>

    {# ── Tableau comparaison ── #}
    <div class="d-none mb-3" id="compareSection">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom d-flex align-items-center py-2">
          <span class="small fw-semibold">Comparaison</span>
          <button class="btn btn-link btn-sm text-muted ms-auto p-0 text-decoration-none"
                  id="closeCompareBtn" style="font-size:1.1rem;">&times;</button>
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0 small" id="compareTable"></table>
        </div>
      </div>
    </div>

    {# ── Résultats ── #}
    <div id="resultsSection" class="d-none mb-3">
      <div id="resultsContent"></div>
    </div>

    <div id="initialPlaceholder" class="py-3"></div>

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

{% block page_js %}
<script>window.ALL_ANALYSES = {{ analyses | tojson }};</script>
<script src="{{ url_for('static', filename='js/search.js') }}"></script>
{% endblock %}