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

{% block title %}Centre de ressources{% endblock %}

{% block content %}
{% include '@Dashboard/resources/_styles.html.twig' %}
<div class="body-wrapper" data-controller="resource-center" data-resource-center-favorite-url-value="{{ path('dashboard_resources_favorite_toggle') }}" data-resource-center-track-url-value="{{ path('dashboard_resources_track_action') }}">
  <div class="resource-shell">
    <div class="mb-3">
      <h1 class="resource-page-title mb-1">Centre de ressources</h1>
      <p class="resource-subtitle mb-0">Tout ce dont vous avez besoin pour réussir vos partenariats.</p>
    </div>

    <div class="resource-grid">
      <div>
        <section class="resource-card mb-3">
          <div class="resource-card-body">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <h3 class="h4 mb-0">Accès rapide</h3>
              <form method="get" action="{{ path('dashboard_resources_home') }}" class="d-flex gap-2">
                <input type="search" class="form-control" style="min-width:260px" name="q" value="{{ app.request.query.get('q') }}" placeholder="Rechercher dans les ressources…">
                <button class="btn btn-light border" type="submit"><i class="ti ti-search"></i></button>
              </form>
            </div>
            <div class="quick-grid">
              {% for quick in resourceHome.quickAccess %}
                <div class="quick-item">
                  <div class="icon bg-light text-success"><i class="{{ quick.icon }}"></i></div>
                  <h4 class="h5 mb-0">{{ quick.title }}</h4>
                  <p class="text-muted mb-0">{{ quick.desc }}</p>
                  <a class="btn btn-success" href="{{ path(quick.route) }}">Utiliser</a>
                </div>
              {% endfor %}
            </div>
          </div>
        </section>

        <section class="resource-card mb-3">
          <div class="resource-card-body">
            <h3 class="h4 mb-3">Recommandé pour vous</h3>
            {% if state == 'loading' %}
              <div class="skeleton mb-2"></div>
              <div class="skeleton"></div>
            {% elseif state == 'error' %}
              <div class="alert alert-danger mb-0">Impossible de charger les recommandations pour le moment.</div>
            {% else %}
              <div class="d-grid gap-2">
                {% for item in resourceHome.recommended %}
                  <div class="resource-item">
                    <div>
                      <div class="mb-1">
                        <span class="resource-chip {{ item.type == 'modele' ? 'resource-chip-model' : 'resource-chip-guide' }}">{{ item.type|capitalize }}</span>
                      </div>
                      <div class="fw-semibold fs-5">{{ item.title }}</div>
                      <div class="text-muted">{{ item.description }}</div>
                      <div class="mt-2 d-flex gap-2">
                        {% if item.duration is defined %}<span class="badge bg-light text-dark">{{ item.duration }}</span>{% endif %}
                        {% if item.level is defined %}<span class="badge bg-light text-dark">{{ item.level }}</span>{% endif %}
                      </div>
                    </div>
                    <div class="d-flex flex-column align-items-end justify-content-between">
                      <button class="resource-fav-btn {{ item.code in favoriteCodes ? 'is-active' : '' }}" data-action="click->resource-center#toggleFavorite" data-code="{{ item.code }}"><i class="ti ti-bookmark"></i></button>
                      <button class="btn btn-success btn-sm" data-action="click->resource-center#track" data-code="{{ item.code }}" data-track-action="apply">Utiliser</button>
                    </div>
                  </div>
                {% endfor %}
              </div>
            {% endif %}
          </div>
        </section>

        <section class="resource-card mb-3">
          <div class="resource-card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h3 class="h4 mb-0">Nouveautés</h3>
              <a href="{{ path('dashboard_resources_actualites') }}" class="text-success fw-semibold">Voir tout</a>
            </div>
            <div class="d-grid gap-2">
              {% for item in resourceHome.news %}
                <div class="resource-item">
                  <div>
                    <div class="small text-muted mb-1">
                      <span class="resource-chip {{ item.is_new ? 'resource-chip-new' : 'resource-chip-guide' }}">{{ item.is_new ? 'Nouveau' : 'Guide' }}</span>
                      {{ item.source }} • {{ item.date|date('d/m/Y') }}
                    </div>
                    <div class="fw-semibold fs-5">{{ item.title }}</div>
                    <div class="text-muted">{{ item.description }}</div>
                  </div>
                  <button class="resource-fav-btn {{ item.code in favoriteCodes ? 'is-active' : '' }}" data-action="click->resource-center#toggleFavorite" data-code="{{ item.code }}"><i class="ti ti-bookmark"></i></button>
                </div>
              {% endfor %}
            </div>
          </div>
        </section>


        <section class="resource-card mb-3">
          <div class="resource-card-body">
            <h3 class="h4 mb-3">Récemment consulté</h3>
            {% if resourceHome.recent is empty %}
              <div class="text-muted">Aucun historique récent.</div>
            {% else %}
              <div class="d-grid gap-2">
                {% for row in resourceHome.recent|slice(0,5) %}
                  <div class="d-flex justify-content-between border rounded-3 p-2 bg-light-subtle">
                    <div class="small"><strong>{{ row.resource_code }}</strong> — {{ row.action_type }}</div>
                    <div class="small text-muted">{{ row.created_at|date('d/m H:i') }}</div>
                  </div>
                {% endfor %}
              </div>
            {% endif %}
          </div>
        </section>

        <section class="resource-card">
          <div class="resource-card-body">
            <h3 class="h4 mb-3">Favoris</h3>
            {% if state == 'empty' or resourceHome.favorites is empty %}
              <div class="resource-empty">
                <div class="fs-2 mb-2"><i class="ti ti-heart"></i></div>
                <div class="fw-semibold">Aucun favori pour le moment</div>
                <div>Ajoutez vos ressources préférées en cliquant sur l’icône cœur</div>
              </div>
            {% else %}
              <div class="d-grid gap-2">
                {% for item in resourceHome.favorites %}
                  <div class="resource-item">
                    <div>
                      <div class="fw-semibold">{{ item.title }}</div>
                      <div class="text-muted">{{ item.description }}</div>
                    </div>
                    <button class="btn btn-light border btn-sm" data-action="click->resource-center#track" data-code="{{ item.code }}" data-track-action="open">Utiliser</button>
                  </div>
                {% endfor %}
              </div>
            {% endif %}
          </div>
        </section>
      </div>

      <aside>
        <div class="coach-widget mb-3">
          <div class="fw-bold fs-4 mb-2"><i class="ti ti-robot me-1"></i>Coach FundUp</div>
          <div class="mb-3">Votre assistant IA pour optimiser vos partenariats</div>
          <div class="d-grid gap-2 mb-3">
            <button class="btn btn-success border text-start">Générer un pitch partenaire</button>
            <button class="btn btn-success border text-start">Vérifier ma convention</button>
            <button class="btn btn-success border text-start">Créer une séquence de relance</button>
          </div>
          <a class="btn btn-light w-100" href="{{ path('dashboard_resources_coach') }}">Ouvrir le coach</a>
        </div>

        <div class="resource-card">
          <div class="resource-card-body">
            <div class="fw-bold fs-4 mb-3"><i class="ti ti-crown text-warning me-1"></i>Parcours guidés</div>
            {% for parcours in resourceHome.parcours %}
              <div class="resource-item mb-2">
                <div class="w-100">
                  <div class="fw-semibold">{{ parcours.title }}</div>
                  <div class="d-flex justify-content-between align-items-center small text-muted mb-2">
                    <span>{{ parcours.steps }}</span>
                    <span>{{ parcours.progress }}%</span>
                  </div>
                  <div class="progress" style="height:8px"><div class="progress-bar bg-success" style="width:{{ parcours.progress }}%"></div></div>
                  <a href="{{ path('dashboard_resources_parcours') }}" class="d-inline-block mt-2 text-success fw-semibold">{{ parcours.action }} →</a>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      </aside>
    </div>
  </div>
</div>
{% endblock %}