{% extends "backoffice/base.html" %}
{% block page_title %}Tableau de bord{% endblock %}
{% block breadcrumb %}<span class="font-semibold text-brand-900">Tableau de bord</span>{% endblock %}
{% block content %}
<div class="mb-8 overflow-hidden rounded-2xl bg-brand-900 p-6 text-white md:p-8">
  <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
    <div>
      <p class="text-sm font-semibold text-gold-400">{{ now|date:"l d F Y" }}</p>
      <h1 class="mt-1 text-2xl font-extrabold !text-white md:text-3xl">Bonjour {{ user.get_short_name }} 👋</h1>
      <p class="mt-1 text-sm text-brand-200">
        {% if can.editeur %}{{ review_queue|length }} contenu{{ review_queue|length|pluralize }} en attente de relecture · {{ stats.pending_comments }} commentaire{{ stats.pending_comments|pluralize }} à modérer
        {% else %}{{ my_stats.total }} article{{ my_stats.total|pluralize }} · {{ my_stats.review }} en relecture · {{ my_stats.published }} publié{{ my_stats.published|pluralize }}{% endif %}
      </p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{% url 'editorial:article-create' %}" class="btn btn-accent">{% icon "plus" %} Nouvel article</a>
      <a href="{% url 'editorial:annonce-create' %}" class="btn bg-white/10 text-white hover:bg-white/20">{% icon "megaphone" %} Nouvelle annonce</a>
    </div>
  </div>
</div>

{% if can.editeur %}
<div class="mb-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <c-stat label="Articles en ligne" value="{{ stats.published }}" icon="newspaper" href="{% url 'editorial:article-list' %}?statut=publie" hint="+{{ stats.published_week }} cette semaine" />
  <c-stat label="Lectures cumulées" value="{{ stats.views|default:0 }}" icon="eye" />
  <c-stat label="Commentaires à modérer" value="{{ stats.pending_comments }}" icon="chat" tone="{% if stats.pending_comments %}gold{% endif %}" href="{% url 'engagement:comment-list' %}" />
  <c-stat label="Messages non lus" value="{{ stats.unread }}" icon="inbox" tone="{% if stats.unread %}red{% endif %}" href="{% url 'contact:message-list' %}?filtre=non-lus" hint="{{ stats.subscribers }} abonnés newsletter" />
</div>

<div class="grid gap-6 xl:grid-cols-3">
  <c-card title="File de relecture" subtitle="Contenus soumis par les rédacteurs" class="xl:col-span-2" body_class="p-0">
    <c-slot name="toolbar"><a href="{% url 'editorial:article-list' %}?statut=relecture" class="text-sm font-semibold text-brand-700 hover:underline">Tout voir</a></c-slot>
    {% if review_queue %}
    <ul class="divide-y divide-slate-100">
      {% for o in review_queue %}
      <li class="flex items-center gap-4 px-5 py-3">
        <div class="size-12 shrink-0 overflow-hidden rounded-lg bg-slate-100">{% picture o.image_principale "sm" "size-full object-cover" sizes="48px" %}</div>
        <div class="min-w-0 flex-1">
          <a href="{{ o.get_manage_url }}" class="line-clamp-1 font-semibold text-brand-900 hover:text-brand-600">{{ o.titre }}</a>
          <p class="text-xs text-slate-500">{{ o.auteur.name }} · soumis {{ o.soumis_le|timesince }}{% if o.categorie %} · {{ o.categorie.nom }}{% endif %}</p>
        </div>
        <a href="{{ o.get_manage_url }}" class="btn btn-secondary btn-sm">Relire</a>
      </li>
      {% endfor %}
    </ul>
    {% else %}<c-empty icon="check-circle" title="Rien à relire">Aucun contenu en attente de validation.</c-empty>{% endif %}
  </c-card>

  <c-card title="Publications programmées" body_class="p-0">
    {% if scheduled %}
    <ul class="divide-y divide-slate-100">
      {% for a in scheduled %}
      <li class="px-5 py-3">
        <a href="{{ a.get_manage_url }}" class="line-clamp-2 text-sm font-semibold text-brand-900 hover:text-brand-600">{{ a.titre }}</a>
        <p class="mt-0.5 flex items-center gap-1 text-xs text-sky-700">{% icon "clock" "size-3.5" %} {{ a.publie_le|date:"l d/m à H:i" }}</p>
      </li>
      {% endfor %}
    </ul>
    {% else %}<p class="p-5 text-sm text-slate-500">Aucune publication programmée.</p>{% endif %}
  </c-card>

  <c-card title="Les plus lus" body_class="p-0">
    <ol class="divide-y divide-slate-100">
      {% for a in top_articles %}
      <li class="flex items-center gap-3 px-5 py-3">
        <span class="w-6 text-lg font-extrabold {% if forloop.first %}text-signal-500{% else %}text-brand-200{% endif %}">{{ forloop.counter }}</span>
        <div class="min-w-0 flex-1"><a href="{{ a.get_manage_url }}" class="line-clamp-1 text-sm font-semibold text-brand-900 hover:text-brand-600">{{ a.titre }}</a><p class="text-xs text-slate-500">{{ a.categorie.nom }}</p></div>
        <span class="text-sm font-bold tabular-nums text-brand-800">{{ a.vues }}</span>
      </li>
      {% empty %}<li class="p-5 text-sm text-slate-500">Pas encore de lectures.</li>{% endfor %}
    </ol>
  </c-card>

  <c-card title="Articles publiés par rubrique">
    <ul class="space-y-3">
      {% for c, pct in categories %}
      <li>
        <div class="mb-1 flex justify-between text-sm"><span class="font-medium text-brand-900">{{ c.nom }}</span><span class="font-semibold tabular-nums text-slate-500">{{ c.n }}</span></div>
        <div class="h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-brand-700" style="width: {{ pct }}%"></div></div>
      </li>
      {% empty %}<li class="text-sm text-slate-500">Aucun article publié.</li>{% endfor %}
    </ul>
  </c-card>

  <c-card title="À modérer & messages" body_class="p-0">
    <ul class="divide-y divide-slate-100">
      {% for c in pending_comments %}
      <li class="px-5 py-3"><p class="text-sm"><span class="font-semibold text-brand-900">{{ c.author_name }}</span> <span class="text-slate-500">sur {{ c.article.titre|truncatechars:40 }}</span></p><p class="line-clamp-1 text-xs text-slate-500">{{ c.contenu }}</p></li>
      {% endfor %}
      {% for m in latest_messages %}
      <li class="px-5 py-3"><a href="{% url 'contact:message-detail' m.pk %}" class="block hover:text-brand-600"><p class="text-sm {% if not m.lu %}font-bold{% endif %} text-brand-900">{% icon "mail" "inline size-4 text-slate-400" %} {{ m.sujet|truncatechars:45 }}</p><p class="text-xs text-slate-500">{{ m.nom }} · {{ m.created_at|timesince }}</p></a></li>
      {% endfor %}
      {% if not pending_comments and not latest_messages %}<li class="p-5 text-sm text-slate-500">Rien de nouveau.</li>{% endif %}
    </ul>
  </c-card>
</div>
{% endif %}

<div class="{% if can.editeur %}mt-6{% endif %}">
  <c-card title="Mes contenus en cours" subtitle="Brouillons et contenus en relecture" body_class="p-0">
    <c-slot name="toolbar"><a href="{% url 'editorial:article-list' %}?statut=brouillon" class="text-sm font-semibold text-brand-700 hover:underline">Mes brouillons</a></c-slot>
    {% if my_drafts %}
    <ul class="divide-y divide-slate-100">
      {% for a in my_drafts %}
      <li class="flex items-center justify-between gap-3 px-5 py-3">
        <div class="min-w-0"><a href="{{ a.get_manage_url }}" class="line-clamp-1 font-semibold text-brand-900 hover:text-brand-600">{{ a.titre }}</a><p class="text-xs text-slate-500">Modifié {{ a.updated_at|timesince }}</p></div>
        <c-status :obj="a" />
      </li>
      {% endfor %}
    </ul>
    {% else %}<c-empty icon="pencil" title="Aucun brouillon en cours"><c-slot name="toolbar"><c-button href="{% url 'editorial:article-create' %}" icon="plus">Écrire un article</c-button></c-slot></c-empty>{% endif %}
  </c-card>
</div>
{% endblock %}