{% extends 'base.html' %}
{% block title %}Matières{% endblock %}

{% block content %}
<div class="page-header d-flex justify-content-between align-items-center">
  <h1><i class="bi bi-boxes me-2" style="color:#8b5cf6"></i>Matières & Stock</h1>
  <div class="d-flex gap-2">
    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse"
            data-bs-target="#filterBar" aria-expanded="false" id="filterToggle">
      <i class="bi bi-funnel me-1"></i>Filtres
    </button>
    <a href="{{ url_for('new_material') }}" class="btn btn-sm" style="background:#ff6b35;color:#fff">
      <i class="bi bi-plus-lg me-1"></i>Ajouter une matière
    </a>
  </div>
</div>

<!-- Barre de filtres collapsable -->
<div class="collapse mb-3" id="filterBar">
  <div class="card card-body py-3">
    <div class="row g-3 align-items-end">
      <!-- Recherche texte -->
      <div class="col-md-4">
        <label class="form-label small text-muted mb-1">Rechercher</label>
        <div class="input-group input-group-sm">
          <span class="input-group-text"><i class="bi bi-search"></i></span>
          <input type="text" id="searchInput" class="form-control" placeholder="Nom, marque…">
          <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Effacer">
            <i class="bi bi-x"></i>
          </button>
        </div>
      </div>
      <!-- Filtre par type -->
      <div class="col-md-5">
        <label class="form-label small text-muted mb-1">Type</label>
        <div class="d-flex flex-wrap gap-1" id="typeFilters">
          <button class="btn btn-sm btn-secondary active" data-type="all">Tous</button>
          {% for t in types %}
          <button class="btn btn-sm btn-outline-secondary" data-type="{{ t }}">{{ t }}</button>
          {% endfor %}
        </div>
      </div>
      <!-- Tri -->
      <div class="col-md-3">
        <label class="form-label small text-muted mb-1">Trier par</label>
        <select id="sortSelect" class="form-select form-select-sm">
          <option value="type-name">Type puis nom</option>
          <option value="name">Nom (A→Z)</option>
          <option value="price-asc">Prix/kg (croissant)</option>
          <option value="price-desc">Prix/kg (décroissant)</option>
          <option value="stock-asc">Stock (croissant)</option>
          <option value="stock-desc">Stock (décroissant)</option>
          <option value="usage-desc">Plus utilisé</option>
        </select>
      </div>
    </div>
    <!-- Résumé du filtre actif -->
    <div class="mt-2 small text-muted" id="filterSummary"></div>
  </div>
</div>

<div class="card">
  <div class="card-body p-0">
    {% if materials %}
    <table class="table table-hover mb-0 align-middle" id="materialsTable">
      <thead class="table-light">
        <tr>
          <th data-col="name" class="sortable-th" style="cursor:pointer">
            Nom <i class="bi bi-arrow-down-up text-muted small"></i>
          </th>
          <th data-col="type" class="sortable-th" style="cursor:pointer">
            Type <i class="bi bi-arrow-down-up text-muted small"></i>
          </th>
          <th>Couleur</th>
          <th data-col="price" class="sortable-th" style="cursor:pointer">
            Prix/kg <i class="bi bi-arrow-down-up text-muted small"></i>
          </th>
          <th data-col="stock" class="sortable-th" style="cursor:pointer">
            Stock <i class="bi bi-arrow-down-up text-muted small"></i>
          </th>
          <th>Commandes</th>
          <th data-col="usage" class="sortable-th" style="cursor:pointer">
            Utilisé total <i class="bi bi-arrow-down-up text-muted small"></i>
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody id="materialsBody">
        {% for m in materials %}
        {% set stock_pct = [[(m.stock_g / 1000 * 100)|round(0)|int, 0]|max, 100]|min %}
        <tr class="mat-row"
            data-name="{{ m.name|lower }}{% if m.brand %} {{ m.brand|lower }}{% endif %}"
            data-type="{{ m.type }}"
            data-price="{{ m.price_per_kg }}"
            data-stock="{{ m.stock_g }}"
            data-usage="{{ m.total_used_g }}"
            data-jobs="{{ m.job_count }}">
          <td class="fw-semibold">{{ m.name }}{% if m.brand %} <small class="text-muted">/ {{ m.brand }}</small>{% endif %}</td>
          <td><span class="badge bg-secondary">{{ m.type }}</span></td>
          <td>
            {% if m.color %}
            <span class="d-inline-flex align-items-center gap-1">
              <span style="width:14px;height:14px;border-radius:50%;background:{{ m.color | css_color }};border:1px solid #ccc;display:inline-block"></span>
              {{ m.color }}
            </span>
            {% else %}—{% endif %}
          </td>
          <td class="fw-semibold">{{ m.price_per_kg }} €</td>
          <td style="min-width:140px">
            {% if m.stock_g <= 0 %}
              <span class="stock-empty fw-bold"><i class="bi bi-x-circle"></i> Rupture</span>
            {% elif m.stock_g <= m.low_stock_threshold_g %}
              <div class="d-flex align-items-center gap-2">
                <span class="stock-low"><i class="bi bi-exclamation-triangle"></i> {{ m.stock_g|round(0)|int }} g</span>
              </div>
            {% else %}
              <span class="stock-ok"><i class="bi bi-check-circle"></i> {{ m.stock_g|round(0)|int }} g</span>
            {% endif %}
            <div class="progress mt-1" style="height:4px">
              <div class="progress-bar
                {% if m.stock_g <= 0 %}bg-danger
                {% elif m.stock_g <= m.low_stock_threshold_g %}bg-warning
                {% else %}bg-success{% endif %}"
                style="width:{{ stock_pct }}%">
              </div>
            </div>
          </td>
          <td>{{ m.job_count }}</td>
          <td>{{ m.total_used_g }} g</td>
          <td>
            <div class="d-flex gap-1 flex-nowrap">
              <button class="btn btn-sm btn-outline-success py-0" data-bs-toggle="modal"
                      data-bs-target="#restockModal{{ m.id }}" title="Réapprovisionner">
                <i class="bi bi-plus-lg"></i>
              </button>
              <a href="{{ url_for('edit_material', id=m.id) }}" class="btn btn-sm btn-outline-secondary py-0" title="Modifier">
                <i class="bi bi-pencil"></i>
              </a>
              <form method="POST" action="{{ url_for('duplicate_material', id=m.id) }}" style="display:inline">
                <button class="btn btn-sm btn-outline-secondary py-0" title="Dupliquer">
                  <i class="bi bi-copy"></i>
                </button>
              </form>
              <form method="POST" action="{{ url_for('delete_material', id=m.id) }}"
                    onsubmit="return confirm('Supprimer {{ m.name }} ?')">
                <button class="btn btn-sm btn-outline-danger py-0" title="Supprimer"><i class="bi bi-trash"></i></button>
              </form>
            </div>
          </td>
        </tr>

        <!-- Modal Restock -->
        <div class="modal fade" id="restockModal{{ m.id }}" tabindex="-1">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <form method="POST" action="{{ url_for('restock_material', id=m.id) }}">
                <div class="modal-header">
                  <h5 class="modal-title">Réapprovisionner — {{ m.name }}</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                  <div class="mb-3">
                    <label class="form-label">Quantité à ajouter (g)</label>
                    <input type="number" name="add_g" class="form-control" step="1" min="1"
                           placeholder="ex: 1000 pour 1 kg" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Nouveau prix/kg (optionnel)</label>
                    <input type="number" name="new_price_per_kg" class="form-control"
                           step="0.01" placeholder="{{ m.price_per_kg }} (actuel)">
                    <div class="form-text">Laissez vide si le prix n'a pas changé.</div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
                  <button type="submit" class="btn btn-success btn-sm">Ajouter au stock</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        {% endfor %}
      </tbody>
    </table>
    <!-- Ligne "aucun résultat" -->
    <div id="noResults" class="text-center text-muted py-4" style="display:none">
      <i class="bi bi-search fs-3 d-block mb-2"></i>
      Aucune matière ne correspond aux filtres.
      <button class="btn btn-sm btn-link p-0 ms-1" id="resetFilters">Réinitialiser</button>
    </div>
    {% else %}
    <div class="text-center text-muted py-5">
      <i class="bi bi-boxes fs-1"></i>
      <p class="mt-2">Aucune matière enregistrée.</p>
      <a href="{{ url_for('new_material') }}" class="btn btn-sm" style="background:#ff6b35;color:#fff">
        Ajouter votre premier filament
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
  const rows = Array.from(document.querySelectorAll('.mat-row'));
  if (!rows.length) return;

  let activeType = 'all';
  let searchText = '';
  let sortKey = 'type-name';

  const tbody     = document.getElementById('materialsBody');
  const noResults = document.getElementById('noResults');
  const summary   = document.getElementById('filterSummary');
  const filterBar = document.getElementById('filterBar');
  const toggle    = document.getElementById('filterToggle');

  // Persist filter bar open/close state
  const STORE_KEY = 'mat_filter_open';
  if (localStorage.getItem(STORE_KEY) === '1') {
    filterBar.classList.add('show');
    toggle.setAttribute('aria-expanded', 'true');
    toggle.classList.add('active');
  }
  filterBar.addEventListener('shown.bs.collapse', () => {
    localStorage.setItem(STORE_KEY, '1');
    toggle.classList.add('active');
  });
  filterBar.addEventListener('hidden.bs.collapse', () => {
    localStorage.setItem(STORE_KEY, '0');
    toggle.classList.remove('active');
  });

  // ── Search ──────────────────────────────────
  document.getElementById('searchInput').addEventListener('input', function() {
    searchText = this.value.toLowerCase().trim();
    render();
  });
  document.getElementById('clearSearch').addEventListener('click', function() {
    document.getElementById('searchInput').value = '';
    searchText = '';
    render();
  });

  // ── Type filters ────────────────────────────
  document.querySelectorAll('#typeFilters button').forEach(btn => {
    btn.addEventListener('click', function() {
      document.querySelectorAll('#typeFilters button').forEach(b => {
        b.classList.remove('active', 'btn-secondary');
        b.classList.add('btn-outline-secondary');
      });
      this.classList.add('active', 'btn-secondary');
      this.classList.remove('btn-outline-secondary');
      activeType = this.dataset.type;
      render();
    });
  });

  // ── Sort select ─────────────────────────────
  document.getElementById('sortSelect').addEventListener('change', function() {
    sortKey = this.value;
    render();
  });

  // ── Column header click sorts ───────────────
  document.querySelectorAll('.sortable-th').forEach(th => {
    th.addEventListener('click', function() {
      const col = this.dataset.col;
      const map = {
        name: 'name',
        type: 'type-name',
        price: 'price-asc',
        stock: 'stock-desc',
        usage: 'usage-desc'
      };
      if (map[col]) {
        document.getElementById('sortSelect').value = map[col];
        sortKey = map[col];
        render();
      }
    });
  });

  // ── Reset ───────────────────────────────────
  const resetBtn = document.getElementById('resetFilters');
  if (resetBtn) resetBtn.addEventListener('click', reset);

  function reset() {
    searchText = '';
    activeType = 'all';
    sortKey = 'type-name';
    document.getElementById('searchInput').value = '';
    document.getElementById('sortSelect').value = 'type-name';
    document.querySelectorAll('#typeFilters button').forEach(b => {
      b.classList.remove('active', 'btn-secondary');
      b.classList.add('btn-outline-secondary');
    });
    const allBtn = document.querySelector('#typeFilters button[data-type="all"]');
    allBtn.classList.add('active', 'btn-secondary');
    allBtn.classList.remove('btn-outline-secondary');
    render();
  }

  // ── Main render ─────────────────────────────
  function render() {
    // 1. Filter
    const visible = rows.filter(r => {
      const matchType   = activeType === 'all' || r.dataset.type === activeType;
      const matchSearch = !searchText || r.dataset.name.includes(searchText);
      return matchType && matchSearch;
    });

    // 2. Sort
    visible.sort((a, b) => {
      switch (sortKey) {
        case 'name':       return a.dataset.name.localeCompare(b.dataset.name);
        case 'type-name':  return a.dataset.type.localeCompare(b.dataset.type)
                               || a.dataset.name.localeCompare(b.dataset.name);
        case 'price-asc':  return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
        case 'price-desc': return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
        case 'stock-asc':  return parseFloat(a.dataset.stock) - parseFloat(b.dataset.stock);
        case 'stock-desc': return parseFloat(b.dataset.stock) - parseFloat(a.dataset.stock);
        case 'usage-desc': return parseFloat(b.dataset.usage) - parseFloat(a.dataset.usage);
        default:           return 0;
      }
    });

    // 3. Reorder DOM & show/hide
    const hidden = rows.filter(r => !visible.includes(r));
    hidden.forEach(r => { r.style.display = 'none'; });
    visible.forEach(r => { r.style.display = ''; tbody.appendChild(r); });

    // 4. No results message
    noResults.style.display = visible.length === 0 ? '' : 'none';

    // 5. Active filter summary
    const parts = [];
    if (activeType !== 'all') parts.push(`Type : <strong>${activeType}</strong>`);
    if (searchText) parts.push(`Recherche : <strong>"${searchText}"</strong>`);
    summary.innerHTML = parts.length
      ? `${visible.length} résultat${visible.length !== 1 ? 's' : ''} — ${parts.join(' · ')}`
      : '';
  }

  render();
})();
</script>
{% endblock %}