<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Status</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
            min-height: 100vh;
            color: #e0e0e0;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #00d4ff, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        h2 {
            font-size: 1.3rem;
            font-weight: 600;
            margin: 30px 0 16px 0;
            color: #94a3b8;
        }

        .overall-status {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .overall-status.operational {
            background: rgba(34, 197, 94, 0.15);
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #22c55e;
            box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
        }

        .overall-status.degraded {
            background: rgba(250, 204, 21, 0.15);
            border: 1px solid rgba(250, 204, 21, 0.3);
            color: #facc15;
            box-shadow: 0 0 20px rgba(250, 204, 21, 0.2);
        }

        .overall-status.down {
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
        }

        .overall-status.unknown {
            background: rgba(148, 163, 184, 0.15);
            border: 1px solid rgba(148, 163, 184, 0.3);
            color: #94a3b8;
        }

        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .status-dot.operational { background: #22c55e; }
        .status-dot.degraded { background: #facc15; }
        .status-dot.down { background: #ef4444; }
        .status-dot.unknown { background: #94a3b8; }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }

        .last-update {
            color: #64748b;
            font-size: 0.9rem;
        }

        .fast-mode-badge {
            display: inline-block;
            margin-left: 8px;
            padding: 2px 8px;
            background: rgba(250, 204, 21, 0.15);
            border: 1px solid rgba(250, 204, 21, 0.3);
            border-radius: 12px;
            color: #facc15;
            font-size: 0.8rem;
            font-weight: 500;
            animation: pulse 2s infinite;
        }

        .grace-period-badge {
            display: inline-block;
            margin-left: 8px;
            padding: 2px 8px;
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 12px;
            color: #3b82f6;
            font-size: 0.8rem;
            font-weight: 500;
            animation: pulse 2s infinite;
        }

        .services-grid {
            display: grid;
            gap: 16px;
        }

        .service-card {
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(100, 116, 139, 0.2);
            border-radius: 16px;
            padding: 24px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .service-card:hover {
            border-color: rgba(0, 212, 255, 0.3);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.1);
        }

        .service-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .service-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: #f1f5f9;
        }

        .service-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .service-status.operational {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .service-status.degraded {
            background: rgba(250, 204, 21, 0.15);
            color: #facc15;
        }

        .service-status.down {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .service-status.unknown {
            background: rgba(148, 163, 184, 0.15);
            color: #94a3b8;
        }

        .service-status .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .service-status.operational .dot { background: #22c55e; }
        .service-status.degraded .dot { background: #facc15; }
        .service-status.down .dot { background: #ef4444; }
        .service-status.unknown .dot { background: #94a3b8; }

        .service-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        .metric {
            background: rgba(15, 23, 42, 0.5);
            padding: 12px;
            border-radius: 10px;
        }

        .metric-label {
            font-size: 0.75rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .metric-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: #e2e8f0;
        }

        .metric-value.good { color: #22c55e; }
        .metric-value.warning { color: #facc15; }
        .metric-value.bad { color: #ef4444; }

        .service-message {
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(239, 68, 68, 0.1);
            border-left: 3px solid #ef4444;
            border-radius: 0 8px 8px 0;
            font-size: 0.9rem;
            color: #fca5a5;
        }

        /* Latency chart */
        .latency-chart {
            height: 60px;
            margin-top: 12px;
        }

        /* SSL Card */
        .ssl-card {
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(100, 116, 139, 0.2);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .ssl-card.warning {
            border-color: rgba(250, 204, 21, 0.3);
        }

        .ssl-card.danger {
            border-color: rgba(239, 68, 68, 0.3);
        }

        .ssl-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .ssl-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #f1f5f9;
        }

        .ssl-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .ssl-badge.valid {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .ssl-badge.expiring {
            background: rgba(250, 204, 21, 0.15);
            color: #facc15;
        }

        .ssl-badge.expired {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .ssl-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
        }

        /* Incidents */
        .incidents-list {
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(100, 116, 139, 0.2);
            border-radius: 16px;
            overflow: hidden;
        }

        .incident-item {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(100, 116, 139, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .incident-item:last-child {
            border-bottom: none;
        }

        .incident-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .incident-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .incident-dot.resolved {
            background: #22c55e;
        }

        .incident-dot.open {
            background: #ef4444;
            animation: pulse 2s infinite;
        }

        .incident-service {
            font-weight: 500;
            color: #f1f5f9;
        }

        .incident-message {
            font-size: 0.85rem;
            color: #94a3b8;
        }

        .incident-time {
            font-size: 0.85rem;
            color: #64748b;
        }

        .no-incidents {
            padding: 30px;
            text-align: center;
            color: #64748b;
        }

        .period-selector {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 24px;
        }

        .period-btn {
            padding: 8px 16px;
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(100, 116, 139, 0.3);
            border-radius: 8px;
            color: #94a3b8;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .period-btn:hover {
            border-color: rgba(0, 212, 255, 0.3);
            color: #e2e8f0;
        }

        .period-btn.active {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.2));
            border-color: rgba(0, 212, 255, 0.5);
            color: #00d4ff;
        }

        .refresh-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.2));
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 10px;
            color: #00d4ff;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 30px;
        }

        .refresh-btn:hover {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(168, 85, 247, 0.3));
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
            transform: translateY(-2px);
        }

        .refresh-btn:active {
            transform: translateY(0);
        }

        .refresh-btn.loading svg {
            animation: spin 1s linear infinite;
        }

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

        footer {
            text-align: center;
            margin-top: 50px;
            padding-top: 30px;
            border-top: 1px solid rgba(100, 116, 139, 0.2);
            color: #64748b;
            font-size: 0.85rem;
        }

        footer a {
            color: #00d4ff;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>System Status</h1>
            <div class="overall-status {{ overall_status.value }}">
                <span class="status-dot {{ overall_status.value }}"></span>
                {% if overall_status.value == 'operational' %}
                    All Systems Operational
                {% elif overall_status.value == 'degraded' %}
                    Partial System Outage
                {% elif overall_status.value == 'down' %}
                    Major System Outage
                {% else %}
                    Status Unknown
                {% endif %}
            </div>
            <p class="last-update">
                {% if last_check %}
                    Last updated: {{ last_check.strftime('%d.%m.%Y %H:%M:%S') }}
                {% else %}
                    Checking services...
                {% endif %}
                &bull; Auto-refresh every {{ check_interval }}s
                {% if grace_period_active %}
                <span class="grace-period-badge">🚀 Startup ({{ grace_period_remaining }}s)</span>
                {% elif fast_mode %}
                <span class="fast-mode-badge">⚡ Fast Mode</span>
                {% endif %}
            </p>
        </header>

        <!-- Period Selector -->
        <div class="period-selector">
            <a href="?period=1" class="period-btn {% if period == 1 %}active{% endif %}">1 час</a>
            <a href="?period=12" class="period-btn {% if period == 12 %}active{% endif %}">12 часов</a>
            <a href="?period=24" class="period-btn {% if period == 24 %}active{% endif %}">24 часа</a>
        </div>

        {% if ssl_status %}
        <div class="ssl-card {% if ssl_status.days_until_expiry <= 0 %}danger{% elif ssl_status.days_until_expiry <= 14 %}warning{% endif %}">
            <div class="ssl-header">
                <span class="ssl-title">SSL Certificate</span>
                <span class="ssl-badge {% if ssl_status.days_until_expiry <= 0 %}expired{% elif ssl_status.days_until_expiry <= 14 %}expiring{% else %}valid{% endif %}">
                    {% if ssl_status.days_until_expiry <= 0 %}
                        Expired
                    {% elif ssl_status.days_until_expiry <= 14 %}
                        Expiring Soon
                    {% else %}
                        Valid
                    {% endif %}
                </span>
            </div>
            <div class="ssl-info">
                <div class="metric">
                    <div class="metric-label">Domain</div>
                    <div class="metric-value">{{ ssl_status.domain }}</div>
                </div>
                <div class="metric">
                    <div class="metric-label">Issuer</div>
                    <div class="metric-value">{{ ssl_status.issuer }}</div>
                </div>
                <div class="metric">
                    <div class="metric-label">Days Left</div>
                    <div class="metric-value {% if ssl_status.days_until_expiry <= 0 %}bad{% elif ssl_status.days_until_expiry <= 14 %}warning{% else %}good{% endif %}">
                        {{ ssl_status.days_until_expiry }}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="services-grid">
            {% for name, service in services.items() %}
            {% if service.status.value != 'unknown' or name != 'external' %}
            <div class="service-card">
                <div class="service-header">
                    <span class="service-name">{{ service.display_name }}</span>
                    <span class="service-status {{ service.status.value }}">
                        <span class="dot"></span>
                        {% if service.status.value == 'operational' %}
                            Operational
                        {% elif service.status.value == 'degraded' %}
                            Degraded
                        {% elif service.status.value == 'down' %}
                            Down
                        {% else %}
                            Unknown
                        {% endif %}
                    </span>
                </div>
                <div class="service-metrics">
                    <div class="metric">
                        <div class="metric-label">Latency</div>
                        <div class="metric-value {% if service.latency_ms and service.latency_ms < 200 %}good{% elif service.latency_ms and service.latency_ms < 500 %}warning{% elif service.latency_ms %}bad{% endif %}">
                            {% if service.latency_ms %}
                                {{ "%.0f"|format(service.latency_ms) }} ms
                            {% else %}
                                —
                            {% endif %}
                        </div>
                    </div>
                    <div class="metric">
                        <div class="metric-label">Avg {{ period }}h</div>
                        <div class="metric-value {% if service.avg_latency_24h and service.avg_latency_24h < 200 %}good{% elif service.avg_latency_24h and service.avg_latency_24h < 500 %}warning{% elif service.avg_latency_24h %}bad{% endif %}">
                            {% if service.avg_latency_24h %}
                                {{ "%.0f"|format(service.avg_latency_24h) }} ms
                            {% else %}
                                —
                            {% endif %}
                        </div>
                    </div>
                    <div class="metric">
                        <div class="metric-label">Uptime {{ period }}h</div>
                        <div class="metric-value {% if service.uptime_percent >= 99 %}good{% elif service.uptime_percent >= 95 %}warning{% else %}bad{% endif %}">
                            {{ "%.1f"|format(service.uptime_percent) }}%
                        </div>
                    </div>
                    {% if service.version %}
                    <div class="metric">
                        <div class="metric-label">Version</div>
                        <div class="metric-value">{{ service.version }}</div>
                    </div>
                    {% endif %}
                </div>
                {% if service.latency_history and service.latency_history|length > 1 %}
                <div class="latency-chart">
                    <canvas id="chart-{{ name }}"></canvas>
                </div>
                {% endif %}
                {% if service.message %}
                <div class="service-message">{{ service.message }}</div>
                {% endif %}
            </div>
            {% endif %}
            {% endfor %}
        </div>

        <h2>Recent Incidents</h2>
        <div class="incidents-list">
            {% if incidents and incidents|length > 0 %}
                {% for incident in incidents %}
                <div class="incident-item">
                    <div class="incident-info">
                        <span class="incident-dot {% if incident.resolved_at %}resolved{% else %}open{% endif %}"></span>
                        <div>
                            <div class="incident-service">{{ incident.service_name | title }}</div>
                            <div class="incident-message">{{ incident.message or 'Service unavailable' }}</div>
                        </div>
                    </div>
                    <div class="incident-time">
                        {{ incident.started_at[:16].replace('T', ' ') }}
                        {% if incident.resolved_at %}
                            - Resolved
                        {% else %}
                            - Ongoing
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="no-incidents">
                    No recent incidents
                </div>
            {% endif %}
        </div>

        <center>
            <button class="refresh-btn" onclick="refreshStatus(this)">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M23 4v6h-6M1 20v-6h6"/>
                    <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
                </svg>
                Refresh
            </button>
        </center>

        <footer>
            <p>Game Marathon Status Monitor</p>
        </footer>
    </div>

    <script>
        // Initialize latency charts
        {% for name, service in services.items() %}
        {% if service.latency_history and service.latency_history|length > 1 %}
        (function() {
            const ctx = document.getElementById('chart-{{ name }}').getContext('2d');
            const data = {{ service.latency_history | tojson }};

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.map(d => ''),
                    datasets: [{
                        data: data.map(d => d.latency_ms),
                        borderColor: '#00d4ff',
                        backgroundColor: 'rgba(0, 212, 255, 0.1)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 0,
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => ctx.raw.toFixed(0) + ' ms'
                            }
                        }
                    },
                    scales: {
                        x: { display: false },
                        y: {
                            display: false,
                            beginAtZero: true
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        })();
        {% endif %}
        {% endfor %}

        // Save scroll position before unload
        window.addEventListener('beforeunload', () => {
            sessionStorage.setItem('scrollPos', window.scrollY.toString());
        });

        // Restore scroll position on load
        window.addEventListener('load', () => {
            const scrollPos = sessionStorage.getItem('scrollPos');
            if (scrollPos) {
                window.scrollTo(0, parseInt(scrollPos));
            }
        });

        async function refreshStatus(btn) {
            btn.classList.add('loading');
            btn.disabled = true;

            try {
                await fetch('/api/refresh', { method: 'POST' });
                // Preserve period parameter on reload
                const url = new URL(window.location);
                url.searchParams.set('period', '{{ period }}');
                window.location.href = url.toString();
            } catch (e) {
                console.error('Refresh failed:', e);
                btn.classList.remove('loading');
                btn.disabled = false;
            }
        }

        // Auto-refresh page (preserve period parameter)
        setTimeout(() => {
            const url = new URL(window.location);
            url.searchParams.set('period', '{{ period }}');
            window.location.href = url.toString();
        }, {{ check_interval }} * 1000);
    </script>
</body>
</html>
