{% extends "helpapp/base_help.html" %}

{% block title %}Dashboard — {{ helpapp_brand_name|default:"Help Center" }}{% endblock %}

{% block content %}
<style>
  .helpapp-stat-card { min-width: 0; }

  .helpapp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 9999px;
    padding: .125rem .625rem;
    font-size: .75rem;
    font-weight: 600;
  }

  .helpapp-quick-link:focus-visible,
  .helpapp-row-link:focus-visible {
    outline: 2px solid var(--helpapp-primary);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .helpapp-quick-link { transition: none !important; }
  }
</style>

<div class="max-w-6xl mx-auto">

  <div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

    <div>
      <h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
        Dashboard
      </h1>
      <p class="mt-1 text-slate-500">
        Everything about your Help Center, at a glance.
      </p>
    </div>

    <a href="{% url 'admin:index' %}"
       class="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90"
       style="background-color:var(--helpapp-primary)">
      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.383c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.383a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.89-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.383c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.226-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd" />
      </svg>
      Open Django Admin
    </a>

  </div>

  <!-- KPI cards -->
  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">

    <div class="helpapp-stat-card rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
      <p class="text-sm text-slate-500">Articles</p>
      <p class="mt-2 text-3xl font-bold text-slate-900">{{ total_articles }}</p>
      <p class="mt-1 text-xs text-slate-500">
        {{ published_count }} published · {{ draft_count }} draft
      </p>
    </div>

    <div class="helpapp-stat-card rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
      <p class="text-sm text-slate-500">Categories</p>
      <p class="mt-2 text-3xl font-bold text-slate-900">{{ total_categories }}</p>
      <p class="mt-1 text-xs text-slate-500">Used to organize articles</p>
    </div>

    <div class="helpapp-stat-card rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
      <p class="text-sm text-slate-500">Feedback</p>
      <p class="mt-2 text-3xl font-bold text-slate-900">
        {% if helpful_rate is not None %}{{ helpful_rate }}%{% else %}—{% endif %}
      </p>
      <p class="mt-1 text-xs text-slate-500">
        {% if total_feedback %}found helpful ({{ total_feedback }} responses){% else %}no responses yet{% endif %}
      </p>
    </div>

    <div class="helpapp-stat-card rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
      <p class="text-sm text-slate-500">Announcements</p>
      <p class="mt-2 text-3xl font-bold text-slate-900">{{ active_announcements|length }}</p>
      <p class="mt-1 text-xs text-slate-500">Currently active</p>
    </div>

  </div>

  <!-- Quick actions -->
  <div class="mt-8 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">

    <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
      Quick actions
    </h2>

    <div class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">

      <a href="{% url 'admin:helpapp_helparticle_add' %}"
         class="helpapp-quick-link flex flex-col items-center gap-2 rounded-2xl border border-slate-100 px-3 py-4 text-center text-sm font-medium text-slate-600 transition hover:border-slate-200 hover:bg-slate-50">
        <svg class="h-5 w-5" style="color:var(--helpapp-primary)" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
        </svg>
        New Article
      </a>

      <a href="{% url 'admin:helpapp_helpcategory_add' %}"
         class="helpapp-quick-link flex flex-col items-center gap-2 rounded-2xl border border-slate-100 px-3 py-4 text-center text-sm font-medium text-slate-600 transition hover:border-slate-200 hover:bg-slate-50">
        <svg class="h-5 w-5" style="color:var(--helpapp-primary)" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
        </svg>
        New Category
      </a>

      <a href="{% url 'admin:helpapp_announcement_add' %}"
         class="helpapp-quick-link flex flex-col items-center gap-2 rounded-2xl border border-slate-100 px-3 py-4 text-center text-sm font-medium text-slate-600 transition hover:border-slate-200 hover:bg-slate-50">
        <svg class="h-5 w-5" style="color:var(--helpapp-primary)" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.404 14.596A6.5 6.5 0 1114.596 5.404 6.5 6.5 0 015.404 14.596zM10 6a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 0110 6z" clip-rule="evenodd" />
        </svg>
        New Announcement
      </a>

      <a href="{% url 'admin:helpapp_contextualhint_add' %}"
         class="helpapp-quick-link flex flex-col items-center gap-2 rounded-2xl border border-slate-100 px-3 py-4 text-center text-sm font-medium text-slate-600 transition hover:border-slate-200 hover:bg-slate-50">
        <svg class="h-5 w-5" style="color:var(--helpapp-primary)" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
        </svg>
        New Hint
      </a>

      <a href="{% url 'admin:helpapp_helpfeedback_changelist' %}"
         class="helpapp-quick-link flex flex-col items-center gap-2 rounded-2xl border border-slate-100 px-3 py-4 text-center text-sm font-medium text-slate-600 transition hover:border-slate-200 hover:bg-slate-50">
        <svg class="h-5 w-5" style="color:var(--helpapp-primary)" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8.75-3.25a.75.75 0 011.5 0v3.5a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 11-1.06-1.06l2.03-2.03V6.75z" clip-rule="evenodd" />
        </svg>
        All Feedback
      </a>

    </div>

  </div>

  <!-- Main content -->
  <div class="mt-8 grid gap-8 lg:grid-cols-3">

    <!-- Recent articles -->
    <div class="rounded-3xl border border-slate-200 bg-white shadow-sm lg:col-span-2">

      <div class="flex items-center justify-between border-b border-slate-100 px-6 py-5">
        <h2 class="font-semibold text-slate-900">Recent articles</h2>
        <a href="{% url 'admin:helpapp_helparticle_changelist' %}"
           class="helpapp-row-link text-sm font-medium" style="color:var(--helpapp-primary)">
          View all
        </a>
      </div>

      {% if recent_articles %}
      <ul class="divide-y divide-slate-100">

        {% for article in recent_articles %}
        <li>
          <a href="{% url 'admin:helpapp_helparticle_change' article.pk %}"
             class="helpapp-row-link flex items-center justify-between gap-4 px-6 py-4 transition hover:bg-slate-50">

            <div class="min-w-0">
              <p class="truncate font-medium text-slate-800">{{ article.title }}</p>
              <p class="mt-0.5 text-xs text-slate-500">
                {{ article.category.name|default:"Uncategorized" }} · updated {{ article.updated_at|date:"M j, Y" }}
              </p>
            </div>

            <span class="helpapp-status-pill shrink-0
              {% if article.status == 'published' %}bg-emerald-50 text-emerald-700
              {% else %}bg-amber-50 text-amber-700{% endif %}">
              {{ article.get_status_display }}
            </span>

          </a>
        </li>
        {% endfor %}

      </ul>
      {% else %}
      <p class="px-6 py-8 text-center text-sm text-slate-400">
        No articles yet.
      </p>
      {% endif %}

    </div>

    <!-- Side column: announcements + feedback -->
    <div class="space-y-8">

      <div class="rounded-3xl border border-slate-200 bg-white shadow-sm">

        <div class="flex items-center justify-between border-b border-slate-100 px-6 py-5">
          <h2 class="font-semibold text-slate-900">Active announcements</h2>
          <a href="{% url 'admin:helpapp_announcement_changelist' %}"
             class="helpapp-row-link text-sm font-medium" style="color:var(--helpapp-primary)">
            Manage
          </a>
        </div>

        {% if active_announcements %}
        <ul class="divide-y divide-slate-100">
          {% for item in active_announcements %}
          <li class="px-6 py-4">
            <p class="font-medium text-slate-800">{{ item.title }}</p>
            <span class="helpapp-status-pill mt-1
              {% if item.level == 'danger' %}bg-red-50 text-red-700
              {% elif item.level == 'warning' %}bg-amber-50 text-amber-700
              {% elif item.level == 'success' %}bg-emerald-50 text-emerald-700
              {% else %}bg-blue-50 text-blue-700{% endif %}">
              {{ item.get_level_display }}
            </span>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <p class="px-6 py-8 text-center text-sm text-slate-400">
          Nothing active right now.
        </p>
        {% endif %}

      </div>

      <div class="rounded-3xl border border-slate-200 bg-white shadow-sm">

        <div class="flex items-center justify-between border-b border-slate-100 px-6 py-5">
          <h2 class="font-semibold text-slate-900">Recent feedback</h2>
          <a href="{% url 'admin:helpapp_helpfeedback_changelist' %}"
             class="helpapp-row-link text-sm font-medium" style="color:var(--helpapp-primary)">
            View all
          </a>
        </div>

        {% if recent_feedback %}
        <ul class="divide-y divide-slate-100">
          {% for entry in recent_feedback %}
          <li class="px-6 py-4">
            <div class="flex items-start justify-between gap-3">
              <p class="min-w-0 truncate text-sm font-medium text-slate-800">
                {{ entry.article.title }}
              </p>
              <span class="helpapp-status-pill shrink-0
                {% if entry.was_helpful %}bg-emerald-50 text-emerald-700{% else %}bg-red-50 text-red-700{% endif %}">
                {% if entry.was_helpful %}Helpful{% else %}Not helpful{% endif %}
              </span>
            </div>
            {% if entry.comment %}
            <p class="mt-1 line-clamp-2 text-xs text-slate-500">{{ entry.comment }}</p>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <p class="px-6 py-8 text-center text-sm text-slate-400">
          No feedback submitted yet.
        </p>
        {% endif %}

      </div>

    </div>

  </div>

</div>
{% endblock %}