{% extends '@App/partials/base.html.twig' %}

{% block title %}Bibliothèque de ressources{% endblock %}

{% block content %}
<div class="body-wrapper">
  <div class="container-fluid py-4" data-controller="resource-admin-library">
    <style>
      .lib-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
      .lib-kpi{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:1rem}
      .lib-kpi .value{font-size:2.2rem;font-weight:800;color:#111827;line-height:1.1}
      .lib-card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;overflow:hidden}
      .lib-card-cover{height:138px;display:flex;align-items:center;justify-content:center;font-size:3rem}
      .lib-view-switch .btn.active{background:#dcfce7;border-color:#bbf7d0;color:#15803d}
      .lib-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
      @media (max-width:1400px){.lib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lib-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
      @media (max-width:992px){.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
      @media (max-width:700px){.lib-grid{grid-template-columns:1fr}.lib-kpis{grid-template-columns:1fr}}
    </style>

    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
      <div>
        <h1 class="fw-bold mb-1" style="font-size:3rem;line-height:1.1">Bibliothèque de ressources</h1>
        <p class="text-muted mb-0 fs-4">{{ totals.total }} ressources disponibles pour accompagner vos utilisateurs</p>
      </div>
      <div class="d-flex gap-2">
        <a class="btn btn-light border px-4" href="{{ path('admin_resources_export_csv') }}"><i class="ti ti-download me-1"></i>Exporter</a>
        <div class="dropdown">
          <button class="btn btn-success px-4 dropdown-toggle" data-bs-toggle="dropdown"><i class="ti ti-plus me-1"></i>Nouvelle ressource</button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="{{ path('admin_modeles_new') }}">Nouveau modèle</a></li>
            <li><a class="dropdown-item" href="{{ path('admin_actualites_new') }}">Nouvelle actualité</a></li>
            <li><a class="dropdown-item" href="{{ path('admin_resources_new') }}">Nouvelle ressource</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="lib-kpis mb-3">
      <div class="lib-kpi"><div class="value">{{ totals.total }}</div><div class="text-muted fs-4">Total ressources</div></div>
      <div class="lib-kpi"><div class="value text-success">{{ totals.published }}</div><div class="text-muted fs-4">Publiées</div></div>
      <div class="lib-kpi"><div class="value text-warning">{{ totals.archived }}</div><div class="text-muted fs-4">En attente</div></div>
      <div class="lib-kpi"><div class="value text-secondary">{{ totals.draft }}</div><div class="text-muted fs-4">Brouillons</div></div>
    </div>

    <div class="card border rounded-4 mb-3">
      <div class="card-body p-4">
        <div class="row g-3 align-items-end">
          <div class="col-lg-5">
            <label class="form-label fw-semibold">Rechercher</label>
            <input type="search" class="form-control form-control-lg" placeholder="Titre, mots-clés, description..." data-resource-admin-library-target="search" data-action="input->resource-admin-library#filter">
          </div>
          <div class="col-lg-2">
            <label class="form-label fw-semibold">Catégorie</label>
            <select class="form-select form-select-lg" data-resource-admin-library-target="category" data-action="change->resource-admin-library#filter">
              <option value="">Toutes</option>
              {% set categories = [] %}
              {% for item in items %}
                {% for tag in item.tags|default([]) %}
                  {% if tag not in categories %}{% set categories = categories|merge([tag]) %}{% endif %}
                {% endfor %}
              {% endfor %}
              {% for c in categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
            </select>
          </div>
          <div class="col-lg-2">
            <label class="form-label fw-semibold">Statut</label>
            <select class="form-select form-select-lg" data-resource-admin-library-target="status" data-action="change->resource-admin-library#filter">
              <option value="">Tous</option>
              <option value="PUBLISHED">Publié</option>
              <option value="DRAFT">Brouillon</option>
              <option value="ARCHIVED">Archivé</option>
            </select>
          </div>
          <div class="col-lg-2">
            <label class="form-label fw-semibold">Type</label>
            <select class="form-select form-select-lg" data-resource-admin-library-target="type" data-action="change->resource-admin-library#filter">
              <option value="">Tous</option>
              <option value="NEWS">Actualité</option>
              <option value="GUIDE">Guide</option>
              <option value="TEMPLATE">Modèle</option>
              <option value="KIT">Kit</option>
              <option value="PATHWAY">Parcours</option>
            </select>
          </div>
          <div class="col-lg-1 text-end">
            <button class="btn btn-link text-success fw-semibold text-decoration-none" type="button" data-action="click->resource-admin-library#reset">Réinitialiser</button>
          </div>
        </div>

        <hr class="my-3">

        <div class="d-flex justify-content-end align-items-center gap-2 lib-view-switch">
          <span class="text-muted">Affichage:</span>
          <button type="button" class="btn btn-light border active" data-resource-admin-library-target="cardsBtn" data-action="click->resource-admin-library#showCards"><i class="ti ti-layout-grid"></i></button>
          <button type="button" class="btn btn-light border" data-resource-admin-library-target="listBtn" data-action="click->resource-admin-library#showList"><i class="ti ti-list"></i></button>
        </div>
      </div>
    </div>

    <div data-resource-admin-library-target="cardsView">
      <div class="lib-grid">
        {% for item in items %}
          {% set firstTag = (item.tags|default([])|first) ?: 'Sans catégorie' %}
          {% set search = (item.title ~ ' ' ~ (item.excerpt ?: '') ~ ' ' ~ (item.tags|default([])|join(' ')))|lower %}
          {% set color = item.type == 'NEWS' ? '#fee2e2' : (item.type == 'TEMPLATE' ? '#dbeafe' : (item.type == 'GUIDE' ? '#ede9fe' : '#ffedd5')) %}
          <article class="lib-card" data-resource-admin-library-target="card" data-search="{{ search }}" data-category="{{ firstTag }}" data-status="{{ item.status }}" data-type="{{ item.type }}">
            <div class="lib-card-cover" style="background:{{ color }}"><i class="ti ti-file-description text-muted"></i></div>
            <div class="p-3">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="badge bg-light text-dark">{{ firstTag }}</span>
                <span class="badge {{ item.status == 'PUBLISHED' ? 'bg-success-subtle text-success' : (item.status == 'DRAFT' ? 'bg-secondary-subtle text-secondary' : 'bg-warning-subtle text-warning') }}">{{ item.status }}</span>
              </div>
              <h4 class="fs-4 fw-bold mb-1">{{ item.title }}</h4>
              <p class="text-muted mb-3">{{ item.excerpt ?: 'Aucun résumé.' }}</p>
              <div class="d-flex justify-content-between text-muted small mb-2">
                <span><i class="ti ti-eye me-1"></i>{{ item.viewsCount|number_format(0, ',', ' ') }}</span>
                <span><i class="ti ti-download me-1"></i>{{ item.downloadsCount|number_format(0, ',', ' ') }}</span>
                <span><i class="ti ti-star me-1"></i>{{ item.favoritesCount|number_format(0, ',', ' ') }}</span>
              </div>
              {% set openPath = item.type == 'TEMPLATE'
                ? path('admin_modeles_edit', {id: item.id})
                : (item.type == 'NEWS'
                  ? path('admin_actualites_edit', {id: item.id})
                  : path('admin_resources_edit', {id: item.id})) %}
              <a class="btn btn-sm btn-light border w-100" href="{{ openPath }}">Ouvrir</a>
            </div>
          </article>
        {% else %}
          <div class="text-muted">Aucune ressource</div>
        {% endfor %}
      </div>
    </div>

    <div class="d-none" data-resource-admin-library-target="listView">
      <div class="card border rounded-4">
        <div class="table-responsive">
          <table class="table align-middle mb-0">
            <thead><tr><th>Titre</th><th>Catégorie</th><th>Statut</th><th>Type</th><th class="text-end">Vues</th><th class="text-end">Téléch.</th><th></th></tr></thead>
            <tbody>
              {% for item in items %}
                {% set firstTag = (item.tags|default([])|first) ?: 'Sans catégorie' %}
                {% set search = (item.title ~ ' ' ~ (item.excerpt ?: '') ~ ' ' ~ (item.tags|default([])|join(' ')))|lower %}
                <tr data-resource-admin-library-target="row" data-search="{{ search }}" data-category="{{ firstTag }}" data-status="{{ item.status }}" data-type="{{ item.type }}">
                  <td>{{ item.title }}</td>
                  <td>{{ firstTag }}</td>
                  <td>{{ item.status }}</td>
                  <td>{{ item.type }}</td>
                  <td class="text-end">{{ item.viewsCount|number_format(0, ',', ' ') }}</td>
                  <td class="text-end">{{ item.downloadsCount|number_format(0, ',', ' ') }}</td>
                  {% set openPath = item.type == 'TEMPLATE'
                    ? path('admin_modeles_edit', {id: item.id})
                    : (item.type == 'NEWS'
                      ? path('admin_actualites_edit', {id: item.id})
                      : path('admin_resources_edit', {id: item.id})) %}
                  <td class="text-end"><a class="btn btn-sm btn-light border" href="{{ openPath }}">Ouvrir</a></td>
                </tr>
              {% else %}
                <tr><td colspan="7" class="text-muted">Aucune ressource.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

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