{% extends 'repository/repo_layout.html' %}

{% block title %}Issue #{{ issue.id }} - {{ repo_owner }}/{{ repo_name }}{% endblock %}

{% block repo_content %}
<div class="flex flex-col space-y-6">
    <div class="flex items-center justify-between pb-6 border-b border-white/5">
        <div class="flex items-center gap-4">
            <span class="text-zinc-500 text-xl font-light">#{{ issue.id }}</span>
            <h1 class="text-3xl font-bold tracking-tight text-white">{{ issue.title }}</h1>
            <div class="ml-4 flex items-center gap-2">
                <span id="issue-status-badge"
                    class="issue-status-badge {{ 'status-open' if issue.status == 'open' else 'status-closed' }}">
                    {% if issue.status == 'open' %}
                    <i data-lucide="circle-dot" class="h-4 w-4 mr-1.5 align-text-bottom"></i> Open
                    {% else %}
                    <i data-lucide="check-circle-2" class="h-4 w-4 mr-1.5 align-text-bottom"></i> Closed
                    {% endif %}
                </span>
            </div>
        </div>

        <div class="flex items-center gap-2">
            {% if session.get('user_id') and (session.get('user_id') == issue.created_by or repo.owner_id ==
            session.get('user_id')) %}
            <button id="toggle-status-btn" onclick="toggleIssueStatus({{ issue.id }}, '{{ issue.status }}')"
                class="px-4 py-2 rounded-lg border border-white/10 hover:bg-white/5 text-zinc-400 hover:text-white transition-all text-sm font-medium">
                {{ 'Close Issue' if issue.status == 'open' else 'Reopen Issue' }}
            </button>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <div class="lg:col-span-3 space-y-8">
            <!-- Issue Body -->
            <div class="rounded-xl border border-white/10 bg-black/20 overflow-hidden relative group">
                <div class="px-4 py-3 bg-white/5 border-b border-white/5 flex items-center justify-between">
                    <div class="flex items-center gap-2 text-xs font-bold text-zinc-400 uppercase tracking-wider">
                        <img src="{{ url_for('static', filename=issue.author_avatar) }}"
                            class="w-6 h-6 rounded-md object-cover border border-white/10" alt="">
                        <span class="text-white">{{ issue.author_name }}</span> commented {{ issue.created_at |
                        timesince }}
                    </div>
                    <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button onclick="quoteReply('{{ issue.author_name }}', 'issue-raw-{{ issue.id }}')"
                            class="p-1.5 hover:bg-white/10 rounded text-zinc-500 hover:text-zinc-300 transition-colors"
                            title="Quote reply">
                            <i data-lucide="message-square-plus" class="h-4 w-4"></i>
                        </button>
                    </div>
                </div>
                <div id="issue-body-content" class="p-6 text-zinc-300 font-sans leading-relaxed markdown-body">
                    <!-- JS will render markdown here -->
                </div>
                <div id="issue-raw-{{ issue.id }}" class="hidden">{{ issue.description }}</div>
            </div>

            <!-- Comments -->
            <div id="comments-list"
                class="space-y-6 relative before:absolute before:left-8 before:top-0 before:bottom-0 before:w-px before:bg-white/5 before:-z-10">
                {% for comment in comments %}
                <div class="relative pl-16 group comment-item" id="comment-{{ comment.id }}"
                    data-comment-id="{{ comment.id }}">
                    <img src="{{ url_for('static', filename=comment.author_avatar) }}"
                        class="absolute left-0 top-0 w-10 h-10 rounded-xl object-cover border-2 border-zinc-900 shadow-lg z-10"
                        alt="">

                    <div class="rounded-xl border border-white/10 bg-black/20 overflow-hidden relative w-full">
                        <div class="px-4 py-3 bg-white/5 border-b border-white/5 flex items-center justify-between">
                            <div
                                class="flex items-center gap-2 text-xs font-bold text-zinc-500 uppercase tracking-wider">
                                <span class="text-zinc-300">{{ comment.author_name }}</span> commented {{
                                comment.created_at | timesince }}
                            </div>
                            <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                <button
                                    onclick="quoteReply('{{ comment.author_name }}', 'comment-raw-{{ comment.id }}')"
                                    class="p-1.5 hover:bg-white/10 rounded text-zinc-500 hover:text-zinc-300 transition-colors"
                                    title="Quote reply">
                                    <i data-lucide="message-square-plus" class="h-4 w-4"></i>
                                </button>
                            </div>
                        </div>
                        <div id="comment-body-{{ comment.id }}"
                            class="p-4 text-zinc-300 text-sm leading-relaxed markdown-body">
                            <!-- JS will render markdown here -->
                        </div>
                        <div id="comment-raw-{{ comment.id }}" class="hidden">{{ comment.content }}</div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- New Comment Form -->
            {% if session.get('user_id') %}
            <div class="flex gap-4 pt-6 border-t border-white/5 mt-8 items-start">
                <img src="{{ url_for('static', filename=g.user.profile_picture) }}"
                    class="w-10 h-10 rounded-xl object-cover border border-white/10" alt="">
                <div class="flex-1 space-y-4">
                    <textarea id="new-comment-content" rows="4"
                        class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all outline-none resize-y min-h-[100px]"
                        placeholder="Leave a comment"></textarea>

                    <div class="flex justify-end gap-3">
                        {% if issue.status == 'open' %}
                        <button onclick="toggleIssueStatus({{ issue.id }}, 'open')"
                            class="px-4 py-2 text-zinc-400 hover:text-white hover:bg-white/5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
                            <i data-lucide="check-circle-2" class="h-4 w-4"></i> Close with comment
                        </button>
                        {% else %}
                        <button onclick="toggleIssueStatus({{ issue.id }}, 'closed')"
                            class="px-4 py-2 text-zinc-400 hover:text-white hover:bg-white/5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
                            <i data-lucide="circle-dot" class="h-4 w-4"></i> Reopen with comment
                        </button>
                        {% endif %}

                        <button onclick="submitComment({{ issue.id }})"
                            class="px-6 py-2 bg-green-600 hover:bg-green-500 text-white font-bold rounded-lg shadow-lg shadow-green-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm">
                            Comment
                        </button>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="text-center py-8 border-t border-white/5 mt-8">
                <p class="text-zinc-500 text-sm">You must be logged in to comment.</p>
                <a href="{{ url_for('login') }}" class="inline-block mt-3 glass-button px-6 py-2 rounded-lg text-sm">Log
                    in</a>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="lg:col-span-1 space-y-6">
            <div class="p-4 rounded-xl border border-white/5 bg-black/20 space-y-4">
                <div>
                    <span
                        class="text-xs font-bold text-zinc-500 uppercase tracking-widest flex justify-between items-center mb-2">
                        Assignees
                        {% if g.user and repo.can_write %}
                        {% set assigned_to_me = assignees | selectattr('username', 'equalto', g.user.username) | list |
                        length > 0 %}
                        {% if assigned_to_me %}
                        <button id="assign-self-btn" onclick="unassignSelf()" class="text-zinc-500 hover:text-red-400 transition-colors"
                            title="Unassign me" data-assigned="true">
                            <i data-lucide="minus" class="h-3.5 w-3.5"></i>
                        </button>
                        {% else %}
                        <button id="assign-self-btn" onclick="assignSelf()" class="text-zinc-500 hover:text-blue-400 transition-colors"
                            title="Assign me" data-assigned="false">
                            <i data-lucide="plus" class="h-3.5 w-3.5"></i>
                        </button>
                        {% endif %}
                        {% endif %}
                    </span>
                    <div id="assignees-container">
                    {% if assignees %}
                    <div id="assignees-list" class="flex flex-col gap-2">
                        {% for assignee in assignees %}
                        <a href="/user/{{ assignee.username }}" class="flex items-center gap-2 group assignee-item" data-username="{{ assignee.username }}">
                            <img src="{{ url_for('static', filename=assignee.profile_picture) }}" alt=""
                                class="w-6 h-6 rounded-full ring-2 ring-zinc-900/50 group-hover:ring-blue-500/50 transition-all object-cover">
                            <span
                                class="text-sm font-medium text-zinc-300 group-hover:text-blue-400 transition-colors">{{
                                assignee.username }}</span>
                        </a>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div id="assignees-empty" class="text-sm text-zinc-400 italic">No one assigned</div>
                    {% endif %}
                    </div>
                </div>
                <div>
                    {% set can_manage_labels = (g.user and (repo.can_write or issue.created_by == g.user.id)) %}
                    <span
                        class="text-xs font-bold text-zinc-500 uppercase tracking-widest flex justify-between items-center mb-2">
                        Labels
                        {% if can_manage_labels %}
                        <button onclick="toggleLabelForm()" class="text-zinc-500 hover:text-blue-400 transition-colors"
                            title="Add label"><i data-lucide="plus" class="h-3.5 w-3.5"></i></button>
                        {% endif %}
                    </span>

                    {% if can_manage_labels %}
                    <div id="label-form"
                        class="hidden mb-3 bg-white/[0.02] border border-white/5 rounded-lg p-2 flex flex-col gap-2">
                        <input type="text" id="new-label-name" placeholder="Label name..."
                            class="bg-black/40 border border-white/10 rounded px-2 py-1 text-xs text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500/50">
                        <div class="flex items-center gap-2">
                            <input type="color" id="new-label-color" value="#3b82f6"
                                class="w-6 h-6 rounded cursor-pointer border-0 p-0 bg-transparent">
                            <button onclick="addLabel()"
                                class="flex-1 bg-white/10 hover:bg-white/20 text-white rounded py-1 px-2 text-xs font-semibold transition-colors">Add</button>
                        </div>
                    </div>
                    {% endif %}

                    <div id="labels-container">
                    {% if labels %}
                    <div id="labels-list" class="flex flex-wrap gap-1.5">
                        {% for label in labels %}
                        <span class="label-item px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1.5 group/label"
                            data-name="{{ label.name|e }}" data-color="{{ label.color|e }}"
                            style="background-color: {{ label.color }}20; color: {{ label.color }}; border: 1px solid {{ label.color }}40;">
                            {{ label.name }}
                            {% if can_manage_labels %}
                            <button onclick="removeLabel(this.closest('.label-item').dataset.name)"
                                class="hover:opacity-70 transition-opacity">
                                <i data-lucide="x" class="h-3 w-3"></i>
                            </button>
                            {% endif %}
                        </span>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div id="labels-empty" class="text-sm text-zinc-400 italic">None yet</div>
                    {% endif %}
                    </div>
                </div>
                <div>
                    <span
                        class="text-xs font-bold text-zinc-500 uppercase tracking-widest block mb-2">Participants</span>
                    <div class="flex flex-wrap gap-1 py-1">
                        {% for participant in participants %}
                        <div class="relative group inline-block">
                            <a href="/user/{{ participant.username }}">
                                <img class="h-8 w-8 rounded-full ring-2 ring-zinc-900 object-cover cursor-pointer hover:ring-blue-500 transition-all"
                                    src="{{ url_for('static', filename=participant.profile_picture) }}"
                                    alt="{{ participant.username }}" />
                            </a>
                            <div
                                class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-xl">
                                {{ participant.username }}
                                <div
                                    class="absolute top-full left-1/2 -translate-x-1/2 border-[4px] border-transparent border-t-zinc-800">
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="p-4 rounded-xl border border-white/5 bg-black/20">
                <button id="subscribe-btn" onclick="toggleSubscribe()"
                    class="w-full text-left flex items-center justify-between text-sm text-zinc-400 hover:text-white transition-colors group">
                    <span id="subscribe-text" class="font-medium">{{ 'Unsubscribe' if is_subscribed else 'Subscribe'
                        }}</span>
                    <i id="subscribe-icon" data-lucide="bell"
                        class="h-4 w-4 {{ 'text-blue-400 fill-blue-400/20' if is_subscribed else 'text-zinc-600 group-hover:text-blue-400' }}"></i>
                </button>
                <p id="subscribe-desc" class="text-xs text-zinc-600 mt-2 leading-relaxed">{{ "You're receiving
                    notifications from this thread." if is_subscribed else "You're not receiving notifications from this
                    thread." }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    window.lastCommentId = {{ comments[-1].id if comments else 0 }};
    window.issueStatus = '{{ issue.status }}';
    window.issueId = {{ issue.id }};
    window.repoOwner = '{{ repo_owner }}';
    window.repoName = '{{ repo_name }}';
    {% if g.user %}
    window.currentUser = { username: {{ g.user.username|tojson }}, profile_picture: {{ g.user.profile_picture|default('')|tojson }} };
    window.canManageLabels = {{ 'true' if (repo.can_write or issue.created_by == g.user.id) else 'false' }};
    {% else %}
    window.currentUser = null;
    window.canManageLabels = false;
    {% endif %}

    // Clean up old polling interval if it exists (SPA navigation)
    if (window.issuePollInterval) {
        clearInterval(window.issuePollInterval);
        window.issuePollInterval = null;
    }

    // Leave previous issue room if navigating between issues
    if (window._issueSocket && window._issueRoom) {
        window._issueSocket.emit('leave_issue', {
            repo_owner: window._issueRoom.repo_owner,
            repo_name: window._issueRoom.repo_name,
            issue_id: window._issueRoom.issue_id
        });
    }

    // Connect to Socket.IO and join this issue's room
    if (!window._issueSocket) {
        window._issueSocket = io({ transports: ['polling'] });  // websocket triggers 500 with Werkzeug dev server
    }

    window._issueRoom = {
        repo_owner: window.repoOwner,
        repo_name: window.repoName,
        issue_id: window.issueId
    };

    window._issueSocket.emit('join_issue', window._issueRoom);

    // Remove previous listener to avoid duplicates on SPA navigation
    window._issueSocket.off('new_issue_comment');
    window._issueSocket.on('new_issue_comment', (comment) => {
        if (comment.id > window.lastCommentId) {
            addCommentToDOM(comment);
            window.lastCommentId = comment.id;
        }
    });

    // Initial Markdown Rendering
    function initIssueDetail() {
        if (!window.marked) return;

        // Render Issue Body
        const issueRaw = document.getElementById('issue-raw-{{ issue.id }}');
        const issueTarget = document.getElementById('issue-body-content');
        if (issueRaw && issueTarget) {
            issueTarget.innerHTML = marked.parse(issueRaw.innerText);
            if (window.linkifyMentions) window.linkifyMentions(issueTarget);
        }

        // Render Existing Comments
        document.querySelectorAll('[id^="comment-raw-"]').forEach(rawEl => {
            const id = rawEl.id.replace('comment-raw-', '');
            const targetEl = document.getElementById(`comment-body-${id}`);
            if (targetEl) {
                targetEl.innerHTML = marked.parse(rawEl.innerText);
                if (window.linkifyMentions) window.linkifyMentions(targetEl);
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initIssueDetail);
    } else {
        initIssueDetail();
    }

    function addCommentToDOM(comment) {
        const list = document.getElementById('comments-list');
        // Check duplicate
        if (document.getElementById(`comment-${comment.id}`)) return;

        const div = document.createElement('div');
        div.className = 'relative pl-16 group comment-item animate-fade-in-up';
        div.id = `comment-${comment.id}`;
        div.dataset.commentId = comment.id;

        div.innerHTML = `
<img src="/static/${comment.author_avatar}"
    class="absolute left-0 top-0 w-10 h-10 rounded-xl object-cover border-2 border-zinc-900 shadow-lg z-10" alt="">

<div class="rounded-xl border border-white/10 bg-black/20 overflow-hidden relative w-full">
    <div class="px-4 py-3 bg-white/5 border-b border-white/5 flex items-center justify-between">
        <div class="flex items-center gap-2 text-xs font-bold text-zinc-500 uppercase tracking-wider">
            <span class="text-zinc-300">${comment.author_name}</span> commented just now
        </div>
        <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
            <button onclick="quoteReply('${comment.author_name}', 'comment-raw-${comment.id}')"
                class="p-1.5 hover:bg-white/10 rounded text-zinc-500 hover:text-zinc-300 transition-colors"
                title="Quote reply">
                <i data-lucide="message-square-plus" class="h-4 w-4"></i>
            </button>
        </div>
    </div>
    <div class="p-4 text-zinc-300 text-sm leading-relaxed markdown-body">
        ${window.marked ? window.marked.parse(comment.content) : comment.content}
    </div>
    <div id="comment-raw-${comment.id}" class="hidden">${comment.content}</div>
    <div id="comment-body-${comment.id}" class="hidden"></div>
</div>
`;
        list.appendChild(div);
        if (window.lucide) window.lucide.createIcons({ root: div });
        if (window.linkifyMentions) window.linkifyMentions(div);
    }

    async function submitComment(issueId) {
        const content = document.getElementById('new-comment-content').value;
        if (!content.trim()) return;

        try {
            const response = await fetch(`/${window.repoOwner}/${window.repoName}/issues/${issueId}/comment`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ content: content })
            });

            if (response.ok) {
                document.getElementById('new-comment-content').value = '';
                // Comment will arrive via Socket.IO broadcast — no need to add manually
            } else {
                alert('Failed to post comment');
            }
        } catch (e) {
            alert('Error posting comment');
        }
    }

    async function toggleIssueStatus(issueId, currentStatus) {
        const newStatus = currentStatus === 'open' ? 'closed' : 'open';

        // Check if there is comment content to post first
        const commentContent = document.getElementById('new-comment-content')?.value;
        if (commentContent && commentContent.trim() !== '') {
            await submitComment(issueId);
        }

        try {
            // Corrected URL
            const response = await fetch(`/${window.repoOwner}/${window.repoName}/issues/${issueId}/status`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ status: newStatus })
            });

            if (response.ok) {
                window.location.reload();
            }
        } catch (e) {
            alert("Error updating status");
        }
    }

    function quoteReply(author, contentId) {
        const rawContent = document.getElementById(contentId).innerText;
        const textarea = document.getElementById('new-comment-content');

        // Split content by newlines and add > prefix
        const quoted = rawContent.split('\n').map(line => `> ${line}`).join('\n');

        const prefix = textarea.value ? '\n\n' : '';
        textarea.value += `${prefix}> **${author}** wrote:\n${quoted}\n\n`;
        textarea.focus();
        textarea.scrollTop = textarea.scrollHeight;
    }

    window.isSubscribed = {{ 'true' if is_subscribed else 'false' }};
    async function toggleSubscribe() {
        const action = window.isSubscribed ? 'unsubscribe' : 'subscribe';
        const url = `/{{ repo_owner }}/{{ repo_name }}/issues/{{ issue.id }}/${action}`;
        try {
            const res = await fetch(url, { method: 'POST' });
            const data = await res.json();
            if (res.ok && data.success) {
                window.isSubscribed = data.subscribed;
                const btnText = document.getElementById('subscribe-text');
                const icon = document.getElementById('subscribe-icon');
                const desc = document.getElementById('subscribe-desc');

                if (window.isSubscribed) {
                    btnText.innerText = 'Unsubscribe';
                    desc.innerText = "You're receiving notifications from this thread.";
                    icon.classList.remove('text-zinc-600');
                    icon.classList.add('text-blue-400', 'fill-blue-400/20');
                } else {
                    btnText.innerText = 'Subscribe';
                    desc.innerText = "You're not receiving notifications from this thread.";
                    icon.classList.add('text-zinc-600');
                    icon.classList.remove('text-blue-400', 'fill-blue-400/20');
                }
            }
        } catch (err) {
            console.error('Subscribe toggle error:', err);
        }
    }

    // Assignee functions (update DOM without reload)
    function ensureAssigneesList() {
        let list = document.getElementById('assignees-list');
        const empty = document.getElementById('assignees-empty');
        if (!list) {
            list = document.createElement('div');
            list.id = 'assignees-list';
            list.className = 'flex flex-col gap-2';
            if (empty) empty.remove();
            document.getElementById('assignees-container').appendChild(list);
        }
        if (empty) empty.remove();
        return list;
    }
    function addAssigneeToDOM(username, profilePicture) {
        const list = ensureAssigneesList();
        if (list.querySelector(`[data-username="${username}"]`)) return;
        const a = document.createElement('a');
        a.href = `/user/${username}`;
        a.className = 'flex items-center gap-2 group assignee-item';
        a.dataset.username = username;
        a.innerHTML = `
            <img src="/static/${profilePicture}" alt="" class="w-6 h-6 rounded-full ring-2 ring-zinc-900/50 group-hover:ring-blue-500/50 transition-all object-cover">
            <span class="text-sm font-medium text-zinc-300 group-hover:text-blue-400 transition-colors">${username}</span>
        `;
        list.appendChild(a);
    }
    function removeAssigneeFromDOM(username) {
        const item = document.querySelector(`.assignee-item[data-username="${username}"]`);
        if (item) item.remove();
        const list = document.getElementById('assignees-list');
        if (list && list.children.length === 0) {
            list.remove();
            const empty = document.createElement('div');
            empty.id = 'assignees-empty';
            empty.className = 'text-sm text-zinc-400 italic';
            empty.textContent = 'No one assigned';
            document.getElementById('assignees-container').appendChild(empty);
        }
    }
    function updateAssignButton(isAssigned) {
        const btn = document.getElementById('assign-self-btn');
        if (!btn) return;
        btn.dataset.assigned = isAssigned ? 'true' : 'false';
        if (isAssigned) {
            btn.onclick = unassignSelf;
            btn.title = 'Unassign me';
            btn.classList.remove('text-blue-400');
            btn.classList.add('text-red-400');
            btn.innerHTML = '<i data-lucide="minus" class="h-3.5 w-3.5"></i>';
        } else {
            btn.onclick = assignSelf;
            btn.title = 'Assign me';
            btn.classList.remove('text-red-400');
            btn.classList.add('text-blue-400');
            btn.innerHTML = '<i data-lucide="plus" class="h-3.5 w-3.5"></i>';
        }
        if (window.lucide) window.lucide.createIcons({ root: btn });
    }
    async function assignSelf() {
        if (!window.currentUser) return;
        try {
            const res = await fetch(`/${window.repoOwner}/${window.repoName}/issues/${window.issueId}/assign`, { method: 'POST' });
            const data = await res.json().catch(() => ({}));
            if (res.ok && (data.success !== false)) {
                addAssigneeToDOM(window.currentUser.username, window.currentUser.profile_picture);
                updateAssignButton(true);
            } else {
                alert(data.error || 'Failed to assign');
            }
        } catch (err) { console.error(err); alert('Error assigning'); }
    }
    async function unassignSelf() {
        if (!window.currentUser) return;
        try {
            const res = await fetch(`/${window.repoOwner}/${window.repoName}/issues/${window.issueId}/unassign`, { method: 'POST' });
            const data = await res.json().catch(() => ({}));
            if (res.ok && (data.success !== false)) {
                removeAssigneeFromDOM(window.currentUser.username);
                updateAssignButton(false);
            } else {
                alert(data.error || 'Failed to unassign');
            }
        } catch (err) { console.error(err); alert('Error unassigning'); }
    }

    // Label functions (update DOM without reload)
    function toggleLabelForm() {
        const form = document.getElementById('label-form');
        form.classList.toggle('hidden');
    }
    function ensureLabelsList() {
        let list = document.getElementById('labels-list');
        const empty = document.getElementById('labels-empty');
        if (!list) {
            list = document.createElement('div');
            list.id = 'labels-list';
            list.className = 'flex flex-wrap gap-1.5';
            if (empty) empty.remove();
            document.getElementById('labels-container').appendChild(list);
        }
        if (empty) empty.remove();
        return list;
    }
    function addLabelToDOM(name, color) {
        const list = ensureLabelsList();
        if (list.querySelector(`.label-item[data-name="${CSS.escape(name)}"]`)) return;
        const span = document.createElement('span');
        span.className = 'label-item px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1.5 group/label';
        span.dataset.name = name;
        span.dataset.color = color;
        span.style.backgroundColor = color + '20';
        span.style.color = color;
        span.style.border = `1px solid ${color}40`;
        span.innerHTML = window.canManageLabels
            ? `${name} <button onclick="removeLabel(this.closest('.label-item').dataset.name)" class="hover:opacity-70 transition-opacity"><i data-lucide="x" class="h-3 w-3"></i></button>`
            : name;
        list.appendChild(span);
        if (window.lucide) window.lucide.createIcons({ root: span });
    }
    function removeLabelFromDOM(name) {
        const item = document.querySelector(`.label-item[data-name="${CSS.escape(name)}"]`);
        if (item) item.remove();
        const list = document.getElementById('labels-list');
        if (list && list.children.length === 0) {
            list.remove();
            const empty = document.createElement('div');
            empty.id = 'labels-empty';
            empty.className = 'text-sm text-zinc-400 italic';
            empty.textContent = 'None yet';
            document.getElementById('labels-container').appendChild(empty);
        }
    }
    async function addLabel() {
        const nameInput = document.getElementById('new-label-name');
        const colorInput = document.getElementById('new-label-color');
        const name = nameInput.value.trim();
        const color = colorInput?.value || '#3b82f6';
        if (!name) return;

        try {
            const res = await fetch(`/${window.repoOwner}/${window.repoName}/issues/${window.issueId}/labels`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name, color })
            });
            const data = await res.json().catch(() => ({}));
            if (res.ok && (data.success !== false)) {
                addLabelToDOM(name, color);
                nameInput.value = '';
                toggleLabelForm();
            } else {
                alert(data.error || 'Failed to add label');
            }
        } catch (err) { console.error(err); alert('Error adding label'); }
    }
    async function removeLabel(name) {
        try {
            const res = await fetch(`/${window.repoOwner}/${window.repoName}/issues/${window.issueId}/labels`, {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name })
            });
            const data = await res.json().catch(() => ({}));
            if (res.ok && (data.success !== false)) {
                removeLabelFromDOM(name);
            } else {
                alert(data.error || 'Failed to remove label');
            }
        } catch (err) { console.error(err); alert('Error removing label'); }
    }
</script>
<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in-up {
        animation: fadeInUp 0.5s ease-out forwards;
    }
</style>
{% endblock %}