{% extends "base.html" %}
{% block title %}{{ project.name }} — 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="flex items-center justify-between mb-6">
  <div>
    <h1 class="text-2xl font-bold text-gray-100">{{ project.name }}</h1>
    <p class="mt-1 text-sm text-gray-400">{{ project.description|default:"No description." }}</p>
  </div>
  <div class="flex gap-3">
    {% if user.is_authenticated %}
    {% include "projects/partials/star_button.html" %}
    <form method="post" action="{% url 'fossil:toggle_watch' slug=project.slug %}">
      {% csrf_token %}
      {% if is_watching %}
      <button type="submit" class="inline-flex items-center gap-1.5 rounded-md bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-100 ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
        <svg class="h-4 w-4 text-brand" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
        Watching
      </button>
      {% else %}
      <button type="submit" class="inline-flex items-center gap-1.5 rounded-md bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-100 ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
        Watch
      </button>
      {% endif %}
    </form>
    {% endif %}
    {% if perms.projects.change_project %}
    <a href="{% url 'projects:update' slug=project.slug %}"
       class="rounded-md bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
      Edit
    </a>
    {% endif %}
  </div>
</div>

{% if repo_stats %}
<!-- Fossil navigation tabs -->
{% with active_tab="overview" %}
{% include "fossil/_project_nav.html" %}
{% endwith %}
{% endif %}

<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
  <!-- Main content -->
  <div class="lg:col-span-2 space-y-6">
    {% if commit_activity_json %}
    <!-- Commit 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">Commit Activity (last year)</h3>
      <div style="height: 120px;">
        <canvas id="activityChart"></canvas>
      </div>
    </div>
    {% endif %}

    {% if repo_stats and recent_commits %}
    <!-- Recent activity -->
    <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 commit in recent_commits %}
        <div class="px-4 py-3 flex items-start gap-3">
          <div class="flex-shrink-0 mt-0.5">
            <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=project.slug checkin_uuid=commit.uuid %}"
               class="text-sm text-gray-200 hover:text-brand-light">{{ commit.comment|truncatechars:80 }}</a>
            <div class="mt-0.5 flex items-center gap-3 text-xs text-gray-500">
              <span>{{ commit.user }}</span>
              <a href="{% url 'fossil:checkin_detail' slug=project.slug checkin_uuid=commit.uuid %}"
                 class="font-mono text-brand-light hover:text-brand">{{ commit.uuid|truncatechars:10 }}</a>
              <span>{{ commit.timestamp|timesince }} ago</span>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      <div class="px-4 py-2 border-t border-gray-700">
        <a href="{% url 'fossil:timeline' slug=project.slug %}" class="text-xs text-brand-light hover:text-brand">View full timeline &rarr;</a>
      </div>
    </div>
    {% endif %}

    <!-- Teams -->
    <div class="rounded-lg bg-gray-800 border border-gray-700">
      <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
        <h3 class="text-sm font-medium text-gray-300">Teams</h3>
        {% if perms.projects.change_project %}
        <a href="{% url 'projects:team_add' slug=project.slug %}" class="text-xs text-brand-light hover:text-brand">+ Add Team</a>
        {% endif %}
      </div>
      {% include "projects/partials/project_team_table.html" %}
    </div>
  </div>

  <!-- Sidebar -->
  <div class="space-y-4">
    {% if repo_stats %}
    <!-- Repository stats -->
    <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
      <h3 class="text-sm font-medium text-gray-300 mb-3">Repository</h3>
      <div class="space-y-2">
        <div class="flex items-center justify-between">
          <span class="flex items-center gap-2 text-sm text-gray-400">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            Checkins
          </span>
          <a href="{% url 'fossil:timeline' slug=project.slug %}" class="text-sm font-medium text-gray-200 hover:text-brand-light">{{ repo_stats.checkin_count|default:"0" }}</a>
        </div>
        <div class="flex items-center justify-between">
          <span class="flex items-center gap-2 text-sm text-gray-400">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
            Files
          </span>
          <a href="{% url 'fossil:code' slug=project.slug %}" class="text-sm font-medium text-gray-200 hover:text-brand-light">{{ repo_stats.file_count|default:"—" }}</a>
        </div>
        <div class="flex items-center justify-between">
          <span class="flex items-center gap-2 text-sm text-gray-400">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z" /></svg>
            Tickets
          </span>
          <a href="{% url 'fossil:tickets' slug=project.slug %}" class="text-sm font-medium text-gray-200 hover:text-brand-light">{{ repo_stats.ticket_count|default:"0" }}</a>
        </div>
        <div class="flex items-center justify-between">
          <span class="flex items-center gap-2 text-sm text-gray-400">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>
            Wiki Pages
          </span>
          <a href="{% url 'fossil:wiki' slug=project.slug %}" class="text-sm font-medium text-gray-200 hover:text-brand-light">{{ repo_stats.wiki_page_count|default:"0" }}</a>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Clone instructions -->
    <div class="rounded-lg bg-gray-800 border border-gray-700 p-4" x-data="{ copied: false }">
      <h3 class="text-sm font-medium text-gray-300 mb-2">Clone</h3>
      <div class="flex items-center gap-2">
        <code class="flex-1 text-xs font-mono text-gray-400 bg-gray-900 rounded px-3 py-2 truncate">fossil clone /path/to/{{ project.slug }}.fossil</code>
        <button @click="navigator.clipboard.writeText('fossil clone /path/to/{{ project.slug }}.fossil'); copied = true; setTimeout(() => copied = false, 1500)"
                class="flex-shrink-0 rounded px-2 py-2 text-gray-500 hover:text-brand-light hover:bg-gray-700">
          <svg x-show="!copied" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>
          <svg x-show="copied" class="h-4 w-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="display:none"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
        </button>
      </div>
    </div>

    {% if top_contributors %}
    <!-- Contributors -->
    <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
      <h3 class="text-sm font-medium text-gray-300 mb-3">Top Contributors</h3>
      <div class="space-y-1">
        {% for c in top_contributors %}
        <a href="{% url 'fossil:user_activity' slug=project.slug username=c.user %}"
           class="flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-gray-700/50">
          <span class="text-sm text-gray-300">{{ c.user }}</span>
          <span class="text-xs text-gray-500">{{ c.count }} commits</span>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <!-- Project info -->
    <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
      <h3 class="text-sm font-medium text-gray-300 mb-3">About</h3>
      <dl class="space-y-2 text-sm">
        <div class="flex items-center justify-between">
          <dt class="text-gray-500">Visibility</dt>
          <dd>
            {% if project.visibility == "public" %}
            <span class="inline-flex rounded-full bg-green-900/50 px-2 text-xs font-semibold leading-5 text-green-300">Public</span>
            {% elif project.visibility == "internal" %}
            <span class="inline-flex rounded-full bg-yellow-900/50 px-2 text-xs font-semibold leading-5 text-yellow-300">Internal</span>
            {% else %}
            <span class="inline-flex rounded-full bg-gray-700 px-2 text-xs font-semibold leading-5 text-gray-300">Private</span>
            {% endif %}
          </dd>
        </div>
        <div class="flex items-center justify-between">
          <dt class="text-gray-500">Created</dt>
          <dd class="text-gray-300">{{ project.created_at|date:"Y-m-d" }}</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

{% if commit_activity_json %}
<script>
  const ctx = document.getElementById('activityChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: {{ commit_activity_json|safe }}.map((_, i) => ''),
      datasets: [{
        data: {{ commit_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 = 51 - 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 %}