{% extends "base.html" %}
{% block content %}
<div class="p-4">
    <!-- Nav + workspace tabs -->
    <div class="flex items-center gap-2 mb-4">
        <h1 class="text-xl font-bold mr-2 text-blue-400">📋 Kanban</h1>
        <a href="/timeline/{{ workspace }}" class="text-xl font-bold mr-2 hover:text-blue-400">⏱ Timeline</a>
        <a href="/arcs" class="text-xl font-bold mr-2 hover:text-blue-400">🌳 Arcs</a>
        <a href="/board/{{ workspace }}?sort={{ 'desc' if sort == 'asc' else 'asc' }}&sort_by={{ sort_by }}"
           class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600">
            {{ '↑ A-Z' if sort == 'asc' else '↓ Z-A' }}
        </a>
        <a href="/board/{{ workspace }}?sort={{ sort }}&sort_by=alpha"
           class="text-xs px-2 py-1 rounded {% if sort_by == 'alpha' %}bg-blue-600{% else %}bg-gray-700 hover:bg-gray-600{% endif %}">
            Alfa
        </a>
        <a href="/board/{{ workspace }}?sort={{ sort }}&sort_by=open"
           class="text-xs px-2 py-1 rounded {% if sort_by == 'open' %}bg-blue-600{% else %}bg-gray-700 hover:bg-gray-600{% endif %} mr-4">
            Abertas
        </a>
        <button onclick="toggleHideDone()" id="btn-hide-done"
           class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600">
            Ocultar concluídos
        </button>
        <a href="/board/_all"
           class="px-3 py-1 rounded text-sm {% if workspace == '_all' %}bg-blue-600{% else %}bg-gray-700 hover:bg-gray-600{% endif %}">
            All
        </a>
        {% for ws_name in workspaces %}
        <a href="/board/{{ ws_name }}"
           class="px-3 py-1 rounded text-sm {% if workspace == ws_name %}bg-blue-600{% else %}bg-gray-700 hover:bg-gray-600{% endif %}">
            {{ ws_name }}
        </a>
        {% endfor %}
    </div>

    <!-- Legend -->
    <div class="flex items-center gap-3 mb-3 text-xs text-gray-400">
        <span>🔴 critical</span>
        <span>🟠 high</span>
        <span>🔵 medium</span>
        <span>⚪ low</span>
        <span class="ml-3 px-1.5 py-0.5 rounded bg-green-900 text-green-300">done</span>
        <span class="px-1.5 py-0.5 rounded bg-blue-900 text-blue-300">work</span>
        <span class="px-1.5 py-0.5 rounded bg-purple-900 text-purple-300">review</span>
        <span class="px-1.5 py-0.5 rounded bg-red-900 text-red-300">blocked</span>
        <span class="px-1.5 py-0.5 rounded bg-gray-700 text-gray-400">queue</span>
    </div>

    <!-- Column headers -->
    <div class="grid grid-cols-4 gap-4 mb-2">
        {% for status in statuses %}
        <div class="text-sm font-semibold uppercase text-gray-400 text-center">{{ status }}</div>
        {% endfor %}
    </div>

    <!-- Swimlanes -->
    {% for lane in lanes %}
    <div class="mb-4" data-open-count="{{ lane.open_count }}">
        <div class="text-xs font-bold text-gray-500 uppercase mb-1 px-2 py-1 bg-gray-800 rounded-t border-l-4 flex items-center cursor-pointer select-none
            {% if lane.id != '__other__' %}border-blue-500{% else %}border-gray-600{% endif %}"
            onclick="toggleLane('{{ lane.id }}')">
            <span id="chevron-{{ lane.id }}" class="inline-block transition-transform mr-1">▶</span>
            {% if lane.id != '__other__' %}🌳{% endif %} {{ lane.title }}
            <span class="ml-2 text-gray-400 font-normal">(abertas/totais: {{ lane.open_count }}/{{ lane.total_count }})</span>
        </div>
        <div id="lane-{{ lane.id }}" class="rounded-b min-h-[60px]">
            {% if lane.sublanes %}
            <!-- Sublanes -->
            {% for sub in lane.sublanes %}
            <div class="mb-2 ml-3 border-l-2 border-gray-700 pl-2">
                {% if sub.title %}
                <div class="text-xs text-gray-400 font-semibold py-1 cursor-pointer select-none flex items-center"
                     onclick="toggleLane('{{ lane.id }}-sub-{{ sub.id }}')">
                    <span id="chevron-{{ lane.id }}-sub-{{ sub.id }}" class="inline-block transition-transform mr-1 text-[10px]">▶</span>
                    📁 {{ sub.title }}
                    <span class="ml-1 text-gray-500 font-normal">({{ sub.open_count }}/{{ sub.total_count }})</span>
                </div>
                {% endif %}
                <div id="lane-{{ lane.id }}-sub-{{ sub.id }}" class="grid grid-cols-4 gap-4 p-1">
                    {% for status in statuses %}
                    <div class="space-y-1">
                        {% for item in sub.columns[status] %}
                        <div class="bg-gray-800 rounded p-2 text-xs cursor-pointer hover:ring-1 hover:ring-blue-500 transition"
                             hx-get="/item/{{ item.id }}" hx-target="#modal-body" hx-trigger="click"
                             onclick="document.getElementById('detail-modal').classList.remove('hidden')">
                            <div class="flex items-center gap-1">
                                <span>{{ item.priority_emoji }}</span>
                                <span class="truncate">{{ item.title }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
            {% else %}
            <!-- No sublanes — flat grid -->
            <div class="grid grid-cols-4 gap-4 bg-gray-850 p-2">
                {% for status in statuses %}
                <div class="space-y-1">
                    {% for item in lane.columns[status] %}
                    <div class="bg-gray-800 rounded p-2 text-xs cursor-pointer hover:ring-1 hover:ring-blue-500 transition"
                         hx-get="/item/{{ item.id }}" hx-target="#modal-body" hx-trigger="click"
                         onclick="document.getElementById('detail-modal').classList.remove('hidden')">
                        <div class="flex items-center gap-1">
                            <span>{{ item.priority_emoji }}</span>
                            <span class="truncate">{{ item.title }}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

<script>
function toggleLane(id) {
    const grid = document.getElementById('lane-' + id);
    const chevron = document.getElementById('chevron-' + id);
    const key = 'lane-collapsed-' + id;
    const collapsed = !grid.classList.contains('hidden');
    grid.classList.toggle('hidden', collapsed);
    chevron.style.transform = collapsed ? '' : 'rotate(90deg)';
    localStorage.setItem(key, collapsed ? '1' : '0');
}
function toggleHideDone() {
    const btn = document.getElementById('btn-hide-done');
    const hiding = localStorage.getItem('hide-done-arcs') !== '1';
    localStorage.setItem('hide-done-arcs', hiding ? '1' : '0');
    applyHideDone(hiding);
    btn.classList.toggle('bg-blue-600', hiding);
    btn.classList.toggle('bg-gray-700', !hiding);
    btn.textContent = hiding ? 'Mostrar concluídos' : 'Ocultar concluídos';
}
function applyHideDone(hide) {
    document.querySelectorAll('[data-open-count]').forEach(function(el) {
        if (hide && el.dataset.openCount === '0') {
            el.style.display = 'none';
        } else {
            el.style.display = '';
        }
    });
}
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[id^="lane-"]').forEach(function(el) {
        const id = el.id.replace('lane-', '');
        if (localStorage.getItem('lane-collapsed-' + id) === '1') {
            el.classList.add('hidden');
        } else {
            const chevron = document.getElementById('chevron-' + id);
            if (chevron) chevron.style.transform = 'rotate(90deg)';
        }
    });
    // Apply hide-done on load
    const hiding = localStorage.getItem('hide-done-arcs') === '1';
    if (hiding) {
        applyHideDone(true);
        const btn = document.getElementById('btn-hide-done');
        btn.classList.add('bg-blue-600');
        btn.classList.remove('bg-gray-700');
        btn.textContent = 'Mostrar concluídos';
    }
});
</script>

<!-- Detail Modal -->
<div id="detail-modal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50"
     onclick="if(event.target===this) this.classList.add('hidden')">
    <div class="bg-gray-800 rounded-lg p-6 max-w-lg w-full max-h-[80vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-bold">Detalhes</h3>
            <button onclick="document.getElementById('detail-modal').classList.add('hidden')"
                    class="text-gray-400 hover:text-white text-xl">✕</button>
        </div>
        <div id="modal-body">
            <p class="text-gray-400">Carregando...</p>
        </div>
    </div>
</div>
{% endblock %}