{% extends "ewoooc_base.html" %}

{% block title %}部署監控 - EwoooC{% endblock %}

{% block extra_head %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
{% endblock %}

{% block extra_css %}
    <style>
        .cicd-page {
            --success-color: var(--momo-success);
            --danger-color: var(--momo-danger);
            --warning-color: var(--momo-warning);
            --info-color: var(--momo-info);
            --uat-color: var(--momo-info);
            --prod-color: var(--momo-danger);
            color: var(--momo-text-primary);
            font-family: var(--momo-font-family);
        }

        .cicd-page * {
            letter-spacing: 0;
        }

        .dashboard-header {
            background: var(--momo-dot-grid), var(--momo-bg-surface);
            border: 1px solid var(--momo-border-strong);
            border-radius: var(--momo-radius-md);
            padding: 1.25rem;
            margin-bottom: 2rem;
            box-shadow: var(--momo-shadow-soft);
        }

        .dashboard-header h1 {
            margin: 0;
            color: var(--momo-text-primary);
            font-family: var(--momo-font-display);
            font-size: var(--momo-text-headline);
            font-weight: 800;
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
            animation: pulse 2s infinite;
        }

        .status-indicator.healthy { background-color: var(--success-color); }
        .status-indicator.unhealthy { background-color: var(--danger-color); }
        .status-indicator.warning { background-color: var(--warning-color); }
        .status-indicator.running { background-color: var(--info-color); }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .card {
            background: var(--momo-bg-surface);
            border: 1px solid var(--momo-border-light);
            border-radius: var(--momo-radius-md);
            backdrop-filter: none;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: var(--momo-shadow-soft);
        }

        .card-header {
            background: transparent;
            border-bottom: 1px solid var(--momo-border-light);
            color: var(--momo-text-primary);
            font-family: var(--momo-font-display);
            font-weight: 800;
        }

        /* Pipeline Flow */
        .pipeline-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            padding: 2rem;
            flex-wrap: wrap;
        }

        .pipeline-stage {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 120px;
        }

        .stage-box {
            width: 100px;
            height: 100px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            transition: all 0.3s;
            cursor: pointer;
        }

        .stage-box:hover {
            transform: scale(1.05);
        }

        .stage-box.success { background: var(--momo-success-bg); color: var(--momo-success-text); border: 1px solid var(--momo-success-border); }
        .stage-box.failed { background: var(--momo-danger-bg); color: var(--momo-danger-text); border: 1px solid var(--momo-danger-border); }
        .stage-box.running { background: var(--momo-info-bg); color: var(--momo-info-text); border: 1px solid var(--momo-info-border); animation: glow 1.5s infinite; }
        .stage-box.pending { background: var(--momo-bg-subtle); color: var(--momo-text-secondary); border: 1px solid var(--momo-border-light); }

        @keyframes glow {
            0%, 100% { box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); }
            50% { box-shadow: 0 0 20px rgba(0, 123, 255, 0.8); }
        }

        .stage-icon {
            font-size: 1.8rem;
            margin-bottom: 0.25rem;
        }

        .stage-name {
            font-size: 0.85rem;
            text-transform: uppercase;
        }

        .stage-duration {
            font-size: 0.75rem;
            opacity: 0.8;
            margin-top: 0.5rem;
        }

        .pipeline-arrow {
            width: 40px;
            height: 2px;
            background: var(--momo-border-strong);
            position: relative;
        }

        .pipeline-arrow::after {
            content: '';
            position: absolute;
            right: -5px;
            top: -4px;
            border: 5px solid transparent;
            border-left-color: var(--momo-border-strong);
        }

        /* Environment Cards */
        .env-card {
            border-left: 4px solid;
            transition: all 0.3s;
        }

        .env-card.uat { border-left-color: var(--uat-color); }
        .env-card.prod { border-left-color: var(--prod-color); }

        .env-icon {
            font-size: 2rem;
            margin-right: 1rem;
        }

        .env-details {
            font-size: 0.9rem;
        }

        .pod-status {
            display: flex;
            align-items: center;
            padding: 0.5rem;
            background: var(--momo-bg-paper);
            border: 1px solid var(--momo-border-light);
            border-radius: var(--momo-radius-sm);
            margin-bottom: 0.5rem;
        }

        .pod-status .pod-name {
            flex: 1;
            font-family: monospace;
            font-size: 0.85rem;
        }

        .pod-status .pod-ready {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            margin-left: 0.5rem;
        }

        .pod-status .pod-ready.healthy { background: rgba(40, 167, 69, 0.3); }
        .pod-status .pod-ready.unhealthy { background: rgba(220, 53, 69, 0.3); }

        /* Pipeline History */
        .pipeline-item {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            background: var(--momo-bg-paper);
            border: 1px solid var(--momo-border-light);
            border-radius: var(--momo-radius-sm);
            margin-bottom: 0.5rem;
            transition: background 0.3s;
        }

        .pipeline-item:hover {
            background: var(--momo-page-accent-soft);
        }

        .pipeline-id {
            font-family: monospace;
            font-weight: 600;
            width: 80px;
        }

        .pipeline-status {
            width: 30px;
            text-align: center;
        }

        .pipeline-info {
            flex: 1;
            margin-left: 1rem;
        }

        .pipeline-commit {
            font-size: 0.85rem;
            color: var(--momo-text-secondary);
        }

        .pipeline-time {
            font-size: 0.8rem;
            color: var(--momo-text-tertiary);
        }

        /* Summary Stats */
        .stat-box {
            text-align: center;
            padding: 1.5rem;
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 0.5rem;
        }

        /* Action Buttons */
        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }

        .action-btn i {
            margin-right: 0.5rem;
        }

        .action-btn.primary {
            background: var(--momo-page-accent);
            border: 1px solid var(--momo-page-accent-dark);
            color: var(--momo-page-inverse);
        }

        .action-btn.danger {
            background: var(--momo-danger);
            border: 1px solid var(--momo-danger);
            color: var(--momo-text-inverse);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: none;
        }

        /* Loading State */
        .loading-spinner {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--momo-border-light);
            border-top-color: var(--momo-page-accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Real-time indicator */
        .realtime-badge {
            display: inline-flex;
            align-items: center;
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            background: rgba(40, 167, 69, 0.2);
            border: 1px solid rgba(40, 167, 69, 0.5);
            border-radius: 20px;
            color: #28a745;
        }

        .realtime-dot {
            width: 6px;
            height: 6px;
            background: #28a745;
            border-radius: 50%;
            margin-right: 6px;
            animation: pulse 1s infinite;
        }

        /* Response time badge */
        .response-time {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
        }

        .response-time.fast { color: #28a745; }
        .response-time.medium { color: #ffc107; }
        .response-time.slow { color: #dc3545; }

        /* Issues Panel */
        .issues-panel {
            max-height: 400px;
            overflow-y: auto;
        }

        .issue-item {
            display: flex;
            align-items: flex-start;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            margin-bottom: 0.75rem;
            border-left: 4px solid;
        }

        .issue-item.critical { border-left-color: #dc3545; background: rgba(220, 53, 69, 0.1); }
        .issue-item.warning { border-left-color: #ffc107; background: rgba(255, 193, 7, 0.1); }

        .issue-icon {
            font-size: 1.5rem;
            margin-right: 1rem;
        }

        .issue-content {
            flex: 1;
        }

        .issue-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .issue-detail {
            font-size: 0.85rem;
            color: var(--momo-text-secondary);
        }

        .issue-suggestion {
            font-size: 0.8rem;
            color: var(--momo-info-text);
            margin-top: 0.5rem;
        }

        .issue-actions {
            margin-left: 1rem;
        }

        .error-log-preview {
            font-family: monospace;
            font-size: 0.75rem;
            background: var(--momo-bg-paper);
            border: 1px solid var(--momo-border-light);
            padding: 0.5rem;
            border-radius: 4px;
            margin-top: 0.5rem;
            max-height: 100px;
            overflow-y: auto;
            white-space: pre-wrap;
            color: var(--momo-danger-text);
        }

        /* Stage Error Tooltip */
        .stage-error {
            font-size: 0.7rem;
            color: var(--momo-danger-text);
            margin-top: 0.5rem;
            max-width: 120px;
            word-wrap: break-word;
        }

        /* Fix Button */
        .btn-fix {
            background: var(--momo-info);
            border: 1px solid var(--momo-info);
            color: var(--momo-text-inverse);
            padding: 0.375rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-fix:hover {
            transform: translateY(-2px);
            background: var(--momo-info-text);
            border-color: var(--momo-info-text);
        }

        .btn-fix:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Environment Error */
        .env-error {
            background: rgba(220, 53, 69, 0.2);
            border: 1px solid rgba(220, 53, 69, 0.5);
            border-radius: 8px;
            padding: 0.75rem;
            margin-top: 0.5rem;
        }

        .env-error-title {
            color: #dc3545;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .env-error-detail {
            font-family: monospace;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 0.25rem;
        }
    </style>
{% endblock %}

{% block content %}
<div class="cicd-page">
    <!-- Header -->
    <div class="dashboard-header">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1><i class="bi bi-rocket-takeoff me-2"></i>部署監控</h1>
                    <p class="mb-0 opacity-75">PChome 業績成長自動化作戰系統 · 持續整合與部署監控</p>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <div class="realtime-badge">
                        <span class="realtime-dot"></span>
                        即時更新
                    </div>
                    <span id="lastUpdate" class="text-white-50 small"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Summary Stats -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card">
                    <div class="stat-box">
                        <div class="stat-value text-success" id="statSuccess">-</div>
                        <div class="stat-label">成功率 (%)</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="stat-box">
                        <div class="stat-value text-info" id="statToday">-</div>
                        <div class="stat-label">今日部署</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="stat-box">
                        <div id="uatStatus" class="stat-value">-</div>
                        <div class="stat-label">UAT 狀態</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="stat-box">
                        <div id="prodStatus" class="stat-value">-</div>
                        <div class="stat-label">PROD 狀態</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pipeline Flow -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-diagram-3 me-2"></i>最新部署流程</span>
                <span id="pipelineId" class="badge bg-secondary">#--</span>
            </div>
            <div class="card-body">
                <div class="pipeline-flow" id="pipelineFlow">
                    <div class="loading-spinner">
                        <div class="spinner"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Environments -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <i class="bi bi-hdd-stack me-2"></i>環境狀態
                    </div>
                    <div class="card-body" id="environmentsContainer">
                        <div class="loading-spinner">
                            <div class="spinner"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <i class="bi bi-lightning me-2"></i>快速操作
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-6">
                                <button class="action-btn primary w-100" onclick="triggerDeploy('uat')">
                                    <i class="bi bi-cloud-upload"></i>部署 UAT
                                </button>
                            </div>
                            <div class="col-6">
                                <button class="action-btn primary w-100" onclick="triggerDeploy('prod')">
                                    <i class="bi bi-cloud-upload"></i>部署 PROD
                                </button>
                            </div>
                            <div class="col-6">
                                <button class="action-btn danger w-100" onclick="triggerRollback('uat')">
                                    <i class="bi bi-arrow-counterclockwise"></i>回滾 UAT
                                </button>
                            </div>
                            <div class="col-6">
                                <button class="action-btn danger w-100" onclick="triggerRollback('prod')">
                                    <i class="bi bi-arrow-counterclockwise"></i>回滾 PROD
                                </button>
                            </div>
                        </div>

                        <hr class="my-4 border-secondary">

                        <div class="row g-3">
                            <div class="col-12">
                                <a href="http://192.168.0.110:8929/root/momo-pro-system/-/pipelines" target="_blank" class="btn btn-outline-light w-100">
                                    <i class="bi bi-box-arrow-up-right me-2"></i>開啟 GitLab 部署紀錄
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="http://192.168.0.110:30030" target="_blank" class="btn btn-outline-info w-100">
                                    <i class="bi bi-graph-up me-2"></i>Grafana
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="http://192.168.0.110:5678" target="_blank" class="btn btn-outline-warning w-100">
                                    <i class="bi bi-diagram-2 me-2"></i>n8n
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Issues Panel -->
        <div class="card mb-4" id="issuesPanelCard" style="display: none;">
            <div class="card-header d-flex justify-content-between align-items-center bg-danger bg-opacity-25">
                <span><i class="bi bi-exclamation-triangle me-2"></i>問題與告警 <span id="issuesCount" class="badge bg-danger ms-2">0</span></span>
                <div>
                    <button class="btn btn-sm btn-outline-warning me-2" onclick="runDiagnosis()">
                        <i class="bi bi-search me-1"></i>診斷
                    </button>
                    <button class="btn btn-sm btn-outline-info" onclick="triggerFullRepair()">
                        <i class="bi bi-wrench me-1"></i>一鍵修復
                    </button>
                </div>
            </div>
            <div class="card-body issues-panel" id="issuesContainer">
            </div>
        </div>

        <!-- Pipeline History -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-clock-history me-2"></i>部署歷史</span>
                <a href="http://192.168.0.110:8929/root/momo-pro-system/-/pipelines" target="_blank" class="btn btn-sm btn-outline-light">
                    查看全部
                </a>
            </div>
            <div class="card-body" id="pipelineHistory">
                <div class="loading-spinner">
                    <div class="spinner"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Notifications -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="notificationToast" class="toast" role="alert">
            <div class="toast-header">
                <strong class="me-auto" id="toastTitle">通知</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="toastMessage"></div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
    <script>
        // 配置
        const REFRESH_INTERVAL = 10000; // 10 秒刷新
        let refreshTimer = null;

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadDashboard();
            startAutoRefresh();
        });

        // 自動刷新
        function startAutoRefresh() {
            refreshTimer = setInterval(loadDashboard, REFRESH_INTERVAL);
        }

        // 載入 Dashboard 數據
        async function loadDashboard() {
            try {
                const response = await fetch('/api/cicd/status');
                const data = await response.json();

                if (data.success) {
                    updateSummary(data.summary);
                    updatePipelineFlow(data.latest_pipeline, data.latest_jobs);
                    updateEnvironments(data.environments);
                    updatePipelineHistory(data.pipelines);
                    updateIssuesPanel(data.issues);
                    updateLastUpdate();
                }
            } catch (error) {
                console.error('Failed to load dashboard:', error);
            }
        }

        // 更新問題面板
        function updateIssuesPanel(issues) {
            const panel = document.getElementById('issuesPanelCard');
            const container = document.getElementById('issuesContainer');
            const countBadge = document.getElementById('issuesCount');

            if (!issues || issues.length === 0) {
                panel.style.display = 'none';
                return;
            }

            panel.style.display = 'block';
            countBadge.textContent = issues.length;

            let html = '';
            issues.forEach(issue => {
                const severityClass = issue.severity === 'critical' ? 'critical' : 'warning';
                const icon = issue.severity === 'critical' ? '🚨' : '⚠️';

                html += `
                    <div class="issue-item ${severityClass}">
                        <span class="issue-icon">${icon}</span>
                        <div class="issue-content">
                            <div class="issue-title">${escapeHtml(issue.message)}</div>
                            <div class="issue-detail">
                                ${issue.type === 'job' ? `<span class="badge bg-secondary me-1">${displayStageName(issue.stage)}</span>` : ''}
                                ${issue.type === 'runtime' ? `<span class="badge bg-info me-1">${issue.environment?.toUpperCase()}</span>` : ''}
                                ${issue.error ? `<br><code>${escapeHtml(issue.error.substring(0, 100))}</code>` : ''}
                            </div>
                            ${issue.fix_suggestion ? `<div class="issue-suggestion">💡 ${escapeHtml(issue.fix_suggestion)}</div>` : ''}
                            ${issue.error_log ? `<div class="error-log-preview">${escapeHtml(issue.error_log.substring(0, 300))}</div>` : ''}
                        </div>
                        <div class="issue-actions">
                            ${issue.auto_fixable ? `
                                <button class="btn-fix" onclick="triggerAutoFix('${issue.fix_action}', '${issue.environment || 'uat'}')">
                                    <i class="bi bi-wrench me-1"></i>修復
                                </button>
                            ` : ''}
                        </div>
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        // 更新摘要統計
        function updateSummary(summary) {
            document.getElementById('statSuccess').textContent = summary.success_rate || 0;
            document.getElementById('statToday').textContent = summary.total_pipelines_today || 0;

            const uatStatus = document.getElementById('uatStatus');
            const prodStatus = document.getElementById('prodStatus');

            if (summary.uat_healthy) {
                uatStatus.innerHTML = '<span class="text-success">✅ 健康</span>';
            } else {
                uatStatus.innerHTML = '<span class="text-danger">❌ 異常</span>';
            }

            if (summary.prod_healthy) {
                prodStatus.innerHTML = '<span class="text-success">✅ 健康</span>';
            } else {
                prodStatus.innerHTML = '<span class="text-danger">❌ 異常</span>';
            }
        }

        // 更新部署流程圖
        function updatePipelineFlow(latestPipeline, latestJobs) {
            const container = document.getElementById('pipelineFlow');
            const pipelineIdEl = document.getElementById('pipelineId');

            if (!latestPipeline) {
                container.innerHTML = '<p class="text-center text-muted">暫無部署流程資料</p>';
                return;
            }

            pipelineIdEl.textContent = `#${latestPipeline.id}`;

            // 如果已有 jobs 數據，直接使用
            if (latestJobs && latestJobs.length > 0) {
                const stages = groupJobsByStage(latestJobs);
                renderPipelineFlowWithJobs(container, stages);
            } else {
                // 否則取得部署流程的工作項目
                fetch(`/api/cicd/pipeline/${latestPipeline.id}`)
                    .then(res => res.json())
                    .then(data => {
                        if (data.success && data.stages) {
                            renderPipelineFlow(container, data.stages);
                        }
                    })
                    .catch(err => {
                        console.error('部署流程細節讀取失敗:', err);
                        renderSimplePipelineFlow(container, latestPipeline);
                    });
            }
        }

        // 將工作項目按階段分組
        function groupJobsByStage(jobs) {
            const stageOrder = ['test', 'build', 'deploy'];
            const stages = {};

            jobs.forEach(job => {
                const stageName = job.stage || 'unknown';
                if (!stages[stageName]) {
                    stages[stageName] = {
                        name: stageName,
                        status: 'pending',
                        jobs: [],
                        duration: 0,
                        error_info: null
                    };
                }
                stages[stageName].jobs.push(job);

                // 更新 stage 狀態
                if (job.status === 'failed') {
                    stages[stageName].status = 'failed';
                    stages[stageName].error_info = job.error_info;
                    stages[stageName].failure_reason = job.failure_reason;
                } else if (job.status === 'running' && stages[stageName].status !== 'failed') {
                    stages[stageName].status = 'running';
                } else if (job.status === 'success' && stages[stageName].status === 'pending') {
                    stages[stageName].status = 'success';
                }

                if (job.duration) {
                    stages[stageName].duration += job.duration;
                }
            });

            // 按順序返回
            return stageOrder.map(name => stages[name]).filter(s => s);
        }

        // 渲染部署流程圖（帶工作詳情）
        function renderPipelineFlowWithJobs(container, stages) {
            let html = '';

            stages.forEach((stage, index) => {
                if (index > 0) {
                    html += '<div class="pipeline-arrow"></div>';
                }

                const errorMsg = stage.error_info?.message || stage.failure_reason || '';
                const fixSuggestion = stage.error_info?.fix_suggestion || '';

                html += `
                    <div class="pipeline-stage">
                        <div class="stage-box ${stage.status}" title="${escapeHtml(errorMsg)}">
                            <span class="stage-icon">${getStatusIcon(stage.status)}</span>
                            <span class="stage-name">${displayStageName(stage.name)}</span>
                        </div>
                        <span class="stage-duration">${formatDuration(stage.duration)}</span>
                        ${stage.status === 'failed' ? `
                            <div class="stage-error" title="${escapeHtml(fixSuggestion)}">
                                ${escapeHtml(errorMsg.substring(0, 30))}${errorMsg.length > 30 ? '...' : ''}
                            </div>
                        ` : ''}
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        // 渲染部署流程圖
        function renderPipelineFlow(container, stages) {
            let html = '';

            stages.forEach((stage, index) => {
                if (index > 0) {
                    html += '<div class="pipeline-arrow"></div>';
                }

                html += `
                    <div class="pipeline-stage">
                        <div class="stage-box ${stage.status}">
                            <span class="stage-icon">${stage.status_icon}</span>
                            <span class="stage-name">${displayStageName(stage.name)}</span>
                        </div>
                        <span class="stage-duration">${formatDuration(stage.duration)}</span>
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        // 簡易部署流程圖
        function renderSimplePipelineFlow(container, pipeline) {
            const stages = ['test', 'build', 'deploy'];
            let html = '';

            stages.forEach((stage, index) => {
                if (index > 0) {
                    html += '<div class="pipeline-arrow"></div>';
                }

                const status = index === 2 && pipeline.status === 'success' ? 'success' :
                               index < 2 && pipeline.status !== 'failed' ? 'success' :
                               pipeline.status === 'running' && index === 2 ? 'running' :
                               pipeline.status === 'failed' ? 'failed' : 'pending';

                html += `
                    <div class="pipeline-stage">
                        <div class="stage-box ${status}">
                            <span class="stage-icon">${getStatusIcon(status)}</span>
                            <span class="stage-name">${displayStageName(stage)}</span>
                        </div>
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        // 更新環境狀態
        function updateEnvironments(environments) {
            const container = document.getElementById('environmentsContainer');
            let html = '';

            for (const [envId, env] of Object.entries(environments)) {
                const healthClass = env.healthy ? 'healthy' : 'unhealthy';
                const responseClass = env.response_time < 500 ? 'fast' :
                                     env.response_time < 1000 ? 'medium' : 'slow';

                html += `
                    <div class="env-card card mb-3 ${envId}">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <span class="env-icon">${env.icon}</span>
                                <div>
                                    <h5 class="mb-0">${env.name} - ${env.label}</h5>
                                    <a href="${env.url}" target="_blank" class="text-muted small">${env.url}</a>
                                </div>
                                <div class="ms-auto d-flex align-items-center">
                                    <span class="status-indicator ${healthClass}"></span>
                                    <span class="${env.healthy ? 'text-success' : 'text-danger'}">${env.healthy ? '健康' : '異常'}</span>
                                    ${env.response_time ? `<span class="response-time ${responseClass} ms-2">${env.response_time}ms</span>` : ''}
                                </div>
                            </div>

                            ${env.version ? `<div class="mb-2"><small class="text-muted">版本:</small> <code>${env.version}</code></div>` : ''}

                            ${!env.healthy && env.error ? `
                                <div class="env-error">
                                    <div class="env-error-title">❌ 連線錯誤</div>
                                    <div class="env-error-detail">${escapeHtml(env.error)}</div>
                                    <button class="btn-fix mt-2" onclick="triggerAutoFix('diagnose', '${envId}')">
                                        <i class="bi bi-search me-1"></i>診斷服務
                                    </button>
                                </div>
                            ` : ''}

                            <div class="env-details mt-2">
                                <strong class="d-block mb-2">執行環境狀態:</strong>
                                ${renderPods(env.pods, envId)}
                            </div>
                        </div>
                    </div>
                `;
            }

            container.innerHTML = html;
        }

        // 渲染 runtime 狀態
        function renderPods(pods, envId) {
            if (!pods || pods.length === 0) {
                return '<p class="text-muted small mb-0">Docker Compose 執行環境；舊叢集資訊不適用</p>';
            }

            return pods.map(pod => `
                <div class="pod-status">
                    <span class="status-indicator ${pod.healthy ? 'healthy' : 'unhealthy'}"></span>
                    <span class="pod-name">${pod.name}</span>
                    <span class="pod-ready ${pod.healthy ? 'healthy' : 'unhealthy'}">${pod.ready}</span>
                    <span class="text-muted small ms-2">${pod.age}</span>
                    ${pod.restarts > 0 ? `<span class="badge bg-warning ms-2">${pod.restarts} 重啟</span>` : ''}
                    ${!pod.healthy ? `<span class="badge bg-danger ms-2">${pod.status}</span>` : ''}
                </div>
            `).join('');
        }

        // 更新部署歷史
        function updatePipelineHistory(pipelines) {
            const container = document.getElementById('pipelineHistory');

            if (!pipelines || pipelines.length === 0) {
                container.innerHTML = '<p class="text-center text-muted">暫無部署流程紀錄</p>';
                return;
            }

            let html = '';
            pipelines.slice(0, 10).forEach(p => {
                html += `
                    <div class="pipeline-item">
                        <span class="pipeline-status">${p.status_icon}</span>
                        <span class="pipeline-id">#${p.id}</span>
                        <div class="pipeline-info">
                            <div class="pipeline-commit">${p.ref} @ ${p.sha}</div>
                            <div class="pipeline-time">${formatTime(p.created_at)} ${p.duration ? `• ${p.duration}` : ''}</div>
                        </div>
                        <a href="${p.web_url}" target="_blank" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-box-arrow-up-right"></i>
                        </a>
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        // 更新最後更新時間
        function updateLastUpdate() {
            const el = document.getElementById('lastUpdate');
            const now = new Date();
            el.textContent = `最後更新: ${now.toLocaleTimeString('zh-TW')}`;
        }

        // 觸發部署
        async function triggerDeploy(env) {
            if (!confirm(`確定要觸發 ${env.toUpperCase()} 部署嗎？`)) return;

            try {
                const response = await fetch('/api/cicd/deploy', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ environment: env })
                });

                const data = await response.json();
                showNotification(data.success ? '成功' : '失敗', data.message || data.error);

                if (data.success) {
                    setTimeout(loadDashboard, 2000);
                }
            } catch (error) {
                showNotification('錯誤', '無法觸發部署');
            }
        }

        // 觸發回滾
        async function triggerRollback(env) {
            if (!confirm(`確定要回滾 ${env.toUpperCase()} 嗎？這將恢復到上一個版本。`)) return;

            try {
                const response = await fetch('/api/cicd/rollback', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ environment: env })
                });

                const data = await response.json();
                showNotification(data.success ? '成功' : '失敗', data.message || data.error);

                if (data.success) {
                    setTimeout(loadDashboard, 2000);
                }
            } catch (error) {
                showNotification('錯誤', '無法執行回滾');
            }
        }

        // 顯示通知
        function showNotification(title, message, isError = false) {
            document.getElementById('toastTitle').textContent = title;
            document.getElementById('toastMessage').textContent = message;
            const toastEl = document.getElementById('notificationToast');
            if (isError) {
                toastEl.classList.add('bg-danger');
            } else {
                toastEl.classList.remove('bg-danger');
            }
            const toast = new bootstrap.Toast(toastEl);
            toast.show();
        }

        // 自動修復
        async function triggerAutoFix(action, env) {
            if (!confirm(`確定要執行自動修復 (${action}) 嗎？`)) return;

            showNotification('執行中', `正在執行 ${action}...`);

            try {
                const response = await fetch('/api/cicd/auto-fix', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action, environment: env })
                });

                const data = await response.json();

                if (data.success) {
                    showNotification('✅ 修復完成', data.message);
                    setTimeout(loadDashboard, 3000);
                } else {
                    showNotification('❌ 修復失敗', data.error, true);
                }
            } catch (error) {
                showNotification('❌ 錯誤', '無法執行自動修復: ' + error, true);
            }
        }

        // 完整修復
        async function triggerFullRepair() {
            const env = prompt('請輸入要修復的環境 (uat 或 prod):', 'uat');
            if (!env || !['uat', 'prod'].includes(env)) {
                showNotification('取消', '無效的環境');
                return;
            }

            if (!confirm(`確定要對 ${env.toUpperCase()} 執行完整修復嗎？\n這會重啟 Registry 並執行執行環境診斷，不會重啟舊叢集。`)) return;

            showNotification('執行中', '正在執行完整修復...');

            try {
                const response = await fetch('/api/cicd/auto-fix', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'full_repair', environment: env })
                });

                const data = await response.json();

                if (data.success) {
                    showNotification('✅ 完整修復完成', `已執行 ${data.results?.length || 0} 個修復動作`);
                    setTimeout(loadDashboard, 5000);
                } else {
                    showNotification('❌ 修復失敗', data.error, true);
                }
            } catch (error) {
                showNotification('❌ 錯誤', '無法執行完整修復: ' + error, true);
            }
        }

        // 診斷
        async function runDiagnosis() {
            const env = prompt('請輸入要診斷的環境 (uat 或 prod):', 'uat');
            if (!env || !['uat', 'prod'].includes(env)) {
                showNotification('取消', '無效的環境');
                return;
            }

            showNotification('執行中', `正在診斷 ${env.toUpperCase()} 環境...`);

            try {
                const response = await fetch('/api/cicd/diagnose', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ environment: env })
                });

                const data = await response.json();

                if (data.success) {
                    const diagnosis = data.diagnosis;
                    let message = `診斷結果: ${displayStatusText(diagnosis.summary?.overall_status)}\n`;
                    message += `失敗: ${diagnosis.summary?.failed_count || 0}, 警告: ${diagnosis.summary?.warning_count || 0}\n\n`;

                    diagnosis.checks?.forEach(check => {
                        const icon = check.status === 'ok' ? '✅' : (check.status === 'warning' ? '⚠️' : '❌');
                        message += `${icon} ${check.name}: ${displayStatusText(check.status)}\n`;
                    });

                    if (diagnosis.summary?.recommendations?.length > 0) {
                        message += '\n建議動作:\n';
                        diagnosis.summary.recommendations.forEach(rec => {
                            message += `  • ${rec.description}\n`;
                        });
                    }

                    alert(message);
                } else {
                    showNotification('❌ 診斷失敗', data.error, true);
                }
            } catch (error) {
                showNotification('❌ 錯誤', '無法執行診斷: ' + error, true);
            }
        }

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

        // 輔助函數
        function displayStageName(stage) {
            const labels = {
                test: '測試',
                build: '建置',
                deploy: '部署',
                unknown: '未分類',
            };
            return labels[stage] || stage || '未分類';
        }

        function displayStatusText(status) {
            const labels = {
                ok: '正常',
                warning: '注意',
                failed: '失敗',
                success: '成功',
                running: '執行中',
                pending: '等待中',
                canceled: '已取消',
                completed: '已完成',
            };
            return labels[status] || status || '未知';
        }

        function getStatusIcon(status) {
            const icons = {
                'success': '✅', 'passed': '✅',
                'failed': '❌', 'running': '🔄',
                'pending': '⏳', 'canceled': '⛔'
            };
            return icons[status] || '❓';
        }

        function formatDuration(seconds) {
            if (!seconds) return '-';
            if (seconds < 60) return `${Math.round(seconds)}秒`;
            if (seconds < 3600) return `${Math.floor(seconds / 60)}分${Math.round(seconds % 60)}秒`;
            return `${Math.floor(seconds / 3600)}時${Math.floor((seconds % 3600) / 60)}分`;
        }

        function formatTime(isoString) {
            if (!isoString) return '-';
            const date = new Date(isoString);
            return date.toLocaleString('zh-TW', {
                month: '2-digit', day: '2-digit',
                hour: '2-digit', minute: '2-digit'
            });
        }
    </script>
{% endblock %}