{% extends "base.html" %}
{% block title %}QA Smoketest{% endblock %}

{% block subheader %}{% include "admin_nav.html" ignore missing %}{% endblock %}
{% block content %}
<style>
.qa-wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1rem}
.qa-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.qa-title{font-size:1.4rem;font-weight:700;color:#1a1a1a}
.qa-subtitle{font-size:.82rem;color:#6b7280;margin-top:.15rem}
.stat-bar{display:flex;gap:.75rem;flex-wrap:wrap}
.stat-pill{padding:.35rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:.35rem}
.stat-pass{background:#dcfce7;color:#15803d}
.stat-fail{background:#fee2e2;color:#dc2626}
.stat-skip{background:#fef3c7;color:#b45309}
.stat-pend{background:#f3f4f6;color:#6b7280}
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:1rem;overflow:hidden}
.panel-header{padding:.75rem 1rem;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.panel-title{font-weight:600;font-size:.9rem;color:#111}
.panel-meta{display:flex;gap:.5rem;align-items:center}
.panel-body{padding:0}
.smoke-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.5rem;padding:1rem}
.smoke-item{padding:.6rem .85rem;border-radius:8px;font-size:.78rem;display:flex;align-items:flex-start;gap:.5rem;border:1px solid transparent}
.smoke-pass{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.smoke-fail{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.smoke-pending{background:#fffbeb;border-color:#fde68a;color:#92400e}
.smoke-icon{font-size:.85rem;margin-top:.05rem;flex-shrink:0}
.smoke-label{font-weight:500}
.smoke-detail{color:#9ca3af;font-size:.72rem;margin-top:.1rem}
.checklist-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;border-bottom:1px solid #f3f4f6}
.checklist-item:last-child{border-bottom:none}
.checklist-item.is-pass{background:#f0fdf4}
.checklist-item.is-fail{background:#fef2f2}
.checklist-item.is-skip{background:#fffbeb}
.ci-label{flex:1;font-size:.83rem;color:#374151}
.ci-label.done{text-decoration:line-through;color:#9ca3af}
.ci-actions{display:flex;gap:.3rem;flex-shrink:0}
.ci-btn{border:none;border-radius:6px;padding:.25rem .55rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:opacity .15s}
.ci-btn:hover{opacity:.8}
.btn-pass{background:#dcfce7;color:#15803d}
.btn-fail{background:#fee2e2;color:#dc2626}
.btn-skip{background:#fef3c7;color:#b45309}
.btn-reset{background:#f3f4f6;color:#6b7280}
.ci-btn.active-pass{background:#16a34a;color:#fff}
.ci-btn.active-fail{background:#dc2626;color:#fff}
.ci-btn.active-skip{background:#d97706;color:#fff}
.ci-note{font-size:.7rem;color:#9ca3af;margin-top:.2rem;font-style:italic}
.progress-bar-wrap{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:.5rem 0}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:999px;transition:width .4s ease}
.session-history{font-size:.78rem}
.session-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;border-radius:6px;cursor:pointer;transition:background .15s}
.session-row:hover{background:#f9fafb}
.session-row.active{background:#f0fdf4;font-weight:600}
.tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.tab-btn{padding:.4rem 1rem;border-radius:8px;border:1px solid #e5e7eb;background:#fff;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .15s}
.tab-btn.active{background:#16a34a;color:#fff;border-color:#16a34a}
.tab-panel{display:none}
.tab-panel.active{display:block}
.block-badge{font-size:.65rem;font-weight:700;padding:.15rem .45rem;border-radius:4px;background:#e5e7eb;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
</style>

<div class="qa-wrap">

    <!-- HEADER -->
    <div class="qa-header">
        <div>
            <div class="qa-title"><i class="fas fa-flask me-2 text-success"></i>QA Smoketest</div>
            <div class="qa-subtitle">Session #{{ qa_session.id }} &mdash; Started {{ qa_session.started_at.strftime('%b %d %Y %H:%M') }}
                {% if qa_session.completed_at %}<span class="badge bg-success ms-2" style="font-size:.65rem">Completed</span>{% else %}<span class="badge bg-warning text-dark ms-2" style="font-size:.65rem">In Progress</span>{% endif %}
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <form method="POST" action="/smoketest/new" id="newSessionForm">
                <button type="submit" class="btn btn-outline-secondary btn-sm" onclick="return confirm('Start a fresh QA session? Current session will be preserved in history.')">
                    <i class="fas fa-plus me-1"></i>New Session
                </button>
            </form>
            {% if not qa_session.completed_at %}
            <button class="btn btn-success btn-sm" onclick="completeSession()">
                <i class="fas fa-check-double me-1"></i>Mark Complete
            </button>
            {% endif %}
        </div>
    </div>

    <!-- OVERALL PROGRESS -->
    <div class="panel mb-3">
        <div class="panel-body p-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="fw-semibold" style="font-size:.88rem">Manual Checklist Progress</span>
                <span class="text-muted" style="font-size:.78rem">{{ passed + failed + skipped }} of {{ total }} reviewed</span>
            </div>
            <div class="progress-bar-wrap">
                <div class="progress-bar-fill" style="width:{{ ((passed + failed + skipped) / total * 100)|round(0)|int if total > 0 else 0 }}%"></div>
            </div>
            <div class="stat-bar mt-2">
                <div class="stat-pill stat-pass"><i class="fas fa-check"></i>{{ passed }} Pass</div>
                <div class="stat-pill stat-fail"><i class="fas fa-times"></i>{{ failed }} Fail</div>
                <div class="stat-pill stat-skip"><i class="fas fa-forward"></i>{{ skipped }} Skip</div>
                <div class="stat-pill stat-pend"><i class="fas fa-clock"></i>{{ pending }} Pending</div>
                <div class="stat-pill" style="background:#e0f2fe;color:#0369a1"><i class="fas fa-robot"></i>{{ smoke_pass }}/{{ smoke_total }} Auto Pass</div>
            </div>
        </div>
    </div>

    <!-- TABS -->
    <div class="tabs">
        <button class="tab-btn active" onclick="showTab('auto')">Automated Checks</button>
        {% for block_key, block_label in block_labels.items() %}
        {% set items = checklist_by_block.get(block_key, []) %}
        {% set block_pass = items|selectattr('status','equalto','pass')|list|length %}
        {% set block_fail = items|selectattr('status','equalto','fail')|list|length %}
        <button class="tab-btn {% if block_fail > 0 %}border-danger text-danger{% elif block_pass == items|length and items|length > 0 %}border-success text-success{% endif %}"
                onclick="showTab('{{ block_key }}')">
            {{ block_label }}
            {% if block_fail > 0 %}<span class="ms-1 badge bg-danger" style="font-size:.6rem">{{ block_fail }}</span>
            {% elif block_pass == items|length and items|length > 0 %}<span class="ms-1 badge bg-success" style="font-size:.6rem">✓</span>{% endif %}
        </button>
        {% endfor %}
        <button class="tab-btn" onclick="showTab('history')">History</button>
    </div>

    <!-- AUTO CHECKS TAB -->
    <div class="tab-panel active" id="tab-auto">
        <div class="panel">
            <div class="panel-header" onclick="togglePanel(this)">
                <span class="panel-title"><i class="fas fa-robot me-2 text-primary"></i>Automated Smoke Tests</span>
                <div class="panel-meta">
                    <span class="stat-pill stat-pass">{{ smoke_pass }} pass</span>
                    <span class="stat-pill stat-fail">{{ smoke_fail }} fail</span>
                    <i class="fas fa-chevron-down text-muted" style="font-size:.75rem"></i>
                </div>
            </div>
            <div class="panel-body">
                <div class="smoke-grid">
                    {% for key, result in smoke_results.items() %}
                    <div class="smoke-item {{ 'smoke-pass' if result.status == 'pass' else ('smoke-pending' if result.status == 'pending' else 'smoke-fail') }}">
                        <span class="smoke-icon">{{ '✓' if result.status == 'pass' else ('⏳' if result.status == 'pending' else '✗') }}</span>
                        <div>
                            <div class="smoke-label">{{ result.label }}</div>
                            <div class="smoke-detail">{{ result.detail }}</div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- MANUAL CHECKLIST TABS -->
    {% for block_key, block_label in block_labels.items() %}
    <div class="tab-panel" id="tab-{{ block_key }}">
        <div class="panel">
            <div class="panel-header">
                <span class="panel-title"><i class="fas fa-clipboard-check me-2 text-success"></i>{{ block_label }}</span>
                {% set items = checklist_by_block.get(block_key, []) %}
                {% set bp = items|selectattr('status','equalto','pass')|list|length %}
                {% set bf = items|selectattr('status','equalto','fail')|list|length %}
                <div class="panel-meta">
                    {% if bp > 0 %}<span class="stat-pill stat-pass">{{ bp }} pass</span>{% endif %}
                    {% if bf > 0 %}<span class="stat-pill stat-fail">{{ bf }} fail</span>{% endif %}
                    <span class="text-muted" style="font-size:.75rem">{{ items|length }} items</span>
                </div>
            </div>
            <div class="panel-body">
                {% for item in checklist_by_block.get(block_key, []) %}
                <div class="checklist-item is-{{ item.status }}" id="ci-{{ item.id }}">
                    <div class="flex-grow-1">
                        {% set item_label = namespace(text=item.item_key) %}
                        {% for b, k, l in qa_checklist_def %}{% if k == item.item_key %}{% set item_label.text = l %}{% endif %}{% endfor %}
                        <div class="ci-label {{ 'done' if item.status in ('pass','skip') }}">
                            {{ item_label.text }}
                        </div>
                        {% if item.notes %}
                        <div class="ci-note">{{ item.notes }}</div>
                        {% endif %}
                    </div>
                    <div class="ci-actions">
                        <button class="ci-btn btn-pass {{ 'active-pass' if item.status == 'pass' }}"
                                onclick="updateItem({{ item.id }}, 'pass', this)">Pass</button>
                        <button class="ci-btn btn-fail {{ 'active-fail' if item.status == 'fail' }}"
                                onclick="updateItem({{ item.id }}, 'fail', this)">Fail</button>
                        <button class="ci-btn btn-skip {{ 'active-skip' if item.status == 'skip' }}"
                                onclick="updateItem({{ item.id }}, 'skip', this)">Skip</button>
                        <button class="ci-btn btn-reset"
                                onclick="updateItem({{ item.id }}, 'pending', this)">↺</button>
                    </div>
                </div>
                {% else %}
                <div class="p-3 text-muted small">No items in this block.</div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}

    <!-- HISTORY TAB -->
    <div class="tab-panel" id="tab-history">
        <div class="panel">
            <div class="panel-header">
                <span class="panel-title"><i class="fas fa-history me-2"></i>Session History</span>
                <span class="text-muted" style="font-size:.75rem">Last 10 sessions</span>
            </div>
            <div class="panel-body p-2">
                {% for s in all_sessions %}
                <div class="session-row {{ 'active' if s.id == qa_session.id }}"
                     onclick="window.location='/smoketest?session_id={{ s.id }}'">
                    <i class="fas fa-{{ 'check-circle text-success' if s.completed_at else 'clock text-warning' }}" style="font-size:.8rem"></i>
                    <span class="fw-semibold">#{{ s.id }}</span>
                    <span class="text-muted">{{ s.started_at.strftime('%b %d %Y %H:%M') }}</span>
                    {% if s.completed_at %}<span class="badge bg-success rounded-pill" style="font-size:.6rem">Done</span>{% else %}<span class="badge bg-warning text-dark rounded-pill" style="font-size:.6rem">In Progress</span>{% endif %}
                    {% if s.id == qa_session.id %}<span class="badge bg-primary rounded-pill ms-auto" style="font-size:.6rem">Current</span>{% endif %}
                </div>
                {% else %}
                <div class="p-3 text-muted small">No session history yet.</div>
                {% endfor %}
            </div>
        </div>
    </div>

</div>

<script>
var SESSION_ID = {{ qa_session.id }};

function showTab(name) {
    document.querySelectorAll('.tab-panel').forEach(function(p){ p.classList.remove('active'); });
    document.querySelectorAll('.tab-btn').forEach(function(b){ b.classList.remove('active'); });
    var panel = document.getElementById('tab-' + name);
    if (panel) panel.classList.add('active');
    event.target.classList.add('active');
}

function togglePanel(header) {
    var body = header.nextElementSibling;
    var icon = header.querySelector('.fa-chevron-down, .fa-chevron-up');
    if (body.style.display === 'none') {
        body.style.display = '';
        if (icon) { icon.classList.remove('fa-chevron-up'); icon.classList.add('fa-chevron-down'); }
    } else {
        body.style.display = 'none';
        if (icon) { icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-up'); }
    }
}

function updateItem(itemId, status, btn) {
    var notes = '';
    if (status === 'fail') {
        notes = prompt('Optional: describe what failed (leave blank to skip)') || '';
    }
    fetch('/smoketest/update', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({item_id: itemId, status: status, notes: notes})
    }).then(function(r){ return r.json(); }).then(function(d){
        if (!d.success) { alert('Update failed: ' + (d.error || 'unknown')); return; }
        var row = document.getElementById('ci-' + itemId);
        row.className = 'checklist-item is-' + status;
        // Reset all buttons in this row
        row.querySelectorAll('.ci-btn').forEach(function(b){
            b.classList.remove('active-pass','active-fail','active-skip');
        });
        // Activate clicked button
        if (status === 'pass') btn.classList.add('active-pass');
        else if (status === 'fail') btn.classList.add('active-fail');
        else if (status === 'skip') btn.classList.add('active-skip');
        // Update label style
        var label = row.querySelector('.ci-label');
        if (status === 'pass' || status === 'skip') label.classList.add('done');
        else label.classList.remove('done');
        // Update note
        var noteEl = row.querySelector('.ci-note');
        if (notes) {
            if (!noteEl) {
                noteEl = document.createElement('div');
                noteEl.className = 'ci-note';
                label.parentNode.appendChild(noteEl);
            }
            noteEl.textContent = notes;
        }
        updateProgressBar();
    }).catch(function(){ alert('Network error'); });
}

function updateProgressBar() {
    var total = document.querySelectorAll('.checklist-item').length;
    var reviewed = document.querySelectorAll('.checklist-item.is-pass, .checklist-item.is-fail, .checklist-item.is-skip').length;
    var pct = total > 0 ? Math.round(reviewed / total * 100) : 0;
    var fill = document.querySelector('.progress-bar-fill');
    if (fill) fill.style.width = pct + '%';
}

function completeSession() {
    var notes = prompt('Add completion notes (optional):') || '';
    fetch('/smoketest/complete', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({session_id: SESSION_ID, notes: notes})
    }).then(function(r){ return r.json(); }).then(function(d){
        if (d.success) { location.reload(); }
        else { alert('Error: ' + (d.error || 'unknown')); }
    });
}

document.getElementById('newSessionForm').addEventListener('submit', function(e){
    e.preventDefault();
    fetch('/smoketest/new', {method:'POST'})
    .then(function(r){ return r.json(); })
    .then(function(d){
        if (d.success) { window.location = '/smoketest?session_id=' + d.session_id; }
        else { alert('Error: ' + (d.error||'unknown')); }
    });
});
</script>
{% endblock %}