{% extends "base.html" %}
{% block content %}
<style>
.diff-box pre {
  background-color: #f7f7f7 !important;
  color: #222222 !important;
  border: 1px solid #dddddd !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  font-size: 11px;
  line-height: 1.5;
}
.diff-add {
  background-color: rgba(34, 197, 94, 0.1);
  border-left: 3px solid #22c55e;
  color: #166534;
  display: block;
  padding: 0 0.5rem;
}
.diff-remove {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  color: #991b1b;
  display: block;
  padding: 0 0.5rem;
}
.diff-header {
  color: #6b7280;
  display: block;
  padding: 0 0.5rem;
  font-weight: 600;
}
.diff-context {
  display: block;
  padding: 0 0.5rem;
  color: #9ca3af;
}
.tab-link {
  cursor: pointer;
}
.tab-link.active {
  color: #ff385c;
  border-bottom: 2px solid #ff385c;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
</style>

<div class="max-w-5xl mx-auto space-y-6">
  <!-- Back link -->
  <a href="/commits" class="inline-flex items-center gap-1 text-xs text-slate-400 hover:text-[#ff385c] transition-colors font-semibold">
    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
    Back to commits
  </a>

  <!-- Commit Header -->
  <div class="airbnb-card p-6">
    <div class="flex items-start gap-4">
      <div class="w-10 h-10 rounded-full bg-[#ff385c]/5 text-[#ff385c] flex items-center justify-center shrink-0">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      </div>
      <div class="flex-1 min-w-0">
        <div class="flex items-center justify-between gap-4 flex-wrap">
          <h1 class="text-xl font-bold text-slate-800">{{ commit.message }}</h1>
          <code class="font-mono text-xs font-bold text-slate-500 bg-gray-100 px-2 py-0.5 rounded border border-gray-200 shrink-0">{{ commit.id }}</code>
        </div>
        <div class="mt-3 flex items-center gap-5 text-xs text-slate-500 flex-wrap">
          <span class="flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            {{ commit.author }}
          </span>
          <span>{{ (commit.timestamp or "")[:19] }}</span>
          <span class="font-mono text-slate-400">branch: {{ commit.branch }}</span>
          {% if commit.total_added or commit.total_removed %}
          <span class="flex items-center gap-1">
            {% if (commit.total_added or 0) > 0 %}<span class="text-emerald-600 font-semibold">+{{ commit.total_added }}</span>{% endif %}
            {% if (commit.total_removed or 0) > 0 %}<span class="text-rose-600 font-semibold">-{{ commit.total_removed }}</span>{% endif %}
            <span class="text-slate-400">in {{ commit.files_changed }} file(s)</span>
          </span>
          {% endif %}
        </div>
        {% if parent or second_parent %}
        <div class="mt-2 flex items-center gap-4 text-xs">
          {% if parent %}
          <span class="text-slate-400">parent: <a href="/commits/{{ parent.id }}" class="font-mono text-[#ff385c] hover:underline">{{ parent.id[:12] }}</a>
            <span class="text-slate-500">— {{ parent.message[:60] }}</span>
          </span>
          {% endif %}
          {% if second_parent %}
          <span class="text-slate-400">merge: <a href="/commits/{{ second_parent.id }}" class="font-mono text-[#ff385c] hover:underline">{{ second_parent.id[:12] }}</a>
            <span class="text-slate-500">— {{ second_parent.message[:60] }}</span>
          </span>
          {% endif %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Changed Files -->
  {% if changes %}
  <div>
    <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-3">Files Changed ({{ changes|length }})</h2>
    <div class="space-y-4">
      {% for ch in changes %}
      <div class="airbnb-card overflow-hidden">
        <!-- File header -->
        <div class="px-4 py-3 bg-gray-50 border-b border-gray-150 flex items-center justify-between flex-wrap gap-2">
          <div class="flex items-center gap-3 min-w-0">
            <svg class="w-4 h-4 text-slate-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            <code class="text-sm font-mono font-semibold text-slate-800">{{ ch.file_path }}</code>
            <span class="px-2 py-0.2 rounded-full text-[9px] uppercase font-bold
              {% if ch.change_type == 'created' %}bg-emerald-50 text-emerald-600 border border-emerald-100
              {% elif ch.change_type == 'modified' %}bg-amber-50 text-amber-600 border border-amber-100
              {% else %}bg-rose-50 text-rose-600 border border-rose-100{% endif %}">
              {{ ch.change_type }}
            </span>
          </div>
          <div class="flex items-center gap-3 text-xs font-mono shrink-0">
            {% if (ch.lines_added or 0) > 0 %}<span class="text-emerald-600 font-semibold">+{{ ch.lines_added }}</span>{% endif %}
            {% if (ch.lines_removed or 0) > 0 %}<span class="text-rose-600 font-semibold">-{{ ch.lines_removed }}</span>{% endif %}
          </div>
        </div>

        <!-- Tab switcher: original diff / vs current -->
        {% if ch.original_diff or ch.after_hash %}
        <div class="flex border-b border-gray-150 bg-white">
          {% if ch.original_diff %}
          <button class="tab-link px-4 py-2 text-xs font-semibold text-slate-500 hover:text-[#ff385c] transition-colors active"
                  onclick="switchTab(this, 'original-{{ loop.index0 }}', 'current-{{ loop.index0 }}')">
            Original Diff
          </button>
          {% endif %}
          {% if ch.after_hash %}
          <button class="tab-link px-4 py-2 text-xs font-semibold text-slate-500 hover:text-[#ff385c] transition-colors {% if not ch.original_diff %}active{% endif %}"
                  onclick="switchTab(this, 'current-{{ loop.index0 }}', 'original-{{ loop.index0 }}')">
            vs Current Version
          </button>
          {% endif %}
        </div>

        {% if ch.original_diff %}
        <div id="original-{{ loop.index0 }}" class="tab-content active diff-box">
          <pre class="max-h-96 overflow-y-auto m-0 border-0 rounded-none">
            {%- for line in ch.original_diff.split('\n') -%}
              {%- if line.startswith('+') and not line.startswith('+++') -%}
                <span class="diff-add">{{ line }}</span>
              {%- elif line.startswith('-') and not line.startswith('---') -%}
                <span class="diff-remove">{{ line }}</span>
              {%- elif line.startswith('@@') -%}
                <span class="diff-header">{{ line }}</span>
              {%- elif line.startswith('---') or line.startswith('+++') -%}
                <span class="diff-header">{{ line }}</span>
              {%- elif line.strip() == '' -%}
                <span class="diff-context">&nbsp;</span>
              {%- else -%}
                <span class="diff-context">{{ line }}</span>
              {%- endif -%}
            {%- endfor -%}
          </pre>
        </div>
        {% endif %}

        {% if ch.after_hash %}
        <div id="current-{{ loop.index0 }}" class="tab-content {% if not ch.original_diff %}active{% endif %} diff-box">
          {% if ch.current_diff.strip() %}
          <pre class="max-h-96 overflow-y-auto m-0 border-0 rounded-none">
            {%- for line in ch.current_diff.split('\n') -%}
              {%- if line.startswith('+') and not line.startswith('+++') -%}
                <span class="diff-add">{{ line }}</span>
              {%- elif line.startswith('-') and not line.startswith('---') -%}
                <span class="diff-remove">{{ line }}</span>
              {%- elif line.startswith('@@') -%}
                <span class="diff-header">{{ line }}</span>
              {%- elif line.startswith('---') or line.startswith('+++') -%}
                <span class="diff-header">{{ line }}</span>
              {%- elif line.strip() == '' -%}
                <span class="diff-context">&nbsp;</span>
              {%- else -%}
                <span class="diff-context">{{ line }}</span>
              {%- endif -%}
            {%- endfor -%}
          </pre>
          {% else %}
          <div class="p-6 text-center text-xs text-slate-400">File is identical to the committed version.</div>
          {% endif %}
        </div>
        {% endif %}
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>

<script>
function switchTab(btn, showId, hideId) {
  // Toggle active class on buttons
  const parent = btn.parentElement;
  parent.querySelectorAll('.tab-link').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  // Toggle content panels
  const card = btn.closest('.airbnb-card');
  if (showId) {
    const showPanel = card.querySelector('#' + CSS.escape(showId));
    if (showPanel) showPanel.classList.add('active');
  }
  if (hideId) {
    const hidePanel = card.querySelector('#' + CSS.escape(hideId));
    if (hidePanel) hidePanel.classList.remove('active');
  }
}
</script>
{% endblock %}