{% extends "base.html" %}
{% block title %}Task Board - ICDEV™ Dashboard{% endblock %}
{% block content %}
<!-- EDITED_BY_CLAUDE_V3 -->
<div class="page-header">
    <h1>Task Board</h1>
    <p class="subtitle">Manage scheduled and planned tasks — drag across columns or use arrow buttons to move.</p>
</div>

<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
    <input type="text" id="kanban-filter-input" placeholder="Filter by title, id, priority..." aria-label="Filter tasks"
           style="flex:1; max-width:420px; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
    <span id="kanban-filter-count" style="font-size:12px; color:var(--text-dim);"></span>
    <div style="margin-left:auto; display:flex; gap:8px; align-items:center;">
        <label style="font-size:12px; color:var(--text-dim); white-space:nowrap;">Executor:</label>
        <select id="kanban-executor-chain" onchange="setExecutorChain(this.value)" title="Global executor fallback chain (affects scheduler dispatch)"
                style="padding:6px 8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px; cursor:pointer;">
            <option value="claude_cli,gitlab,ollama_local">🤖 Claude CLI → GitLab → Ollama</option>
            <option value="gitlab,ollama_local">🦊 GitLab → Ollama (air-gap)</option>
            <option value="github_actions,ollama_local">⚙️ GitHub Actions → Ollama (air-gap)</option>
            <option value="ollama_local">🦙 Ollama Local only</option>
        </select>
        <button class="btn" onclick="openDepMapModal()" title="View dependency graph">🔗 Dep Map</button>
        <button class="btn" onclick="openTagManagerModal()" title="Manage tags">🏷 Tags</button>
        <button class="btn btn-primary" onclick="openAddTaskModal()">+ Add Task</button>
    </div>
</div>

<div class="kanban-board" id="kanban-board">
    {# 'blocked' is a DERIVED bucket: task_pipeline.js folds ci_failed /
       merge_conflict / changes_requested / failed / token_exhausted /
       validating into it. It is not a storable status — never a move target. #}
    {% set columns = [
        ("suggested", "Suggested"),
        ("backlog", "Backlog"),
        ("scheduled", "Scheduled"),
        ("in_progress", "In Progress"),
        ("pr_opened", "Awaiting Merge"),
        ("blocked", "Blocked"),
        ("done", "Done")
    ] %}
    {% for status_key, status_label in columns %}
    <div class="kanban-column" data-status="{{ status_key }}">
        <div class="kanban-column-header">
            <h3>{{ status_label }}</h3>
            <span class="kanban-column-count">0</span>
            {% if status_key == "suggested" %}
            <select id="promote-all-gate" style="margin-left:auto; font-size:11px; padding:3px 6px; background:var(--bg-code); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); cursor:pointer;">
                <option value="" selected>All suggested</option>
                <option value="value10">Value ≥ 1.0</option>
                <option value="value08">Value ≥ 0.8</option>
                <option value="conf95">Confidence ≥ 90%</option>
                <option value="conf70">Confidence ≥ 70%</option>
            </select>
            <button class="btn btn-sm" id="btn-promote-all" onclick="promoteAllSuggested()" title="Promote filtered suggested cards to backlog" style="padding:4px 12px; font-size:12px; font-weight:600; background:#22c55e; color:#fff; border:none; border-radius:4px; cursor:pointer; display:none; letter-spacing:0.3px;">↑ Promote</button>
            {% endif %}
        </div>
        <div class="kanban-column-body">
            <div class="kanban-empty">Loading...</div>
        </div>
    </div>
    {% endfor %}
</div>


<!-- Add/Edit Task Modal -->
<div id="task-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card, #1e293b); border-radius:12px; width:90%; max-width:500px; border:1px solid var(--border);">
        <div style="display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border);">
            <h3 id="task-modal-title" style="margin:0;">Add Task</h3>
            <button class="btn btn-sm" onclick="closeTaskModal()">&times;</button>
        </div>
        <div style="padding:20px;">
            <input type="hidden" id="task-edit-id">
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Title *</label>
                <input type="text" id="task-title" style="width:100%; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);" placeholder="e.g. Build notification system">
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Description</label>
                <textarea id="task-desc" rows="3" style="width:100%; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); resize:vertical;" placeholder="Optional details..."></textarea>
            </div>
            <div style="margin-bottom:12px;" id="task-acceptance-section">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Acceptance Criteria <span style="font-size:10px; color:var(--text-dim);">(used by goal-mode judge)</span></label>
                <textarea id="task-acceptance-criteria" rows="3" style="width:100%; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); resize:vertical; font-size:12px;" placeholder="• The feature does X&#10;• All tests pass&#10;• No regressions in Y"></textarea>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Type</label>
                    <select id="task-type" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="build">Build</option>
                        <option value="run">Run</option>
                        <option value="fix">Fix</option>
                        <option value="research">Research</option>
                        <option value="deploy">Deploy</option>
                        <option value="test">Test</option>
                        <option value="chore">Chore</option>
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Priority</label>
                    <select id="task-priority" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                        <option value="critical">Critical</option>
                    </select>
                </div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Status</label>
                    <select id="task-status" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="suggested">Suggested</option>
                        <option value="backlog">Backlog</option>
                        <option value="scheduled">Scheduled</option>
                        <option value="in_progress">In Progress</option>
                        <option value="done">Done</option>
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Scheduled For</label>
                    <input type="datetime-local" id="task-scheduled-at" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Start Date</label>
                    <input type="date" id="task-start-date" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Target Date</label>
                    <input type="date" id="task-target-date" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Executor</label>
                <select id="task-executor-type" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                    <option value="claude_cli">&#129502; Claude CLI</option>
                    <option value="gitlab">&#129418; GitLab CI</option>
                    <option value="github_actions">&#9881;&#65039; GitHub Actions</option>
                </select>
            </div>
            <div style="margin-bottom:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Max Runtime (sec) <span style="font-size:10px; color:var(--text-dim);">override</span></label>
                    <input type="number" id="task-max-runtime" min="60" max="7200" placeholder="e.g. 1800"
                           style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Max Retries <span style="font-size:10px; color:var(--text-dim);">circuit breaker</span></label>
                    <input type="number" id="task-max-retries" min="1" max="20" placeholder="5"
                           style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
            </div>
        </div>
        <!-- Tags section (only shown when editing an existing task) -->
        <div id="task-lifecycle-section" style="display:none; margin-top:4px; border-top:1px solid var(--border); padding-top:12px;">
            <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;">Delivery Pipeline</label>
            <div id="task-lifecycle-body"></div>
        </div>
        <div id="task-tags-section" style="display:none; margin-top:4px; border-top:1px solid var(--border); padding-top:12px;">
            <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;">Tags</label>
            <div id="task-tags-assigned" style="display:flex; flex-wrap:wrap; gap:4px; min-height:24px; margin-bottom:8px;"></div>
            <div style="display:flex; gap:8px; align-items:center;">
                <select id="task-tag-picker" style="flex:1; padding:6px 8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px;">
                    <option value="">— assign tag —</option>
                </select>
                <button class="btn btn-sm btn-primary" onclick="assignTag()">Add</button>
            </div>
        </div>

        <!-- Comments section (only shown when editing an existing task) -->
        <div id="task-comments-section" style="display:none; margin-top:4px; border-top:1px solid var(--border); padding-top:12px;">
            <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;">Comments</label>
            <div id="task-comments-list" style="max-height:140px; overflow-y:auto; margin-bottom:8px; display:flex; flex-direction:column; gap:6px;"></div>
            <div style="display:flex; gap:8px;">
                <input type="text" id="task-comment-input" placeholder="Add a comment..." style="flex:1; padding:6px 10px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px;">
                <button class="btn btn-sm btn-primary" onclick="postComment()" style="white-space:nowrap;">Post</button>
            </div>
        </div>
        <div style="padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:12px; justify-content:flex-end;">
            <button class="btn" id="btn-specify" onclick="specifyTask()" title="LLM rewrites title+description into a structured spec">⚡ Specify</button>
            <button class="btn" onclick="closeTaskModal()">Cancel</button>
            <button class="btn btn-primary" onclick="saveTask()">Save</button>
        </div>
    </div>
</div>

<!-- OPT-62: mid-run message injection modal -->
<div id="kanban-message-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1200; align-items:center; justify-content:center;">
    <div style="background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; width:min(480px, 92vw); max-height:90vh; overflow:auto;">
        <div style="padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:16px;">&#128172; Send message to running task</h3>
            <button class="kanban-move-btn" onclick="closeMessageModal()" title="Close">&#10005;</button>
        </div>
        <div style="padding:16px 20px;">
            <div style="font-size:12px; color:var(--text-dim); margin-bottom:8px;" id="kanban-msg-target">Task: —</div>
            <textarea id="kanban-msg-text" placeholder="e.g. also please run ruff and bandit before finishing" rows="5" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-family:inherit; resize:vertical;"></textarea>
            <div style="font-size:11px; color:var(--text-dim); margin-top:8px;">The message is queued and delivered at the next LLM call boundary (max 10 iterations per task).</div>
            <div id="kanban-msg-status" style="font-size:12px; margin-top:8px; min-height:1em;"></div>
        </div>
        <div style="padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:12px; justify-content:flex-end;">
            <button class="btn" onclick="closeMessageModal()">Cancel</button>
            <button class="btn btn-primary" id="kanban-msg-send" onclick="submitMessage()">Send</button>
        </div>
    </div>
</div>

<!-- Dependency DAG Modal -->
<div id="depmap-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1300; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card,#1e293b); border:1px solid var(--border); border-radius:12px; width:min(860px,96vw); max-height:92vh; display:flex; flex-direction:column;">
        <div style="padding:14px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:16px;">🔗 Dependency Map</h3>
            <button class="kanban-move-btn" onclick="closeDepMapModal()">✕</button>
        </div>
        <div style="padding:16px 20px; overflow:auto; flex:1;">
            <div id="depmap-mermaid" style="min-height:200px; text-align:center; color:var(--text-dim);">Loading…</div>
        </div>
        <div style="padding:10px 20px; border-top:1px solid var(--border); font-size:11px; color:var(--text-dim);">
            🟢 done &nbsp; 🔵 in_progress &nbsp; ⬜ backlog/scheduled &nbsp; 🔴 token_exhausted/suggested
        </div>
    </div>
</div>

<!-- Tag Manager Modal -->
<div id="tagmgr-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1300; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card,#1e293b); border:1px solid var(--border); border-radius:12px; width:min(420px,96vw); max-height:80vh; display:flex; flex-direction:column;">
        <div style="padding:14px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:16px;">🏷 Tag Manager</h3>
            <button class="kanban-move-btn" onclick="closeTagManagerModal()">✕</button>
        </div>
        <div style="padding:16px 20px; overflow:auto; flex:1;">
            <div id="tagmgr-list" style="display:flex; flex-direction:column; gap:6px; margin-bottom:16px;"></div>
            <div style="display:flex; gap:8px; flex-wrap:wrap;">
                <input type="text" id="tagmgr-name" placeholder="Tag name" maxlength="64"
                       style="flex:1; min-width:100px; padding:6px 10px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px;">
                <input type="color" id="tagmgr-color" value="#6b7280" title="Tag color"
                       style="width:36px; height:34px; padding:2px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; cursor:pointer;">
                <button class="btn btn-primary btn-sm" onclick="createTag()">Create</button>
            </div>
            <div id="tagmgr-status" style="font-size:12px; margin-top:8px; min-height:1em; color:var(--text-dim);"></div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/task_pipeline.js') }}"></script>
<script>
console.log('VERSION_2026_05_31_v3');
// Suggested-lane state (mirrors index.html triage UX)
var _suggestedSort = (function() {
    try { return localStorage.getItem('icdev.kanban.suggestedSort') || 'value'; }
    catch (e) { return 'value'; }
})();
var _selectedTaskIds = new Set();
var _allTasks = [];

// pipeline helpers moved to static/js/task_pipeline.js (shared with index.html)
function _isoToLocal(iso) {
    // Convert ISO/UTC string to local datetime-local input value
    if (!iso) return '';
    var d = new Date(iso);
    if (isNaN(d.getTime())) return '';
    var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
    return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate())
        + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
}

function _localToIso(localVal) {
    // Convert datetime-local value to ISO UTC string
    if (!localVal) return null;
    return new Date(localVal).toISOString();
}

function _formatSchedule(iso) {
    // Human-readable schedule time (e.g. "Mar 24, 5:00 PM")
    if (!iso) return '';
    var d = new Date(iso);
    if (isNaN(d.getTime())) return '';
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
        + ' ' + d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
}

function openAddTaskModal() {
    document.getElementById('task-modal-title').textContent = 'Add Task';
    document.getElementById('task-edit-id').value = '';
    document.getElementById('task-title').value = '';
    document.getElementById('task-desc').value = '';
    document.getElementById('task-type').value = 'build';
    document.getElementById('task-priority').value = 'medium';
    document.getElementById('task-status').value = 'backlog';
    document.getElementById('task-scheduled-at').value = '';
    document.getElementById('task-start-date').value = '';
    document.getElementById('task-target-date').value = '';
    document.getElementById('task-executor-type').value = 'claude_cli';
    document.getElementById('task-acceptance-criteria').value = '';
    document.getElementById('task-max-runtime').value = '';
    document.getElementById('task-max-retries').value = '';
    document.getElementById('task-comments-section').style.display = 'none';
    document.getElementById('task-tags-section').style.display = 'none';
    document.getElementById('task-lifecycle-section').style.display = 'none';
    document.getElementById('task-modal').style.display = 'flex';
}

function openEditTaskModal(task) {
    document.getElementById('task-modal-title').textContent = 'Edit Task';
    document.getElementById('task-edit-id').value = task.id;
    document.getElementById('task-title').value = task.title;
    document.getElementById('task-desc').value = task.description || '';
    document.getElementById('task-type').value = task.task_type;
    document.getElementById('task-priority').value = task.priority;
    document.getElementById('task-status').value = task.status;
    document.getElementById('task-scheduled-at').value = _isoToLocal(task.scheduled_at);
    document.getElementById('task-start-date').value = task.start_date || '';
    document.getElementById('task-target-date').value = task.target_date || '';
    document.getElementById('task-executor-type').value = task.executor_type || 'claude_cli';
    document.getElementById('task-acceptance-criteria').value = task.acceptance_criteria || '';
    document.getElementById('task-max-runtime').value = task.max_runtime_seconds || '';
    document.getElementById('task-max-retries').value = task.max_retries || '';
    document.getElementById('task-lifecycle-section').style.display = 'block';
    renderLifecycle(task.id);
    document.getElementById('task-tags-section').style.display = 'block';
    _loadTaskTags(task.id, task.tags || []);
    document.getElementById('task-comments-section').style.display = 'block';
    _loadComments(task.id);
    document.getElementById('task-modal').style.display = 'flex';
}

function closeTaskModal() {
    document.getElementById('task-modal').style.display = 'none';
}

function saveTask() {
    var editId = document.getElementById('task-edit-id').value;
    var payload = {
        title: document.getElementById('task-title').value,
        description: document.getElementById('task-desc').value,
        task_type: document.getElementById('task-type').value,
        priority: document.getElementById('task-priority').value,
        status: document.getElementById('task-status').value,
        scheduled_at: _localToIso(document.getElementById('task-scheduled-at').value),
        executor_type: document.getElementById('task-executor-type').value,
        start_date: document.getElementById('task-start-date').value || null,
        target_date: document.getElementById('task-target-date').value || null,
        acceptance_criteria: document.getElementById('task-acceptance-criteria').value.trim() || null,
        max_runtime_seconds: parseInt(document.getElementById('task-max-runtime').value) || null,
        max_retries: parseInt(document.getElementById('task-max-retries').value) || null
    };
    if (!payload.title.trim()) { alert('Title is required'); return; }

    var url = editId ? '/api/kanban/tasks/' + editId : '/api/kanban/tasks';
    var method = editId ? 'PATCH' : 'POST';

    fetch(url, { method: method, headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) })
        .then(function(r) { return r.json(); })
        .then(function() { closeTaskModal(); refreshKanbanTasks(); })
        .catch(function(e) { alert('Error: ' + e); });
}

var _specifyTaskId = null;
function specifyTask() {
    var title = document.getElementById('task-title').value.trim();
    var desc = document.getElementById('task-desc').value.trim();
    var tid = document.getElementById('task-edit-id').value.trim() || null;
    if (!title) { alert('Enter a title first'); return; }
    var btn = document.getElementById('btn-specify');
    if (btn) { btn.disabled = true; btn.textContent = '⏳ Specifying...'; }
    fetch('/api/kanban/tasks/specify', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({title: title, description: desc, task_id: tid})
    })
    .then(function(r) { return r.json(); })
    .then(function(spec) {
        if (spec.error) { alert('Specify error: ' + spec.error); return; }
        if (spec.goal) {
            var descEl = document.getElementById('task-desc');
            var full = '';
            if (spec.goal) full += 'Goal: ' + spec.goal + '\n\n';
            if (spec.approach) full += 'Approach: ' + spec.approach;
            descEl.value = full;
        }
        if (spec.acceptance_criteria) {
            var acEl = document.getElementById('task-acceptance-criteria');
            if (acEl) acEl.value = spec.acceptance_criteria;
        }
    })
    .catch(function(e) { alert('Specify failed: ' + e); })
    .finally(function() {
        if (btn) { btn.disabled = false; btn.textContent = '⚡ Specify'; }
    });
}

// OPT-68: optimistic move — reflect the change immediately, rollback on failure
function moveTask(taskId, newStatus) {
    var card = document.querySelector('[data-task-id="' + taskId + '"]');
    var originalStatus = null;
    var originalParent = null;
    if (card) {
        originalParent = card.parentElement;
        originalStatus = card.getAttribute('data-status');
        var newColBody = document.querySelector('.kanban-column[data-status="' + newStatus + '"] .kanban-column-body');
        if (newColBody) {
            var empty = newColBody.querySelector('.kanban-empty');
            if (empty) empty.remove();
            newColBody.insertBefore(card, newColBody.firstChild);
            card.setAttribute('data-status', newStatus);
        }
    }

    fetch('/api/kanban/tasks/' + taskId + '/move', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ status: newStatus })
    })
    .then(function(r) {
        if (!r.ok) throw new Error('HTTP ' + r.status);
        return r.json();
    })
    .then(function() {
        // OPT-68 Pattern 3: undo toast for a reversible move
        if (window.ICDEV && ICDEV.undoToast && originalStatus && originalStatus !== newStatus) {
            ICDEV.undoToast.show({
                message: 'Task moved to ' + newStatus,
                undoCallback: function () {
                    return fetch('/api/kanban/tasks/' + taskId + '/move', {
                        method: 'POST', headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({ status: originalStatus })
                    }).then(function() { refreshKanbanTasks(); });
                },
                durationMs: 5000
            });
        }
    })
    .catch(function(err) {
        // Rollback optimistic update
        if (card && originalParent && originalStatus) {
            originalParent.insertBefore(card, originalParent.firstChild);
            card.setAttribute('data-status', originalStatus);
        }
        alert('Move failed: ' + err + '. Reverted.');
    });
}

function deleteTask(taskId) {
    if (!confirm('Delete this task?')) return;
    // Capture task snapshot BEFORE deletion so we can offer undo
    var card = document.querySelector('[data-task-id="' + taskId + '"]');
    var snapshot = null;
    if (card && card.dataset.snapshot) {
        try { snapshot = JSON.parse(card.dataset.snapshot); } catch (e) { snapshot = null; }
    }
    fetch('/api/kanban/tasks/' + taskId, { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function() {
            refreshKanbanTasks();
            if (window.ICDEV && ICDEV.undoToast && snapshot) {
                ICDEV.undoToast.show({
                    message: 'Task deleted',
                    undoCallback: function () {
                        return fetch('/api/kanban/tasks', {
                            method: 'POST', headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(snapshot)
                        }).then(function() { refreshKanbanTasks(); });
                    },
                    durationMs: 5000
                });
            }
        });
}

function refreshKanbanTasks() {
    var url = '/api/kanban/tasks?sort=' + encodeURIComponent(_suggestedSort);
    fetch(url)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            _allTasks = data.tasks || [];
            renderTaskKanban(_allTasks);
        });
}

function promoteAllSuggested() {
    var gate = document.getElementById('promote-all-gate');
    var preset = gate ? gate.value : '';
    var payload = {};
    var label = 'all suggested';
    switch (preset) {
        case 'value10': payload.min_value = 1.0; label = 'value ≥ 1.0'; break;
        case 'value08': payload.min_value = 0.8; label = 'value ≥ 0.8'; break;
        case 'conf95':  payload.min_confidence = 0.95; label = 'confidence ≥ 90%'; break;
        case 'conf70':  payload.min_confidence = 0.70; label = 'confidence ≥ 70%'; break;
    }
    if (!confirm('Promote ' + label + ' cards to backlog?')) return;
    var btn = document.getElementById('btn-promote-all');
    if (btn) { btn.disabled = true; btn.textContent = 'Promoting...'; }
    fetch('/api/kanban/tasks/promote-all', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (btn) { btn.disabled = false; btn.textContent = '↑ Promote'; }
            if (data.error) { alert('Error: ' + data.error); return; }
            var msg = 'Promoted ' + (data.promoted || 0) + ' cards';
            if (data.filtered) msg += ' (' + data.filtered + ' filtered by gate)';
            alert(msg);
            refreshKanbanTasks();
        })
        .catch(function() {
            if (btn) { btn.disabled = false; btn.textContent = '↑ Promote'; }
            alert('Promote failed');
        });
}

// Sort dropdown handler — persists to localStorage + refetches so
// the server-side sort applies (value and confidence are computed
// post-fetch in Python, but the API still returns tasks pre-sorted).
function onSuggestedSortChange(val) {
    if (!val) return;
    _suggestedSort = val;
    try { localStorage.setItem('icdev.kanban.suggestedSort', val); } catch (e) {}
    refreshKanbanTasks();
}

// Bulk select preset — clears current selection and reselects rows
// matching the named threshold.
function applySuggestedSelectPreset(preset) {
    _selectedTaskIds.clear();
    if (preset === 'none' || !preset) {
        renderTaskKanban(_allTasks);
        return;
    }
    var suggestedItems = _allTasks.filter(function(t) { return t.status === 'suggested'; });

    // Rule-based preset — format: "rule::<oracle_lens>"
    if (preset.indexOf('rule::') === 0) {
        var targetRule = preset.slice(6);
        suggestedItems.forEach(function(t) {
            if ((t.oracle_lens || '') === targetRule) {
                _selectedTaskIds.add(t.id);
            }
        });
        renderTaskKanban(_allTasks);
        return;
    }

    suggestedItems.forEach(function(t) {
        var conf = t.oracle_confidence || 0;
        var val = t.oracle_value || 0;
        var prio = (t.priority || '').toLowerCase();
        var match = false;
        switch (preset) {
            case 'all':       match = true; break;
            case 'conf95':    match = conf >= 0.95; break;
            case 'conf90':    match = conf >= 0.90; break;
            case 'value10':   match = val >= 1.0; break;
            case 'value08':   match = val >= 0.8; break;
            case 'value_lo':  match = val < 0.6; break;
            case 'pri_crit':  match = prio === 'critical'; break;
            case 'pri_high':  match = prio === 'high'; break;
            case 'pri_med':   match = prio === 'medium'; break;
            case 'pri_low':   match = prio === 'low'; break;
        }
        if (match) _selectedTaskIds.add(t.id);
    });
    renderTaskKanban(_allTasks);
}

function toggleTaskSelected(taskId, ev) {
    if (ev) ev.stopPropagation();
    if (_selectedTaskIds.has(taskId)) _selectedTaskIds.delete(taskId);
    else _selectedTaskIds.add(taskId);
    var countEls = document.querySelectorAll('[data-bulk-count]');
    for (var i = 0; i < countEls.length; i++) {
        countEls[i].textContent = _selectedTaskIds.size;
    }
}

function bulkMoveSuggested(newStatus, actionLabel) {
    var ids = Array.from(_selectedTaskIds);
    if (!ids.length) {
        alert('No tasks selected. Use the "Select" dropdown to pick a threshold.');
        return;
    }
    if (!confirm(actionLabel + ' ' + ids.length + ' suggested task(s)?')) return;
    fetch('/api/kanban/tasks/bulk-move', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ task_ids: ids, status: newStatus })
    })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            _selectedTaskIds.clear();
            refreshKanbanTasks();
            if (data && data.failed && data.failed.length) {
                console.warn('bulk-move partial failures:', data.failed);
            }
        })
        .catch(function(e) { alert('Bulk move failed: ' + e); });
}

function bulkPromoteSuggested() { bulkMoveSuggested('backlog', 'Promote to backlog'); }
function bulkDismissSuggested() { bulkMoveSuggested('done',    'Dismiss'); }



// OPT-62: mid-run message injection
var _kanbanMsgTargetId = null;
function openMessageModal(taskId, title) {
    _kanbanMsgTargetId = taskId;
    document.getElementById('kanban-msg-target').textContent = 'Task: ' + (title || taskId);
    document.getElementById('kanban-msg-text').value = '';
    document.getElementById('kanban-msg-status').textContent = '';
    document.getElementById('kanban-msg-status').style.color = 'var(--text-dim)';
    document.getElementById('kanban-message-modal').style.display = 'flex';
    setTimeout(function() { document.getElementById('kanban-msg-text').focus(); }, 50);
}

function closeMessageModal() {
    document.getElementById('kanban-message-modal').style.display = 'none';
    _kanbanMsgTargetId = null;
}

function submitMessage() {
    if (!_kanbanMsgTargetId) return;
    var text = document.getElementById('kanban-msg-text').value.trim();
    if (!text) {
        document.getElementById('kanban-msg-status').textContent = 'Message cannot be empty.';
        document.getElementById('kanban-msg-status').style.color = '#ef4444';
        return;
    }
    var btn = document.getElementById('kanban-msg-send');
    btn.disabled = true;
    document.getElementById('kanban-msg-status').textContent = 'Sending…';
    document.getElementById('kanban-msg-status').style.color = 'var(--text-dim)';
    fetch('/api/kanban/tasks/' + _kanbanMsgTargetId + '/message', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ message: text, sender: 'dashboard' })
    }).then(function(r) { return r.json().then(function(body) { return { ok: r.ok, status: r.status, body: body }; }); })
    .then(function(res) {
        btn.disabled = false;
        if (res.ok) {
            document.getElementById('kanban-msg-status').textContent = '\uD83D\uDC40 Queued — will be delivered at next LLM call.';
            document.getElementById('kanban-msg-status').style.color = '#10b981';
            setTimeout(closeMessageModal, 1200);
        } else {
            document.getElementById('kanban-msg-status').textContent = 'Failed: ' + (res.body && res.body.error ? res.body.error : ('HTTP ' + res.status));
            document.getElementById('kanban-msg-status').style.color = '#ef4444';
        }
    }).catch(function(e) {
        btn.disabled = false;
        document.getElementById('kanban-msg-status').textContent = 'Error: ' + e;
        document.getElementById('kanban-msg-status').style.color = '#ef4444';
    });
}

// ── Tier 2: Dependency DAG ────────────────────────────────────────────────
function openDepMapModal() {
    document.getElementById('depmap-modal').style.display = 'flex';
    var el = document.getElementById('depmap-mermaid');
    el.innerHTML = 'Loading…';
    fetch('/api/kanban/deps-graph')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var nodes = data.nodes || [];
            var edges = data.edges || [];
            if (!nodes.length && !edges.length) {
                el.innerHTML = '<div style="color:var(--text-dim); padding:40px;">No dependencies defined yet. Set <code>depends_on_task_id</code> on tasks to see the graph.</div>';
                return;
            }
            var statusColor = {
                done: '#22c55e', in_progress: '#3b82f6',
                token_exhausted: '#ef4444', suggested: '#f97316',
                backlog: '#6b7280', scheduled: '#a78bfa'
            };
            var nodeMap = {};
            nodes.forEach(function(n) { nodeMap[n.id] = n; });

            var lines = ['graph TD'];
            nodes.forEach(function(n) {
                var safeId = n.id.replace(/[^a-zA-Z0-9_]/g, '_');
                var label = (n.title || n.id).substring(0, 32).replace(/"/g, "'");
                var color = statusColor[n.status] || '#6b7280';
                lines.push('  ' + safeId + '["' + label + '"]');
                lines.push('  style ' + safeId + ' fill:' + color + '33,stroke:' + color + ',color:#e0e0e0');
            });
            edges.forEach(function(e) {
                var fromId = e.from.replace(/[^a-zA-Z0-9_]/g, '_');
                var toId = e.to.replace(/[^a-zA-Z0-9_]/g, '_');
                lines.push('  ' + fromId + ' --> ' + toId);
            });
            var def = lines.join('\n');

            el.innerHTML = '<div class="mermaid">' + def + '</div>';
            if (window.ICDEV && ICDEV.mermaid && ICDEV.mermaid.renderAll) {
                ICDEV.mermaid.renderAll();
            } else if (window.mermaid) {
                mermaid.init(undefined, el.querySelector('.mermaid'));
            }
        })
        .catch(function(e) {
            document.getElementById('depmap-mermaid').innerHTML = '<div style="color:#ef4444;">Failed to load graph: ' + e + '</div>';
        });
}
function closeDepMapModal() { document.getElementById('depmap-modal').style.display = 'none'; }

// ── Tier 2: Tag Manager ───────────────────────────────────────────────────
var _allTags = [];

function _loadAllTags(cb) {
    fetch('/api/kanban/tags')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            _allTags = data.tags || [];
            if (cb) cb(_allTags);
        })
        .catch(function() { _allTags = []; if (cb) cb([]); });
}

function openTagManagerModal() {
    document.getElementById('tagmgr-modal').style.display = 'flex';
    document.getElementById('tagmgr-name').value = '';
    document.getElementById('tagmgr-status').textContent = '';
    _refreshTagManagerList();
}
function closeTagManagerModal() { document.getElementById('tagmgr-modal').style.display = 'none'; }

function _refreshTagManagerList() {
    _loadAllTags(function(tags) {
        var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
        var el = document.getElementById('tagmgr-list');
        if (!el) return;
        if (!tags.length) { el.innerHTML = '<div style="font-size:12px; color:var(--text-dim); font-style:italic;">No tags yet.</div>'; return; }
        el.innerHTML = tags.map(function(t) {
            return '<div style="display:flex; align-items:center; gap:8px; background:var(--bg-code); border-radius:4px; padding:5px 8px;">'
                + '<span style="display:inline-block; width:12px; height:12px; border-radius:2px; background:' + esc(t.color) + ';"></span>'
                + '<span style="flex:1; font-size:13px;">' + esc(t.name) + '</span>'
                + '<button class="kanban-move-btn" style="color:#ef4444;" onclick="deleteTag(\'' + esc(t.id) + '\')">✕</button>'
                + '</div>';
        }).join('');
    });
}

function createTag() {
    var name = (document.getElementById('tagmgr-name').value || '').trim();
    var color = document.getElementById('tagmgr-color').value || '#6b7280';
    if (!name) return;
    var st = document.getElementById('tagmgr-status');
    st.textContent = 'Creating…'; st.style.color = 'var(--text-dim)';
    fetch('/api/kanban/tags', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ name: name, color: color })
    }).then(function(r) { return r.json().then(function(b) { return {ok: r.ok, body: b}; }); })
    .then(function(res) {
        if (res.ok) {
            document.getElementById('tagmgr-name').value = '';
            st.textContent = 'Created!'; st.style.color = '#22c55e';
            _refreshTagManagerList();
            _refreshTagPicker();
        } else {
            st.textContent = res.body.error || 'Error'; st.style.color = '#ef4444';
        }
    });
}

function deleteTag(tagId) {
    if (!confirm('Delete this tag? It will be removed from all tasks.')) return;
    fetch('/api/kanban/tags/' + tagId, { method: 'DELETE' })
        .then(function() { _refreshTagManagerList(); _refreshTagPicker(); refreshKanbanTasks(); });
}

// ── Tier 2: Task Tag Picker ───────────────────────────────────────────────
var _tagPickerTaskId = null;

function _refreshTagPicker() {
    _loadAllTags(function(tags) {
        var sel = document.getElementById('task-tag-picker');
        if (!sel) return;
        var current = sel.value;
        sel.innerHTML = '<option value="">— assign tag —</option>'
            + tags.map(function(t) {
                return '<option value="' + t.id + '"' + (t.id === current ? ' selected' : '') + '>' + (t.name) + '</option>';
            }).join('');
    });
}

function _loadTaskTags(taskId, existingTags) {
    _tagPickerTaskId = taskId;
    var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
    var el = document.getElementById('task-tags-assigned');
    if (!el) return;
    function renderAssigned(tags) {
        el.innerHTML = tags.length
            ? tags.map(function(t) {
                return '<span style="background:' + esc(t.color) + '33; color:' + esc(t.color) + '; font-size:11px; padding:2px 7px; border-radius:4px; cursor:pointer;" '
                    + 'title="Remove tag" onclick="removeTaskTag(\'' + esc(t.id) + '\')">'
                    + esc(t.name) + ' ✕</span>';
            }).join('')
            : '<span style="font-size:11px; color:var(--text-dim); font-style:italic;">None</span>';
    }
    renderAssigned(existingTags || []);
    _refreshTagPicker();
}

function assignTag() {
    if (!_tagPickerTaskId) return;
    var tagId = document.getElementById('task-tag-picker').value;
    if (!tagId) return;
    fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ tag_id: tagId })
    }).then(function() {
        fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags')
            .then(function(r) { return r.json(); })
            .then(function(data) { _loadTaskTags(_tagPickerTaskId, data.tags || []); refreshKanbanTasks(); });
    });
}

function removeTaskTag(tagId) {
    if (!_tagPickerTaskId) return;
    fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags/' + tagId, { method: 'DELETE' })
        .then(function() {
            fetch('/api/kanban/tasks/' + _tagPickerTaskId + '/tags')
                .then(function(r) { return r.json(); })
                .then(function(data) { _loadTaskTags(_tagPickerTaskId, data.tags || []); refreshKanbanTasks(); });
        });
}

// Comments
var _commentsTaskId = null;
function _loadComments(taskId) {
    _commentsTaskId = taskId;
    var listEl = document.getElementById('task-comments-list');
    if (!listEl) return;
    listEl.innerHTML = '<div style="font-size:11px; color:var(--text-dim);">Loading…</div>';
    fetch('/api/kanban/tasks/' + taskId + '/comments')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var comments = data.comments || [];
            if (comments.length === 0) {
                listEl.innerHTML = '<div style="font-size:11px; color:var(--text-dim); font-style:italic;">No comments yet.</div>';
                return;
            }
            var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
            listEl.innerHTML = comments.map(function(c) {
                var ts = c.created_at ? new Date(c.created_at).toLocaleString() : '';
                return '<div style="background:var(--bg-code); border-radius:4px; padding:6px 8px; font-size:12px;">'
                    + '<span style="font-weight:600; color:var(--text-primary);">' + esc(c.author) + '</span>'
                    + '<span style="color:var(--text-dim); margin-left:6px; font-size:10px;">' + ts + '</span>'
                    + '<div style="margin-top:3px; white-space:pre-wrap; word-break:break-word;">' + esc(c.body) + '</div>'
                    + '</div>';
            }).join('');
            listEl.scrollTop = listEl.scrollHeight;
        })
        .catch(function() {
            listEl.innerHTML = '<div style="font-size:11px; color:#ef4444;">Failed to load comments.</div>';
        });
}

function postComment() {
    if (!_commentsTaskId) return;
    var input = document.getElementById('task-comment-input');
    var body = (input.value || '').trim();
    if (!body) return;
    fetch('/api/kanban/tasks/' + _commentsTaskId + '/comments', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ body: body, author: 'dashboard' })
    }).then(function(r) {
        if (r.ok) {
            input.value = '';
            _loadComments(_commentsTaskId);
        }
    });
}

// OPT-68 Pattern 1: filter-as-you-type across all visible kanban cards
function applyKanbanFilter(query) {
    var q = (query || '').trim().toLowerCase();
    var matched = 0;
    document.querySelectorAll('.kanban-card').forEach(function(card) {
        var text = (card.textContent || '').toLowerCase();
        var tid = (card.getAttribute('data-task-id') || '').toLowerCase();
        var show = !q || text.indexOf(q) !== -1 || tid.indexOf(q) !== -1;
        card.style.display = show ? '' : 'none';
        if (show) matched++;
    });
    var countEl = document.getElementById('kanban-filter-count');
    if (countEl) countEl.textContent = q ? matched + ' match' + (matched === 1 ? '' : 'es') : '';
}

function setExecutorChain(value) {
    fetch('/api/kanban/settings/executor-chain', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({chain: value.split(',')}),
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.error) {
            alert('Executor chain update failed: ' + data.error);
        } else {
            // Best-effort toast instead of alert
            var el = document.getElementById('kanban-filter-count');
            if (el) {
                var old = el.textContent;
                el.textContent = 'Executor chain updated ✓';
                setTimeout(function() { el.textContent = old; }, 2000);
            }
        }
    })
    .catch(function(err) {
        console.error('setExecutorChain failed:', err);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    refreshKanbanTasks();

    // Load current executor chain setting into the header toggle
    fetch('/api/kanban/settings/executor-chain')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.chain) {
            var sel = document.getElementById('kanban-executor-chain');
            var wanted = data.chain.join(',');
            for (var i = 0; i < sel.options.length; i++) {
                if (sel.options[i].value === wanted) {
                    sel.selectedIndex = i;
                    break;
                }
            }
        }
    })
    .catch(function(err) {
        console.error('Failed to load executor chain setting:', err);
    });

    // Wire filter input once debounce_filter.js is ready
    var input = document.getElementById('kanban-filter-input');
    if (input && window.ICDEV && ICDEV.debounceFilter) {
        ICDEV.debounceFilter.bind(input, {
            delayMs: 200,
            onFilter: applyKanbanFilter,
        });
    } else if (input) {
        // Fallback: plain listener (no debounce)
        input.addEventListener('input', function() { applyKanbanFilter(input.value); });
    }
});
</script>
<script src="{{ url_for('static', filename='js/debounce_filter.js') }}"></script>
<script src="{{ url_for('static', filename='js/undo_toast.js') }}"></script>
<script src="{{ url_for('static', filename='js/mermaid-icdev.js') }}"></script>

<style>
.kanban-move-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 4px; padding: 2px 6px; font-size: 10px; cursor: pointer; line-height: 1;
}
.kanban-move-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
</style>

{% set iqe_canvas = "kanban" %}
{% set iqe_api_route = "/api/kanban/iqe-query" %}
{% set iqe_title = "Query Task Board" %}
{% set iqe_examples = [
    {"label": "In-progress tasks", "query": "foreach t in kanban.tasks where t.status == \"in_progress\" select t.id, t.title, t.priority, t.executor_type"},
    {"label": "High priority backlog", "query": "foreach t in kanban.tasks where t.priority == \"high\" where t.status == \"backlog\" select t.id, t.title, t.task_type, t.created_at"},
    {"label": "Failed tasks", "query": "foreach t in kanban.tasks where t.failure_count > 0 select t.id, t.title, t.failure_count, t.last_failure_reason"},
    {"label": "Epic summary", "query": "foreach e in kanban.epics select e.epic_key, e.task_count, e.done_count, e.in_progress_count"}
] %}
{% include "includes/iqe_query_widget.html" %}
{% endblock %}