{# Artifacts Panel - displays run outputs (reports, audits, traces) #}
<div class="artifacts-panel">
    <h3>ARTIFACTS</h3>
    
    <div id="artifacts-list" class="artifacts-list">
        <div class="artifacts-loading">Loading artifacts...</div>
    </div>
    
    <!-- Preview Modal -->
    <div id="preview-modal" class="preview-modal" style="display: none;">
        <div class="preview-modal-content">
            <div class="preview-modal-header">
                <h4 id="preview-title">Preview</h4>
                <button onclick="closePreview()" class="close-btn" title="Close">
                    <span style="font-size: 1.5rem; line-height: 1;">&times;</span>
                </button>
            </div>
            <div id="preview-body" class="preview-modal-body"></div>
        </div>
    </div>
</div>

<style>
.artifacts-panel {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.artifacts-panel h3 {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.artifacts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.artifacts-loading {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.artifact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
}

.artifact-meta {
    display: flex;
    gap: 1rem;
    flex: 1; /* Take up available space */
    align-items: center;
}

.artifact-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.artifact-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.artifact-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto; /* Push to right */
}

/* ... existing styles ... */

.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.preview-modal-content {
    background: var(--bg-secondary);
    width: 95vw;
    height: 92vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.preview-modal-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    height: 50px; /* Fixed header height */
    flex-shrink: 0;
}

.preview-modal-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Close button pushed to the right */
.close-btn {
    margin-left: auto; /* Push to right */
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.preview-modal-body {
    flex: 1;
    position: relative; /* Context for absolute children */
    background: #fff; /* Default white for HTML */
    overflow: hidden;
}

/* Full fill iframe */
.preview-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Code View Container */
.preview-code-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #1e1e1e; /* Dark theme for code */
    padding: 1.5rem;
}

.preview-code {
    margin: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Simple Syntax Highlighting Colors */
.hl-key { color: #9cdcfe; }
.hl-string { color: #ce9178; }
.hl-number { color: #b5cea8; }
.hl-bool { color: #569cd6; }
.hl-null { color: #569cd6; }

</style>

<script>
// Keep track of object URLs to revoke them
let activePreviewUrl = null;

// Make functions globally available
window.loadArtifacts = async function() {
    const runId = document.querySelector('[data-run-id]')?.dataset.runId;
    const date = document.querySelector('[data-run-date]')?.dataset.runDate;
    const runName = document.querySelector('[data-run-name]')?.dataset.runName;
    
    if (!date || !runName) return;
    
    try {
        const response = await fetch(`/api/artifacts/runs/${date}/${runName}/artifacts`);
        const data = await response.json();
        
        const container = document.getElementById('artifacts-list');
        if (!container) return;
        
        if (data.artifacts && data.artifacts.length > 0) {
            container.innerHTML = data.artifacts.map(a => `
                <div class="artifact-item">
                    <div class="artifact-meta">
                        <span class="artifact-name">${a.name}</span>
                        <span class="artifact-size">${(a.size / 1024).toFixed(1)} KB</span>
                    </div>
                    <div class="artifact-actions">
                        ${a.preview_mode !== 'none' ? `
                        <button class="btn btn-sm" onclick="previewArtifact('${a.artifact_id}', '${a.name}')">
                            👁 PREVIEW
                        </button>
                        ` : ''}
                        <a href="/api/artifacts/download/${a.artifact_id}" class="btn btn-sm" download>
                            💾 DOWNLOAD
                        </a>
                    </div>
                </div>
            `).join('');
        } else {
            container.innerHTML = '<div class="artifacts-loading">No artifacts yet</div>';
        }
    } catch (error) {
        const container = document.getElementById('artifacts-list');
        if (container) {
            container.innerHTML = '<div class="artifacts-loading">Failed to load artifacts</div>';
        }
    }
};

window.previewArtifact = async function(artifactId, name) {
    try {
        const response = await fetch(`/api/artifacts/${artifactId}/preview`);
        const data = await response.json();
        
        const modal = document.getElementById('preview-modal');
        const title = document.getElementById('preview-title');
        const body = document.getElementById('preview-body');
        
        title.textContent = name;
        
        // Clean up previous URL if exists
        if (activePreviewUrl) {
            URL.revokeObjectURL(activePreviewUrl);
            activePreviewUrl = null;
        }
        
        // Robust format detection
        const isHtml = data.format === 'html' || name.toLowerCase().endsWith('.html');
        const isJson = data.format === 'json' || data.format === 'jsonl' || name.toLowerCase().endsWith('.json') || name.toLowerCase().endsWith('.jsonl');
        
        if (isHtml) {
            // SCHEME: Blob URL (Most robust for HTML)
            const blob = new Blob([data.content], { type: 'text/html' });
            activePreviewUrl = URL.createObjectURL(blob);
            
            body.innerHTML = `<iframe src="${activePreviewUrl}" class="preview-iframe" title="Preview"></iframe>`;
            
        } else if (isJson) {
            // JSON Rendering
            let codeHtml = '';
            let rawJson = data.content;
            
            try {
                if (data.format === 'jsonl') {
                    const lines = rawJson.trim().split('\n');
                    const formattedLines = lines.map(line => {
                        try { return JSON.stringify(JSON.parse(line), null, 2); } 
                        catch (e) { return line; }
                    });
                    codeHtml = highlightJson(formattedLines.join('\n\n'));
                } else {
                    const obj = JSON.parse(rawJson);
                    codeHtml = highlightJson(JSON.stringify(obj, null, 2));
                }
            } catch (e) {
                codeHtml = escapeHtml(rawJson);
            }
            
            body.innerHTML = `<div class="preview-code-container"><pre class="preview-code">${codeHtml}</pre></div>`;
            
        } else {
            // Plain text
            body.innerHTML = `<div class="preview-code-container" style="background:var(--bg-primary);color:var(--text-primary)"><pre class="preview-code" style="color:inherit">${escapeHtml(data.content)}</pre></div>`;
        }
        
        modal.style.display = 'flex';
        
    } catch (error) {
        showToast({
            type: 'error',
            title: 'PREVIEW ERROR',
            message: error.message
        });
    }
};

window.closePreview = function() {
    const modal = document.getElementById('preview-modal');
    modal.style.display = 'none';
    document.getElementById('preview-body').innerHTML = ''; // Clear content
    if (activePreviewUrl) {
        URL.revokeObjectURL(activePreviewUrl);
        activePreviewUrl = null;
    }
};

function highlightJson(json) {
    if (!json) return '';
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        let cls = 'hl-number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'hl-key';
            } else {
                cls = 'hl-string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'hl-bool';
        } else if (/null/.test(match)) {
            cls = 'hl-null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Close modal on outside click
document.getElementById('preview-modal')?.addEventListener('click', (e) => {
    if (e.target.id === 'preview-modal') closePreview();
});

// Auto-load on page ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => window.loadArtifacts());
} else {
    window.loadArtifacts();
}
</script>