{% extends "_app_base.html" %}
{% block title %}{{ project.name }} — Issue Tracker{% endblock %}
{% block content %}
<div class="flex flex-wrap items-start justify-between gap-3 mb-4">
    <div class="min-w-0">
        <div class="breadcrumbs text-sm"><ul>
            <li><a href="/projects">Projects</a></li>
            <li class="max-w-[24ch] truncate">{{ project.name }}</li>
        </ul></div>
        <h1 class="text-2xl font-semibold tracking-tight truncate">{{ project.name }}</h1>
        {% if !project.description.is_empty() %}
            <p class="text-sm text-base-content/60 max-w-3xl">{{ project.description }}</p>
        {% endif %}
    </div>

    <div class="flex items-center gap-2 shrink-0">
        <div class="join">
            <a href="/projects/{{ project.id }}?view=board"
               class="join-item btn btn-sm {% if view_mode == "board" %}btn-active btn-primary{% else %}btn-ghost{% endif %}">
                Board
            </a>
            <a href="/projects/{{ project.id }}?view=list"
               class="join-item btn btn-sm {% if view_mode == "list" %}btn-active btn-primary{% else %}btn-ghost{% endif %}">
                List
            </a>
        </div>
        <a href="/projects/{{ project.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>
        <a href="/projects/{{ project.id }}/issues/new" class="btn btn-primary btn-sm">New issue</a>
    </div>
</div>

{% if view_mode == "board" %}
    <div class="grid gap-3 md:grid-cols-3" id="board">
        {% for column in columns %}
            <section class="bg-base-100 border border-base-300 rounded-lg flex flex-col min-h-[200px]">
                <header class="flex items-center justify-between px-3 py-2 border-b border-base-300">
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full
                            {% if column.status.as_str() == "open" %}bg-info
                            {% else if column.status.as_str() == "in_progress" %}bg-warning
                            {% else %}bg-success{% endif %}"></span>
                        <h2 class="text-sm font-medium">{{ column.status.label() }}</h2>
                    </div>
                    <span class="badge badge-ghost badge-sm">{{ column.issues.len() }}</span>
                </header>
                <div class="p-2 flex-1 flex flex-col gap-2 column-drop"
                     data-status="{{ column.status.as_str() }}">
                    {% for issue in column.issues %}
                        <a href="/projects/{{ project.id }}/issues/{{ issue.id }}"
                           data-issue-id="{{ issue.id }}"
                           class="issue-card block bg-base-100 border border-base-300 hover:border-primary rounded-md p-3 shadow-sm cursor-grab active:cursor-grabbing transition"
                           draggable="true">
                            <div class="text-sm font-medium line-clamp-2">{{ issue.title }}</div>
                            <div class="flex items-center justify-between mt-2 text-[11px] text-base-content/60">
                                <span class="badge badge-sm {{ issue.priority.badge_class() }}">{{ issue.priority.label() }}</span>
                                <span>{{ issue.updated_at.format("%m-%d") }}</span>
                            </div>
                        </a>
                    {% endfor %}
                    {% if column.issues.is_empty() %}
                        <div class="text-xs text-base-content/40 text-center py-4 italic">Drop issues here</div>
                    {% endif %}
                </div>
            </section>
        {% endfor %}
    </div>
{% else %}
    <div class="card bg-base-100 border border-base-300">
        <div class="overflow-x-auto">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th class="w-32">Status</th>
                        <th class="w-28">Priority</th>
                        <th class="w-32">Updated</th>
                    </tr>
                </thead>
                <tbody>
                    {% for issue in all_issues %}
                        <tr class="hover">
                            <td>
                                <a href="/projects/{{ project.id }}/issues/{{ issue.id }}"
                                   class="link link-hover font-medium">{{ issue.title }}</a>
                            </td>
                            <td>
                                <span class="badge badge-sm badge-ghost">{{ issue.status.label() }}</span>
                            </td>
                            <td>
                                <span class="badge badge-sm {{ issue.priority.badge_class() }}">{{ issue.priority.label() }}</span>
                            </td>
                            <td class="text-xs text-base-content/60">{{ issue.updated_at.format("%Y-%m-%d %H:%M") }}</td>
                        </tr>
                    {% endfor %}
                    {% if all_issues.is_empty() %}
                        <tr>
                            <td colspan="4" class="text-center py-8 text-base-content/60 italic">No issues yet.</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if view_mode == "board" %}
<script>
// Minimal native-HTML5 drag-and-drop for the kanban board.
// When an issue is dropped into a different column, we PATCH the status
// via a JSON POST and reload to resync state.
(function () {
    const projectId = "{{ project.id }}";
    let dragging = null;

    document.querySelectorAll('.issue-card').forEach((card) => {
        card.addEventListener('dragstart', (e) => {
            dragging = card;
            card.classList.add('opacity-50');
            try { e.dataTransfer.effectAllowed = 'move'; } catch (_) {}
        });
        card.addEventListener('dragend', () => {
            if (dragging) dragging.classList.remove('opacity-50');
            dragging = null;
        });
    });

    document.querySelectorAll('.column-drop').forEach((col) => {
        col.addEventListener('dragover', (e) => {
            e.preventDefault();
            col.classList.add('bg-base-200');
        });
        col.addEventListener('dragleave', () => {
            col.classList.remove('bg-base-200');
        });
        col.addEventListener('drop', async (e) => {
            e.preventDefault();
            col.classList.remove('bg-base-200');
            if (!dragging) return;
            const issueId = dragging.dataset.issueId;
            const newStatus = col.dataset.status;
            col.appendChild(dragging); // optimistic move

            try {
                const res = await fetch(`/projects/${projectId}/issues/${issueId}/status`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ status: newStatus }),
                });
                if (!res.ok) throw new Error(`status ${res.status}`);
                // Reload to recompute counts and sort.
                window.location.reload();
            } catch (err) {
                console.error('Failed to update status', err);
                alert('Failed to update status. Please refresh.');
            }
        });
    });
})();
</script>
{% endif %}
{% endblock %}