{% extends "base.html" %}

{% block title %}Health Check - Panel Admina{% endblock %}

{% block extra_css %}
<style>
    .health-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .health-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-xl);
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }

    .health-title h1 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-xs);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .health-meta {
        display: flex;
        gap: var(--spacing-lg);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    /* Overall Status Banner */
    .status-banner {
        padding: var(--spacing-lg) var(--spacing-xl);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-xl);
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .status-banner.ok {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        border: 2px solid #22c55e;
    }

    .status-banner.degraded {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 2px solid #f59e0b;
    }

    .status-banner.critical {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border: 2px solid #ef4444;
    }

    .status-icon {
        font-size: 3rem;
    }

    .status-info h2 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-xs);
    }

    .status-info p {
        color: var(--text-secondary);
        margin: 0;
    }

    .status-stats {
        margin-left: auto;
        display: flex;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
    }

    .stat-value {
        font-size: var(--font-size-2xl);
        font-weight: 700;
    }

    .stat-value.ok { color: #22c55e; }
    .stat-value.warning { color: #f59e0b; }
    .stat-value.error { color: #ef4444; }

    .stat-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    /* Category Grid */
    .categories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: var(--spacing-lg);
    }

    .category-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .category-header {
        padding: var(--spacing-md) var(--spacing-lg);
        background: var(--background);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .category-header h3 {
        font-size: var(--font-size-base);
        font-weight: 600;
        margin: 0;
    }

    .category-count {
        margin-left: auto;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    /* Endpoint Items */
    .endpoints-list {
        padding: var(--spacing-sm);
    }

    .endpoint-item {
        display: flex;
        align-items: center;
        padding: var(--spacing-md);
        border-radius: var(--radius);
        margin-bottom: var(--spacing-xs);
        transition: var(--transition);
    }

    .endpoint-item:last-child {
        margin-bottom: 0;
    }

    .endpoint-item:hover {
        background: var(--background);
    }

    .endpoint-item.ok {
        border-left: 4px solid #22c55e;
    }

    .endpoint-item.warning {
        border-left: 4px solid #f59e0b;
        background: #fffbeb;
    }

    .endpoint-item.error, .endpoint-item.not_found {
        border-left: 4px solid #ef4444;
        background: #fef2f2;
    }

    .endpoint-status {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-right: var(--spacing-md);
        flex-shrink: 0;
    }

    .endpoint-status.ok {
        background: #dcfce7;
    }

    .endpoint-status.warning {
        background: #fef3c7;
    }

    .endpoint-status.error, .endpoint-status.not_found {
        background: #fee2e2;
    }

    .endpoint-info {
        flex: 1;
        min-width: 0;
    }

    .endpoint-name {
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 2px;
    }

    .endpoint-path {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        font-family: monospace;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .endpoint-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }

    .endpoint-code {
        font-size: var(--font-size-sm);
        font-weight: 600;
        padding: 2px 8px;
        border-radius: var(--radius);
    }

    .endpoint-code.ok {
        background: #dcfce7;
        color: #166534;
    }

    .endpoint-code.warning {
        background: #fef3c7;
        color: #92400e;
    }

    .endpoint-code.error {
        background: #fee2e2;
        color: #991b1b;
    }

    .endpoint-time {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
    }

    /* Auto-refresh controls */
    .refresh-controls {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--background);
        border-radius: var(--radius);
    }

    .refresh-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--primary);
        color: white;
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: var(--font-size-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .refresh-btn:hover {
        background: var(--primary-dark);
    }

    .refresh-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .countdown {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    /* Back link */
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--text-secondary);
        text-decoration: none;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-lg);
    }

    .back-link:hover {
        color: var(--primary);
    }

    /* Response time colors */
    .time-fast { color: #22c55e; }
    .time-medium { color: #f59e0b; }
    .time-slow { color: #ef4444; }

    /* Spinning animation for refresh */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .spinning {
        animation: spin 1s linear infinite;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .categories-grid {
            grid-template-columns: 1fr;
        }

        .status-banner {
            flex-direction: column;
            text-align: center;
        }

        .status-stats {
            margin-left: 0;
            width: 100%;
            justify-content: center;
        }

        .health-header {
            flex-direction: column;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="health-container">
    <a href="{{ url_for('admin.admin_status') }}" class="back-link">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Powrót do Status systemu
    </a>

    <div class="health-header">
        <div class="health-title">
            <h1>
                <span style="font-size: 1.5em;">🏥</span>
                Health Check Dashboard
            </h1>
            <div class="health-meta">
                <span>Ostatnia aktualizacja: <strong id="last-update">{{ generated_at|local_time('%H:%M:%S') }}</strong></span>
                <span>Auto-refresh: <strong id="countdown">2:00</strong></span>
            </div>
        </div>

        <div class="refresh-controls">
            <button class="refresh-btn" onclick="refreshNow()" id="refresh-btn">
                <span id="refresh-icon">🔄</span>
                Odśwież teraz
            </button>
        </div>
    </div>

    <!-- Overall Status Banner -->
    <div class="status-banner {{ summary.overall_status }}" id="status-banner">
        <div class="status-icon">
            {% if summary.overall_status == 'ok' %}
                ✅
            {% elif summary.overall_status == 'degraded' %}
                ⚠️
            {% else %}
                🚨
            {% endif %}
        </div>
        <div class="status-info">
            <h2>
                {% if summary.overall_status == 'ok' %}
                    Wszystkie systemy działają poprawnie
                {% elif summary.overall_status == 'degraded' %}
                    System działa z ograniczeniami
                {% else %}
                    Wykryto krytyczne problemy!
                {% endif %}
            </h2>
            <p>{{ summary.health_percent }}% endpointów odpowiada poprawnie | Średni czas odpowiedzi: {{ summary.avg_response_time }}ms</p>
        </div>
        <div class="status-stats">
            <div class="stat-item">
                <span class="stat-value ok" id="stat-ok">{{ summary.ok }}</span>
                <span class="stat-label">OK</span>
            </div>
            <div class="stat-item">
                <span class="stat-value warning" id="stat-warning">{{ summary.warning }}</span>
                <span class="stat-label">Ostrzeżenia</span>
            </div>
            <div class="stat-item">
                <span class="stat-value error" id="stat-error">{{ summary.error }}</span>
                <span class="stat-label">Błędy</span>
            </div>
        </div>
    </div>

    <!-- Categories Grid -->
    <div class="categories-grid">
        {% for cat_id, category in categories.items() %}
        {% if category.endpoints %}
        <div class="category-card">
            <div class="category-header">
                <span style="font-size: 1.3em;">{{ category.icon }}</span>
                <h3>{{ category.name }}</h3>
                <span class="category-count">{{ category.endpoints|length }} endpoint{{ 'ów' if category.endpoints|length > 1 else '' }}</span>
            </div>
            <div class="endpoints-list">
                {% for ep in category.endpoints %}
                <div class="endpoint-item {{ ep.status }}">
                    <div class="endpoint-status {{ ep.status }}">
                        {% if ep.status == 'ok' %}✓{% elif ep.status == 'warning' %}!{% else %}✗{% endif %}
                    </div>
                    <div class="endpoint-info">
                        <div class="endpoint-name">{{ ep.name }}</div>
                        <div class="endpoint-path">{{ ep.path }}</div>
                    </div>
                    <div class="endpoint-meta">
                        <span class="endpoint-code {{ 'ok' if ep.status == 'ok' else ('warning' if ep.status == 'warning' else 'error') }}">
                            {{ ep.status_code }}
                        </span>
                        {% if ep.response_time %}
                        <span class="endpoint-time {% if ep.response_time < 100 %}time-fast{% elif ep.response_time < 500 %}time-medium{% else %}time-slow{% endif %}">
                            {{ ep.response_time }}ms
                        </span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endfor %}
    </div>

    <!-- Legend -->
    <div style="margin-top: var(--spacing-xl); padding: var(--spacing-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);">
        <h4 style="margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary);">Legenda kodów HTTP:</h4>
        <div style="display: flex; gap: var(--spacing-xl); flex-wrap: wrap; font-size: var(--font-size-sm);">
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <span class="endpoint-code ok">200</span>
                <span>OK - strona działa</span>
            </div>
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <span class="endpoint-code ok">302</span>
                <span>Redirect - przekierowanie (np. do logowania)</span>
            </div>
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <span class="endpoint-code ok">429</span>
                <span>Rate Limited - ochrona przed botami (działa!)</span>
            </div>
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <span class="endpoint-code warning">403</span>
                <span>Forbidden - brak uprawnień</span>
            </div>
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <span class="endpoint-code error">404</span>
                <span>Not Found - strona nie istnieje</span>
            </div>
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <span class="endpoint-code error">500</span>
                <span>Server Error - błąd serwera</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
// Auto-refresh every 2 minutes
let countdownSeconds = 120;
let isRefreshing = false;

function updateCountdown() {
    if (isRefreshing) return;

    const minutes = Math.floor(countdownSeconds / 60);
    const seconds = countdownSeconds % 60;
    document.getElementById('countdown').textContent =
        `${minutes}:${seconds.toString().padStart(2, '0')}`;

    countdownSeconds--;

    if (countdownSeconds < 0) {
        refreshNow();
        countdownSeconds = 120;
    }
}

async function refreshNow() {
    if (isRefreshing) return;
    isRefreshing = true;

    const btn = document.getElementById('refresh-btn');
    const icon = document.getElementById('refresh-icon');
    btn.disabled = true;
    icon.classList.add('spinning');

    try {
        // Just reload the page for simplicity - the full check takes some time anyway
        window.location.reload();
    } catch (error) {
        console.error('Refresh failed:', error);
        isRefreshing = false;
        btn.disabled = false;
        icon.classList.remove('spinning');
    }
}

// Start countdown
setInterval(updateCountdown, 1000);
{% endblock %}