{% extends '@App/partials/base.html.twig' %}
{% block title %}Centre de ressources{% endblock %}

{% block content %}
<div class="body-wrapper">
  <div class="container-fluid py-4">
    <style>
      .rc-grid-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
      .rc-kpi-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:1.25rem}
      .rc-kpi-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
      .rc-kpi-value{font-size:2.8rem;line-height:1.05;font-weight:800;color:#1f2937}
      .rc-kpi-sub{color:#64748b;font-size:1rem}
      .rc-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff}
      .rc-card .card-body{padding:1.5rem}
      .rc-main-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,0.75fr);gap:1rem}
      .rc-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
      .rc-progress{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden}
      .rc-progress > span{display:block;height:100%;border-radius:999px}
      .rc-table-clean td,.rc-table-clean th{padding:.8rem .2rem;border-color:#edf2f7}
      @media (max-width: 1400px){.rc-grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
      @media (max-width: 992px){.rc-main-grid,.rc-top-grid{grid-template-columns:1fr}.rc-grid-kpi{grid-template-columns:1fr}}
    </style>

    <div class="d-flex justify-content-between align-items-start gap-3 mb-4">
      <div>
        <h1 class="fw-bold mb-1" style="font-size:3rem;line-height:1.1">Centre de Ressources</h1>
        <p class="text-muted mb-0 fs-4">Pilotez l'engagement et la performance de votre bibliothèque de contenu</p>
      </div>
      <div class="d-flex gap-2">
        <a class="btn btn-light border px-4" href="{{ path('admin_resources_library') }}"><i class="ti ti-layout-grid me-1"></i>Bibliothèque</a>
        <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" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <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="rc-grid-kpi mb-4">
      <div class="rc-kpi-card">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="rc-kpi-icon" style="background:#dbeafe;color:#2563eb"><i class="ti ti-file-description"></i></div>
          <div class="text-success fw-semibold">+12%</div>
        </div>
        <div class="rc-kpi-value">{{ kpis.published }}</div>
        <div class="fs-3 fw-semibold text-dark">Ressources publiées</div>
        <div class="rc-kpi-sub">{{ kpis.draft }} en attente</div>
      </div>

      <div class="rc-kpi-card">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="rc-kpi-icon" style="background:#dcfce7;color:#16a34a"><i class="ti ti-download"></i></div>
          <div class="text-success fw-semibold">{{ kpis.downloadsGrowth }}</div>
        </div>
        <div class="rc-kpi-value">{{ kpis.downloads30|number_format(0, ',', ' ') }}</div>
        <div class="fs-3 fw-semibold text-dark">Téléchargements (30j)</div>
        <div class="rc-kpi-sub">Données réelles</div>
      </div>

      <div class="rc-kpi-card">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="rc-kpi-icon" style="background:#ede9fe;color:#7c3aed"><i class="ti ti-eye"></i></div>
          <div class="text-success fw-semibold">{{ kpis.viewsGrowth }}</div>
        </div>
        <div class="rc-kpi-value">{{ kpis.views30|number_format(0, ',', ' ') }}</div>
        <div class="fs-3 fw-semibold text-dark">Vues totales (30j)</div>
        <div class="rc-kpi-sub">Moyenne réelle</div>
      </div>

      <div class="rc-kpi-card">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="rc-kpi-icon" style="background:#ffedd5;color:#ea580c"><i class="ti ti-star"></i></div>
          <div class="text-muted fw-semibold">Stable</div>
        </div>
        <div class="rc-kpi-value">{{ kpis.rating > 0 ? (kpis.rating|number_format(1, ',', '')) ~ '/5' : '—' }}</div>
        <div class="fs-3 fw-semibold text-dark">Note moyenne</div>
        <div class="rc-kpi-sub">{{ kpis.reviewsCount }} avis</div>
      </div>
    </div>

    <div class="rc-main-grid mb-4">
      <div class="rc-card">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
              <h3 class="fw-bold mb-1" style="font-size:2.2rem">Engagement des utilisateurs</h3>
              <div class="text-muted fs-4">Vues et téléchargements sur 30 jours</div>
            </div>
            <select class="form-select" style="max-width:170px" disabled>
              <option>30 derniers jours</option>
            </select>
          </div>
          <div id="resources-engagement-chart" style="height:360px;"></div>
        </div>
      </div>

      <div class="rc-card">
        <div class="card-body">
          <h3 class="fw-bold mb-4" style="font-size:2.2rem">Top Catégories</h3>
          <div class="d-grid gap-4">
            {% set maxCategory = 1 %}
            {% for c in topCategories %}
              {% set maxCategory = max(maxCategory, c.total) %}
            {% endfor %}
            {% for c in topCategories %}
              {% set width = ((c.total / maxCategory) * 100)|round(1) %}
              <div>
                <div class="d-flex justify-content-between align-items-center mb-1">
                  <div class="fs-4 fw-semibold">{{ c.label }}</div>
                  <div class="fs-4 fw-bold">{{ c.total|number_format(0, ',', ' ') }}</div>
                </div>
                <div class="rc-progress"><span style="width:{{ width }}%;background:{{ c.color }}"></span></div>
              </div>
            {% else %}
              <div class="text-muted">Aucune catégorie disponible.</div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

    <div class="rc-top-grid">
      <div class="rc-card">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="fw-bold mb-0" style="font-size:2.2rem">Ressources les plus consultées</h3>
            <a href="{{ path('admin_resources_index') }}" class="text-success fw-semibold text-decoration-none">Voir tout</a>
          </div>
          <div class="table-responsive">
            <table class="table rc-table-clean align-middle mb-0">
              <thead>
                <tr>
                  <th>Ressource</th>
                  <th>Type</th>
                  <th class="text-end">Vues</th>
                </tr>
              </thead>
              <tbody>
                {% for row in topViews|slice(0, 6) %}
                  <tr>
                    <td>{{ row.title }}</td>
                    <td><span class="badge bg-light text-dark">{{ row.type }}</span></td>
                    <td class="text-end fw-semibold">{{ row.total }}</td>
                  </tr>
                {% else %}
                  <tr><td colspan="3" class="text-muted">Aucune donnée.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="rc-card">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="fw-bold mb-0" style="font-size:2.2rem">Retours utilisateurs récents</h3>
            <span class="badge bg-success-subtle text-success">Activité</span>
          </div>
          <div class="d-grid gap-2">
            {% for row in recentActivity|slice(0, 8) %}
              <div class="border rounded-3 p-3">
                <div class="d-flex justify-content-between align-items-center">
                  <div class="fw-semibold">{{ row.action_type }}</div>
                  <div class="small text-muted">{{ row.created_at|date('d/m H:i') }}</div>
                </div>
                <div class="small text-muted">Ressource #{{ row.resource_item_id }}{% if row.organizer_id %} · Orga #{{ row.organizer_id }}{% endif %}</div>
              </div>
            {% else %}
              <div class="text-muted">Aucun retour récent.</div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
  (function () {
    const labels = {{ engagementSeries.labels|json_encode|raw }}
    const views = {{ engagementSeries.views|json_encode|raw }}
    const downloads = {{ engagementSeries.downloads|json_encode|raw }}
    const container = document.querySelector('#resources-engagement-chart')
    if (!container || !window.ApexCharts) return

    if (container.__chartInstance) {
      container.__chartInstance.destroy()
    }

    const chart = new ApexCharts(container, {
      series: [
        { name: 'Vues', data: views },
        { name: 'Téléchargements', data: downloads }
      ],
      chart: { type: 'line', height: 360, toolbar: { show: false } },
      stroke: { curve: 'smooth', width: [4, 3] },
      colors: ['#22c55e', '#3b82f6'],
      xaxis: { categories: labels },
      grid: { borderColor: '#eef2f7' },
      legend: { position: 'bottom' },
      dataLabels: { enabled: false },
      yaxis: { labels: { formatter: (v) => Math.round(v) } },
      tooltip: { shared: true, intersect: false }
    })

    chart.render()
    container.__chartInstance = chart
  })()
</script>
{% endblock %}