{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-gradient border-0">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-0">
                            <i class="fa-industry fas"></i>
                            <a href="/projects/{{ project_name }}" class="text-white text-decoration-none">{{ title }}</a>
                        </h2>
                        {% if description %}
                        <p class="mb-0 text-white-50">{{ description }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-light btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-download"></i> Export SVG
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="/status/{{ project_name }}/table" target="_blank"><i class="fas fa-image"></i> Full Matrix Badge</a></li>
                                <li><a class="dropdown-item" href="/status/{{ project_name }}/table?compact=true" target="_blank"><i class="fas fa-list"></i> Compact Summary Badge</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">For Embedding:</h6></li>
                                <li><a class="dropdown-item small font-monospace" href="#" onclick="copyToClipboard('![Build Status]({{ request.url_root }}status/{{ project_name }}/table)'); return false;">Copy Markdown URL</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!-- Filter Buttons -->
                <div class="mb-3">
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-sm btn-success" id="filterSuccess" onclick="toggleFilter('success')">
                            <i class="fas fa-check-circle"></i> Success
                        </button>
                        <button type="button" class="btn btn-sm btn-danger" id="filterFail" onclick="toggleFilter('fail')">
                            <i class="fas fa-times-circle"></i> Failed
                        </button>
                        <button type="button" class="btn btn-sm btn-warning" id="filterBlocked" onclick="toggleFilter('blocked')">
                            <i class="fas fa-pause-circle"></i> Blocked
                        </button>
                        <button type="button" class="btn btn-sm btn-info" id="filterWip" onclick="toggleFilter('wip')">
                            <i class="fas fa-spinner"></i> Building
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary" id="filterInactive" onclick="toggleFilter('inactive')">
                            <i class="fas fa-circle"></i> Inactive
                        </button>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary ms-2" onclick="resetFilters()">
                        <i class="fas fa-redo"></i> Reset
                    </button>
                </div>

                <!-- Build Matrix Container -->
                <div id="buildMatrix">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3 text-muted">Loading build results...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Build Log Modal -->
<div class="modal fade" id="buildLogModal" tabindex="-1" aria-labelledby="buildLogModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content bg-dark text-white">
            <div class="modal-header border-secondary">
                <h5 class="modal-title" id="buildLogModalLabel">Build Log</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="buildLogContent" style="max-height: 70vh; overflow-y: auto;">
                <pre class="mb-0" style="color: #00ff00; background-color: #000; padding: 15px; border-radius: 5px; font-size: 0.85rem; line-height: 1.4;"></pre>
            </div>
        </div>
    </div>
</div>

<script>
const PROJECT_NAME = {{ project_name | tojson }};
const REDIS_ENABLED = {{ 'true' if redis_enabled else 'false' }};

// Set page title
document.title = PROJECT_NAME + ' (Table)';

// Filter state
let activeFilters = {
    success: true,
    fail: true,
    blocked: true,
    wip: true,
    inactive: false
};

// Build result checksum for change detection
let monitorChecksum = null;

function toggleFilter(filterName) {
    activeFilters[filterName] = !activeFilters[filterName];
    updateFilterButtons();
    applyFilters();
}

function resetFilters() {
    activeFilters = {
        success: true,
        fail: true,
        blocked: true,
        wip: true,
        inactive: false
    };
    updateFilterButtons();
    applyFilters();
}

function updateFilterButtons() {
    const buttonMap = {
        success: { id: 'filterSuccess', color: 'success' },
        fail: { id: 'filterFail', color: 'danger' },
        blocked: { id: 'filterBlocked', color: 'warning' },
        wip: { id: 'filterWip', color: 'info' },
        inactive: { id: 'filterInactive', color: 'secondary' }
    };

    Object.entries(buttonMap).forEach(([filterName, config]) => {
        const btn = document.getElementById(config.id);
        if (activeFilters[filterName]) {
            btn.classList.remove('btn-outline-' + config.color);
            btn.classList.add('btn-' + config.color);
        } else {
            btn.classList.remove('btn-' + config.color);
            btn.classList.add('btn-outline-' + config.color);
        }
    });
}

function applyFilters() {
    // Filter table rows based on active filters
    const rows = document.querySelectorAll('#buildMatrix tbody tr');
    rows.forEach(row => {
        const cells = row.querySelectorAll('td[data-category]');
        let hasVisibleCell = false;

        cells.forEach(cell => {
            const category = cell.getAttribute('data-category');
            if (category && activeFilters[category]) {
                hasVisibleCell = true;
            }
        });

        // Show row if any cell matches active filters, or if all cells are empty
        if (hasVisibleCell || cells.length === 0) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });

    // Filter table columns based on active repo-arch filters (header clicks)
    const headers = document.querySelectorAll('th.arch-header');
    const hiddenRepoArch = new Set();

    headers.forEach(header => {
        if (header.style.display === 'none') {
            hiddenRepoArch.add(header.getAttribute('data-repo-arch'));
        }
    });

    // Hide corresponding cells
    document.querySelectorAll('td[data-repo-arch]').forEach(cell => {
        const repoArch = cell.getAttribute('data-repo-arch');
        if (hiddenRepoArch.has(repoArch)) {
            cell.style.display = 'none';
        } else {
            cell.style.display = '';
        }
    });
}

function filterPackages() {
    const searchTerm = document.getElementById('packageSearch').value.toLowerCase();
    const rows = document.querySelectorAll('#buildMatrix tbody tr');

    rows.forEach(row => {
        const packageName = row.querySelector('td.sticky-col a');
        if (packageName) {
            const text = packageName.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        }
    });
}

function showBuildLogFromElement(element, project, repo, arch, pkg, status) {
    const details = element.getAttribute('data-details');
    showBuildLog(project, repo, arch, pkg, status, details);
}

function showBuildLog(project, repo, arch, pkg, status, details) {
    const modal = new bootstrap.Modal(document.getElementById('buildLogModal'));
    const modalTitle = document.getElementById('buildLogModalLabel');
    const modalBody = document.getElementById('buildLogContent');

    modalTitle.textContent = `${pkg} @ ${repo}/${arch} - ${status}`;
    modalBody.querySelector('pre').textContent = 'Loading build log...';

    modal.show();

    // Fetch build log
    fetch(`/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log`)
        .then(response => response.text())
        .then(text => {
            modalBody.querySelector('pre').textContent = text;
        })
        .catch(error => {
            modalBody.querySelector('pre').textContent = `Error loading build log: ${error}`;
        });
}

async function fetchBuildResults() {
    try {
        let fetchUrl = REDIS_ENABLED ?
            `/api/projects/${encodeURIComponent(PROJECT_NAME)}/_result` :
            `/obs/build/${encodeURIComponent(PROJECT_NAME)}/_result`;

        const response = await fetch(fetchUrl);
        const xml = await response.text();

        renderBuildMatrix(xml);
    } catch (error) {
        console.error('Error fetching build results:', error);
        document.getElementById('buildMatrix').innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle"></i>
                Error loading build results: ${error.message}
            </div>
        `;
    }
}

function renderBuildMatrix(xmlText) {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, 'text/xml');

    const results = xmlDoc.querySelectorAll('result');

    // Collect all packages and build a matrix
    const packageSet = new Set();
    const matrixData = {};

    results.forEach(result => {
        const repo = result.getAttribute('repository') || 'N/A';
        const arch = result.getAttribute('arch') || 'N/A';
        const key = `${repo}|${arch}`;

        if (!matrixData[key]) {
            matrixData[key] = {
                repository: repo,
                arch: arch,
                packages: {}
            };
        }

        // Get all status elements (packages)
        const statuses = result.querySelectorAll('status');
        statuses.forEach(status => {
            const packageName = status.getAttribute('package');
            const code = status.getAttribute('code');

            // Get details element if present (for unresolvable/broken)
            const detailsElement = status.querySelector('details');
            const details = detailsElement ? detailsElement.textContent.trim() : '';

            if (packageName) {
                packageSet.add(packageName);
                matrixData[key].packages[packageName] = {
                    code: code || 'unknown',
                    details: details
                };
            }
        });
    });

    const packages = Array.from(packageSet).sort();
    const repoArchKeys = Object.keys(matrixData).sort();

    let html = '<div class="table-responsive">';
    html += '<table class="table table-dark table-bordered table-sm build-matrix">';

    // Header rows - repository names and architectures
    html += '<thead>';

    // First header row - Package header and Repository names
    html += '<tr><th class="sticky-col">Package</th>';

    // Calculate colspan for each repository
    const repoColspans = {};
    repoArchKeys.forEach(key => {
        const repo = matrixData[key].repository;
        repoColspans[repo] = (repoColspans[repo] || 0) + 1;
    });

    // Output repository headers with colspan
    Object.entries(repoColspans).forEach(([repo, colspan]) => {
        html += `<th class="text-center repo-header" data-repo="${repo}" colspan="${colspan}">${repo}</th>`;
    });
    html += '</tr>';

    // Second header row - Search field and Architecture names
    html += '<tr>';
    html += '<th class="sticky-col p-2">';
    html += '<input type="text" id="packageSearch" class="form-control form-control-sm search-box" ';
    html += 'placeholder="🔍 Search..." onkeyup="filterPackages()" style="font-size: 0.85rem;">';
    html += '</th>';
    repoArchKeys.forEach(key => {
        const arch = matrixData[key].arch;
        html += `<th class="text-center arch-header" data-repo-arch="${key}"><code>${arch}</code></th>`;
    });
    html += '</tr>';

    html += '</thead>';

    html += '<tbody>';

    if (packages.length === 0) {
        html += `<tr><td colspan="${repoArchKeys.length + 1}" class="text-center text-muted">No build results available</td></tr>`;
    } else {
        // Each row is a package
        packages.forEach(pkg => {
            html += '<tr>';
            html += `<td class="sticky-col"><strong><a href="/packages/${encodeURIComponent(pkg)}?org={{ gitea_org }}&project=${encodeURIComponent(PROJECT_NAME)}" class="project-link text-decoration-none">${pkg}</a></strong></td>`;

            // Each column is a repo/arch combination
            repoArchKeys.forEach(key => {
                const statusData = matrixData[key].packages[pkg] || { code: '', details: '' };
                const status = statusData.code || '';
                const details = statusData.details || '';
                const repo = matrixData[key].repository;
                const arch = matrixData[key].arch;
                let cellClass = '';
                let icon = '';
                let statusText = status || 'no build';
                let category = '';

                switch(status) {
                    case 'succeeded':
                        cellClass = 'bg-success-cell';
                        icon = '✓';
                        statusText = 'succeeded';
                        category = 'success';
                        break;
                    case 'building':
                    case 'dispatching':
                    case 'signing':
                        cellClass = 'bg-building-cell';
                        icon = '<i class="fas fa-circle-notch fa-spin"></i>';
                        statusText = status;
                        category = 'wip';
                        break;
                    case 'scheduled':
                        cellClass = 'bg-info-cell';
                        icon = '⏱';
                        statusText = 'scheduled';
                        category = 'wip';
                        break;
                    case 'failed':
                        cellClass = 'bg-danger-cell';
                        icon = '✗';
                        statusText = 'failed';
                        category = 'fail';
                        break;
                    case 'unresolvable':
                        cellClass = 'bg-danger-cell';
                        icon = '?';
                        statusText = 'unresolvable';
                        category = 'fail';
                        break;
                    case 'broken':
                        cellClass = 'bg-danger-cell';
                        icon = '⚠';
                        statusText = 'broken';
                        category = 'fail';
                        break;
                    case 'blocked':
                        cellClass = 'bg-blocked-cell';
                        icon = '▌';
                        statusText = 'blocked';
                        category = 'blocked';
                        break;
                    case 'disabled':
                        cellClass = 'bg-disabled-cell';
                        icon = '○';
                        statusText = 'disabled';
                        category = 'inactive';
                        break;
                    case 'excluded':
                        cellClass = 'bg-secondary-cell';
                        icon = '−';
                        statusText = 'excluded';
                        category = 'inactive';
                        break;
                    default:
                        cellClass = 'bg-empty-cell';
                        icon = '';
                        statusText = 'no build';
                        category = '';
                }

                // Build tooltip
                let title = `${pkg} @ ${repo}/${arch}: ${statusText}`;
                if ((status === 'unresolvable' || status === 'broken') && details) {
                    const escapedDetails = details.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    const shortDetails = escapedDetails.length > 200 ? escapedDetails.substring(0, 200) + '...' : escapedDetails;
                    title += `\n${shortDetails}`;
                }

                const categoryAttr = category ? `data-category="${category}"` : '';
                const repoArchAttr = `data-repo-arch="${key}"`;
                const clickable = status && status !== '' && category !== '';
                const cursorStyle = clickable ? 'cursor: pointer;' : '';
                const detailsAttr = details ? `data-details="${details.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}"` : '';
                const clickHandler = clickable ? `onclick="showBuildLogFromElement(this, '${PROJECT_NAME}', '${repo}', '${arch}', '${pkg}', '${status}')"` : '';

                html += `<td class="${cellClass}" ${categoryAttr} ${repoArchAttr} title="${title}" style="${cursorStyle}" ${detailsAttr} ${clickHandler}>${icon}</td>`;
            });

            html += '</tr>';
        });
    }

    html += '</tbody>';
    html += '</table>';
    html += '</div>';

    document.getElementById('buildMatrix').innerHTML = html;

    // Apply initial filters
    updateFilterButtons();
    applyFilters();
}

// Copy text to clipboard
function copyToClipboard(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(() => {
            alert('Copied to clipboard!');
        }).catch(err => {
            console.error('Failed to copy: ', err);
            fallbackCopyTextToClipboard(text);
        });
    } else {
        fallbackCopyTextToClipboard(text);
    }
}

function fallbackCopyTextToClipboard(text) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.top = "0";
    textArea.style.left = "0";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
        document.execCommand('copy');
        alert('Copied to clipboard!');
    } catch (err) {
        console.error('Failed to copy: ', err);
        alert('Failed to copy to clipboard');
    }

    document.body.removeChild(textArea);
}

// Load build results on page load
document.addEventListener('DOMContentLoaded', function() {
    fetchBuildResults();
});
</script>
{% endblock %}