{% extends "dashboard/base.html" %}
{% load humanize %}

{% block title %}Ringkasan — Panel Admin{% endblock %}

{% block header_actions %}
  <a href="{% url 'dashboard:post_create' %}" class="btn btn-primary btn-shine !py-2.5 !px-5 !text-xs">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
    <span class="hidden sm:inline">Tulis Postingan</span>
  </a>
{% endblock %}

{% block content %}

<!-- Sapaan -->
<div class="reveal card card-glow relative mb-6 overflow-hidden p-6 sm:p-8">
  <div class="orb orb-a -right-10 -top-10 h-52 w-52"></div>
  <div class="relative">
    <p class="text-xs font-bold uppercase tracking-[0.2em] text-brand-500">Panel Kontrol</p>
    <h2 class="mt-2 font-display text-2xl font-extrabold text-neutral-50 sm:text-3xl">
      Halo, <span class="text-ember">{{ profile.full_name }}</span> 👋
    </h2>
    <p class="mt-2 max-w-lg text-sm text-neutral-400">
      Semua isi website bisa kamu ubah dari sini — tanpa menyentuh kode sama sekali.
    </p>
  </div>
</div>

<!-- Statistik -->
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  {% include "dashboard/partials/stat_card.html" with label="Total Postingan" value=count_post sub=post_summary url='dashboard:post_list' delay=0 %}
  {% include "dashboard/partials/stat_card.html" with label="Total Dilihat" value=total_views sub="akumulasi semua postingan" url='dashboard:post_list' delay=1 %}
  {% include "dashboard/partials/stat_card.html" with label="Pesan Belum Dibaca" value=unread_messages sub="dari form kontak" url='dashboard:inbox' delay=2 %}
  {% include "dashboard/partials/stat_card.html" with label="Komentar Pending" value=pending_comments sub="menunggu moderasi" url='dashboard:comment_list' delay=3 %}
</div>

<div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  {% include "dashboard/partials/stat_card.html" with label="Pengalaman Kerja" value=count_experience sub="riwayat karier" url='dashboard:experience_list' delay=0 %}
  {% include "dashboard/partials/stat_card.html" with label="Proyek" value=count_project sub="portofolio" url='dashboard:project_list' delay=1 %}
  {% include "dashboard/partials/stat_card.html" with label="Skill" value=count_skill sub="keahlian terdaftar" url='dashboard:skill_list' delay=2 %}
  {% include "dashboard/partials/stat_card.html" with label="Sertifikat" value=count_certificate sub="sertifikasi" url='dashboard:certificate_list' delay=3 %}
</div>

<!-- Aksi cepat -->
<div class="reveal mt-8">
  <h3 class="mb-3 font-display text-sm font-bold uppercase tracking-[0.16em] text-neutral-500">Aksi Cepat</h3>
  <div class="flex flex-wrap gap-2.5">
    <a href="{% url 'dashboard:post_create' %}" class="btn btn-ghost !text-xs">+ Postingan</a>
    <a href="{% url 'dashboard:experience_create' %}" class="btn btn-ghost !text-xs">+ Pengalaman Kerja</a>
    <a href="{% url 'dashboard:project_create' %}" class="btn btn-ghost !text-xs">+ Proyek</a>
    <a href="{% url 'dashboard:skill_create' %}" class="btn btn-ghost !text-xs">+ Skill</a>
    <a href="{% url 'dashboard:certificate_create' %}" class="btn btn-ghost !text-xs">+ Sertifikat</a>
    <a href="{% url 'dashboard:profile' %}" class="btn btn-ghost !text-xs">Edit Profil</a>
  </div>
</div>

<!-- Panel bawah -->
<div class="mt-8 grid gap-5 lg:grid-cols-3">

  <div class="reveal card p-5 lg:col-span-2">
    <div class="mb-4 flex items-center justify-between">
      <h3 class="font-display text-sm font-bold text-neutral-100">Postingan Terbaru</h3>
      <a href="{% url 'dashboard:post_list' %}" class="text-xs font-semibold text-brand-400 hover:text-gold-400">Semua →</a>
    </div>
    <div class="space-y-2">
      {% for p in recent_posts %}
        <a href="{% url 'dashboard:post_update' p.pk %}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 transition hover:bg-white/5">
          <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-white/5 text-xs font-bold text-brand-400">{{ p.title|slice:":1"|upper }}</span>
          <span class="min-w-0 flex-1">
            <span class="block truncate text-sm font-medium text-neutral-200">{{ p.title }}</span>
            <span class="block text-xs text-neutral-600">{{ p.created_at|naturaltime }} · {{ p.views_count }} dilihat</span>
          </span>
          <span class="shrink-0 rounded-full px-2.5 py-1 text-[0.65rem] font-bold uppercase {% if p.status == 'published' %}bg-emerald-500/12 text-emerald-400{% else %}bg-amber-500/12 text-amber-400{% endif %}">{{ p.get_status_display }}</span>
        </a>
      {% empty %}
        <p class="py-6 text-center text-sm text-neutral-600">Belum ada postingan. <a href="{% url 'dashboard:post_create' %}" class="text-brand-400 hover:underline">Tulis yang pertama →</a></p>
      {% endfor %}
    </div>
  </div>

  <div class="reveal card p-5" data-delay="100">
    <div class="mb-4 flex items-center justify-between">
      <h3 class="font-display text-sm font-bold text-neutral-100">Pesan Terbaru</h3>
      <a href="{% url 'dashboard:inbox' %}" class="text-xs font-semibold text-brand-400 hover:text-gold-400">Semua →</a>
    </div>
    <div class="space-y-2">
      {% for m in recent_messages %}
        <a href="{% url 'dashboard:message_detail' m.pk %}" class="flex items-start gap-3 rounded-xl px-3 py-2.5 transition hover:bg-white/5">
          <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500/25 to-gold-400/15 text-xs font-bold text-brand-400">{{ m.initial }}</span>
          <span class="min-w-0 flex-1">
            <span class="block truncate text-sm font-medium {% if not m.is_read %}text-neutral-100{% else %}text-neutral-400{% endif %}">{{ m.name }}</span>
            <span class="block truncate text-xs text-neutral-600">{{ m.subject|default:m.message|truncatechars:36 }}</span>
          </span>
          {% if not m.is_read %}<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-brand-500"></span>{% endif %}
        </a>
      {% empty %}
        <p class="py-6 text-center text-sm text-neutral-600">Belum ada pesan masuk.</p>
      {% endfor %}
    </div>
  </div>
</div>

{% if recent_comments %}
  <div class="reveal card mt-5 p-5">
    <div class="mb-4 flex items-center justify-between">
      <h3 class="font-display text-sm font-bold text-neutral-100">Komentar Terbaru</h3>
      <a href="{% url 'dashboard:comment_list' %}" class="text-xs font-semibold text-brand-400 hover:text-gold-400">Moderasi →</a>
    </div>
    <div class="space-y-2">
      {% for c in recent_comments %}
        <div class="flex items-start gap-3 rounded-xl px-3 py-2.5 hover:bg-white/5">
          <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-white/5 text-xs font-bold text-neutral-400">{{ c.initial }}</span>
          <div class="min-w-0 flex-1">
            <p class="text-sm font-medium text-neutral-200">{{ c.name }} <span class="text-xs font-normal text-neutral-600">di {{ c.post.title|truncatechars:30 }}</span></p>
            <p class="truncate text-xs text-neutral-500">{{ c.body }}</p>
          </div>
          <span class="shrink-0 rounded-full px-2.5 py-1 text-[0.65rem] font-bold uppercase {% if c.is_approved %}bg-emerald-500/12 text-emerald-400{% else %}bg-amber-500/12 text-amber-400{% endif %}">
            {% if c.is_approved %}Tampil{% else %}Pending{% endif %}
          </span>
        </div>
      {% endfor %}
    </div>
  </div>
{% endif %}

{% endblock %}