{% extends "madga/studio/base.html" %}
{% load i18n humanize madga_studio_tags %}

{% block title %}{% trans "Dashboard" %} · {{ site.name|default:"MADGA" }}{% endblock %}
{% block breadcrumbs %}<span class="crumb is-current">{% trans "Dashboard" %}</span>{% endblock %}

{% block content %}
<div class="madga-page">
  <div style="margin-bottom: 28px;">
    <h1 class="madga-page-title">{{ greeting|default:_("Hello") }}, {{ request.user.first_name|default:request.user.username }}</h1>
    <p class="madga-page-subtitle" style="margin-top:8px;">
      <span style="color:var(--fg-3);">{% now "l, j F Y" %}</span>
      {% if stats.draft or stats.scheduled %}
        ·
        {% blocktrans count drafts=stats.draft|default:0 with scheduled=stats.scheduled|default:0 trimmed %}
          You have <strong style="color:var(--fg-0); font-weight:500;">{{ drafts }} draft</strong>
        {% plural %}
          You have <strong style="color:var(--fg-0); font-weight:500;">{{ drafts }} drafts</strong>
        {% endblocktrans %}
        {% if stats.draft and stats.scheduled %} {% trans "and" %} {% endif %}
        {% if stats.scheduled %}
          {% blocktrans count n=stats.scheduled trimmed %}
            <strong style="color:var(--fg-0); font-weight:500;">{{ n }} scheduled</strong>
          {% plural %}
            <strong style="color:var(--fg-0); font-weight:500;">{{ n }} scheduled</strong>
          {% endblocktrans %}
        {% endif %}.
      {% endif %}
    </p>
  </div>

  <div class="madga-stat-grid">
    {# Total #}
    <div class="madga-stat-card">
      <div class="madga-stat-label">{% studio_icon "post" size=13 %} {% trans "Total posts" %}</div>
      <div class="madga-stat-value">{{ stats.total|default:0 }}</div>
      {% if stats.created_last_30d %}
        <div class="madga-stat-delta up">{% studio_icon "chevron-up" size=11 stroke=2.5 %} {% blocktrans with n=stats.created_last_30d %}+{{ n }} in 30 days{% endblocktrans %}</div>
      {% else %}
        <div class="madga-stat-meta">{% trans "No activity yet" %}</div>
      {% endif %}
      {% if stats.spark_total %}
        <svg class="madga-stat-spark" width="90" height="28" viewBox="0 0 90 28" preserveAspectRatio="none">
          <path class="line" d="{{ stats.spark_total }}"></path>
        </svg>
      {% endif %}
    </div>

    {# Published #}
    <div class="madga-stat-card">
      <div class="madga-stat-label">{% studio_icon "check" size=13 %} {% trans "Published" %}</div>
      <div class="madga-stat-value">{{ stats.published|default:0 }}</div>
      {% if stats.published_last_7d %}
        <div class="madga-stat-delta up">{% studio_icon "chevron-up" size=11 stroke=2.5 %} {% blocktrans with n=stats.published_last_7d %}+{{ n }} this week{% endblocktrans %}</div>
      {% else %}
        <div class="madga-stat-meta">{% trans "Nothing published recently" %}</div>
      {% endif %}
      {% if stats.spark_published %}
        <svg class="madga-stat-spark" width="90" height="28" viewBox="0 0 90 28" preserveAspectRatio="none">
          <path class="line" d="{{ stats.spark_published }}"></path>
        </svg>
      {% endif %}
    </div>

    {# Drafts #}
    <div class="madga-stat-card">
      <div class="madga-stat-label">{% studio_icon "edit" size=13 %} {% trans "Drafts" %}</div>
      <div class="madga-stat-value">{{ stats.draft|default:0 }}</div>
      <div class="madga-stat-meta">
        {% blocktrans count n=stats.scheduled|default:0 %}{{ n }} scheduled{% plural %}{{ n }} scheduled{% endblocktrans %}
      </div>
      {% if stats.spark_drafts %}
        <svg class="madga-stat-spark" width="90" height="28" viewBox="0 0 90 28" preserveAspectRatio="none">
          <path class="line" d="{{ stats.spark_drafts }}"></path>
        </svg>
      {% endif %}
    </div>

    {# Views #}
    <div class="madga-stat-card">
      <div class="madga-stat-label">{% studio_icon "eye" size=13 %} {% trans "Total views" %}</div>
      <div class="madga-stat-value">{{ stats.views_total|default:0 }}</div>
      {% if stats.views_delta_pct is not None %}
        {% if stats.views_delta_pct >= 0 %}
          <div class="madga-stat-delta up">{% studio_icon "chevron-up" size=11 stroke=2.5 %} {% blocktrans with pct=stats.views_delta_pct %}+{{ pct }}% vs last month{% endblocktrans %}</div>
        {% else %}
          <div class="madga-stat-delta down">{% studio_icon "chevron-down" size=11 stroke=2.5 %} {% blocktrans with pct=stats.views_delta_pct %}{{ pct }}% vs last month{% endblocktrans %}</div>
        {% endif %}
      {% else %}
        <div class="madga-stat-meta">{% trans "No history yet" %}</div>
      {% endif %}
      {% if stats.spark_views %}
        <svg class="madga-stat-spark" width="90" height="28" viewBox="0 0 90 28" preserveAspectRatio="none">
          <path class="line" d="{{ stats.spark_views }}"></path>
        </svg>
      {% endif %}
    </div>
  </div>

  <div style="display:grid; grid-template-columns: 1.6fr 1fr; gap:20px;">
    <div class="madga-card" style="padding:0;">
      <div style="padding:18px 22px; display:flex; align-items:flex-start; gap:12px; border-bottom:1px solid var(--border);">
        <div>
          <h2 class="madga-card-title">{% trans "Recent posts" %}</h2>
          <p class="madga-card-subtitle">{% trans "Latest on this site" %}</p>
        </div>
        <div class="madga-card-spacer"></div>
        {% studio_btn label=_("View all") href="/studio/posts/" variant="ghost" size="sm" icon="chevron-right" %}
      </div>
      <div>
        {% for post in recent_posts %}
        <a href="{% url 'madga_studio:post_edit' pk=post.pk %}" style="display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit;">
          <div style="width:42px; height:42px; border-radius:8px; background: {{ post.id|thumb_gradient }}; flex-shrink:0;"></div>
          <div style="flex:1; min-width:0;">
            <div style="font-size:13.5px; font-weight:500; color:var(--fg-0); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ post.title|default:_("Untitled") }}</div>
            <div style="display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--fg-2);">
              {% studio_badge post.status post.get_status_display %}
              <span>{{ post.author.username|default:"—" }}</span>
              <span style="width:2px; height:2px; background:var(--fg-3); border-radius:50%;"></span>
              <span>{{ post.updated_at|date:"M j" }}</span>
            </div>
          </div>
          {% if post.status == 'published' %}
            <div style="display:flex; align-items:center; gap:5px; color:var(--fg-2); font-size:12px; font-variant-numeric:tabular-nums;">
              {% studio_icon "eye" size=13 stroke=2 %}{{ post.views }}
            </div>
          {% endif %}
        </a>
        {% empty %}
          {% studio_empty title=_("No posts yet") message=_("Create the first one and it'll show up here.") action_label=_("New post") action_href="/studio/posts/new/" %}
        {% endfor %}
      </div>
    </div>

    <div class="madga-card" style="padding:0;">
      <div style="padding:18px 22px; border-bottom:1px solid var(--border);">
        <h2 class="madga-card-title">{% trans "Activity" %}</h2>
        <p class="madga-card-subtitle">{% trans "Latest changes on this site" %}</p>
      </div>
      {% if recent_activity %}
        {% for ev in recent_activity %}
          <a href="{{ ev.url }}" style="display:flex; gap:12px; padding:14px 22px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; align-items:flex-start;">
            <div style="width:28px; height:28px; border-radius:50%; background: {{ ev.title|thumb_gradient }}; flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:600;">
              {{ ev.title|first|upper|default:"·" }}
            </div>
            <div style="min-width:0; flex:1;">
              <div style="font-size:13px; color:var(--fg-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                <strong style="font-weight:500;">{{ ev.label }}</strong>: {{ ev.title }}
              </div>
              <div style="font-size:11.5px; color:var(--fg-3); margin-top:3px;">{{ ev.when|naturaltime }}</div>
            </div>
          </a>
        {% endfor %}
      {% else %}
        <div style="padding:24px 22px; font-size:12.5px; color:var(--fg-2); text-align:center;">
          {% trans "When you publish or upload something, it'll show up here." %}
        </div>
      {% endif %}
    </div>
  </div>
</div>

<style>
  @media (max-width: 900px) {
    .madga-page > div[style*="grid-template-columns: 1.6fr 1fr"] { grid-template-columns: 1fr !important; }
  }
</style>
{% endblock %}