{% extends "base.html" %}
{% block title %}{{ checkin.uuid|truncatechars:12 }} — {{ project.name }} — Fossilrepo{% endblock %}

{% block extra_head %}
<style>
  .diff-table { border-collapse: collapse; width: 100%; font-size: 0.75rem; font-family: ui-monospace, monospace; }
  .diff-table td { padding: 0 8px; white-space: pre; vertical-align: top; line-height: 1.4rem; }
  .diff-line-add { background: rgba(34, 197, 94, 0.1); }
  .diff-line-add td:last-child { color: #86efac; }
  .diff-line-del { background: rgba(239, 68, 68, 0.1); }
  .diff-line-del td:last-child { color: #fca5a5; }
  .diff-line-hunk { background: rgba(96, 165, 250, 0.08); }
  .diff-line-hunk td { color: #93c5fd; font-weight: 500; }
  .diff-line-header td { color: #6b7280; font-weight: 600; }
  .diff-gutter { width: 1%; user-select: none; color: #4b5563; text-align: right; padding: 0 6px; border-right: 1px solid #374151; cursor: pointer; white-space: nowrap; }
  .diff-gutter:hover { color: #DC394C; }
  .diff-gutter a { color: inherit; text-decoration: none; display: block; }
  .line-row:target { background: rgba(220, 57, 76, 0.15) !important; }
  .line-row:target .diff-gutter { color: #DC394C; font-weight: 600; }
  .line-row { scroll-margin-top: 40vh; }
  /* Split diff view */
  .split-diff { display: grid; grid-template-columns: 1fr 1fr; }
  .split-diff-side { overflow-x: auto; }
  .split-diff-side:first-child { border-right: 1px solid #374151; }
  .split-diff-side .diff-table td:last-child { width: 100%; }
  .split-line-add { background: rgba(34, 197, 94, 0.1); }
  .split-line-add td:last-child { color: #86efac; }
  .split-line-del { background: rgba(239, 68, 68, 0.1); }
  .split-line-del td:last-child { color: #fca5a5; }
  .split-line-empty { background: rgba(107, 114, 128, 0.05); }
  .split-line-empty td:last-child { color: transparent; }
  /* Syntax highlighting: preserve diff bg colors over hljs */
  .diff-code .hljs { background: transparent !important; padding: 0 !important; }
  .diff-code { display: inline; }
  .line-popover {
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    margin-left: 4px; z-index: 20; white-space: nowrap;
    background: #1f2937; border: 1px solid #374151; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
    display: flex; gap: 2px;
  }
  .line-popover button {
    display: flex; align-items: center; gap: 4px; padding: 4px 8px;
    font-size: 0.7rem; color: #d1d5db; background: transparent;
    border: none; border-radius: 4px; cursor: pointer;
  }
  .line-popover button:hover { background: #374151; color: #fff; }
  .line-popover button.copied { color: #22c55e; }
</style>
{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="space-y-4">
  <!-- Commit header -->
  <div class="rounded-lg bg-gray-800 border border-gray-700">
    <div class="px-6 py-5">
      <p class="text-lg text-gray-100 leading-relaxed">{{ checkin.comment }}</p>
      <div class="mt-3 flex items-center gap-4 flex-wrap text-sm">
        <a href="{% url 'fossil:user_activity' slug=project.slug username=checkin.user %}" class="font-medium text-gray-200 hover:text-brand-light">{{ checkin.user }}</a>
        <span class="text-gray-500">{{ checkin.timestamp|date:"Y-m-d H:i" }}</span>
        {% if checkin.branch %}
        <span class="inline-flex items-center rounded-md bg-brand/10 border border-brand/20 px-2 py-0.5 text-xs text-brand-light">
          {{ checkin.branch }}
        </span>
        {% endif %}
        {% if checkin.is_merge %}
        <span class="inline-flex items-center rounded-full bg-purple-900/50 px-2 py-0.5 text-xs text-purple-300">merge</span>
        {% endif %}
      </div>
    </div>
    {% if status_checks %}
    <div class="px-6 py-3 border-t border-gray-700 bg-gray-800/50">
      <div class="flex items-center gap-2 mb-2">
        <span class="text-xs font-medium text-gray-400">CI Status</span>
        <img src="{% url 'fossil:status_badge' slug=project.slug checkin_uuid=checkin.uuid %}" alt="CI Status" class="h-5">
      </div>
      <div class="flex flex-wrap gap-2">
        {% for check in status_checks %}
        <a {% if check.target_url %}href="{{ check.target_url }}" target="_blank" rel="noopener"{% endif %}
           class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs
                  {% if check.state == 'success' %}border-green-800 bg-green-900/30 text-green-300
                  {% elif check.state == 'failure' %}border-red-800 bg-red-900/30 text-red-300
                  {% elif check.state == 'error' %}border-red-800 bg-red-900/30 text-red-300
                  {% else %}border-yellow-800 bg-yellow-900/30 text-yellow-300{% endif %}"
           {% if check.description %}title="{{ check.description }}"{% endif %}>
          {% if check.state == 'success' %}
          <svg class="h-3.5 w-3.5 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
          </svg>
          {% elif check.state == 'failure' or check.state == 'error' %}
          <svg class="h-3.5 w-3.5 text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
          {% else %}
          <svg class="h-3.5 w-3.5 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="6"/>
          </svg>
          {% endif %}
          {{ check.context }}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    <div class="px-6 py-3 border-t border-gray-700 bg-gray-800/50 flex items-center gap-6 flex-wrap text-xs">
      <div class="flex items-center gap-2">
        <span class="text-gray-500">Commit</span>
        <code class="font-mono text-gray-300 break-all">{{ checkin.uuid }}</code>
      </div>
      {% if checkin.parent_uuid %}
      <div class="flex items-center gap-2">
        <span class="text-gray-500">Parent</span>
        <a href="{% url 'fossil:checkin_detail' slug=project.slug checkin_uuid=checkin.parent_uuid %}"
           class="font-mono text-brand-light hover:text-brand">{{ checkin.parent_uuid|truncatechars:16 }}</a>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- File summary bar -->
  {% if file_diffs %}
  <div class="rounded-lg bg-gray-800 border border-gray-700 px-4 py-3">
    <div class="flex items-center gap-4 text-sm">
      <span class="text-gray-300 font-medium">{{ file_diffs|length }} file{{ file_diffs|length|pluralize }} changed</span>
      {% with total_add=0 total_del=0 %}
      {% for fd in file_diffs %}
      {% if fd.additions %}
      <span class="text-green-400">+{{ fd.additions }}</span>
      {% endif %}
      {% if fd.deletions %}
      <span class="text-red-400">-{{ fd.deletions }}</span>
      {% endif %}
      {% endfor %}
      {% endwith %}
    </div>
    <div class="mt-2 flex flex-wrap gap-2">
      {% for fd in file_diffs %}
      <a href="#diff-{{ forloop.counter }}" class="text-xs font-mono text-brand-light hover:text-brand">
        {% if fd.change_type == "added" %}
        <span class="text-green-400">+</span>
        {% elif fd.change_type == "deleted" %}
        <span class="text-red-400">-</span>
        {% else %}
        <span class="text-yellow-400">~</span>
        {% endif %}
        {{ fd.name }}
      </a>
      {% endfor %}
    </div>
  </div>

  <!-- Diff mode toggle -->
  <div x-data="{ mode: localStorage.getItem('diff-mode') || 'unified' }" x-init="$watch('mode', val => localStorage.setItem('diff-mode', val))" x-ref="diffToggle">
    <div class="flex items-center gap-2 mb-3">
      <button @click="mode = 'unified'" :class="mode === 'unified' ? 'bg-gray-700 text-gray-100' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1 text-xs rounded-md">Unified</button>
      <button @click="mode = 'split'" :class="mode === 'split' ? 'bg-gray-700 text-gray-100' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1 text-xs rounded-md">Split</button>
    </div>

  <!-- Diffs -->
  {% for fd in file_diffs %}
  <div class="rounded-lg bg-gray-800 border border-gray-700 overflow-hidden mb-4" id="diff-{{ forloop.counter }}" data-filename="{{ fd.name }}">
    <div class="px-4 py-2.5 border-b border-gray-700 flex items-center justify-between bg-gray-900/50">
      <div class="flex items-center gap-3">
        {% if fd.change_type == "added" %}
        <span class="inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold bg-green-900/50 text-green-300">A</span>
        {% elif fd.change_type == "deleted" %}
        <span class="inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold bg-red-900/50 text-red-300">D</span>
        {% else %}
        <span class="inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold bg-yellow-900/50 text-yellow-300">M</span>
        {% endif %}
        {% if fd.uuid %}
        <a href="{% url 'fossil:code_file' slug=project.slug filepath=fd.name %}"
           class="text-sm font-mono text-brand-light hover:text-brand">{{ fd.name }}</a>
        {% else %}
        <span class="text-sm font-mono text-gray-400">{{ fd.name }}</span>
        {% endif %}
      </div>
      <div class="flex items-center gap-2 text-xs">
        {% if fd.additions %}<span class="text-green-400">+{{ fd.additions }}</span>{% endif %}
        {% if fd.deletions %}<span class="text-red-400">-{{ fd.deletions }}</span>{% endif %}
      </div>
    </div>

    {% if fd.is_binary %}
    <p class="p-4 text-sm text-gray-500">Binary file</p>
    {% elif fd.diff_lines %}

    <!-- Unified view -->
    <div class="overflow-x-auto" x-show="mode === 'unified'">
      <table class="diff-table">
        <tbody>
          {% for dl in fd.diff_lines %}
{% if dl.new_num %}<tr class="diff-line-{{ dl.type }} line-row" id="diff-{{ forloop.parentloop.counter }}-R{{ dl.new_num }}"><td class="diff-gutter">{{ dl.old_num }}</td><td class="diff-gutter" style="position:relative" x-data="{ pop: false, copied: false }" @click.stop="pop = !pop; window.location.hash = 'diff-{{ forloop.parentloop.counter }}-R{{ dl.new_num }}'" @click.outside="pop = false">{{ dl.new_num }}<div class="line-popover" x-show="pop" x-transition @click.stop><button @click="navigator.clipboard.writeText(window.location.origin + window.location.pathname + '#diff-{{ forloop.parentloop.counter }}-R{{ dl.new_num }}'); copied = true; setTimeout(() => { copied = false; pop = false }, 1000)" :class="copied && 'copied'"><span x-show="!copied">Copy link</span><span x-show="copied">Copied!</span></button></div></td><td><span class="diff-prefix">{{ dl.prefix }}</span><span class="diff-code">{{ dl.code }}</span></td></tr>{% elif dl.old_num %}<tr class="diff-line-{{ dl.type }} line-row" id="diff-{{ forloop.parentloop.counter }}-L{{ dl.old_num }}"><td class="diff-gutter" style="position:relative" x-data="{ pop: false, copied: false }" @click.stop="pop = !pop; window.location.hash = 'diff-{{ forloop.parentloop.counter }}-L{{ dl.old_num }}'" @click.outside="pop = false">{{ dl.old_num }}<div class="line-popover" x-show="pop" x-transition @click.stop><button @click="navigator.clipboard.writeText(window.location.origin + window.location.pathname + '#diff-{{ forloop.parentloop.counter }}-L{{ dl.old_num }}'); copied = true; setTimeout(() => { copied = false; pop = false }, 1000)" :class="copied && 'copied'"><span x-show="!copied">Copy link</span><span x-show="copied">Copied!</span></button></div></td><td class="diff-gutter"></td><td><span class="diff-prefix">{{ dl.prefix }}</span><span class="diff-code">{{ dl.code }}</span></td></tr>{% else %}<tr class="diff-line-{{ dl.type }}"><td class="diff-gutter"></td><td class="diff-gutter"></td><td><span class="diff-prefix">{{ dl.prefix }}</span><span class="diff-code">{{ dl.code }}</span></td></tr>{% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Split view -->
    <div class="split-diff" x-show="mode === 'split'" x-cloak>
      <div class="split-diff-side">
        <table class="diff-table">
          <tbody>
            {% for dl in fd.split_left %}
            <tr class="{% if dl.type == 'del' %}split-line-del{% elif dl.type == 'hunk' %}diff-line-hunk{% elif dl.type == 'header' %}diff-line-header{% elif dl.type == 'empty' %}split-line-empty{% endif %}">
              <td class="diff-gutter">{{ dl.old_num }}</td>
              <td>{% if dl.type == 'empty' %}&nbsp;{% elif dl.type == 'hunk' or dl.type == 'header' %}{{ dl.text }}{% else %}<span class="diff-code">{{ dl.code }}</span>{% endif %}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="split-diff-side">
        <table class="diff-table">
          <tbody>
            {% for dl in fd.split_right %}
            <tr class="{% if dl.type == 'add' %}split-line-add{% elif dl.type == 'hunk' %}diff-line-hunk{% elif dl.type == 'header' %}diff-line-header{% elif dl.type == 'empty' %}split-line-empty{% endif %}">
              <td class="diff-gutter">{{ dl.new_num }}</td>
              <td>{% if dl.type == 'empty' %}&nbsp;{% elif dl.type == 'hunk' or dl.type == 'header' %}{{ dl.text }}{% else %}<span class="diff-code">{{ dl.code }}</span>{% endif %}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {% else %}
    <p class="p-4 text-sm text-gray-500">No diff available</p>
    {% endif %}
  </div>
  {% endfor %}
  </div>
  {% endif %}
</div>
<!-- scroll-margin-top on .line-row handles anchor positioning via CSS -->
<script>
(function() {
  var langMap = {
    'py': 'python', 'js': 'javascript', 'ts': 'typescript',
    'html': 'html', 'css': 'css', 'json': 'json', 'yaml': 'yaml',
    'yml': 'yaml', 'md': 'markdown', 'sh': 'bash', 'sql': 'sql',
    'rs': 'rust', 'go': 'go', 'rb': 'ruby', 'java': 'java',
    'toml': 'toml', 'xml': 'xml', 'jsx': 'javascript', 'tsx': 'typescript',
    'c': 'c', 'h': 'c', 'cpp': 'cpp', 'hpp': 'cpp',
  };
  function highlightDiffCode() {
    document.querySelectorAll('[data-filename]').forEach(function(container) {
      var filename = container.dataset.filename || '';
      var ext = filename.split('.').pop();
      var lang = langMap[ext] || '';
      if (lang && window.hljs) {
        container.querySelectorAll('.diff-code').forEach(function(el) {
          if (el.dataset.highlighted) return;
          var text = el.textContent;
          if (!text.trim()) return;
          try {
            var result = hljs.highlight(text, { language: lang, ignoreIllegals: true });
            el.innerHTML = result.value;
            el.dataset.highlighted = '1';
          } catch(e) {}
        });
      }
    });
  }
  // Run after DOM ready and after Alpine toggles
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', highlightDiffCode);
  } else {
    highlightDiffCode();
  }
  // Re-run when split view is toggled (elements become visible)
  document.addEventListener('click', function(e) {
    if (e.target.closest('[x-ref="diffToggle"]')) {
      setTimeout(highlightDiffCode, 50);
    }
  });
})();
</script>
{% endblock %}