{% extends 'repository/repo_layout.html' %}
{% from "_custom_select.html" import custom_select %}

{% block title %}Task #{{ task.id }} - {{ repo_owner }}/{{ repo_name }}{% endblock %}

{% block repo_content %}
<div class="flex flex-col space-y-6">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-white/5">
        <div class="flex flex-wrap items-center gap-3 md:gap-4">
            <span class="text-zinc-500 text-xl font-light">#{{ task.id }}</span>
            <h1 class="text-2xl md:text-3xl font-bold tracking-tight text-white break-words max-w-full">{{ task.title }}
            </h1>
            <div class="flex items-center gap-2">
                <span id="task-status-badge"
                    class="issue-status-badge {{ 'bg-orange-500/20 text-orange-400 border border-orange-500/40' if task.status == 'To Do' else 'bg-blue-500/20 text-blue-400 border border-blue-500/40' if task.status == 'In Progress' else 'bg-purple-500/20 text-purple-400 border border-purple-500/40' }} px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest flex items-center">
                    {% if task.status == 'To Do' %}
                    <i data-lucide="circle-dot" class="h-4 w-4 mr-1.5"></i> To Do
                    {% elif task.status == 'In Progress' %}
                    <i data-lucide="clock" class="h-4 w-4 mr-1.5"></i> In Progress
                    {% else %}
                    <i data-lucide="check-circle-2" class="h-4 w-4 mr-1.5"></i> Done
                    {% endif %}
                </span>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            {% if repo.can_write and (task.created_by == g.user.id or repo.owner_id == g.user.id) %}
            <button onclick="toggleEditTask()" id="edit-task-btn"
                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 flex items-center gap-2 mr-2">
                <i data-lucide="edit-2" class="h-4 w-4"></i> Edit Task
            </button>
            {% endif %}
            {% if repo.can_write %}
            <div
                class="mr-2 inline-flex items-center rounded-lg border border-white/10 hover:bg-white/5 transition-colors">
                {{ custom_select(id="task-status-select", options=[
                    {"value": "To Do", "label": "To Do"},
                    {"value": "In Progress", "label": "In Progress"},
                    {"value": "Done", "label": "Done"}
                ], selected_value=task.status, selected_label=task.status, mode="form", picker_title="Update status", compact=true,
                    class="[&_.modal-select-trigger]:rounded-lg [&_.modal-select-trigger]:border-0 [&_.modal-select-trigger]:bg-transparent [&_.modal-select-trigger]:shadow-none [&_.modal-select-value]:text-sm [&_.modal-select-value]:font-medium [&_.modal-select-value]:text-zinc-400 hover:[&_.modal-select-value]:text-white") }}
            </div>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <div class="lg:col-span-3 space-y-8">
            <!-- Task Body -->
            <div id="task-view-container"
                class="rounded-xl border border-white/10 bg-black/20 overflow-hidden relative group">
                <div class="px-3 md:px-4 py-3 bg-white/5 border-b border-white/5 flex items-center justify-between">
                    <div
                        class="flex flex-wrap items-center gap-1 md:gap-2 text-[10px] md:text-xs font-bold text-zinc-400 uppercase tracking-wider">
                        <img src="{{ url_for('static', filename=task.author_avatar) }}"
                            class="w-5 h-5 md:w-6 md:h-6 rounded-md object-cover border border-white/10" alt="">
                        <span class="text-white ml-1">{{ task.author_name }}</span>
                        <span class="hidden sm:inline">created task</span>
                        {{ task.created_at | timesince }}
                    </div>
                </div>
                <div id="task-body-content" class="p-6 text-zinc-300 font-sans leading-relaxed markdown-body">
                    <!-- JS will render markdown here -->
                </div>
                <div id="task-raw" class="hidden">{{ task.description }}</div>
            </div>

            <!-- Task Edit Context -->
            <div id="task-edit-container"
                class="hidden rounded-xl border border-white/10 bg-black/20 overflow-hidden relative group space-y-4 p-4">
                <input type="text" id="edit-task-title" value="{{ task.title }}"
                    class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2 text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500/50 text-xl font-bold">
                <textarea id="edit-task-description" rows="6"
                    class="w-full bg-black/40 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"
                    placeholder="Task Description">{{ task.description }}</textarea>
                <div class="flex justify-end gap-3">
                    <button onclick="toggleEditTask()"
                        class="px-4 py-2 hover:bg-white/5 text-zinc-400 transition-all rounded-lg text-sm font-bold">Cancel</button>
                    <button onclick="saveTaskEdit()"
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-lg shadow-lg shadow-blue-500/20 transition-all text-sm">Save</button>
                </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"></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">
                        <button onclick="submitComment({{ task.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 repo.can_write %}
                        <button onclick="toggleAssigneeForm()"
                            class="text-zinc-500 hover:text-blue-400 transition-colors" title="Add Assignee"><i
                                data-lucide="plus" class="h-3.5 w-3.5"></i></button>
                        {% endif %}
                    </span>

                    {% if repo.can_write %}
                    <div id="assignee-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-assignee-username" placeholder="Username..."
                            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">
                        <button onclick="addAssignee({{ task.id }})"
                            class="bg-white/10 hover:bg-white/20 text-white rounded py-1 px-2 text-xs font-semibold transition-colors">Assign</button>
                    </div>
                    {% endif %}

                    {% if assignees %}
                    <div class="flex flex-col gap-2">
                        {% for assignee in assignees %}
                        <div class="flex items-center justify-between group">
                            <a href="/user/{{ assignee.username }}" class="flex items-center gap-2">
                                <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>
                            {% if repo.can_write %}
                            <button onclick="removeAssignee({{ task.id }}, '{{ assignee.username }}')"
                                class="text-zinc-500 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100"
                                title="Remove">
                                <i data-lucide="x" class="h-4 w-4"></i>
                            </button>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-sm text-zinc-400 italic">No one assigned</div>
                    {% endif %}
                </div>

                <div class="pt-4 border-t border-white/5">
                    <span class="text-xs font-bold text-zinc-500 uppercase tracking-widest block mb-2">Details</span>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-zinc-400">Type</span>
                            <span class="text-zinc-300 font-medium">{{ task.task_type }}</span>
                        </div>
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-zinc-400">Priority</span>
                            <span
                                class="text-zinc-300 font-medium {% if task.priority == 'HIGH' %}text-red-400{% elif task.priority == 'MED' %}text-yellow-400{% else %}text-green-400{% endif %}">{{
                                task.priority }}</span>
                        </div>
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-zinc-400">Complexity</span>
                            <span
                                class="text-zinc-300 font-medium {% if task.complexity == 'HIGH' %}text-red-400{% elif task.complexity == 'MED' %}text-yellow-400{% else %}text-green-400{% endif %}">{{
                                task.complexity }}</span>
                        </div>
                        {% if task.due_date %}
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-zinc-400">Due Date</span>
                            <span class="text-zinc-300 font-medium">{{ task.due_date }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function toggleAssigneeForm() {
        const form = document.getElementById('assignee-form');
        form.classList.toggle('hidden');
    }

    async function addAssignee(taskId) {
        const usernameInput = document.getElementById('new-assignee-username');
        const username = usernameInput.value.trim();
        if (!username) return;

        try {
            const res = await fetch(`/{{ repo_owner }}/{{ repo_name }}/tasks/${taskId}/assign`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username })
            });
            const data = await res.json();
            if (res.ok) {
                window.location.reload();
            } else {
                alert(data.error || 'Failed to assign user');
            }
        } catch (err) { console.error(err); }
    }

    async function removeAssignee(taskId, username) {
        try {
            const res = await fetch(`/{{ repo_owner }}/{{ repo_name }}/tasks/${taskId}/unassign`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username })
            });
            if (res.ok) window.location.reload();
        } catch (err) { console.error(err); }
    }

    async function updateTaskStatus(taskId, status) {
        if (status === window.taskStatus) return;
        const sel = document.getElementById('task-status-select');
        const wrap = sel && sel.closest('.modal-select');
        const valSpan = wrap && wrap.querySelector('.modal-select-value');
        const prev = window.taskStatus;
        try {
            const res = await fetch(`/{{ repo_owner }}/{{ repo_name }}/tasks/${taskId}/update`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ status })
            });
            if (res.ok) {
                window.location.reload();
            } else {
                const data = await res.json().catch(() => ({}));
                alert(data.error || 'Failed to update status');
                if (sel) sel.value = prev;
                if (valSpan) valSpan.textContent = prev;
            }
        } catch (err) {
            console.error(err);
            if (sel) sel.value = prev;
            if (valSpan) valSpan.textContent = prev;
        }
    }

    window.lastCommentId = parseInt("{{ comments[-1]['id'] if comments else 0 }}", 10);
    window.taskStatus = '{{ task.status }}';
    window.taskId = {{ task.id }};
    window.repoOwner = '{{ repo_owner }}';
    window.repoName = '{{ repo_name }}';

    (function bindTaskStatusPicker() {
        const el = document.getElementById('task-status-select');
        if (el) el.addEventListener('change', function () { updateTaskStatus(window.taskId, this.value); });
    })();

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

    // Leave previous task room if navigating between tasks
    if (window._taskSocket && window._taskRoom) {
        window._taskSocket.emit('leave_task', {
            repo_owner: window._taskRoom.repo_owner,
            repo_name: window._taskRoom.repo_name,
            task_id: window._taskRoom.task_id
        });
    }

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

    window._taskRoom = {
        repo_owner: window.repoOwner,
        repo_name: window.repoName,
        task_id: window.taskId
    };

    window._taskSocket.emit('join_task', window._taskRoom);

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

    function toggleEditTask() {
        const viewContainer = document.getElementById('task-view-container');
        const editContainer = document.getElementById('task-edit-container');
        if (viewContainer.classList.contains('hidden')) {
            viewContainer.classList.remove('hidden');
            editContainer.classList.add('hidden');
        } else {
            viewContainer.classList.add('hidden');
            editContainer.classList.remove('hidden');
        }
    }

    async function saveTaskEdit() {
        const title = document.getElementById('edit-task-title').value;
        const description = document.getElementById('edit-task-description').value;

        try {
            const res = await fetch(`/{{ repo_owner }}/{{ repo_name }}/tasks/{{ task.id }}/edit`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ title, description })
            });
            if (res.ok) {
                window.location.reload();
            } else {
                alert('Failed to save task.');
            }
        } catch (err) {
            console.error(err);
        }
    }

    function addCommentToDOM(comment) {
        const list = document.getElementById('comments-list');
        const div = document.createElement('div');
        div.className = 'relative pl-16 group comment-item animate-fade-in-up';
        div.id = `comment-${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 id="comment-body-${comment.id}" 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>`;
        list.appendChild(div);
        if (window.lucide) window.lucide.createIcons({ root: div });
        if (window.linkifyMentions) window.linkifyMentions(div);
    }

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

        try {
            const response = await fetch(`/{{ repo_owner }}/{{ repo_name }}/tasks/${taskId}/comment`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ content: content })
            });

            if (response.ok) {
                document.getElementById('new-comment-content').value = '';
            } else {
                alert('Failed to post comment');
            }
        } catch (e) {
            alert('Error posting comment');
        }
    }

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

        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;
    }

    function initTaskDetail() {
        if (!window.marked) return;
        const taskRaw = document.getElementById('task-raw');
        const taskTarget = document.getElementById('task-body-content');
        if (taskRaw && taskTarget) {
            taskTarget.innerHTML = marked.parse(taskRaw.innerText);
            if (window.linkifyMentions) window.linkifyMentions(taskTarget);
        }

        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', initTaskDetail);
    } else {
        initTaskDetail();
    }
</script>
{% endblock %}