{% extends "base.html" %}
{% load static %}
{% block title %}Dashboard — Fossilrepo{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4/dist/chart.umd.min.js"></script>
{% endblock %}

{% block content %}
<div class="mb-6">
  <h1 class="text-2xl font-bold text-gray-100">Dashboard</h1>
  <p class="mt-1 text-sm text-gray-400">Welcome back, {{ user.get_full_name|default:user.username }}</p>
</div>

<!-- Stats cards -->
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
    <div class="text-2xl font-bold text-gray-100">{{ total_projects }}</div>
    <div class="text-xs text-gray-500 mt-1">Projects</div>
  </div>
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
    <div class="text-2xl font-bold text-gray-100">{{ total_checkins|default:"0" }}</div>
    <div class="text-xs text-gray-500 mt-1">Total Checkins</div>
  </div>
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
    <div class="text-2xl font-bold text-gray-100">{{ total_tickets|default:"0" }}</div>
    <div class="text-xs text-gray-500 mt-1">Tickets</div>
  </div>
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
    <div class="text-2xl font-bold text-gray-100">{{ total_wiki|default:"0" }}</div>
    <div class="text-xs text-gray-500 mt-1">Wiki Pages</div>
  </div>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
  <!-- Main column -->
  <div class="lg:col-span-2 space-y-6">
    {% if system_activity_json and system_activity_json != "[]" %}
    <!-- System-wide activity chart -->
    <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
      <h3 class="text-sm font-medium text-gray-300 mb-3">System Activity (26 weeks)</h3>
      <div style="height: 140px;">
        <canvas id="systemChart"></canvas>
      </div>
    </div>
    {% endif %}

    {% if recent_across_all %}
    <!-- Recent activity across all projects -->
    <div class="rounded-lg bg-gray-800 border border-gray-700">
      <div class="px-4 py-3 border-b border-gray-700">
        <h3 class="text-sm font-medium text-gray-300">Recent Activity</h3>
      </div>
      <div class="divide-y divide-gray-700">
        {% for item in recent_across_all %}
        <div class="px-4 py-3 flex items-start gap-3">
          <div class="flex-shrink-0 mt-1">
            <div class="w-2.5 h-2.5 rounded-full bg-brand"></div>
          </div>
          <div class="flex-1 min-w-0">
            <a href="{% url 'fossil:checkin_detail' slug=item.project.slug checkin_uuid=item.entry.uuid %}"
               class="text-sm text-gray-200 hover:text-brand-light">{{ item.entry.comment|truncatechars:70 }}</a>
            <div class="mt-0.5 flex items-center gap-3 text-xs text-gray-500">
              <a href="{% url 'projects:detail' slug=item.project.slug %}" class="text-brand-light hover:text-brand">{{ item.project.name }}</a>
              <a href="{% url 'fossil:user_activity' slug=item.project.slug username=item.entry.user %}" class="hover:text-gray-300">{{ item.entry.user }}</a>
              <a href="{% url 'fossil:checkin_detail' slug=item.project.slug checkin_uuid=item.entry.uuid %}" class="font-mono text-brand-light hover:text-brand">{{ item.entry.uuid|truncatechars:10 }}</a>
              <span>{{ item.entry.timestamp|timesince }} ago</span>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Sidebar -->
  <div class="space-y-4">
    <!-- Quick links -->
    {% if perms.projects.view_project %}
    <a href="{% url 'projects:list' %}" class="block rounded-lg bg-gray-800 border border-gray-700 p-4 hover:border-brand transition-colors">
      <h3 class="text-sm font-semibold text-gray-100">Projects</h3>
      <p class="mt-1 text-xs text-gray-500">Manage projects and team access</p>
    </a>
    {% endif %}
    {% if perms.organization.view_team %}
    <a href="{% url 'organization:team_list' %}" class="block rounded-lg bg-gray-800 border border-gray-700 p-4 hover:border-brand transition-colors">
      <h3 class="text-sm font-semibold text-gray-100">Teams</h3>
      <p class="mt-1 text-xs text-gray-500">Organize members into teams</p>
    </a>
    {% endif %}
    {% if perms.pages.view_page %}
    <a href="{% url 'pages:list' %}" class="block rounded-lg bg-gray-800 border border-gray-700 p-4 hover:border-brand transition-colors">
      <h3 class="text-sm font-semibold text-gray-100">Fossilrepo KB</h3>
      <p class="mt-1 text-xs text-gray-500">Guides, runbooks, documentation</p>
    </a>
    {% endif %}
    {% if perms.organization.view_organization %}
    <a href="{% url 'organization:settings' %}" class="block rounded-lg bg-gray-800 border border-gray-700 p-4 hover:border-brand transition-colors">
      <h3 class="text-sm font-semibold text-gray-100">Settings</h3>
      <p class="mt-1 text-xs text-gray-500">Organization configuration</p>
    </a>
    {% endif %}
    {% if user.is_staff %}
    <a href="{% url 'admin:index' %}" class="block rounded-lg bg-gray-800 border border-gray-700 p-4 hover:border-brand transition-colors">
      <h3 class="text-sm font-semibold text-gray-100">Admin</h3>
      <p class="mt-1 text-xs text-gray-500">Users, groups, permissions</p>
    </a>
    {% endif %}
  </div>
</div>

{% if system_activity_json and system_activity_json != "[]" %}
<script>
  new Chart(document.getElementById('systemChart').getContext('2d'), {
    type: 'bar',
    data: {
      labels: {{ system_activity_json|safe }}.map((_, i) => ''),
      datasets: [{
        data: {{ system_activity_json|safe }},
        backgroundColor: '#DC394C',
        borderRadius: 2,
        barPercentage: 0.8,
        categoryPercentage: 0.9,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false }, tooltip: {
        callbacks: { title: (items) => { const w = 25 - items[0].dataIndex; return w === 0 ? 'This week' : w + ' week' + (w > 1 ? 's' : '') + ' ago'; } }
      }},
      scales: {
        x: { display: false, grid: { display: false } },
        y: { display: false, grid: { display: false }, beginAtZero: true }
      }
    }
  });
</script>
{% endif %}
{% endblock %}