{% extends "base.html" %}
{% block title %}IaC Gallery - ICDEV™ Dashboard{% endblock %}
{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" style="margin-bottom:0.5rem;">
        <span><a href="/" style="color:#1976d2;text-decoration:none;">Home</a></span>
        <span style="color:#999;"> &gt; </span>
        <span style="color:#333;">IaC Gallery</span>
    </nav>

    <h1>Infrastructure as Code Gallery</h1>
    <p class="text-muted">STIG-hardened IaC generation for multi-cloud IL2&#8211;IL6 environments. Terraform, Ansible, and Kubernetes templates with automated compliance baked in.</p>

    <!-- Stats Grid -->
    <div id="stats-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0;">
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-total" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Total Artifacts</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-stig" style="font-size:2rem;font-weight:bold;color:#4caf50;">--</div>
            <div style="color:#666;">STIG Hardening %</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-manifests" style="font-size:2rem;font-weight:bold;color:#1976d2;">--</div>
            <div style="color:#666;">Deployment Manifests</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-rollbacks" style="font-size:2rem;font-weight:bold;color:#ff9800;">--</div>
            <div style="color:#666;">Rollback Scripts</div>
        </div>
    </div>

    <!-- Supported Platforms -->
    <h2 style="margin-top:2rem;">Supported Platforms</h2>
    <div id="platforms-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0;">
        <div style="text-align:center;padding:2rem;color:#999;">Loading platforms...</div>
    </div>

    <!-- STIG Hardening Coverage -->
    <h2 style="margin-top:2rem;">STIG Hardening Coverage</h2>
    <div class="table-container" style="margin:1rem 0;">
        <table id="tbl-stig" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;">Target Type</th>
                    <th style="text-align:center;padding:0.5rem;">Total Findings</th>
                    <th style="text-align:center;padding:0.5rem;">Hardened (NotAFinding)</th>
                    <th style="text-align:center;padding:0.5rem;">Open</th>
                    <th style="text-align:center;padding:0.5rem;">N/A</th>
                    <th style="text-align:center;padding:0.5rem;">Hardening %</th>
                </tr>
            </thead>
            <tbody id="stig-body">
                <tr><td colspan="6" style="text-align:center;padding:1.5rem;color:#999;">Loading STIG coverage...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Generate IaC -->
    <h2 style="margin-top:2rem;">Generate IaC</h2>
    <div style="margin:1rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;background:#fafafa;">
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem;">
            <div>
                <label for="gen-project" style="display:block;font-weight:600;margin-bottom:0.3rem;">Project ID</label>
                <input id="gen-project" type="text" placeholder="e.g. proj-123" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;" />
            </div>
            <div>
                <label for="gen-csp" style="display:block;font-weight:600;margin-bottom:0.3rem;">Cloud Service Provider</label>
                <select id="gen-csp" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;background:#fff;">
                    <option value="aws_govcloud">AWS GovCloud</option>
                    <option value="azure_government">Azure Government</option>
                    <option value="gcp">GCP</option>
                    <option value="oci">OCI</option>
                    <option value="ibm">IBM Cloud</option>
                    <option value="local">Local</option>
                </select>
            </div>
            <div>
                <label for="gen-il" style="display:block;font-weight:600;margin-bottom:0.3rem;">Impact Level</label>
                <select id="gen-il" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;background:#fff;">
                    <option value="IL2">IL2</option>
                    <option value="IL4">IL4</option>
                    <option value="IL5">IL5</option>
                    <option value="IL6">IL6</option>
                </select>
            </div>
            <div>
                <label for="gen-type" style="display:block;font-weight:600;margin-bottom:0.3rem;">Template Type</label>
                <select id="gen-type" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;background:#fff;">
                    <option value="terraform">Terraform</option>
                    <option value="ansible">Ansible</option>
                    <option value="k8s">Kubernetes</option>
                </select>
            </div>
        </div>
        <div style="margin-top:1rem;display:flex;gap:0.5rem;align-items:center;">
            <button onclick="generateIaC()" id="btn-generate" style="padding:0.5rem 1.2rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:0.95rem;font-weight:600;">Generate</button>
            <span id="gen-status" style="color:#666;font-size:0.9rem;"></span>
        </div>
        <div id="gen-result" style="display:none;margin-top:1rem;padding:1rem;background:#fff;border:1px solid #e0e0e0;border-radius:8px;">
            <h4 style="margin:0 0 0.5rem;font-size:0.95rem;">Generation Result</h4>
            <pre id="gen-output" style="margin:0;padding:0.75rem;background:#f5f5f5;border-radius:4px;font-size:0.8rem;overflow-x:auto;max-height:300px;white-space:pre-wrap;"></pre>
        </div>
    </div>

    <!-- Artifacts Table -->
    <h2 style="margin-top:2rem;">Artifacts</h2>
    <div class="table-container" style="margin:1rem 0;">
        <table id="tbl-artifacts" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;">Type</th>
                    <th style="text-align:left;padding:0.5rem;">Plan</th>
                    <th style="text-align:left;padding:0.5rem;">File Path</th>
                    <th style="text-align:left;padding:0.5rem;">Description</th>
                    <th style="text-align:left;padding:0.5rem;">Date</th>
                </tr>
            </thead>
            <tbody id="artifacts-body">
                <tr><td colspan="5" style="text-align:center;padding:1.5rem;color:#999;">Loading artifacts...</td></tr>
            </tbody>
        </table>
    </div>
    <div id="artifacts-pagination" style="display:flex;justify-content:center;gap:0.5rem;margin:1rem 0;"></div>

    <!-- Artifact Detail Modal -->
    <div id="artifact-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;justify-content:center;align-items:center;">
        <div style="background:#fff;border-radius:8px;padding:1.5rem;max-width:800px;width:90%;max-height:80vh;overflow-y:auto;position:relative;">
            <button onclick="closeModal()" style="position:absolute;top:0.75rem;right:0.75rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#999;">&times;</button>
            <h3 id="modal-title" style="margin:0 0 0.5rem;">Artifact Detail</h3>
            <div id="modal-meta" style="font-size:0.85rem;color:#666;margin-bottom:1rem;"></div>
            <pre id="modal-content" style="padding:1rem;background:#f5f5f5;border-radius:4px;font-size:0.8rem;overflow-x:auto;white-space:pre-wrap;max-height:50vh;"></pre>
        </div>
    </div>
</div>

<script>
const TYPE_COLORS = {
    deployment_manifest: {bg: '#e3f2fd', color: '#1565c0'},
    schema_ddl:          {bg: '#f3e5f5', color: '#7b1fa2'},
    scaffold_code:       {bg: '#e0f2f1', color: '#00695c'},
    rollback_script:     {bg: '#fff3e0', color: '#e65100'}
};

const CSP_COLORS = {
    aws_govcloud:      '#ff9900',
    azure_government:  '#0078d4',
    gcp:               '#4285f4',
    oci:               '#f80000',
    ibm:               '#0530ad',
    local:             '#616161'
};

const CSP_LABELS = {
    aws_govcloud:      'AWS GovCloud',
    azure_government:  'Azure Government',
    gcp:               'GCP',
    oci:               'OCI',
    ibm:               'IBM Cloud',
    local:             'Local'
};

let artifactsPage = 1;
const artifactsPerPage = 15;

async function loadStats() {
    try {
        const res = await fetch('/api/iac/stats');
        const data = await res.json();
        document.getElementById('stat-total').textContent = data.total_artifacts ?? '--';
        document.getElementById('stat-stig').textContent = data.stig_hardening_pct != null ? data.stig_hardening_pct + '%' : '--';
        document.getElementById('stat-manifests').textContent = data.deployment_manifest_count ?? '--';
        document.getElementById('stat-rollbacks').textContent = data.rollback_script_count ?? '--';
    } catch (e) {
        console.error('Failed to load stats:', e);
    }
}

async function loadPlatforms() {
    const grid = document.getElementById('platforms-grid');
    try {
        const res = await fetch('/api/iac/templates');
        const data = await res.json();
        const platforms = data.platforms || data;
        if (!platforms || !platforms.length) {
            grid.innerHTML = '<div style="text-align:center;padding:2rem;color:#999;">No platform data available.</div>';
            return;
        }
        grid.innerHTML = platforms.map(p => {
            const cspKey = p.csp || p.id || '';
            const color = CSP_COLORS[cspKey] || '#616161';
            const label = CSP_LABELS[cspKey] || p.name || cspKey;
            const initial = label.charAt(0).toUpperCase();
            const levels = (p.impact_levels || []).join(', ') || '--';
            const types = (p.template_types || []).join(', ') || '--';
            return `<div style="border:1px solid #ddd;border-radius:8px;padding:1.25rem;background:#fafafa;">
                <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;">
                    <div style="width:44px;height:44px;border-radius:8px;background:${color};color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:bold;">${initial}</div>
                    <div>
                        <div style="font-weight:700;font-size:1rem;">${label}</div>
                    </div>
                </div>
                <div style="font-size:0.85rem;color:#666;margin-bottom:0.4rem;">
                    <strong>Impact Levels:</strong> ${levels}
                </div>
                <div style="font-size:0.85rem;color:#666;">
                    <strong>Templates:</strong> ${types}
                </div>
            </div>`;
        }).join('');
    } catch (e) {
        grid.innerHTML = '<div style="text-align:center;padding:2rem;color:#c62828;">Failed to load platforms.</div>';
        console.error('Failed to load platforms:', e);
    }
}

async function loadStigCoverage() {
    const tbody = document.getElementById('stig-body');
    try {
        const res = await fetch('/api/iac/stig-coverage');
        const data = await res.json();
        const rows = data.coverage || data;
        if (!rows || !rows.length) {
            tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:1.5rem;color:#999;">No STIG coverage data.</td></tr>';
            return;
        }
        tbody.innerHTML = rows.map(r => {
            const pct = r.hardening_pct != null ? r.hardening_pct : 0;
            let barColor = '#c62828';
            if (pct >= 80) barColor = '#2e7d32';
            else if (pct >= 50) barColor = '#f9a825';
            return `<tr style="border-bottom:1px solid #eee;">
                <td style="padding:0.5rem;font-weight:600;">${r.target_type || '--'}</td>
                <td style="padding:0.5rem;text-align:center;">${r.total_findings ?? '--'}</td>
                <td style="padding:0.5rem;text-align:center;color:#2e7d32;font-weight:600;">${r.hardened ?? '--'}</td>
                <td style="padding:0.5rem;text-align:center;color:#c62828;">${r.open ?? '--'}</td>
                <td style="padding:0.5rem;text-align:center;color:#999;">${r.na ?? '--'}</td>
                <td style="padding:0.5rem;text-align:center;">
                    <div style="display:flex;align-items:center;gap:0.5rem;justify-content:center;">
                        <div style="width:80px;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;">
                            <div style="width:${pct}%;height:100%;background:${barColor};border-radius:4px;"></div>
                        </div>
                        <span style="font-size:0.85rem;font-weight:600;color:${barColor};">${pct}%</span>
                    </div>
                </td>
            </tr>`;
        }).join('');
    } catch (e) {
        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:1.5rem;color:#c62828;">Failed to load STIG coverage.</td></tr>';
        console.error('Failed to load STIG coverage:', e);
    }
}

async function generateIaC() {
    const projectId = document.getElementById('gen-project').value.trim();
    const csp = document.getElementById('gen-csp').value;
    const impactLevel = document.getElementById('gen-il').value;
    const templateType = document.getElementById('gen-type').value;
    const statusEl = document.getElementById('gen-status');
    const resultEl = document.getElementById('gen-result');
    const outputEl = document.getElementById('gen-output');

    if (!projectId) {
        statusEl.textContent = 'Project ID is required.';
        statusEl.style.color = '#c62828';
        return;
    }

    statusEl.textContent = 'Generating...';
    statusEl.style.color = '#666';
    document.getElementById('btn-generate').disabled = true;

    try {
        const res = await fetch('/api/iac/generate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                project_id: projectId,
                csp: csp,
                impact_level: impactLevel,
                template_type: templateType
            })
        });
        const data = await res.json();
        if (res.ok) {
            statusEl.textContent = 'Generation complete.';
            statusEl.style.color = '#2e7d32';
            outputEl.textContent = JSON.stringify(data, null, 2);
            resultEl.style.display = 'block';
            loadStats();
            loadArtifacts();
        } else {
            statusEl.textContent = data.error || 'Generation failed.';
            statusEl.style.color = '#c62828';
            resultEl.style.display = 'none';
        }
    } catch (e) {
        statusEl.textContent = 'Request failed: ' + e.message;
        statusEl.style.color = '#c62828';
        console.error('Generate IaC error:', e);
    } finally {
        document.getElementById('btn-generate').disabled = false;
    }
}

async function loadArtifacts() {
    const tbody = document.getElementById('artifacts-body');
    try {
        const res = await fetch(`/api/iac/artifacts?page=${artifactsPage}&per_page=${artifactsPerPage}`);
        const data = await res.json();
        const artifacts = data.artifacts || data;
        const total = data.total || artifacts.length || 0;

        if (!artifacts || !artifacts.length) {
            tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:1.5rem;color:#999;">No artifacts found.</td></tr>';
            document.getElementById('artifacts-pagination').innerHTML = '';
            return;
        }

        tbody.innerHTML = artifacts.map(a => {
            const typeKey = (a.artifact_type || a.type || '').toLowerCase();
            const tc = TYPE_COLORS[typeKey] || {bg: '#f5f5f5', color: '#616161'};
            const typeLabel = (typeKey || '--').replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
            const desc = a.description || '--';
            const truncDesc = desc.length > 60 ? desc.substring(0, 57) + '...' : desc;
            const date = a.created_at ? a.created_at.substring(0, 16) : (a.date || '--');
            const filePath = a.file_path || a.path || '--';
            const plan = a.plan_id || a.plan || '--';
            const artId = a.id || '';
            return `<tr style="border-bottom:1px solid #eee;cursor:pointer;" onclick="viewArtifact('${artId}')" title="Click to view detail">
                <td style="padding:0.5rem;">
                    <span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:0.8rem;background:${tc.bg};color:${tc.color};">${typeLabel}</span>
                </td>
                <td style="padding:0.5rem;font-size:0.85rem;">${plan}</td>
                <td style="padding:0.5rem;font-size:0.8rem;font-family:monospace;color:#666;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${filePath}</td>
                <td style="padding:0.5rem;font-size:0.85rem;color:#666;" title="${desc}">${truncDesc}</td>
                <td style="padding:0.5rem;font-size:0.85rem;color:#666;">${date}</td>
            </tr>`;
        }).join('');

        renderPagination(total);
    } catch (e) {
        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:1.5rem;color:#c62828;">Failed to load artifacts.</td></tr>';
        console.error('Failed to load artifacts:', e);
    }
}

function renderPagination(total) {
    const pagDiv = document.getElementById('artifacts-pagination');
    const totalPages = Math.ceil(total / artifactsPerPage);
    if (totalPages <= 1) {
        pagDiv.innerHTML = '';
        return;
    }
    let html = '';
    if (artifactsPage > 1) {
        html += `<button onclick="goToPage(${artifactsPage - 1})" style="padding:0.3rem 0.8rem;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;">&laquo; Prev</button>`;
    }
    for (let i = 1; i <= totalPages; i++) {
        if (i === artifactsPage) {
            html += `<button style="padding:0.3rem 0.8rem;border:1px solid #1976d2;border-radius:4px;background:#1976d2;color:#fff;cursor:default;font-weight:600;">${i}</button>`;
        } else if (i === 1 || i === totalPages || Math.abs(i - artifactsPage) <= 2) {
            html += `<button onclick="goToPage(${i})" style="padding:0.3rem 0.8rem;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;">${i}</button>`;
        } else if (Math.abs(i - artifactsPage) === 3) {
            html += `<span style="padding:0.3rem 0.4rem;color:#999;">...</span>`;
        }
    }
    if (artifactsPage < totalPages) {
        html += `<button onclick="goToPage(${artifactsPage + 1})" style="padding:0.3rem 0.8rem;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;">Next &raquo;</button>`;
    }
    pagDiv.innerHTML = html;
}

function goToPage(page) {
    artifactsPage = page;
    loadArtifacts();
}

async function viewArtifact(id) {
    if (!id) return;
    const modal = document.getElementById('artifact-modal');
    const titleEl = document.getElementById('modal-title');
    const metaEl = document.getElementById('modal-meta');
    const contentEl = document.getElementById('modal-content');

    titleEl.textContent = 'Loading...';
    metaEl.textContent = '';
    contentEl.textContent = '';
    modal.style.display = 'flex';

    try {
        const res = await fetch(`/api/iac/artifacts/${id}`);
        const data = await res.json();
        const typeLabel = (data.artifact_type || data.type || 'Artifact').replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
        titleEl.textContent = typeLabel;
        metaEl.innerHTML = [
            data.plan_id ? `<strong>Plan:</strong> ${data.plan_id}` : '',
            data.file_path ? `<strong>Path:</strong> ${data.file_path}` : '',
            data.created_at ? `<strong>Created:</strong> ${data.created_at}` : ''
        ].filter(Boolean).join(' &bull; ');
        contentEl.textContent = data.content || data.file_content || JSON.stringify(data, null, 2);
    } catch (e) {
        titleEl.textContent = 'Error';
        contentEl.textContent = 'Failed to load artifact detail: ' + e.message;
    }
}

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

document.getElementById('artifact-modal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeModal();
});

// Initialize
loadStats();
loadPlatforms();
loadStigCoverage();
loadArtifacts();
</script>
{% endblock %}