{% extends "base.html" %}

{% block title %}Health - Dango{% endblock %}

{% block subtitle_attrs %}class="text-xs sm:text-sm text-gray-500"{% endblock %}

{% block content %}
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        <!-- Status Banner -->
        <div id="status-banner" class="mb-6 p-4 rounded-lg border-2 hidden">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span id="status-icon" class="text-2xl"></span>
                </div>
                <div class="ml-3">
                    <h3 id="status-title" class="text-lg font-semibold"></h3>
                    <div id="status-issues" class="mt-1 text-sm"></div>
                </div>
            </div>
        </div>

        <!-- Key Metrics Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
            <!-- Database Health -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">🗄️ Database</h3>
                    <span id="db-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Loading...</span>
                </div>
                <div id="db-size" class="text-2xl font-bold text-gray-900">-</div>
                <div id="db-tables" class="text-sm text-gray-500 mt-1">-</div>
            </div>

            <!-- CPU Usage - Cloud only, hidden by default -->
            <div id="cpu-card" class="bg-white rounded-lg shadow p-6 hidden">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">🖥️ CPU</h3>
                    <span id="cpu-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">-</span>
                </div>
                <div id="cpu-usage" class="text-2xl font-bold text-gray-900">-</div>
                <div class="text-sm text-gray-500 mt-1">Usage</div>
            </div>

            <!-- Memory Usage - Cloud only, hidden by default -->
            <div id="ram-card" class="bg-white rounded-lg shadow p-6 hidden">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">🧠 Memory</h3>
                    <span id="ram-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">-</span>
                </div>
                <div id="ram-usage" class="text-2xl font-bold text-gray-900">-</div>
                <div id="ram-detail" class="text-sm text-gray-500 mt-1">-</div>
            </div>

            <!-- Disk Space -->
            <div id="disk-card" class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">💾 Disk Space</h3>
                    <span id="disk-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Loading...</span>
                </div>
                <div id="disk-free" class="text-2xl font-bold text-gray-900">-</div>
                <div id="disk-used" class="text-sm text-gray-500 mt-1">-</div>
            </div>

            <!-- Sync Status -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">🔄 Syncs (24h)</h3>
                    <span id="sync-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Loading...</span>
                </div>
                <div id="sync-status" class="text-2xl font-bold text-gray-900">-</div>
                <div id="sync-enabled" class="text-sm text-gray-500 mt-1">-</div>
            </div>

            <!-- dbt Status -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">⚙️ Transformations</h3>
                    <span id="dbt-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Loading...</span>
                </div>
                <div id="dbt-status" class="text-2xl font-bold text-gray-900">-</div>
                <div id="dbt-info" class="text-sm text-gray-500 mt-1">-</div>
            </div>

            <!-- Deployment - Cloud only, hidden by default -->
            <div id="deploy-card" class="bg-white rounded-lg shadow p-6 hidden">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">🚀 Deployment</h3>
                    <span id="deploy-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">-</span>
                </div>
                <div id="deploy-commit" class="text-2xl font-bold text-gray-900 font-mono">-</div>
                <div id="deploy-detail" class="text-sm text-gray-500 mt-1">-</div>
            </div>

            <!-- Backup Health - Cloud only, hidden by default -->
            <div id="backup-card" class="bg-white rounded-lg shadow p-6 hidden">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-600">📦 Backup</h3>
                    <span id="backup-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">-</span>
                </div>
                <div id="backup-status" class="text-2xl font-bold text-gray-900">-</div>
                <div id="backup-detail" class="text-sm text-gray-500 mt-1">-</div>
            </div>
        </div>

        <!-- Recent Issues -->
        <div class="bg-white rounded-lg shadow mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-900">Recent Issues (Last 24h)</h2>
            </div>
            <div class="p-6">
                <div id="issues-list" class="space-y-4">
                    <div class="text-center text-gray-500 py-4">Loading...</div>
                </div>
            </div>
        </div>

        <!-- Detailed Stats -->
        <div class="grid grid-cols-1 gap-6">
            <!-- Database Details -->
            <div class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Database Details</h2>
                </div>
                <div class="p-6">
                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Raw Tables</dt>
                            <dd id="db-raw-tables" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Staging Tables</dt>
                            <dd id="db-staging-tables" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Marts Tables</dt>
                            <dd id="db-marts-tables" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Total Size (MB)</dt>
                            <dd id="db-size-mb" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                        <div id="capacity-row" class="hidden">
                            <div class="flex justify-between mb-1">
                                <dt class="text-sm text-gray-600">Capacity Used</dt>
                                <dd id="capacity-pct" class="text-sm font-medium text-gray-900">-</dd>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div id="capacity-bar" class="h-2 rounded-full" style="width: 0%"></div>
                            </div>
                            <p id="capacity-max" class="text-xs text-gray-500 mt-1"></p>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- Disk Details -->
            <div id="disk-details" class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Disk Usage</h2>
                </div>
                <div class="p-6">
                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Total Capacity</dt>
                            <dd id="disk-total" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Used Space</dt>
                            <dd id="disk-used-gb" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Free Space</dt>
                            <dd id="disk-free-gb" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-600">Usage Percentage</dt>
                            <dd id="disk-used-pct" class="text-sm font-medium text-gray-900">-</dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- OAuth Token Health -->
            <div id="oauth-health" class="bg-white rounded-lg shadow hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">OAuth Tokens</h2>
                </div>
                <div class="p-6">
                    <div id="oauth-health-list" class="space-y-3"></div>
                    <div class="mt-4">
                        <a href="/settings/secrets" class="text-sm text-blue-600 hover:text-blue-800">Manage credentials &rarr;</a>
                    </div>
                </div>
            </div>

            <!-- Disk Breakdown by Component -->
            <div id="disk-breakdown" class="bg-white rounded-lg shadow hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Disk Breakdown by Component</h2>
                </div>
                <div class="p-6">
                    <dl id="disk-breakdown-list" class="space-y-3">
                    </dl>
                </div>
            </div>
        </div>
    </main>
{% endblock %}

{% block footer %}
    <!-- Health Page Footer: Last updated + Refresh -->
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex items-center justify-between">
                <p class="text-sm text-gray-500">Last updated: <span id="last-updated">-</span></p>
                <button onclick="refreshHealth()" class="text-sm text-blue-600 hover:text-blue-800">
                    🔄 Refresh
                </button>
            </div>
        </div>
    </footer>
{% endblock %}

{% block scripts %}
    <!-- JavaScript -->
    <script>
        let refreshInterval;

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

        function fmtMB(mb) {
            if (mb === null || mb === undefined) return 'N/A';
            if (mb < 1) return (mb * 1024).toFixed(0) + ' KB';
            if (mb >= 1024) return (mb / 1024).toFixed(2) + ' GB';
            return mb.toFixed(1) + ' MB';
        }

        async function fetchHealth() {
            try {
                const response = await fetch('/api/health/platform');
                const health = await response.json();

                updateHealthUI(health);

                // Update last updated time
                document.getElementById('last-updated').textContent = new Date().toLocaleString();
            } catch (error) {
                console.error('Error fetching platform health:', error);
                showError('Failed to load platform health');
            }
        }

        function updateHealthUI(health) {
            // Status Banner
            const banner = document.getElementById('status-banner');
            const statusIcon = document.getElementById('status-icon');
            const statusTitle = document.getElementById('status-title');
            const statusIssues = document.getElementById('status-issues');

            banner.classList.remove('hidden', 'bg-green-50', 'border-green-200', 'bg-yellow-50', 'border-yellow-200', 'bg-red-50', 'border-red-200');

            if (health.status === 'healthy') {
                banner.classList.add('bg-green-50', 'border-green-200');
                statusIcon.textContent = '✅';
                statusTitle.textContent = 'Platform Healthy';
                statusTitle.className = 'text-lg font-semibold text-green-800';
                statusIssues.textContent = 'All systems operating normally';
                statusIssues.className = 'mt-1 text-sm text-green-700';
            } else if (health.status === 'warning') {
                banner.classList.add('bg-yellow-50', 'border-yellow-200');
                statusIcon.textContent = '⚠️';
                statusTitle.textContent = 'Platform Has Warnings';
                statusTitle.className = 'text-lg font-semibold text-yellow-800';
                statusIssues.innerHTML = health.warnings.map(w => `&bull; ${escapeHtml(w)}`).join('<br>');
                statusIssues.className = 'mt-1 text-sm text-yellow-700';
            } else if (health.status === 'critical') {
                banner.classList.add('bg-red-50', 'border-red-200');
                statusIcon.textContent = '❌';
                statusTitle.textContent = 'Critical Issues Detected';
                statusTitle.className = 'text-lg font-semibold text-red-800';
                const allIssues = [...health.critical_issues, ...health.warnings];
                statusIssues.innerHTML = allIssues.map(i => `&bull; ${escapeHtml(i)}`).join('<br>');
                statusIssues.className = 'mt-1 text-sm text-red-700';
            }

            // Database Metrics
            const db = health.database;
            document.getElementById('db-size').textContent = `${db.size_gb} GB`;
            document.getElementById('db-tables').textContent = `${db.tables} tables total`;
            document.getElementById('db-raw-tables').textContent = db.raw_tables;
            document.getElementById('db-staging-tables').textContent = db.staging_tables;
            document.getElementById('db-marts-tables').textContent = db.marts_tables;
            document.getElementById('db-size-mb').textContent = `${db.size_mb} MB`;

            // DuckDB Capacity Gauge
            const cap = health.duckdb_capacity;
            if (cap && cap.recommended_max_db_size_bytes > 0) {
                document.getElementById('capacity-row').classList.remove('hidden');
                document.getElementById('capacity-pct').textContent = `${cap.duckdb_capacity_pct}%`;
                const bar = document.getElementById('capacity-bar');
                bar.style.width = `${Math.min(cap.duckdb_capacity_pct, 100)}%`;
                if (cap.duckdb_capacity_pct > 75) {
                    bar.className = 'h-2 rounded-full bg-red-500';
                } else if (cap.duckdb_capacity_pct > 50) {
                    bar.className = 'h-2 rounded-full bg-yellow-500';
                } else {
                    bar.className = 'h-2 rounded-full bg-green-500';
                }
                const maxGb = (cap.recommended_max_db_size_bytes / (1024 * 1024 * 1024)).toFixed(1);
                document.getElementById('capacity-max').textContent = `Recommended max: ${maxGb} GB`;
            }

            const dbBadge = document.getElementById('db-status-badge');
            dbBadge.className = 'px-2 py-1 text-xs rounded-full ';
            if (db.status === 'healthy' || db.status === 'new') {
                dbBadge.className += 'bg-green-100 text-green-800';
                dbBadge.textContent = 'Healthy';
            } else if (db.status === 'large') {
                dbBadge.className += 'bg-yellow-100 text-yellow-800';
                dbBadge.textContent = 'Large';
            } else if (db.status === 'critical') {
                dbBadge.className += 'bg-red-100 text-red-800';
                dbBadge.textContent = 'Critical';
            }

            // Disk Metrics (always populated from platform health)
            const disk = health.disk;
            document.getElementById('disk-free').textContent = `${disk.free_gb} GB`;
            document.getElementById('disk-used').textContent = `${disk.used_pct}% used`;
            document.getElementById('disk-total').textContent = `${disk.total_gb} GB`;
            document.getElementById('disk-used-gb').textContent = `${disk.used_gb} GB`;
            document.getElementById('disk-free-gb').textContent = `${disk.free_gb} GB`;
            document.getElementById('disk-used-pct').textContent = `${disk.used_pct}%`;

            const diskBadge = document.getElementById('disk-status-badge');
            diskBadge.className = 'px-2 py-1 text-xs rounded-full ';
            if (disk.status === 'healthy') {
                diskBadge.className += 'bg-green-100 text-green-800';
                diskBadge.textContent = 'Healthy';
            } else if (disk.status === 'warning') {
                diskBadge.className += 'bg-yellow-100 text-yellow-800';
                diskBadge.textContent = 'Low Space';
            } else if (disk.status === 'critical') {
                diskBadge.className += 'bg-red-100 text-red-800';
                diskBadge.textContent = 'Critical';
            }

            // Disk Breakdown by Component
            if (health.disk_breakdown && Object.keys(health.disk_breakdown).length > 0) {
                const bd = health.disk_breakdown;
                const breakdownEl = document.getElementById('disk-breakdown');
                const listEl = document.getElementById('disk-breakdown-list');
                breakdownEl.classList.remove('hidden');

                let rows = '';

                // DuckDB
                if (bd.duckdb) {
                    rows += `<div class="flex justify-between">
                        <dt class="text-sm text-gray-600">DuckDB Database</dt>
                        <dd class="text-sm font-medium text-gray-900">${fmtMB(bd.duckdb.file_size_mb)}</dd>
                    </div>`;
                    if (bd.duckdb.schema_sizes && Object.keys(bd.duckdb.schema_sizes).length > 0) {
                        rows += `<div class="flex justify-between pl-4">
                            <dt class="text-xs text-gray-400 italic">Estimated data size (uncompressed)</dt>
                            <dd></dd>
                        </div>`;
                        for (const [schema, bytes] of Object.entries(bd.duckdb.schema_sizes)) {
                            rows += `<div class="flex justify-between pl-4">
                                <dt class="text-xs text-gray-500">${escapeHtml(schema)}</dt>
                                <dd class="text-xs text-gray-700">~${fmtMB(bytes / (1024 * 1024))}</dd>
                            </div>`;
                        }
                    }
                }

                // Metabase
                if (bd.metabase) {
                    rows += `<div class="flex justify-between">
                        <dt class="text-sm text-gray-600">Metabase Database</dt>
                        <dd class="text-sm font-medium text-gray-900">${fmtMB(bd.metabase.size_mb)}</dd>
                    </div>`;
                }

                // CSV Uploads
                if (bd.csv_uploads) {
                    rows += `<div class="flex justify-between">
                        <dt class="text-sm text-gray-600">CSV Uploads</dt>
                        <dd class="text-sm font-medium text-gray-900">${fmtMB(bd.csv_uploads.total_mb)}</dd>
                    </div>`;
                    if (bd.csv_uploads.by_source && Object.keys(bd.csv_uploads.by_source).length > 0) {
                        for (const [source, mb] of Object.entries(bd.csv_uploads.by_source)) {
                            rows += `<div class="flex justify-between pl-4">
                                <dt class="text-xs text-gray-500">${escapeHtml(source)}</dt>
                                <dd class="text-xs text-gray-700">${fmtMB(mb)}</dd>
                            </div>`;
                        }
                    }
                }

                // dbt Artifacts
                if (bd.dbt_artifacts) {
                    rows += `<div class="flex justify-between">
                        <dt class="text-sm text-gray-600">dbt Artifacts</dt>
                        <dd class="text-sm font-medium text-gray-900">${fmtMB(bd.dbt_artifacts.size_mb)}</dd>
                    </div>`;
                }

                // dlt Pipelines
                if (bd.dlt_pipelines) {
                    rows += `<div class="flex justify-between">
                        <dt class="text-sm text-gray-600">dlt Pipeline State</dt>
                        <dd class="text-sm font-medium text-gray-900">${fmtMB(bd.dlt_pipelines.size_mb)}</dd>
                    </div>`;
                }

                // Backups
                if (bd.backups) {
                    rows += `<div class="flex justify-between">
                        <dt class="text-sm text-gray-600">Local Backups</dt>
                        <dd class="text-sm font-medium text-gray-900">${fmtMB(bd.backups.size_mb)}</dd>
                    </div>`;
                }

                // Total
                if (bd.total_mb !== undefined) {
                    rows += `<div class="flex justify-between border-t border-gray-200 pt-3 mt-3">
                        <dt class="text-sm font-semibold text-gray-700">Total Tracked</dt>
                        <dd class="text-sm font-bold text-gray-900">${fmtMB(bd.total_mb)}</dd>
                    </div>`;
                }

                listEl.innerHTML = rows;
            }

            // OAuth Token Health
            if (health.oauth_health && health.oauth_health.length > 0) {
                document.getElementById('oauth-health').classList.remove('hidden');
                const oauthList = document.getElementById('oauth-health-list');
                oauthList.innerHTML = health.oauth_health.map(t => {
                    let statusClass, statusText;
                    if (t.is_expired) {
                        statusClass = 'bg-red-100 text-red-800';
                        statusText = 'Expired';
                    } else if (t.days_until_expiry !== null && t.days_until_expiry <= 7) {
                        statusClass = 'bg-yellow-100 text-yellow-800';
                        statusText = `Expires in ${t.days_until_expiry}d`;
                    } else {
                        statusClass = 'bg-green-100 text-green-800';
                        statusText = t.days_until_expiry !== null ? `${t.days_until_expiry}d remaining` : 'No expiry';
                    }
                    return `<div class="flex justify-between items-center">
                        <dt class="text-sm text-gray-600">${escapeHtml(t.source_type)} <span class="text-xs text-gray-400">(${escapeHtml(t.provider)})</span></dt>
                        <dd><span class="px-2 py-1 text-xs rounded-full ${statusClass}">${escapeHtml(statusText)}</span></dd>
                    </div>`;
                }).join('');
            }

            // Cloud resources (CPU, RAM, Backup)
            if (health.resources) {
                const res = health.resources;

                // CPU card
                if (res.cpu_usage_pct !== null) {
                    const cpuCard = document.getElementById('cpu-card');
                    cpuCard.classList.remove('hidden');
                    document.getElementById('cpu-usage').textContent = `${res.cpu_usage_pct}%`;
                    const cpuBadge = document.getElementById('cpu-status-badge');
                    cpuBadge.className = 'px-2 py-1 text-xs rounded-full ';
                    if (res.cpu_usage_pct < 70) {
                        cpuBadge.className += 'bg-green-100 text-green-800';
                        cpuBadge.textContent = 'Normal';
                    } else if (res.cpu_usage_pct < 90) {
                        cpuBadge.className += 'bg-yellow-100 text-yellow-800';
                        cpuBadge.textContent = 'High';
                    } else {
                        cpuBadge.className += 'bg-red-100 text-red-800';
                        cpuBadge.textContent = 'Critical';
                    }
                }

                // RAM card
                if (res.ram_total_mb !== null && res.ram_used_mb !== null) {
                    const ramCard = document.getElementById('ram-card');
                    ramCard.classList.remove('hidden');
                    const ramPct = Math.round(100 * res.ram_used_mb / res.ram_total_mb);
                    document.getElementById('ram-usage').textContent = `${ramPct}%`;
                    document.getElementById('ram-detail').textContent =
                        `${res.ram_used_mb} MB / ${res.ram_total_mb} MB`;
                    const ramBadge = document.getElementById('ram-status-badge');
                    ramBadge.className = 'px-2 py-1 text-xs rounded-full ';
                    if (ramPct < 70) {
                        ramBadge.className += 'bg-green-100 text-green-800';
                        ramBadge.textContent = 'Normal';
                    } else if (ramPct < 90) {
                        ramBadge.className += 'bg-yellow-100 text-yellow-800';
                        ramBadge.textContent = 'High';
                    } else {
                        ramBadge.className += 'bg-red-100 text-red-800';
                        ramBadge.textContent = 'Critical';
                    }
                }
            }

            // Backup health card
            if (health.backup_health) {
                const bh = health.backup_health;
                const backupCard = document.getElementById('backup-card');
                backupCard.classList.remove('hidden');

                const backupBadge = document.getElementById('backup-status-badge');
                backupBadge.className = 'px-2 py-1 text-xs rounded-full ';

                if (bh.status === 'healthy') {
                    backupBadge.className += 'bg-green-100 text-green-800';
                    backupBadge.textContent = 'Healthy';
                    document.getElementById('backup-status').textContent = 'OK';
                } else if (bh.status === 'stale') {
                    backupBadge.className += 'bg-yellow-100 text-yellow-800';
                    backupBadge.textContent = 'Stale';
                    document.getElementById('backup-status').textContent = 'Stale';
                } else {
                    backupBadge.className += 'bg-red-100 text-red-800';
                    backupBadge.textContent = 'None';
                    document.getElementById('backup-status').textContent = 'No Backups';
                }

                if (bh.last_backup) {
                    const dt = new Date(bh.last_backup);
                    document.getElementById('backup-detail').textContent =
                        `Last: ${dt.toLocaleString()}`;
                } else {
                    document.getElementById('backup-detail').textContent = 'Not configured';
                }
            }

            // Deployment info
            if (health.deployment) {
                const dep = health.deployment;
                document.getElementById('deploy-card').classList.remove('hidden');
                document.getElementById('deploy-commit').textContent =
                    dep.git_commit ? dep.git_commit.substring(0, 8) : 'N/A';
                const details = [];
                if (dep.git_branch) details.push(dep.git_branch);
                if (dep.deployed_by) details.push('by ' + escapeHtml(dep.deployed_by));
                if (dep.deployed_at) details.push(new Date(dep.deployed_at).toLocaleString());
                document.getElementById('deploy-detail').textContent = details.join(' · ');

                const badge = document.getElementById('deploy-status-badge');
                badge.className = 'px-2 py-1 text-xs rounded-full ';
                if (dep.success === true) {
                    badge.className += 'bg-green-100 text-green-800';
                    badge.textContent = 'Success';
                } else if (dep.success === false) {
                    badge.className += 'bg-red-100 text-red-800';
                    badge.textContent = 'Failed';
                } else {
                    badge.className += 'bg-gray-100 text-gray-800';
                    badge.textContent = 'Unknown';
                }
            }

            // Sync Status
            const failedSyncs = health.sync_failures.length;
            const totalSources = health.total_sources;
            const enabledSources = health.enabled_sources;

            document.getElementById('sync-status').textContent = failedSyncs === 0 ? 'All Pass' : `${failedSyncs} Failed`;
            document.getElementById('sync-enabled').textContent = `${enabledSources} sources enabled`;

            const syncBadge = document.getElementById('sync-status-badge');
            syncBadge.className = 'px-2 py-1 text-xs rounded-full ';
            if (failedSyncs === 0) {
                syncBadge.className += 'bg-green-100 text-green-800';
                syncBadge.textContent = 'All Pass';
            } else {
                syncBadge.className += 'bg-red-100 text-red-800';
                syncBadge.textContent = `${failedSyncs} Failed`;
            }

            // dbt Status
            const dbtFailed = health.dbt_failures.length;
            document.getElementById('dbt-status').textContent = dbtFailed === 0 ? 'All Pass' : `${dbtFailed} Failed`;
            document.getElementById('dbt-info').textContent = dbtFailed === 0 ? 'Transformations OK' : 'Check logs';

            const dbtBadge = document.getElementById('dbt-status-badge');
            dbtBadge.className = 'px-2 py-1 text-xs rounded-full ';
            if (dbtFailed === 0) {
                dbtBadge.className += 'bg-green-100 text-green-800';
                dbtBadge.textContent = 'All Pass';
            } else {
                dbtBadge.className += 'bg-red-100 text-red-800';
                dbtBadge.textContent = 'Failures';
            }

            // Recent Issues
            const issuesList = document.getElementById('issues-list');
            const allIssues = [
                ...health.sync_failures.map(s => ({
                    type: 'Sync Failure',
                    icon: '🔄',
                    title: s.source,
                    message: s.last_error,
                    count: s.count
                })),
                ...health.dbt_failures.map(d => ({
                    type: 'dbt Failure',
                    icon: '⚙️',
                    title: 'Transformation Failed',
                    message: `${d.failed_models} model(s) failed`,
                    models: d.models
                }))
            ];

            if (allIssues.length === 0) {
                issuesList.innerHTML = '<div class="text-center text-green-600 py-4">✅ No issues in the last 24 hours</div>';
            } else {
                issuesList.innerHTML = allIssues.map(issue => `
                    <div class="border border-red-200 rounded-lg p-4 bg-red-50">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <span class="text-2xl">${escapeHtml(issue.icon)}</span>
                            </div>
                            <div class="ml-3 flex-1">
                                <h4 class="text-sm font-semibold text-red-800">${escapeHtml(issue.type)}: ${escapeHtml(issue.title)}</h4>
                                <p class="mt-1 text-sm text-red-700">${escapeHtml(issue.message)}</p>
                                ${issue.count ? `<p class="mt-1 text-xs text-red-600">Failed ${escapeHtml(String(issue.count))} time(s)</p>` : ''}
                                ${issue.models ? `<p class="mt-1 text-xs text-red-600 font-mono">${issue.models.map(m => escapeHtml(m)).join(', ')}</p>` : ''}
                            </div>
                        </div>
                    </div>
                `).join('');
            }
        }

        function showError(message) {
            const banner = document.getElementById('status-banner');
            banner.classList.remove('hidden');
            banner.classList.add('bg-red-50', 'border-red-200');
            document.getElementById('status-icon').textContent = '❌';
            document.getElementById('status-title').textContent = 'Error';
            document.getElementById('status-title').className = 'text-lg font-semibold text-red-800';
            document.getElementById('status-issues').textContent = message;
            document.getElementById('status-issues').className = 'mt-1 text-sm text-red-700';
        }

        function refreshHealth() {
            fetchHealth();
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            fetchHealth();

            // Auto-refresh every 30 seconds
            refreshInterval = setInterval(fetchHealth, 30000);
        });

        // Cleanup on page unload
        window.addEventListener('beforeunload', () => {
            if (refreshInterval) {
                clearInterval(refreshInterval);
            }
        });
    </script>
{% endblock %}