{% extends "base.html" %}
{% block title %}HITL Queue — ICDEV™ Workflow{% endblock %}

{% block extra_css %}
<style>
/* ── HITL Queue page — dark theme ─────────────────────────────────── */
:root {
    --wf-bg:        #0d1117;
    --wf-card:      #1c2128;
    --wf-border:    #30363d;
    --wf-accent:    #58a6ff;
    --wf-accent2:   #3fb950;
    --wf-warn:      #d29922;
    --wf-danger:    #f85149;
    --wf-text:      #e6edf3;
    --wf-muted:     #8b949e;
    --wf-input-bg:  #161b22;
    --wf-hover:     #21262d;
}

.wf-page { padding: 0 0 40px 0; color: var(--wf-text); }

/* ── Stats bar ────────────────────────────────────────────────────── */
.wf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.wf-stat-card {
    background: var(--wf-card);
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
}
.wf-stat-value { font-size: 2rem; font-weight: 700; color: var(--wf-accent); line-height: 1; }
.wf-stat-label { font-size: 0.75rem; color: var(--wf-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Layout: table + side panel ──────────────────────────────────── */
.wf-layout { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .wf-layout { grid-template-columns: 1fr; } }

.wf-section {
    background: var(--wf-card);
    border: 1px solid var(--wf-border);
    border-radius: 10px;
    overflow: hidden;
}
.wf-section-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--wf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wf-section-title { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wf-muted); }

/* ── Pending Gates table ─────────────────────────────────────────── */
.wf-table { width: 100%; border-collapse: collapse; }
.wf-table th {
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wf-muted);
    border-bottom: 1px solid var(--wf-border);
    text-align: left;
    white-space: nowrap;
}
.wf-table td {
    padding: 10px 14px;
    font-size: 0.84rem;
    border-bottom: 1px solid var(--wf-border);
    vertical-align: middle;
    color: var(--wf-text);
}
.wf-table tr:last-child td { border-bottom: none; }
.wf-table tr { cursor: pointer; transition: background 0.12s; }
.wf-table tr:hover td { background: var(--wf-hover); }
.wf-table tr.wf-row-selected td { background: #1f2f46; }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.badge-build     { background: #1e3a5f; color: #58a6ff; }
.badge-review    { background: #3b2a1a; color: #f0883e; }
.badge-test      { background: #1e3a1e; color: #3fb950; }
.badge-approve   { background: #2a1f3a; color: #bc8cff; }
.badge-deploy    { background: #1a2f2a; color: #39d353; }
.badge-pending   { background: #2d2a1a; color: #d29922; }
.badge-active    { background: #1e3a1e; color: #3fb950; }
.badge-kickback  { background: #3a1a1a; color: #f85149; }
.badge-approved  { background: #1a3020; color: #3fb950; }
.badge-conditional { background: #2a2a1a; color: #d29922; }
.badge-escalated { background: #3a1a2a; color: #ff7b72; }
.badge-cancelled { background: #21262d; color: #8b949e; }
.badge-email     { background: #1a2f3a; color: #58a6ff; }
.badge-ticket    { background: #2a1a2a; color: #bc8cff; }
.badge-wiki      { background: #2a2f1a; color: #3fb950; }
.badge-manual    { background: #2a2a2a; color: #8b949e; }
.badge-completed { background: #1a3020; color: #3fb950; }
.badge-failed    { background: #3a1a1a; color: #f85149; }
.badge-sent      { background: #1f2f3a; color: #79c0ff; }
.badge-waiting   { background: #2a2a1a; color: #d29922; }

/* ── Side panel ──────────────────────────────────────────────────── */
.wf-panel { display: none; flex-direction: column; gap: 16px; }
.wf-panel.wf-panel-visible { display: flex; }

.wf-panel-inner { padding: 20px; }

.wf-field { margin-bottom: 14px; }
.wf-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wf-muted);
    margin-bottom: 6px;
}
.wf-input, .wf-select, .wf-textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--wf-input-bg);
    border: 1px solid var(--wf-border);
    border-radius: 6px;
    color: var(--wf-text);
    font-size: 0.84rem;
    box-sizing: border-box;
    resize: vertical;
}
.wf-input:focus, .wf-select:focus, .wf-textarea:focus {
    outline: none;
    border-color: var(--wf-accent);
}
.wf-textarea { min-height: 72px; }

/* ── Star rating ─────────────────────────────────────────────────── */
.wf-stars { display: flex; gap: 4px; }
.wf-star {
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--wf-border);
    transition: color 0.1s;
    user-select: none;
}
.wf-star.active { color: #d29922; }

/* ── Radio group ─────────────────────────────────────────────────── */
.wf-radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.wf-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--wf-text);
}

/* ── Chip grid ───────────────────────────────────────────────────── */
.wf-chip-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.wf-chip {
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.12s;
    user-select: none;
}
.wf-chip.selected {
    border-color: var(--wf-accent);
    background: rgba(88, 166, 255, 0.12);
    color: var(--wf-accent);
}

/* ── Checkbox list ───────────────────────────────────────────────── */
.wf-check-list { display: flex; flex-direction: column; gap: 6px; }
.wf-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    cursor: pointer;
    color: var(--wf-text);
}

/* ── Submit button ───────────────────────────────────────────────── */
.wf-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.12s;
}
.wf-btn:hover { opacity: 0.85; }
.wf-btn-primary  { background: var(--wf-accent); color: #0d1117; }
.wf-btn-danger   { background: var(--wf-danger); color: #fff; }
.wf-btn-ghost    { background: transparent; border: 1px solid var(--wf-border); color: var(--wf-muted); }
.wf-btn-sm       { padding: 4px 10px; font-size: 0.76rem; }

/* ── Doc required section ────────────────────────────────────────── */
.wf-doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--wf-input-bg);
    border: 1px solid var(--wf-border);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}
.wf-doc-name { font-weight: 500; }
.wf-doc-meta { font-size: 0.72rem; color: var(--wf-muted); margin-top: 2px; }

/* ── Citations ───────────────────────────────────────────────────── */
.wf-cite-item {
    padding: 8px 12px;
    background: var(--wf-input-bg);
    border-left: 3px solid var(--wf-accent);
    border-radius: 4px;
    font-size: 0.82rem;
    margin-bottom: 6px;
    color: var(--wf-text);
}
.wf-cite-ref { font-style: italic; color: var(--wf-muted); font-size: 0.75rem; margin-top: 3px; }

/* ── External steps mini-table ───────────────────────────────────── */
.wf-ext-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.wf-ext-table th, .wf-ext-table td {
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid var(--wf-border);
}
.wf-ext-table th { color: var(--wf-muted); font-size: 0.70rem; text-transform: uppercase; letter-spacing: 0.06em; }
.wf-ext-table tr:last-child td { border-bottom: none; }

/* ── Kickback timeline ───────────────────────────────────────────── */
.wf-timeline { list-style: none; padding: 0; margin: 0; }
.wf-timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--wf-border);
    font-size: 0.82rem;
}
.wf-timeline-item:last-child { border-bottom: none; }
.wf-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wf-danger);
    margin-top: 4px;
    flex-shrink: 0;
}
.wf-timeline-body { flex: 1; }
.wf-timeline-meta { font-size: 0.72rem; color: var(--wf-muted); margin-top: 3px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.wf-empty { padding: 32px; text-align: center; color: var(--wf-muted); font-size: 0.84rem; }

/* ── Panel placeholder ───────────────────────────────────────────── */
.wf-panel-placeholder {
    padding: 40px 20px;
    text-align: center;
    color: var(--wf-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

/* ── Flash messages ──────────────────────────────────────────────── */
.wf-flash {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.84rem;
    margin-bottom: 12px;
    display: none;
}
.wf-flash-success { background: rgba(63, 185, 80, 0.15); border: 1px solid var(--wf-accent2); color: var(--wf-accent2); }
.wf-flash-error   { background: rgba(248, 81, 73, 0.15); border: 1px solid var(--wf-danger);  color: var(--wf-danger); }

/* ── Page header ─────────────────────────────────────────────────── */
.wf-page-header { margin-bottom: 24px; }
.wf-page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px 0; }
.wf-page-header p  { color: var(--wf-muted); margin: 0; font-size: 0.88rem; }

/* ── Divider ─────────────────────────────────────────────────────── */
.wf-divider { border: none; border-top: 1px solid var(--wf-border); margin: 16px 0; }
</style>
{% endblock %}

{% block content %}
<div class="wf-page">
    <div class="wf-page-header">
        <h1>HITL Queue</h1>
        <p>Human-in-the-loop approval gates — review, approve, or kick back workflow instances.</p>
    </div>

    <!-- ── Stats bar ─────────────────────────────────────────────────── -->
    <div class="wf-stats" id="wf-stats">
        <div class="wf-stat-card">
            <div class="wf-stat-value" id="stat-active">--</div>
            <div class="wf-stat-label">Active Instances</div>
        </div>
        <div class="wf-stat-card">
            <div class="wf-stat-value" id="stat-pending">--</div>
            <div class="wf-stat-label">Pending Gates</div>
        </div>
        <div class="wf-stat-card">
            <div class="wf-stat-value" id="stat-rating">--</div>
            <div class="wf-stat-label">Avg Rating</div>
        </div>
        <div class="wf-stat-card">
            <div class="wf-stat-value" id="stat-kickback">--</div>
            <div class="wf-stat-label">Kickback Rate</div>
        </div>
    </div>

    <!-- ── Main layout ───────────────────────────────────────────────── -->
    <div class="wf-layout">

        <!-- Left: Pending Gates table -->
        <div>
            <div class="wf-section">
                <div class="wf-section-header">
                    <span class="wf-section-title">Pending Gates</span>
                    <button class="wf-btn wf-btn-ghost wf-btn-sm" onclick="loadInstances()">Refresh</button>
                </div>
                <div style="overflow-x:auto;">
                    <table class="wf-table" id="gates-table" aria-label="Pending approval gates">
                        <thead>
                            <tr>
                                <th>Task ID</th>
                                <th>Stage</th>
                                <th>Team</th>
                                <th>Due Date</th>
                                <th>Status</th>
                                <th style="text-align:right;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="gates-body">
                            <tr><td colspan="6" class="wf-empty">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Right: Side panel -->
        <div id="wf-side">

            <!-- Placeholder when nothing selected -->
            <div class="wf-section" id="panel-placeholder">
                <div class="wf-panel-placeholder">
                    Select a row to review<br>or take action on a gate.
                </div>
            </div>

            <!-- Approve / Kickback form panel -->
            <div class="wf-section wf-panel" id="action-panel">
                <div class="wf-section-header">
                    <span class="wf-section-title" id="panel-title">Review Gate</span>
                    <button class="wf-btn wf-btn-ghost wf-btn-sm" onclick="closePanel()">Close</button>
                </div>
                <div class="wf-panel-inner">
                    <div class="wf-flash wf-flash-success" id="flash-success">Action submitted successfully.</div>
                    <div class="wf-flash wf-flash-error"   id="flash-error">An error occurred.</div>

                    <input type="hidden" id="sel-instance-id">
                    <input type="hidden" id="sel-approval-id">

                    <!-- Rating -->
                    <div class="wf-field">
                        <label class="wf-label">Rating</label>
                        <div class="wf-stars" id="star-widget" role="group" aria-label="Rating 1 to 5">
                            <span class="wf-star" data-val="1" role="button" tabindex="0" aria-label="1 star">&#9733;</span>
                            <span class="wf-star" data-val="2" role="button" tabindex="0" aria-label="2 stars">&#9733;</span>
                            <span class="wf-star" data-val="3" role="button" tabindex="0" aria-label="3 stars">&#9733;</span>
                            <span class="wf-star" data-val="4" role="button" tabindex="0" aria-label="4 stars">&#9733;</span>
                            <span class="wf-star" data-val="5" role="button" tabindex="0" aria-label="5 stars">&#9733;</span>
                        </div>
                    </div>

                    <!-- Decision -->
                    <div class="wf-field">
                        <label class="wf-label">Decision</label>
                        <div class="wf-radio-group" role="radiogroup" aria-label="Decision">
                            <label class="wf-radio-label">
                                <input type="radio" name="decision" value="approve" checked onchange="onDecisionChange(this)"> Approve
                            </label>
                            <label class="wf-radio-label">
                                <input type="radio" name="decision" value="conditional" onchange="onDecisionChange(this)"> Conditional
                            </label>
                            <label class="wf-radio-label">
                                <input type="radio" name="decision" value="kickback" onchange="onDecisionChange(this)"> Kickback
                            </label>
                        </div>
                    </div>

                    <!-- Feedback Types -->
                    <div class="wf-field">
                        <label class="wf-label">Feedback Types</label>
                        <div class="wf-check-list" id="feedback-types">
                            <label class="wf-check-label"><input type="checkbox" value="correctness"> Correctness</label>
                            <label class="wf-check-label"><input type="checkbox" value="completeness"> Completeness</label>
                            <label class="wf-check-label"><input type="checkbox" value="clarity"> Clarity</label>
                            <label class="wf-check-label"><input type="checkbox" value="safety"> Safety</label>
                            <label class="wf-check-label"><input type="checkbox" value="compliance"> Compliance</label>
                        </div>
                    </div>

                    <!-- Improvement Tags -->
                    <div class="wf-field">
                        <label class="wf-label">Improvement Tags</label>
                        <div class="wf-chip-grid" id="improvement-tags">
                            <span class="wf-chip" data-val="missing_tests">missing_tests</span>
                            <span class="wf-chip" data-val="scope_creep">scope_creep</span>
                            <span class="wf-chip" data-val="incomplete_spec">incomplete_spec</span>
                            <span class="wf-chip" data-val="unclear_requirements">unclear_requirements</span>
                            <span class="wf-chip" data-val="missing_docs">missing_docs</span>
                            <span class="wf-chip" data-val="security_gap">security_gap</span>
                        </div>
                    </div>

                    <!-- Comments -->
                    <div class="wf-field">
                        <label class="wf-label" for="comments-input">Comments</label>
                        <textarea class="wf-textarea" id="comments-input" placeholder="Optional reviewer notes..."></textarea>
                    </div>

                    <!-- Kickback Reason (shown only for kickback decision) -->
                    <div class="wf-field" id="kickback-reason-field" style="display:none;">
                        <label class="wf-label" for="kickback-reason-input">Kickback Reason <span style="color:var(--wf-danger)">*</span></label>
                        <textarea class="wf-textarea" id="kickback-reason-input" placeholder="Explain why this is being kicked back..."></textarea>
                    </div>

                    <!-- Required Documents -->
                    <div class="wf-field" id="doc-section">
                        <label class="wf-label">Required Documents</label>
                        <div id="doc-list"><p style="color:var(--wf-muted);font-size:0.8rem;">Loading docs...</p></div>
                    </div>

                    <!-- Submit -->
                    <div style="display:flex;gap:8px;margin-top:8px;">
                        <button class="wf-btn wf-btn-primary" onclick="submitDecision()" id="submit-btn">Submit</button>
                        <button class="wf-btn wf-btn-ghost" onclick="closePanel()">Cancel</button>
                    </div>
                </div>

                <!-- Citations panel -->
                <hr class="wf-divider" style="margin:0;">
                <div class="wf-panel-inner">
                    <label class="wf-label" style="margin-bottom:10px;">Citations</label>
                    <div id="citations-list"><p style="color:var(--wf-muted);font-size:0.8rem;">Loading citations...</p></div>
                </div>

                <!-- External Steps -->
                <hr class="wf-divider" style="margin:0;">
                <div class="wf-panel-inner">
                    <label class="wf-label" style="margin-bottom:10px;">External Steps</label>
                    <div style="overflow-x:auto;">
                        <table class="wf-ext-table" id="ext-steps-table" aria-label="External steps">
                            <thead>
                                <tr>
                                    <th>Stage</th>
                                    <th>Type</th>
                                    <th>System</th>
                                    <th>Status</th>
                                    <th>Ref</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="ext-steps-body">
                                <tr><td colspan="6" style="text-align:center;color:var(--wf-muted);padding:16px;">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Kickback History Timeline -->
                <hr class="wf-divider" style="margin:0;">
                <div class="wf-panel-inner">
                    <label class="wf-label" style="margin-bottom:10px;">Kickback History</label>
                    <ul class="wf-timeline" id="kickback-timeline">
                        <li style="color:var(--wf-muted);font-size:0.8rem;list-style:none;padding:8px 0;">Loading...</li>
                    </ul>
                </div>

                <!-- Report Generation -->
                <hr class="wf-divider" style="margin:0;">
                <div class="wf-panel-inner">
                    <label class="wf-label" style="margin-bottom:10px;">Generate Report</label>
                    <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                        <select id="report-type-select" style="flex:1;min-width:160px;background:#161b22;border:1px solid #30363d;border-radius:5px;color:#e6edf3;padding:6px 8px;font-size:12px;">
                            <option value="standard_audit">Standard Audit</option>
                            <option value="compliance_assessment">Compliance Assessment</option>
                            <option value="security_review">Security Review</option>
                        </select>
                        <button class="wf-btn wf-btn-ghost" style="font-size:12px;white-space:nowrap;" onclick="generateReport()">⚡ Generate</button>
                    </div>
                    <div id="report-gen-status" style="margin-top:8px;font-size:11px;color:#8b949e;"></div>
                    <div id="report-list" style="margin-top:10px;"></div>
                </div>
            </div>

        </div><!-- /wf-side -->
    </div><!-- /wf-layout -->
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';

    // ── State ──────────────────────────────────────────────────────────
    var selectedInstanceId = null;
    var selectedApprovalId = null;
    var selectedRating = 0;
    var allInstances = [];
    var allFeedback  = [];

    // ── Boot ───────────────────────────────────────────────────────────
    loadCoverage();
    loadInstances();

    // ── Coverage / stats ───────────────────────────────────────────────
    function loadCoverage() {
        fetch('/api/wf/coverage')
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (d) {
                if (!d) return;
                document.getElementById('stat-active').textContent = d.active_instances != null ? d.active_instances : '--';
                document.getElementById('stat-pending').textContent = d.tasks_with_pending_gate != null ? d.tasks_with_pending_gate : '--';
            })
            .catch(function (e) { console.warn('coverage load failed:', e); });

        fetch('/api/wf/feedback?limit=500')
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (d) {
                if (!d || !d.feedback || d.feedback.length === 0) {
                    document.getElementById('stat-rating').textContent = '--';
                    document.getElementById('stat-kickback').textContent = '--';
                    return;
                }
                allFeedback = d.feedback;
                var rated = d.feedback.filter(function (f) { return f.rating; });
                var avgRating = rated.length ? (rated.reduce(function (s, f) { return s + f.rating; }, 0) / rated.length).toFixed(1) : '--';
                document.getElementById('stat-rating').textContent = avgRating + (rated.length ? '★' : '');

                var kickbacks = d.feedback.filter(function (f) { return f.decision === 'kickback'; });
                var rate = ((kickbacks.length / d.feedback.length) * 100).toFixed(0) + '%';
                document.getElementById('stat-kickback').textContent = rate;
            })
            .catch(function (e) { console.warn('feedback load failed:', e); });
    }

    // ── Instances table ────────────────────────────────────────────────
    window.loadInstances = function () {
        var tbody = document.getElementById('gates-body');
        tbody.innerHTML = '<tr><td colspan="6" class="wf-empty">Loading...</td></tr>';

        fetch('/api/wf/instances?status=active')
            .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
            .then(function (d) {
                allInstances = d.instances || [];
                renderGatesTable(allInstances);
            })
            .catch(function (e) {
                tbody.innerHTML = '<tr><td colspan="6" class="wf-empty" style="color:var(--wf-danger);">Failed to load instances (' + e + ')</td></tr>';
            });
    };

    function renderGatesTable(instances) {
        var tbody = document.getElementById('gates-body');
        if (!instances || instances.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="wf-empty">No active gates found.</td></tr>';
            return;
        }
        tbody.innerHTML = instances.map(function (inst) {
            var stageBadge = stageBadgeClass(inst.current_stage);
            var statusBadge = statusBadgeClass(inst.status);
            var taskId = inst.task_id || inst.id.substring(0, 8);
            var team = inst.team_id || '&mdash;';
            var due = inst.due_at ? inst.due_at.substring(0, 10) : '&mdash;';
            return '<tr data-instance-id="' + escHtml(inst.id) + '" onclick="selectRow(this)">' +
                '<td><code style="font-size:0.78rem;">' + escHtml(taskId) + '</code></td>' +
                '<td><span class="badge ' + stageBadge + '">' + escHtml(inst.current_stage || 'build') + '</span></td>' +
                '<td>' + escHtml(team) + '</td>' +
                '<td style="color:var(--wf-muted);">' + due + '</td>' +
                '<td><span class="badge ' + statusBadge + '">' + escHtml(inst.status || 'active') + '</span></td>' +
                '<td style="text-align:right;">' +
                    '<button class="wf-btn wf-btn-primary wf-btn-sm" onclick="event.stopPropagation();quickApprove(\'' + escHtml(inst.id) + '\')">Approve</button> ' +
                    '<button class="wf-btn wf-btn-danger wf-btn-sm" onclick="event.stopPropagation();quickKickback(\'' + escHtml(inst.id) + '\')">Kickback</button>' +
                '</td>' +
                '</tr>';
        }).join('');
    }

    window.selectRow = function (tr) {
        // deselect old
        var prev = document.querySelector('.wf-row-selected');
        if (prev) prev.classList.remove('wf-row-selected');
        tr.classList.add('wf-row-selected');

        var instanceId = tr.getAttribute('data-instance-id');
        openPanel(instanceId);
    };

    // ── Panel ──────────────────────────────────────────────────────────
    function openPanel(instanceId) {
        selectedInstanceId = instanceId;
        document.getElementById('sel-instance-id').value = instanceId;
        document.getElementById('sel-approval-id').value = '';

        // Hide placeholder, show form
        document.getElementById('panel-placeholder').style.display = 'none';
        var panel = document.getElementById('action-panel');
        panel.classList.add('wf-panel-visible');
        panel.style.display = 'flex';

        resetForm();
        flashHide();

        // Load full instance detail
        fetch('/api/wf/instances/' + instanceId)
            .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
            .then(function (d) {
                document.getElementById('panel-title').textContent =
                    'Review: ' + (d.task_id || instanceId.substring(0, 8));

                // Find pending approval
                var approvals = d.approvals || [];
                var pending = approvals.find(function (a) { return a.status === 'pending'; });
                if (pending) {
                    document.getElementById('sel-approval-id').value = pending.id;
                    loadRequiredDocs(pending.id, d.current_stage);
                } else {
                    document.getElementById('doc-list').innerHTML =
                        '<p style="color:var(--wf-muted);font-size:0.8rem;">No pending approval gate.</p>';
                }

                // Load kickback history from feedback
                renderKickbackTimeline(d.kickbacks || []);
            })
            .catch(function (e) {
                document.getElementById('panel-title').textContent = 'Review Gate';
                console.warn('instance detail load failed:', e);
            });

        // Load citations
        loadCitations(instanceId);

        // Load external steps for this instance
        loadExternalSteps(instanceId);
    }

    window.closePanel = function () {
        var prev = document.querySelector('.wf-row-selected');
        if (prev) prev.classList.remove('wf-row-selected');

        document.getElementById('panel-placeholder').style.display = 'block';
        var panel = document.getElementById('action-panel');
        panel.classList.remove('wf-panel-visible');
        panel.style.display = 'none';

        selectedInstanceId = null;
        selectedApprovalId = null;
        resetForm();
    };

    function resetForm() {
        setRating(0);
        document.querySelectorAll('input[name="decision"]').forEach(function (r) { r.checked = r.value === 'approve'; });
        document.getElementById('kickback-reason-field').style.display = 'none';
        document.getElementById('comments-input').value = '';
        document.getElementById('kickback-reason-input').value = '';
        document.querySelectorAll('#feedback-types input[type=checkbox]').forEach(function (c) { c.checked = false; });
        document.querySelectorAll('#improvement-tags .wf-chip').forEach(function (c) { c.classList.remove('selected'); });
        document.getElementById('citations-list').innerHTML = '<p style="color:var(--wf-muted);font-size:0.8rem;">Loading citations...</p>';
        document.getElementById('doc-list').innerHTML = '<p style="color:var(--wf-muted);font-size:0.8rem;">Loading docs...</p>';
        document.getElementById('ext-steps-body').innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--wf-muted);padding:16px;">Loading...</td></tr>';
        document.getElementById('kickback-timeline').innerHTML = '<li style="color:var(--wf-muted);font-size:0.8rem;list-style:none;padding:8px 0;">Loading...</li>';
    }

    // ── Star widget ────────────────────────────────────────────────────
    document.querySelectorAll('#star-widget .wf-star').forEach(function (star) {
        star.addEventListener('click', function () { setRating(parseInt(star.getAttribute('data-val'))); });
        star.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') setRating(parseInt(star.getAttribute('data-val')));
        });
    });

    function setRating(val) {
        selectedRating = val;
        document.querySelectorAll('#star-widget .wf-star').forEach(function (s) {
            s.classList.toggle('active', parseInt(s.getAttribute('data-val')) <= val);
        });
    }

    // ── Decision radio ─────────────────────────────────────────────────
    window.onDecisionChange = function (radio) {
        var isKickback = radio.value === 'kickback';
        document.getElementById('kickback-reason-field').style.display = isKickback ? 'block' : 'none';
    };

    // ── Improvement tag chips ──────────────────────────────────────────
    document.querySelectorAll('#improvement-tags .wf-chip').forEach(function (chip) {
        chip.addEventListener('click', function () { chip.classList.toggle('selected'); });
    });

    // ── Required docs ──────────────────────────────────────────────────
    function loadRequiredDocs(approvalId, stage) {
        fetch('/api/wf/approvals/' + approvalId + '/documents')
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (d) {
                var list = document.getElementById('doc-list');
                var subs = (d && d.submissions) ? d.submissions : [];
                if (subs.length === 0) {
                    list.innerHTML = '<p style="color:var(--wf-muted);font-size:0.8rem;">No documents required for this stage.</p>';
                    return;
                }
                list.innerHTML = subs.map(function (sub) {
                    var isChecklist = sub.doc_type === 'checklist';
                    var btnLabel = isChecklist ? 'Submit Checklist' : 'Submit Form';
                    return '<div class="wf-doc-item">' +
                        '<div>' +
                            '<div class="wf-doc-name">' + escHtml(sub.name || sub.doc_template_id) + '</div>' +
                            '<div class="wf-doc-meta">' + escHtml(sub.doc_type || 'document') + ' &bull; ' + escHtml(sub.submitted_at ? 'Submitted ' + sub.submitted_at.substring(0, 10) : 'Pending') + '</div>' +
                        '</div>' +
                        (sub.submitted_at ? '' : '<button class="wf-btn wf-btn-ghost wf-btn-sm" onclick="openDocModal(\'' + escHtml(approvalId) + '\',\'' + escHtml(sub.doc_template_id) + '\')">' + btnLabel + '</button>') +
                    '</div>';
                }).join('');
            })
            .catch(function () {
                document.getElementById('doc-list').innerHTML = '<p style="color:var(--wf-muted);font-size:0.8rem;">Could not load documents.</p>';
            });
    }

    // ── Citations ──────────────────────────────────────────────────────
    function loadCitations(instanceId) {
        fetch('/api/wf/instances/' + instanceId + '/citations')
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (d) {
                var el = document.getElementById('citations-list');
                var cites = (d && d.citations) ? d.citations : [];
                if (cites.length === 0) {
                    el.innerHTML = '<p style="color:var(--wf-muted);font-size:0.8rem;">No citations attached.</p>';
                    return;
                }
                el.innerHTML = cites.map(function (c) {
                    var ref = escHtml(c.source_doc);
                    if (c.section) ref += ', ' + escHtml(c.section);
                    if (c.page_number) ref += ', p.' + c.page_number;
                    return '<div class="wf-cite-item">' +
                        (c.excerpt ? '<div>' + escHtml(c.excerpt) + '</div>' : '') +
                        '<div class="wf-cite-ref">' + ref + '</div>' +
                    '</div>';
                }).join('');
            })
            .catch(function () {
                document.getElementById('citations-list').innerHTML = '<p style="color:var(--wf-muted);font-size:0.8rem;">Could not load citations.</p>';
            });
    }

    // ── External steps ─────────────────────────────────────────────────
    function loadExternalSteps(instanceId) {
        fetch('/api/wf/external')
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (d) {
                var tbody = document.getElementById('ext-steps-body');
                var steps = (d && d.external_steps) ? d.external_steps.filter(function (s) { return s.instance_id === instanceId; }) : [];
                if (steps.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--wf-muted);padding:14px;font-size:0.8rem;">No external steps.</td></tr>';
                    return;
                }
                tbody.innerHTML = steps.map(function (s) {
                    var typeBadge = extTypeBadge(s.step_type);
                    var statusBadge = extStatusBadge(s.status);
                    var refHtml = s.external_ref
                        ? '<a href="' + escHtml(s.external_ref) + '" target="_blank" rel="noopener" style="color:var(--wf-accent);font-size:0.78rem;">' + escHtml(s.external_ref.substring(0, 30)) + '&hellip;</a>'
                        : '&mdash;';
                    var markDone = (s.status === 'pending' || s.status === 'sent' || s.status === 'waiting')
                        ? '<button class="wf-btn wf-btn-ghost wf-btn-sm" onclick="markStepDone(\'' + escHtml(s.id) + '\')">Mark Done</button>'
                        : '';
                    return '<tr>' +
                        '<td>' + escHtml(s.stage_name) + '</td>' +
                        '<td><span class="badge ' + typeBadge + '">' + escHtml(s.step_type.replace('external_', '')) + '</span></td>' +
                        '<td>' + escHtml(s.external_system || '&mdash;') + '</td>' +
                        '<td><span class="badge ' + statusBadge + '">' + escHtml(s.status) + '</span></td>' +
                        '<td>' + refHtml + '</td>' +
                        '<td>' + markDone + '</td>' +
                    '</tr>';
                }).join('');
            })
            .catch(function () {
                document.getElementById('ext-steps-body').innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--wf-muted);">Could not load steps.</td></tr>';
            });
    }

    window.markStepDone = function (stepId) {
        fetch('/api/wf/external/' + stepId + '/complete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' })
            .then(function (r) { return r.json(); })
            .then(function (d) {
                if (d.completed) { loadExternalSteps(selectedInstanceId); }
                else { alert('Could not mark step done: ' + (d.error || 'unknown error')); }
            })
            .catch(function (e) { alert('Request failed: ' + e.message); });
    };

    // ── Kickback timeline ──────────────────────────────────────────────
    function renderKickbackTimeline(kickbacks) {
        var ul = document.getElementById('kickback-timeline');
        if (!kickbacks || kickbacks.length === 0) {
            ul.innerHTML = '<li style="color:var(--wf-muted);font-size:0.8rem;list-style:none;padding:8px 0;">No kickbacks for this instance.</li>';
            return;
        }
        ul.innerHTML = kickbacks.map(function (kb) {
            return '<li class="wf-timeline-item">' +
                '<div class="wf-timeline-dot"></div>' +
                '<div class="wf-timeline-body">' +
                    '<div>' + escHtml(kb.kickback_reason || 'No reason provided') + '</div>' +
                    '<div class="wf-timeline-meta">' + escHtml(kb.submitted_by) + ' &bull; ' + escHtml((kb.submitted_at || '').substring(0, 10)) + '</div>' +
                '</div>' +
            '</li>';
        }).join('');
    }

    // ── Submit decision ────────────────────────────────────────────────
    window.submitDecision = function () {
        var instanceId = document.getElementById('sel-instance-id').value;
        if (!instanceId) { flashError('No instance selected.'); return; }

        var decision = document.querySelector('input[name="decision"]:checked').value;
        var kickbackReason = document.getElementById('kickback-reason-input').value.trim();

        if (decision === 'kickback' && !kickbackReason) {
            flashError('Kickback reason is required.');
            document.getElementById('kickback-reason-input').focus();
            return;
        }

        var feedbackTypes = [];
        document.querySelectorAll('#feedback-types input[type=checkbox]:checked').forEach(function (c) { feedbackTypes.push(c.value); });

        var improvementTags = [];
        document.querySelectorAll('#improvement-tags .wf-chip.selected').forEach(function (c) { improvementTags.push(c.getAttribute('data-val')); });

        var comments = document.getElementById('comments-input').value.trim();
        var btn = document.getElementById('submit-btn');
        btn.disabled = true;
        btn.textContent = 'Submitting...';
        flashHide();

        var endpoint = '/api/wf/instances/' + instanceId + '/' + (decision === 'kickback' ? 'kickback' : 'approve');
        var body = {
            decision: decision,
            rating: selectedRating || null,
            comments: comments || null,
            feedback_types: feedbackTypes.length ? feedbackTypes : null,
            improvement_tags: improvementTags.length ? improvementTags : null,
        };
        if (decision === 'kickback') { body.kickback_reason = kickbackReason; }

        fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (res.ok) {
                    flashSuccess('Decision submitted: ' + decision + '.');
                    loadInstances();
                    loadCoverage();
                    setTimeout(closePanel, 1600);
                } else {
                    flashError(res.data.error || 'Submission failed.');
                }
            })
            .catch(function (e) { flashError('Request failed: ' + e.message); })
            .finally(function () { btn.disabled = false; btn.textContent = 'Submit'; });
    };

    // ── Quick action buttons ───────────────────────────────────────────
    window.quickApprove = function (instanceId) {
        if (!confirm('Approve instance ' + instanceId.substring(0, 8) + '?')) return;
        fetch('/api/wf/instances/' + instanceId + '/approve', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ decision: 'approve' })
        })
            .then(function (r) { return r.json(); })
            .then(function (d) {
                if (d.feedback_id) { loadInstances(); loadCoverage(); }
                else { alert('Error: ' + (d.error || 'unknown')); }
            })
            .catch(function (e) { alert('Request failed: ' + e.message); });
    };

    window.quickKickback = function (instanceId) {
        var reason = prompt('Kickback reason:');
        if (reason === null) return;
        if (!reason.trim()) { alert('Reason is required.'); return; }
        fetch('/api/wf/instances/' + instanceId + '/kickback', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ kickback_reason: reason })
        })
            .then(function (r) { return r.json(); })
            .then(function (d) {
                if (d.feedback_id) { loadInstances(); loadCoverage(); }
                else { alert('Error: ' + (d.error || 'unknown')); }
            })
            .catch(function (e) { alert('Request failed: ' + e.message); });
    };

    // ── Doc modal stub ─────────────────────────────────────────────────
    window.openDocModal = function (approvalId, docTemplateId) {
        var json = prompt('Enter submission JSON (or leave blank for empty):') || '{}';
        var body = { doc_template_id: docTemplateId, submission_json: json };
        fetch('/api/wf/approvals/' + approvalId + '/documents', {
            method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
        })
            .then(function (r) { return r.json(); })
            .then(function (d) {
                if (d.id) { loadRequiredDocs(approvalId, ''); alert('Document submitted.'); }
                else { alert('Error: ' + (d.error || 'unknown')); }
            })
            .catch(function (e) { alert('Request failed: ' + e.message); });
    };

    // ── Flash helpers ──────────────────────────────────────────────────
    function flashSuccess(msg) {
        var el = document.getElementById('flash-success');
        el.textContent = msg;
        el.style.display = 'block';
    }
    function flashError(msg) {
        var el = document.getElementById('flash-error');
        el.textContent = msg;
        el.style.display = 'block';
    }
    function flashHide() {
        document.getElementById('flash-success').style.display = 'none';
        document.getElementById('flash-error').style.display   = 'none';
    }

    // ── Badge helpers ──────────────────────────────────────────────────
    function stageBadgeClass(stage) {
        var map = { build: 'badge-build', review: 'badge-review', test: 'badge-test', approve: 'badge-approve', deploy: 'badge-deploy' };
        return map[stage] || 'badge-build';
    }
    function statusBadgeClass(status) {
        var map = { active: 'badge-active', approved: 'badge-approved', kickback: 'badge-kickback', conditional: 'badge-conditional', escalated: 'badge-escalated', cancelled: 'badge-cancelled', waiting_external: 'badge-waiting' };
        return map[status] || 'badge-active';
    }
    function extTypeBadge(type) {
        if (type === 'external_email')  return 'badge-email';
        if (type === 'external_ticket') return 'badge-ticket';
        if (type === 'external_wiki')   return 'badge-wiki';
        return 'badge-manual';
    }
    function extStatusBadge(status) {
        var map = { completed: 'badge-completed', failed: 'badge-failed', sent: 'badge-sent', waiting: 'badge-waiting', pending: 'badge-pending', timed_out: 'badge-kickback' };
        return map[status] || 'badge-manual';
    }

    // ── Escape helper ──────────────────────────────────────────────────
    function escHtml(str) {
        if (str == null) return '';
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // ── Report Generation ─────────────────────────────────────────────────
    window.generateReport = function() {
        if (!selectedInstanceId) {
            alert('Select an instance from the queue first.');
            return;
        }
        var reportType = document.getElementById('report-type-select').value;
        var statusEl = document.getElementById('report-gen-status');
        statusEl.textContent = '⏳ Generating ' + reportType.replace(/_/g,' ') + ' report…';
        fetch('/api/wf/instances/' + selectedInstanceId + '/generate-report', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({report_type: reportType})
        }).then(function(r) { return r.json().then(function(d){ return {ok:r.ok, data:d}; }); })
        .then(function(res) {
            if (res.ok && res.data.report_id) {
                statusEl.textContent = '✓ Report queued: ' + res.data.report_id;
                statusEl.style.color = '#3fb950';
                setTimeout(function() { loadReportList(selectedInstanceId); }, 2000);
            } else {
                statusEl.textContent = '✗ ' + (res.data.error || 'Generation failed');
                statusEl.style.color = '#f85149';
            }
        }).catch(function(e) {
            statusEl.textContent = '✗ Network error: ' + e.message;
            statusEl.style.color = '#f85149';
        });
    };

    function loadReportList(instanceId) {
        fetch('/api/wf/reports?instance_id=' + instanceId)
            .then(function(r){ return r.ok ? r.json() : null; })
            .then(function(d) {
                var el = document.getElementById('report-list');
                if (!d || !d.reports || d.reports.length === 0) {
                    el.innerHTML = '<p style="color:#484f58;font-size:11px;">No reports yet.</p>';
                    return;
                }
                var statusColors = {completed:'#3fb950',failed:'#f85149',generating:'#f0a500',pending:'#8b949e'};
                el.innerHTML = d.reports.slice(0,5).map(function(r) {
                    var sc = statusColors[r.status] || '#8b949e';
                    var viewLink = r.status === 'completed'
                        ? ' <a href="/api/wf/reports/' + r.id + '?format=html" target="_blank" style="color:#58a6ff;font-size:10px;text-decoration:none;">View ↗</a>'
                        : '';
                    return '<div style="padding:6px 0;border-bottom:1px solid #21262d;font-size:11px;">' +
                        '<span style="color:' + sc + ';margin-right:6px;">●</span>' +
                        '<strong>' + escHtml(r.report_type.replace(/_/g,' ')) + '</strong>' +
                        ' <span style="color:#8b949e;">' + escHtml(r.generated_at ? r.generated_at.slice(0,16) : '') + '</span>' +
                        (r.word_count ? ' · ' + r.word_count + 'w' : '') +
                        (r.citation_count ? ' · ' + r.citation_count + ' citations' : '') +
                        viewLink + '</div>';
                }).join('');
            }).catch(function(e){ console.warn('loadReportList:', e); });
    }

    // Hook into existing selectInstance to also load reports
    var _origSelectInstance = window.selectInstance;
    window.selectInstance = function(id) {
        if (_origSelectInstance) _origSelectInstance(id);
        document.getElementById('report-gen-status').textContent = '';
        document.getElementById('report-gen-status').style.color = '#8b949e';
        document.getElementById('report-list').innerHTML = '';
        loadReportList(id);
    };

})();
</script>
{% endblock %}