{% extends "base.html" %}

{% block title %}Gestion des Matériaux - SPARC 2.0{% endblock %}

{% block extra_head %}
<style>
  .material-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
  }
  .material-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  .card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    z-index: 10;
  }
  .material-card:hover .card-actions {
    display: flex;
  }
  .badge-mp {
    background-color: #0066cc;
    color: white;
  }
  .property-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .property-item {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #0d6efd;
  }
  .property-label {
    font-size: 0.75rem;
    color: #6c757d;
    display: block;
    margin-bottom: 2px;
  }
  .property-value {
    font-weight: 600;
    font-family: 'Courier New', Courier, monospace;
  }
  .search-studio {
    background:
      radial-gradient(circle at top right, rgba(13, 110, 253, 0.12), transparent 36%),
      linear-gradient(135deg, #f8fbff, #eef5ff 52%, #f7fbff 100%);
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(17, 68, 136, 0.08);
    overflow: hidden;
  }
  .search-studio .card-body {
    padding: 1.5rem;
  }
  .search-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
  }
  .search-meta .badge {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
  }
  .search-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .search-wrapper {
    position: relative;
    width: 100%;
  }
  .search-pill {
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 12px 8px 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
  }
  .search-pill:focus-within {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    background: #fff;
    transform: translateY(-1px);
    border-color: #0d6efd;
  }
  .search-input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 1.1rem;
    padding: 8px 0;
    color: #444;
  }
  .search-input::placeholder {
    color: #999;
    font-weight: 400;
  }
  .search-btn {
    background: linear-gradient(135deg, #0d6efd, #0b8db8);
    color: white;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: 10px;
  }
  .search-btn:hover {
    background: linear-gradient(135deg, #0b5ed7, #09749a);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.28);
  }
  .search-btn:active {
    transform: scale(0.95);
  }
  .search-btn i {
    font-size: 1.2rem;
  }
  .source-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .source-toggle {
    position: relative;
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.85rem 0.95rem;
    min-height: 100%;
  }
  .source-toggle .form-check-input {
    margin-top: 0.15rem;
  }
  .source-toggle-title {
    font-weight: 700;
    font-size: 0.92rem;
  }
  .source-toggle-desc {
    color: #6c757d;
    font-size: 0.77rem;
  }
  .source-toggle-hint {
    margin-top: 0.4rem;
    font-size: 0.76rem;
    color: #0b5ed7;
  }
  .results-dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem 0;
  }
  .dashboard-card {
    background: #f8fbff;
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 18px;
    padding: 0.9rem 1rem;
  }
  .dashboard-card .label {
    color: #6c757d;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .dashboard-card .value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0b3558;
  }
  .source-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem 0;
  }
  .source-status-card {
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 18px;
    padding: 0.95rem 1rem;
    background: #fff;
  }
  .source-status-card.ready {
    border-color: rgba(25, 135, 84, 0.26);
    background: #f6fffb;
  }
  .source-status-card.warning {
    border-color: rgba(255, 193, 7, 0.36);
    background: #fffdf5;
  }
  .source-status-card.error {
    border-color: rgba(220, 53, 69, 0.28);
    background: #fff7f8;
  }
  .results-toolbar {
    padding: 1rem 1.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .results-sections {
    padding: 1rem 1.25rem 1.25rem;
  }
  .results-section {
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 20px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: #fff;
  }
  .results-section-header {
    padding: 0.95rem 1.1rem;
    background: linear-gradient(180deg, #fbfdff, #f1f7ff);
    border-bottom: 1px solid rgba(13, 110, 253, 0.1);
  }
  .results-grid {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
  }
  .result-card {
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(13, 42, 80, 0.04);
  }
  .result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.8rem;
  }
  .result-card-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
  }
  .result-card-properties {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.9rem;
  }
  .result-prop {
    background: #f8fbff;
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
  }
  .result-prop .k {
    font-size: 0.72rem;
    color: #6c757d;
    display: block;
    margin-bottom: 0.15rem;
  }
  .result-prop .v {
    font-weight: 700;
    color: #0b3558;
  }
  .import-insights {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(13, 110, 253, 0.12);
  }
  .origin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }
  .origin-card {
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 14px;
    padding: 0.75rem 0.8rem;
    background: #fbfdff;
  }
  .origin-card .field {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .origin-card .source {
    font-weight: 700;
    color: #0b3558;
    margin-top: 0.15rem;
  }
  .origin-card .meta {
    font-size: 0.74rem;
    color: #6c757d;
    margin-top: 0.2rem;
  }
  .dft-panel {
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: 16px;
    background: #fff8f8;
    padding: 1rem;
  }
  .alert-stack {
    padding: 0 1.25rem 1rem;
  }
  .empty-state-panel {
    border: 1px dashed rgba(13, 110, 253, 0.22);
    border-radius: 20px;
    background: #fbfdff;
    padding: 2rem 1.25rem;
  }
  @media (max-width: 991px) {
    .search-toolbar,
    .source-toggle-grid,
    .results-dashboard,
    .source-status-grid,
    .result-card-properties,
    .origin-grid {
      grid-template-columns: 1fr;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="mb-4">
  <h1 class="h2 mb-1"><i class="bi bi-box-seam"></i> Bibliothèque de Matériaux</h1>
  <p class="text-muted mb-0">Gérez vos matériaux locaux et lancez une recherche croisée sur la base SPARC, Materials Project et OPTIMADE.</p>
</div>

<div class="card search-studio border-0 mb-4">
  <div class="card-body">
    <div class="search-toolbar">
      <div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
          <h5 class="mb-0">Atelier de Recherche Matériaux</h5>
          <span class="badge bg-primary">3 sources en parallèle</span>
          <span class="badge bg-light text-dark border">doublons conservés</span>
        </div>
        <p class="text-muted small mt-2 mb-3">
          Recherchez une formule, un nom ou une hétérostructure comme <strong>GaAs/AlGaAs</strong>. Chaque source reste visible séparément, même si plusieurs entrées portent le même nom.
        </p>
        <div class="search-wrapper">
          <div class="search-pill">
            <input type="text" id="mpSearchInput" class="search-input" placeholder="Ex: GaN, Silicon, GaAs/AlGaAs, perovskite..." aria-label="Search">
            <button class="search-btn" type="button" id="btnSearchMP" title="Lancer la recherche">
              <i class="bi bi-search"></i>
            </button>
          </div>
        </div>
        <div class="search-meta">
          <span class="badge bg-light text-dark border"><i class="bi bi-diagram-3 me-1"></i> multi-matériaux avec `/`</span>
          <span class="badge bg-light text-dark border"><i class="bi bi-funnel me-1"></i> filtre par bande interdite</span>
          <span class="badge bg-light text-dark border"><i class="bi bi-journal-check me-1"></i> import direct vers votre base</span>
        </div>
      </div>

      <div>
        <div class="source-toggle-grid mb-3">
          <label class="source-toggle">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="searchSourceLocal" checked>
              <span class="source-toggle-title">Base locale</span>
            </div>
            <div class="source-toggle-desc">Vos matériaux enregistrés et la bibliothèque intégrée SPARC.</div>
            <div class="source-toggle-hint">Toujours utile pour comparer avec vos variantes internes.</div>
          </label>
          <label class="source-toggle">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="searchSourceMP" checked>
              <span class="source-toggle-title">Materials Project</span>
            </div>
            <div class="source-toggle-desc">Structures et gaps DFT prêts à importer dans vos fiches.</div>
            <div class="source-toggle-hint">Actif si `MATERIALS_PROJECT_API_KEY` est configurée.</div>
          </label>
          <label class="source-toggle">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="searchSourceOptimade" checked>
              <span class="source-toggle-title">OPTIMADE</span>
            </div>
            <div class="source-toggle-desc">Agrégation multi-fournisseurs pour élargir la découverte.</div>
            <div class="source-toggle-hint">Les réponses restent listées par provenance.</div>
          </label>
        </div>

        <div class="d-flex align-items-center gap-3 flex-wrap" id="mpFilters" style="font-size: 0.85rem;">
          <div class="d-flex align-items-center gap-1">
            <label for="mpMinEg" class="text-muted mb-0">Gap min</label>
            <input type="number" id="mpMinEg" class="form-control form-control-sm" style="width: 74px;" value="0.1" min="0" max="10" step="0.1">
            <span class="text-muted">eV</span>
          </div>
          <div class="d-flex align-items-center gap-1">
            <label for="mpMaxEg" class="text-muted mb-0">Gap max</label>
            <input type="number" id="mpMaxEg" class="form-control form-control-sm" style="width: 74px;" value="5.0" min="0" max="10" step="0.1">
            <span class="text-muted">eV</span>
          </div>
          <div class="form-check form-check-inline m-0">
            <input class="form-check-input" type="checkbox" id="mpStableOnly" checked>
            <label class="form-check-label text-muted" for="mpStableOnly">Matériaux stables uniquement</label>
          </div>
          <span class="badge bg-info" id="mpResultsCount" style="display: none;"></span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <!-- Section Matériaux Locaux -->
  <div class="col-md-8">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between align-items-center bg-light">
        <div class="d-flex align-items-center gap-2">
          <h5 class="mb-0">Mes Matériaux Enregistrés</h5>
          <span class="badge bg-secondary">{{ local_materials|length }}</span>
        </div>
        <button class="btn btn-success btn-sm shadow-sm" onclick="createNewMaterial()">
          <i class="bi bi-plus-lg"></i> Nouveau Matériau
        </button>
      </div>
      <div class="card-body">
        <div class="row g-3" id="localMaterialsList">
          {% for formula, props in local_materials.items() %}
          <div class="col-md-6 col-lg-4">
            <div class="card material-card h-100" 
                 data-formula="{{ formula }}" 
                 data-props="{{ props|tojson|forceescape }}">
              <!-- Actions au survol -->
              <div class="card-actions gap-1">
                <button class="btn btn-sm btn-light shadow-sm btn-edit-material" title="Modifier">
                  <i class="bi bi-pencil"></i>
                </button>
                {% if formula not in static_formulas %}
                <button class="btn btn-sm btn-danger shadow-sm btn-delete-material" title="Supprimer">
                  <i class="bi bi-trash"></i>
                </button>
                {% endif %}
              </div>
              
              <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-start mb-2">
                  <h6 class="card-title mb-0 fw-bold">{{ formula }}</h6>
                  <span class="badge bg-info text-dark" style="font-size: 0.7rem;">{{ props.category }}</span>
                </div>
                <p class="small text-muted mb-2">{{ props.name }}</p>
                <div class="d-flex gap-3">
                  <span class="small">Eg: <strong>{{ props.Eg }} eV</strong></span>
                  <span class="small">ε: <strong>{{ props.epsilon }}</strong></span>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Aide / Stats -->
  <div class="col-md-4">
    <div class="card bg-light border-0 mb-4">
      <div class="card-body">
        <h6><i class="bi bi-info-circle text-primary"></i> Recherche Globale</h6>
        <p class="small text-muted">
          La recherche combine les trois sources en parallèle et conserve chaque occurrence trouvée, même si la formule apparaît plusieurs fois.
        </p>
        <p class="small text-muted">
          <b>Conseil :</b> comparez les gaps et les métadonnées source avant import pour distinguer une donnée locale, une estimation DFT MP ou un fournisseur OPTIMADE.
        </p>
      </div>
    </div>
    
    <div class="card mb-4">
      <div class="card-header">Catégories</div>
      <div class="list-group list-group-flush">
        {% for cat in categories %}
        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
          {{ cat }}
          <i class="bi bi-chevron-right small text-muted"></i>
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<!-- Modal Edition / Création Matériau -->
<div class="modal fade" id="materialModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="materialModalTitle">Détails du Matériau</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="materialForm">
        <div class="modal-body">
          <div class="row mb-3">
            <div class="col-md-6">
              <label class="form-label">Formule Chimique</label>
              <input type="text" name="formula" class="form-control fw-bold" required placeholder="ex: GaAs">
            </div>
            <div class="col-md-6">
              <label class="form-label">Nom Complet</label>
              <input type="text" name="name" class="form-control" placeholder="ex: Gallium Arsenide">
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label class="form-label">Catégorie</label>
              <select name="category" class="form-select">
                {% for cat in categories %}
                <option value="{{ cat }}">{{ cat }}</option>
                {% endfor %}
                <option value="Autre">Autre</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Source de Données</label>
              <input type="text" name="source" class="form-control" readonly>
            </div>
          </div>

          <hr>
          <h6>Propriétés Physiques</h6>
          <div class="property-grid mt-3">
            <div class="property-item">
              <label class="property-label">Bande Interdite (Eg) [eV]</label>
              <input type="number" step="any" name="Eg" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Affinité Électronique (χ) [eV]</label>
              <input type="number" step="any" name="affinity" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Permittivité Relative (ε)</label>
              <input type="number" step="any" name="epsilon" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Nc (D.O.S Conduction) [cm⁻³]</label>
              <input type="text" name="Nc" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Nv (D.O.S Valence) [cm⁻³]</label>
              <input type="text" name="Nv" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Mobilité e⁻ (μe) [cm²/Vs]</label>
              <input type="number" step="any" name="mu_e" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Mobilité h⁺ (μh) [cm²/Vs]</label>
              <input type="number" step="any" name="mu_h" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Temps de vie e⁻ (τe) [s]</label>
              <input type="text" name="tau_e" class="form-control form-control-sm" required>
            </div>
            <div class="property-item">
              <label class="property-label">Temps de vie h⁺ (τh) [s]</label>
              <input type="text" name="tau_h" class="form-control form-control-sm" required>
            </div>
          </div>

          <div id="materialImportInsights" class="import-insights d-none">
            <div class="d-flex align-items-center gap-2 flex-wrap mb-3">
              <h6 class="mb-0">Traçabilité du profil importé</h6>
              <span id="importCompletenessBadge" class="badge bg-primary"></span>
              <span id="importStrategyBadge" class="badge bg-secondary"></span>
            </div>
            <p id="importStrategySummary" class="small text-muted mb-3"></p>
            <div id="importSourcesUsed" class="d-flex gap-2 flex-wrap mb-3"></div>
            <div id="materialFieldOrigins" class="origin-grid"></div>
          </div>

          <div id="materialDftPanel" class="dft-panel mt-4 d-none">
            <div class="d-flex align-items-center gap-2 flex-wrap mb-2">
              <h6 class="mb-0">Calcul DFT recommandé</h6>
              <span class="badge bg-danger">URL requise</span>
            </div>
            <p class="small text-muted mb-3">
              Certains champs critiques manquent encore ou restent trop incertains pour une hétérostructure fiable. Saisissez l’URL de votre serveur de calcul pour y envoyer la demande DFT.
            </p>
            <div class="mb-3">
              <label class="form-label">URL du serveur DFT</label>
              <input type="url" id="materialDftServerUrl" class="form-control" placeholder="https://mon-serveur-dft/api/jobs">
            </div>
            <div class="mb-3">
              <label class="form-label">Notes pour le calcul</label>
              <textarea id="materialDftNotes" class="form-control" rows="3" placeholder="Ex: prioriser l'affinité électronique et la permittivité pour une future hétérostructure."></textarea>
            </div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
              <button type="button" class="btn btn-outline-danger" id="btnSendDftRequest">
                <i class="bi bi-cpu"></i> Envoyer la demande DFT
              </button>
              <span id="materialDftStatus" class="small text-muted"></span>
            </div>
          </div>
          
          <input type="hidden" name="mp_id">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-success">Enregistrer</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal Résultats Recherche MP -->
<div class="modal fade" id="mpResultsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header badge-mp">
        <h5 class="modal-title text-white"><i class="bi bi-search"></i> Résultats de Recherche Globale</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <div id="mpResultsDashboard" class="results-dashboard d-none"></div>
        <div id="mpSourceStatus" class="source-status-grid d-none"></div>
        <div id="mpResultsToolbar" class="results-toolbar d-none"></div>
        <div id="mpAlerts" class="alert-stack"></div>
        <div id="mpResultsList" class="results-sections">
          <!-- Les résultats seront injectés ici -->
        </div>
        <div id="mpLoading" class="text-center py-5 d-none">
          <div class="spinner-border text-primary" role="status"></div>
          <p class="mt-2 text-muted">Interrogation des bases de données...</p>
        </div>
        <div id="mpEmpty" class="text-center py-5 d-none">
          <div class="empty-state-panel mx-4 my-3">
            <i class="bi bi-emoji-frown text-muted" style="font-size: 3rem;"></i>
            <p class="mt-3 text-muted fw-semibold">Aucun matériau trouvé pour <em id="mpEmptyQuery"></em></p>
            <p class="text-muted small mb-4">Le moteur n’a trouvé aucune correspondance exploitable dans les sources activées.</p>
            <button class="btn btn-success btn-lg px-4 shadow-sm" onclick="createMaterialFromSearch()">
              <i class="bi bi-plus-circle-fill me-2"></i>Créer <span id="mpEmptyQueryBtn" class="fw-bold font-monospace"></span>
            </button>
            <p class="text-muted small mt-3 mb-0">
              <i class="bi bi-info-circle me-1"></i>
              Vous pourrez ensuite compléter les propriétés physiques manuellement.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<!-- Données passées du serveur au client de manière propre pour le linter -->
<script id="local-materials-data" type="application/json">
  {{ local_materials.keys()|list|tojson|safe if local_materials else '[]' }}
</script>
<script id="static-formulas-data" type="application/json">
  {{ static_formulas|tojson|safe if static_formulas else '[]' }}
</script>

<script>
  const materialModal = new bootstrap.Modal(document.getElementById('materialModal'));
  const mpResultsModal = new bootstrap.Modal(document.getElementById('mpResultsModal'));
  const materialForm = document.getElementById('materialForm');
  let currentImportedMaterial = null;
  let currentDftSubmission = null;
  
  // Set des formules locales pour détection intelligente (Parsé depuis JSON script pour éviter les erreurs de linter)
  const localFormulas = new Set(JSON.parse(document.getElementById('local-materials-data').textContent));
  
  // Set des formules statiques (non supprimables)
  const staticFormulas = new Set(JSON.parse(document.getElementById('static-formulas-data').textContent));
  
  // Gestion des clics sur les cartes
  document.getElementById('localMaterialsList').addEventListener('click', (e) => {
    const card = e.target.closest('.material-card');
    if (!card) return;

    const formula = card.dataset.formula;
    let props;
    try {
      props = JSON.parse(card.dataset.props);
    } catch (err) {
      console.error("JSON parse error for props:", err, card.dataset.props);
      return;
    }

    if (e.target.closest('.btn-delete-material')) {
      deleteMaterial(formula);
    } else {
      editMaterial(formula, props);
    }
  });

  // Gestion de l'import MP sécurisée
  window.handleMPImport = function(btn) {
    const item = btn.closest('.result-card');
    if (!item || !item.dataset.mat) return;
    
    try {
      const mat = JSON.parse(item.dataset.mat);
      mpResultsModal.hide();
      editMaterial(mat.formula, mat);
    } catch (err) {
      console.error("MP Import parse error:", err);
    }
  };

  // Création d'un nouveau matériau vide
  window.createNewMaterial = function() {
    resetImportInsights();
    materialForm.reset();
    document.getElementById('materialModalTitle').textContent = "Nouveau Matériau";
    materialForm.elements.source.value = "Utilisateur";
    materialForm.elements.formula.readOnly = false;
    
    // Valeurs par défaut
    materialForm.elements.Eg.value = 1.12;
    materialForm.elements.affinity.value = 4.05;
    materialForm.elements.epsilon.value = 11.7;
    materialForm.elements.Nc.value = "2.86e19";
    materialForm.elements.Nv.value = "2.66e19";
    materialForm.elements.mu_e.value = 1400;
    materialForm.elements.mu_h.value = 450;
    materialForm.elements.tau_e.value = "1e-6";
    materialForm.elements.tau_h.value = "1e-6";
    
    materialModal.show();
  };

  // Création d'un matériau depuis une recherche infructueuse (nom pré-rempli)
  window.createMaterialFromSearch = function() {
    const query = document.getElementById('mpSearchInput').value.trim();
    mpResultsModal.hide();
    resetImportInsights();
    materialForm.reset();
    document.getElementById('materialModalTitle').innerHTML =
      `<i class="bi bi-plus-circle-fill text-success me-2"></i>Créer : <span class="font-monospace">${query}</span>`;
    materialForm.elements.source.value = "Utilisateur";
    materialForm.elements.formula.readOnly = false;
    materialForm.elements.formula.value = query;
    materialForm.elements.name.value = query;
    // Valeurs par défaut raisonnables (semiconducteur générique)
    materialForm.elements.Eg.value = 1.12;
    materialForm.elements.affinity.value = 4.05;
    materialForm.elements.epsilon.value = 11.7;
    materialForm.elements.Nc.value = "2.86e19";
    materialForm.elements.Nv.value = "2.66e19";
    materialForm.elements.mu_e.value = 1400;
    materialForm.elements.mu_h.value = 450;
    materialForm.elements.tau_e.value = "1e-6";
    materialForm.elements.tau_h.value = "1e-6";
    materialModal.show();
    // Focus sur Eg pour guider l'utilisateur
    setTimeout(() => materialForm.elements.Eg.focus(), 400);
  };

  // Édition d'un matériau
  window.editMaterial = function(formula, props) {
    resetImportInsights();
    const isMergedProfile = props.source === 'Fusion multi-sources';
    const isImport = isMergedProfile || props.source === 'Materials Project' || String(props.source || '').startsWith('OPTIMADE');
    document.getElementById('materialModalTitle').innerHTML = isMergedProfile
      ? `<i class="bi bi-diagram-3 text-primary me-2"></i>Profil fusionné : ${formula}`
      : isImport
        ? `<i class="bi bi-cloud-download text-primary"></i> Importation de ${formula}`
        : `Détails de ${formula}`;
    
    materialForm.elements.formula.readOnly = true;
    
    // Fonction utilitaire pour formater les nombres (évite les erreurs de précision JS)
    const fmt = (val, dec = 4) => {
      if (val === undefined || val === null) return "";
      const num = parseFloat(val);
      return isNaN(num) ? val : Number(num.toFixed(dec)).toString();
    };
    
    const f = materialForm.elements;
    f.formula.value = formula;
    f.name.value = props.name || formula;
    f.category.value = props.category || 'Autre';
    f.source.value = props.source || 'Local';
    f.Eg.value = fmt(props.Eg);
    f.affinity.value = fmt(props.affinity || 4.0);
    f.epsilon.value = fmt(props.epsilon);
    f.Nc.value = props.Nc || "2.86e19";
    f.Nv.value = props.Nv || "2.66e19";
    f.mu_e.value = fmt(props.mu_e || 1000, 2);
    f.mu_h.value = fmt(props.mu_h || 400, 2);
    f.tau_e.value = props.tau_e || "1e-6";
    f.tau_h.value = props.tau_h || "1e-6";
    f.mp_id.value = props.mp_id || '';

    renderImportInsights(props);
    
    materialModal.show();
  };

  // Suppression d'un matériau
  window.deleteMaterial = async function(formula) {
    if (!confirm(`Voulez-vous vraiment supprimer le matériau ${formula} ?`)) return;
    
    try {
      const response = await fetch(`/api/materials/delete/${formula}`, { method: 'DELETE' });
      if (response.ok) {
        window.location.reload();
      } else {
        alert("Impossible de supprimer un matériau de base (Si, GaAs, etc.).");
      }
    } catch (err) {
      alert("Erreur réseau: " + err.message);
    }
  };

  const SEARCH_SOURCE_ORDER = ['local', 'materials_project', 'optimade'];
  const SEARCH_SOURCE_LABELS = {
    local: 'Base locale SPARC',
    materials_project: 'Materials Project',
    optimade: 'OPTIMADE',
  };

  const TRACEABLE_FIELDS = ['Eg', 'affinity', 'epsilon', 'Nc', 'Nv', 'mu_e', 'mu_h', 'tau_e', 'tau_h'];

  function escapeHtml(value) {
    return String(value ?? '')
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function formatValue(value, digits = 3) {
    if (value === undefined || value === null || value === '') return '—';
    const num = Number(value);
    return Number.isFinite(num) ? num.toFixed(digits) : escapeHtml(value);
  }

  function strategyBadgeClass(strategyLabel) {
    if (strategyLabel === 'ready') return 'bg-success';
    if (strategyLabel === 'targeted_dft') return 'bg-danger';
    if (strategyLabel === 'semiempirical_estimation') return 'bg-warning text-dark';
    return 'bg-secondary';
  }

  function resetImportInsights() {
    currentImportedMaterial = null;
    currentDftSubmission = null;
    document.getElementById('materialImportInsights').classList.add('d-none');
    document.getElementById('materialFieldOrigins').innerHTML = '';
    document.getElementById('importSourcesUsed').innerHTML = '';
    document.getElementById('importStrategySummary').textContent = '';
    document.getElementById('importCompletenessBadge').textContent = '';
    document.getElementById('importStrategyBadge').textContent = '';
    document.getElementById('importStrategyBadge').className = 'badge bg-secondary';
    document.getElementById('materialDftPanel').classList.add('d-none');
    document.getElementById('materialDftServerUrl').value = '';
    document.getElementById('materialDftNotes').value = '';
    document.getElementById('materialDftStatus').textContent = '';
    document.getElementById('materialDftStatus').className = 'small text-muted';
  }

  function renderImportInsights(props) {
    const fieldOrigins = props.field_origins || {};
    const strategy = props.completion_strategy || {};
    const audit = props.quality_audit || {};
    const hasInsights = Object.keys(fieldOrigins).length > 0 || props.merged_from || strategy.summary;
    if (!hasInsights) {
      resetImportInsights();
      return;
    }

    currentImportedMaterial = JSON.parse(JSON.stringify(props));
    const insights = document.getElementById('materialImportInsights');
    const origins = document.getElementById('materialFieldOrigins');
    const sourcesUsed = document.getElementById('importSourcesUsed');
    const summary = document.getElementById('importStrategySummary');
    const completenessBadge = document.getElementById('importCompletenessBadge');
    const strategyBadge = document.getElementById('importStrategyBadge');

    completenessBadge.textContent = `${props.completeness_percent || 0}% complet`;
    strategyBadge.textContent = strategy.preferred_method || 'profil';
    strategyBadge.className = `badge ${strategyBadgeClass(strategy.preferred_method)}`;
    summary.textContent = strategy.summary || 'Profil importé depuis les sources externes.';

    sourcesUsed.innerHTML = (props.sources_used || []).map((source) => (
      `<span class="badge bg-light text-dark border">${escapeHtml(source)}</span>`
    )).join('');

    origins.innerHTML = TRACEABLE_FIELDS.map((field) => {
      const origin = fieldOrigins[field];
      const source = origin?.source || 'Champ non documenté';
      const estimated = origin?.estimated ? '<span class="badge bg-warning text-dark ms-1">estimé</span>' : '';
      return `
        <div class="origin-card">
          <div class="field">${escapeHtml(field)}</div>
          <div class="source">${escapeHtml(source)} ${estimated}</div>
          <div class="meta">Valeur retenue: ${escapeHtml(formatValue(props[field], field === 'Nc' || field === 'Nv' ? 2 : 3))}</div>
        </div>
      `;
    }).join('');

    insights.classList.remove('d-none');

    const needsDft = strategy.preferred_method === 'targeted_dft'
      || (strategy.actions || []).some((action) => action.recommended_method === 'targeted_dft');
    const dftPanel = document.getElementById('materialDftPanel');
    const dftStatus = document.getElementById('materialDftStatus');
    dftStatus.textContent = audit.warnings?.length ? audit.warnings[0] : '';
    dftStatus.className = 'small text-muted';

    if (needsDft) {
      dftPanel.classList.remove('d-none');
      document.getElementById('materialDftNotes').value = strategy.summary || '';
      if (props.dft_server_url) {
        document.getElementById('materialDftServerUrl').value = props.dft_server_url;
      }
    } else {
      dftPanel.classList.add('d-none');
    }
  }

  function statusVariant(source) {
    if (source.error) return 'error';
    if (source.warning || !source.available) return 'warning';
    return 'ready';
  }

  function sourceBadgeClass(sourceKey) {
    if (sourceKey === 'materials_project') return 'badge-mp';
    if (sourceKey === 'optimade') return 'bg-success';
    return 'bg-secondary';
  }

  function createAlertBanner(message, variant = 'warning') {
    const banner = document.createElement('div');
    banner.className = `alert alert-${variant} small py-2 mb-2`;
    banner.innerHTML = `<i class="bi bi-${variant === 'danger' ? 'x-circle' : 'exclamation-triangle'} me-1"></i>${escapeHtml(message)}`;
    return banner;
  }

  function renderDashboard(data) {
    const dashboard = document.getElementById('mpResultsDashboard');
    const summary = data.summary || {};
    const duplicates = summary.duplicate_formulas || [];
    dashboard.innerHTML = `
      <div class="dashboard-card">
        <div class="label">Requête</div>
        <div class="value">${escapeHtml(data.query || '—')}</div>
      </div>
      <div class="dashboard-card">
        <div class="label">Résultats bruts</div>
        <div class="value">${summary.total_results || 0}</div>
      </div>
      <div class="dashboard-card">
        <div class="label">Formules uniques</div>
        <div class="value">${summary.unique_formulas || 0}</div>
      </div>
      <div class="dashboard-card">
        <div class="label">Doublons visibles</div>
        <div class="value">${duplicates.length}</div>
      </div>
    `;
    dashboard.classList.remove('d-none');
  }

  function renderSourceStatus(data) {
    const container = document.getElementById('mpSourceStatus');
    const sources = data.sources || {};
    container.innerHTML = SEARCH_SOURCE_ORDER.map((sourceKey) => {
      const source = sources[sourceKey] || {};
      const variant = statusVariant(source);
      const providerSummary = Number.isFinite(source.providers_total) && source.providers_total > 0
        ? `${source.providers_reachable || 0}/${source.providers_total} fournisseurs joignables.`
        : '';
      const note = source.error
        || source.warning
        || source.note
        || providerSummary
        || (source.enabled ? 'Source interrogee.' : 'Source desactivee.');
      return `
        <div class="source-status-card ${variant}">
          <div class="d-flex justify-content-between align-items-start gap-2">
            <div>
              <div class="fw-bold">${escapeHtml(source.label || SEARCH_SOURCE_LABELS[sourceKey])}</div>
              <div class="small text-muted mt-1">${escapeHtml(note || '')}</div>
            </div>
            <span class="badge ${variant === 'ready' ? 'bg-success' : variant === 'error' ? 'bg-danger' : 'bg-warning text-dark'}">${source.count || 0}</span>
          </div>
        </div>
      `;
    }).join('');
    container.classList.remove('d-none');
  }

  function renderToolbar(data) {
    const toolbar = document.getElementById('mpResultsToolbar');
    const segments = (data.query_segments || []).map((segment) => `<span class="badge bg-light text-dark border">${escapeHtml(segment)}</span>`).join('');
    const duplicateBadges = (data.summary?.duplicate_formulas || []).slice(0, 6).map((dup) => (
      `<span class="badge bg-warning text-dark">${escapeHtml(dup.formula)} ×${dup.count}</span>`
    )).join('');

    toolbar.innerHTML = `
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <span class="small text-muted">Segments recherchés :</span>
        ${segments || '<span class="small text-muted">aucun</span>'}
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
        ${duplicateBadges}
      </div>
    `;
    toolbar.classList.remove('d-none');
  }

  function renderResultsSections(data) {
    const container = document.getElementById('mpResultsList');
    const grouped = data.grouped_results || {};
    const assembledProfiles = data.assembled_profiles || [];

    const assembledSection = assembledProfiles.length ? `
      <section class="results-section">
        <div class="results-section-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
          <div>
            <div class="fw-bold">Profils fusionnes recommandes</div>
            <div class="small text-muted">Assemblage automatique des meilleures proprietes disponibles entre les sources pour chaque segment recherche.</div>
          </div>
          <span class="badge bg-dark">${assembledProfiles.length}</span>
        </div>
        <div class="results-grid">
          ${assembledProfiles.map((mat) => {
            const strategy = mat.completion_strategy || {};
            const audit = mat.quality_audit || {};
            const strategyLabel = strategy.preferred_method || 'n/a';
            const strategyClass = strategyLabel === 'ready'
              ? 'bg-success'
              : strategyLabel === 'targeted_dft'
                ? 'bg-danger'
                : strategyLabel === 'semiempirical_estimation'
                  ? 'bg-warning text-dark'
                  : 'bg-secondary';
            const sourcesUsed = (mat.sources_used || []).slice(0, 4).map((source) => (
              `<span class="badge bg-light text-dark border">${escapeHtml(source)}</span>`
            )).join('');
            return `
              <div class="result-card" data-mat="${escapeHtml(JSON.stringify(mat))}">
                <div class="result-card-header">
                  <div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                      <div class="h5 mb-0">${escapeHtml(mat.formula || '—')}</div>
                      <span class="badge bg-primary">${mat.completeness_percent || 0}% complet</span>
                      <span class="badge ${strategyClass}">${escapeHtml(strategyLabel)}</span>
                    </div>
                    <div class="result-card-meta">
                      <span class="badge bg-dark">${escapeHtml(mat.query_segment || mat.formula || '')}</span>
                      ${sourcesUsed}
                    </div>
                  </div>
                  <button class="btn btn-sm btn-outline-primary" onclick="handleMPImport(this)">
                    <i class="bi bi-pencil"></i> Utiliser ce profil
                  </button>
                </div>
                <div class="small text-muted mt-2">${escapeHtml(strategy.summary || 'Profil fusionne multi-sources.')}</div>
                <div class="result-card-properties">
                  <div class="result-prop">
                    <span class="k">Gap Eg</span>
                    <span class="v">${formatValue(mat.Eg)} eV</span>
                  </div>
                  <div class="result-prop">
                    <span class="k">Affinite</span>
                    <span class="v">${formatValue(mat.affinity)} eV</span>
                  </div>
                  <div class="result-prop">
                    <span class="k">Permittivite</span>
                    <span class="v">${formatValue(mat.epsilon, 2)}</span>
                  </div>
                  <div class="result-prop">
                    <span class="k">Mobilite e-</span>
                    <span class="v">${formatValue(mat.mu_e, 2)}</span>
                  </div>
                  <div class="result-prop">
                    <span class="k">Mobilite h+</span>
                    <span class="v">${formatValue(mat.mu_h, 2)}</span>
                  </div>
                  <div class="result-prop">
                    <span class="k">Qualite</span>
                    <span class="v">${escapeHtml(audit.severity || 'n/a')}</span>
                  </div>
                </div>
              </div>
            `;
          }).join('')}
        </div>
      </section>
    ` : '';

    const sourceSections = SEARCH_SOURCE_ORDER.map((sourceKey) => {
      const items = grouped[sourceKey] || [];
      const label = (data.sources?.[sourceKey]?.label) || SEARCH_SOURCE_LABELS[sourceKey];
      const cards = items.map((mat) => {
        const exists = !!mat.local_exists;
        const crystal = mat.crystal_system || (sourceKey === 'local' ? 'Base locale' : 'Inconnu');
        const sourceId = mat.mp_id || mat.optimade_id || mat.source || 'local';
        const duplicateBadge = mat.is_duplicate_formula
          ? `<span class="badge bg-warning text-dark">doublon visible ×${mat.duplicate_count}</span>`
          : '';
        const actionLabel = exists ? 'Voir/Modifier' : 'Ajouter à ma base';
        const actionClass = exists ? 'btn-outline-primary' : 'btn-success';
        const actionIcon = exists ? 'pencil' : 'plus-circle';
        return `
          <div class="result-card" data-mat="${escapeHtml(JSON.stringify(mat))}">
            <div class="result-card-header">
              <div>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                  <div class="h5 mb-0">${escapeHtml(mat.formula || '—')}</div>
                  ${exists ? '<span class="badge bg-secondary">Déjà en base</span>' : ''}
                  ${duplicateBadge}
                </div>
                <div class="result-card-meta">
                  <span class="badge ${sourceBadgeClass(sourceKey)}">${escapeHtml(String(sourceId))}</span>
                  <span class="badge bg-light text-dark border">${escapeHtml(mat.query_segment || data.query || '')}</span>
                  <span class="badge bg-light text-dark border">${escapeHtml(mat.source_label || label)}</span>
                </div>
              </div>
              <button class="btn btn-sm ${actionClass}" onclick="handleMPImport(this)">
                <i class="bi bi-${actionIcon}"></i> ${actionLabel}
              </button>
            </div>
            <div class="small text-muted mt-2">${escapeHtml(mat.name || mat.formula || '')}</div>
            <div class="result-card-properties">
              <div class="result-prop">
                <span class="k">Gap Eg</span>
                <span class="v">${formatValue(mat.Eg)} eV</span>
              </div>
              <div class="result-prop">
                <span class="k">Cristal / type</span>
                <span class="v">${escapeHtml(crystal)}</span>
              </div>
              <div class="result-prop">
                <span class="k">Stabilité</span>
                <span class="v">${mat.is_stable === false ? 'Métastable' : 'Stable / n.d.'}</span>
              </div>
              <div class="result-prop">
                <span class="k">Affinité</span>
                <span class="v">${formatValue(mat.affinity)} eV</span>
              </div>
              <div class="result-prop">
                <span class="k">Mobilité e-</span>
                <span class="v">${formatValue(mat.mu_e, 2)}</span>
              </div>
              <div class="result-prop">
                <span class="k">Mobilité h+</span>
                <span class="v">${formatValue(mat.mu_h, 2)}</span>
              </div>
            </div>
          </div>
        `;
      }).join('');

      return `
        <section class="results-section">
          <div class="results-section-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
            <div>
              <div class="fw-bold">${escapeHtml(label)}</div>
              <div class="small text-muted">${items.length} résultat${items.length > 1 ? 's' : ''} affiché${items.length > 1 ? 's' : ''} pour cette source.</div>
            </div>
            <span class="badge ${sourceBadgeClass(sourceKey)}">${items.length}</span>
          </div>
          <div class="results-grid">
            ${cards || `<div class="text-muted small">Aucun résultat dans cette source avec les filtres actuels.</div>`}
          </div>
        </section>
      `;
    }).join('');

    container.innerHTML = `${assembledSection}${sourceSections}`;
  }

  function renderAlerts(data) {
    const alerts = document.getElementById('mpAlerts');
    alerts.innerHTML = '';

    if (data.warning) alerts.appendChild(createAlertBanner(data.warning, 'warning'));
    if (data.error) alerts.appendChild(createAlertBanner(data.error, 'danger'));

    if (data.optimade_errors && data.optimade_errors.length > 0) {
      data.optimade_errors.forEach((err) => {
        alerts.appendChild(createAlertBanner(`OPTIMADE: ${err}`, 'warning'));
      });
    }
  }

  // Recherche matériaux multi-sources
  document.getElementById('btnSearchMP').addEventListener('click', async () => {
    const query = document.getElementById('mpSearchInput').value.trim();
    if (!query) return;

    // Lire les filtres
    const minEg = parseFloat(document.getElementById('mpMinEg').value) || 0.1;
    const maxEg = parseFloat(document.getElementById('mpMaxEg').value) || 5.0;
    const stableOnly = document.getElementById('mpStableOnly').checked;
    const includeLocal = document.getElementById('searchSourceLocal').checked;
    const includeMP = document.getElementById('searchSourceMP').checked;
    const includeOptimade = document.getElementById('searchSourceOptimade').checked;

    if (!includeLocal && !includeMP && !includeOptimade) {
      alert('Activez au moins une source de recherche.');
      return;
    }

    mpResultsModal.show();
    const list = document.getElementById('mpResultsList');
    const loading = document.getElementById('mpLoading');
    const empty = document.getElementById('mpEmpty');
    const resultsCount = document.getElementById('mpResultsCount');
    const dashboard = document.getElementById('mpResultsDashboard');
    const sourceStatus = document.getElementById('mpSourceStatus');
    const toolbar = document.getElementById('mpResultsToolbar');
    const alerts = document.getElementById('mpAlerts');

    list.innerHTML = '';
    alerts.innerHTML = '';
    loading.classList.remove('d-none');
    empty.classList.add('d-none');
    resultsCount.style.display = 'none';
    dashboard.classList.add('d-none');
    sourceStatus.classList.add('d-none');
    toolbar.classList.add('d-none');

    try {
      const params = new URLSearchParams();
      params.append('query', query);
      params.append('min_eg', minEg);
      params.append('max_eg', maxEg);
      params.append('stable_only', stableOnly);
      params.append('include_local', includeLocal);
      params.append('include_mp', includeMP);
      params.append('include_optimade', includeOptimade);

      const response = await fetch(`/api/materials/mp/search?${params.toString()}`);

      // Vérifier si la réponse est du JSON
      const contentType = response.headers.get("content-type");
      if (!contentType || !contentType.includes("application/json")) {
        const text = await response.text();
        throw new Error("Réponse serveur non-JSON: " + text.substring(0, 100));
      }

      const data = await response.json();
      loading.classList.add('d-none');

      // Mise à jour du texte "aucun résultat"
      document.getElementById('mpEmptyQuery').textContent = `"${query}"`;
      document.getElementById('mpEmptyQueryBtn').textContent = query;

      // Afficher le nombre de résultats
      const nResults = data.summary ? data.summary.total_results : (data.results ? data.results.length : 0);
      if (nResults > 0) {
        const dupCount = (data.summary?.duplicate_formulas || []).length;
        resultsCount.textContent = `${nResults} résultat${nResults > 1 ? 's' : ''}${dupCount ? ` • ${dupCount} doublon${dupCount > 1 ? 's' : ''}` : ''}`;
        resultsCount.style.display = 'inline-block';
      }

      renderDashboard(data);
      renderSourceStatus(data);
      renderToolbar(data);
      renderAlerts(data);

      if (data.results && data.results.length > 0) {
        renderResultsSections(data);
      } else {
        empty.classList.remove('d-none');
      }
    } catch (err) {
      loading.classList.add('d-none');
      alert('Erreur de recherche matériaux: ' + err.message);
    }
  });

  // Déclencher la recherche avec la touche Entrée
  document.getElementById('mpSearchInput').addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      document.getElementById('btnSearchMP').click();
    }
  });

  document.getElementById('btnSendDftRequest').addEventListener('click', async () => {
    if (!currentImportedMaterial) {
      return;
    }

    const serverUrl = document.getElementById('materialDftServerUrl').value.trim();
    const notes = document.getElementById('materialDftNotes').value.trim();
    const status = document.getElementById('materialDftStatus');

    if (!serverUrl) {
      status.textContent = 'Veuillez saisir l’URL du serveur DFT.';
      status.className = 'small text-danger';
      return;
    }

    status.textContent = 'Envoi de la demande DFT en cours...';
    status.className = 'small text-muted';

    try {
      const response = await fetch('/api/materials/dft-request', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          server_url: serverUrl,
          formula: currentImportedMaterial.formula || materialForm.elements.formula.value,
          query_segment: currentImportedMaterial.query_segment || materialForm.elements.formula.value,
          material_profile: currentImportedMaterial,
          completion_strategy: currentImportedMaterial.completion_strategy || {},
          notes,
        }),
      });

      const payload = await response.json();
      if (!response.ok || !payload.success) {
        throw new Error(payload.error || 'Le serveur DFT a refusé la demande.');
      }

      currentDftSubmission = {
        server_url: serverUrl,
        status_code: payload.status_code,
        remote_response: payload.remote_response,
        submission: payload.submission,
        submitted_at: new Date().toISOString(),
      };
      currentImportedMaterial.dft_server_url = serverUrl;
      currentImportedMaterial.dft_submission = currentDftSubmission;
      status.textContent = payload.message || 'Demande DFT envoyée.';
      status.className = 'small text-success';
    } catch (err) {
      status.textContent = `Échec de l’envoi DFT: ${err.message}`;
      status.className = 'small text-danger';
    }
  });

  // Enregistrement
  materialForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(materialForm);
    const data = Object.fromEntries(formData.entries());

    if (currentImportedMaterial) {
      data.field_origins = currentImportedMaterial.field_origins || {};
      data.merged_from = currentImportedMaterial.merged_from || [];
      data.quality_audit = currentImportedMaterial.quality_audit || {};
      data.completion_strategy = currentImportedMaterial.completion_strategy || {};
      data.sources_used = currentImportedMaterial.sources_used || [];
      data.completeness_percent = currentImportedMaterial.completeness_percent || 0;
      data.source_profile = currentImportedMaterial.source || data.source;
      if (currentImportedMaterial.optimade_id) data.optimade_id = currentImportedMaterial.optimade_id;
      if (currentImportedMaterial.query_segment) data.query_segment = currentImportedMaterial.query_segment;
      if (currentImportedMaterial.result_uid) data.result_uid = currentImportedMaterial.result_uid;
      if (currentImportedMaterial.dft_server_url) data.dft_server_url = currentImportedMaterial.dft_server_url;
    }

    const dftServerUrl = document.getElementById('materialDftServerUrl').value.trim();
    const dftNotes = document.getElementById('materialDftNotes').value.trim();
    if (dftServerUrl) data.dft_server_url = dftServerUrl;
    if (dftNotes) data.dft_notes = dftNotes;
    if (currentDftSubmission) data.dft_submission = currentDftSubmission;
    
    // Conversion numérique
    ['Eg', 'affinity', 'epsilon', 'mu_e', 'mu_h'].forEach(k => data[k] = parseFloat(data[k]));
    
    try {
      const response = await fetch('/api/materials/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      
      if (response.ok) {
        materialModal.hide();
        window.location.reload();
      } else {
        const err = await response.json();
        alert('Erreur: ' + err.error);
      }
    } catch (err) {
      alert('Erreur réseau: ' + err.message);
    }
  });
</script>
{% endblock %}