<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LegGov Central</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:
                radial-gradient(circle at 10% 0%, #e8f0ff 0, transparent 28%),
                #f5f7fb;
            color: #172033;
        }

        .shell {
            max-width: 1500px;
            margin: auto;
            padding: 32px;
        }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 28px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .logo {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 15px;
            background: linear-gradient(135deg, #174ea6, #276de2);
            color: white;
            font-size: 21px;
            font-weight: 800;
            box-shadow: 0 10px 25px rgba(23,78,166,.22);
        }

        h1 {
            margin: 0;
            font-size: 24px;
        }

        .subtitle {
            margin-top: 3px;
            color: #758096;
            font-size: 13px;
        }

        .server-ok {
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            padding: 10px 14px;
            border-radius: 999px;
            font-size: 13px;
            box-shadow: 0 5px 20px rgba(31,45,70,.07);
        }

        .dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #1cad68;
            box-shadow: 0 0 0 5px rgba(28,173,104,.12);
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-bottom: 26px;
        }

        .stat {
            background: rgba(255,255,255,.92);
            border: 1px solid #e8ecf4;
            border-radius: 18px;
            padding: 20px;
            box-shadow: 0 8px 30px rgba(29,42,70,.06);
            transition: .22s ease;
        }

        .stat:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 35px rgba(29,42,70,.11);
        }

        .stat-label {
            font-size: 12px;
            color: #7a8497;
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 700;
        }

        .stat-value {
            margin-top: 8px;
            font-size: 30px;
            line-height: 1;
            font-weight: 800;
        }


        .server-panel {
            background: linear-gradient(135deg, #17243d, #21375d);
            border-radius: 22px;
            padding: 22px;
            margin-bottom: 26px;
            color: white;
            box-shadow: 0 15px 40px rgba(22,36,61,.16);
        }

        .server-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 18px;
        }

        .server-panel-title {
            font-size: 16px;
            font-weight: 800;
        }

        .server-panel-subtitle {
            color: #aebbd0;
            font-size: 12px;
            margin-top: 3px;
        }

        .server-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .server-metric {
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 15px;
            padding: 15px;
        }

        .server-metric-label {
            color: #aebbd0;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .server-metric-value {
            font-size: 20px;
            font-weight: 800;
            margin-top: 6px;
        }

        .server-metric-detail {
            color: #b9c4d6;
            font-size: 11px;
            margin-top: 4px;
        }

        .services {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .service-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(31,190,117,.14);
            color: #8ff0bd;
            border: 1px solid rgba(71,214,144,.16);
            padding: 7px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
        }

        .service-pill.offline {
            background: rgba(226,76,76,.14);
            color: #ffabab;
            border-color: rgba(226,76,76,.2);
        }

        .service-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
        }

        .backup-panel {
            background: white;
            border: 1px solid #e6eaf2;
            border-radius: 22px;
            padding: 20px 22px;
            margin-bottom: 26px;
            box-shadow: 0 8px 30px rgba(29,42,70,.055);
        }

        .backup-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 16px;
        }

        .backup-title {
            font-size: 16px;
            font-weight: 800;
        }

        .backup-subtitle {
            color: #8490a4;
            font-size: 12px;
            margin-top: 3px;
        }

        .backup-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .backup-box {
            background: #f7f9fc;
            border-radius: 14px;
            padding: 14px;
        }

        .backup-box-label {
            color: #8a94a6;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        .backup-box-value {
            margin-top: 6px;
            font-size: 16px;
            font-weight: 800;
        }

        .backup-box-detail {
            margin-top: 4px;
            color: #7b8799;
            font-size: 11px;
        }

        .backup-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 999px;
            background: #eaf8f0;
            color: #158451;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        .backup-badge.error {
            background: #fff0f0;
            color: #c43c3c;
        }

        .backup-line {
            margin-top: 13px;
            padding-top: 13px;
            border-top: 1px solid #edf0f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            font-size: 12px;
        }

        .backup-info {
            color: #647087;
            min-width: 0;
        }

        .backup-status {
            font-weight: 800;
            white-space: nowrap;
        }

        .backup-status.ok {
            color: #158451;
        }

        .backup-status.atrasado {
            color: #a66b00;
        }

        .backup-status.nao_encontrado {
            color: #c43c3c;
        }

        .section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 2px 16px;
        }

        .section-title h2 {
            margin: 0;
            font-size: 17px;
        }

        .section-title span {
            color: #8b94a6;
            font-size: 12px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .app-card {
            position: relative;
            background: white;
            border: 1px solid #e6eaf2;
            border-radius: 20px;
            padding: 20px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(29,42,70,.055);
            transition: transform .22s ease, box-shadow .22s ease;
        }

        .app-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 42px rgba(29,42,70,.12);
        }

        .app-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: #276de2;
        }

        .app-card.php::before {
            background: #7654d8;
        }

        .app-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .app-name {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .tech {
            color: #7d8799;
            font-size: 12px;
        }

        .status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            background: #eaf8f0;
            color: #158451;
        }

        .status.offline {
            background: #fff0f0;
            color: #c43c3c;
        }

        .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
        }

        .metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 19px;
        }

        .metric {
            background: #f7f9fc;
            border-radius: 13px;
            padding: 12px;
            min-width: 0;
        }

        .metric-label {
            color: #8a94a6;
            font-size: 10px;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: .04em;
        }

        .metric-value {
            margin-top: 5px;
            font-weight: 800;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .database {
            margin-top: 13px;
            padding-top: 13px;
            border-top: 1px solid #edf0f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            font-size: 12px;
        }

        .database-name {
            color: #647087;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .db-ok {
            color: #158451;
            font-weight: 700;
            white-space: nowrap;
        }

        .footer {
            text-align: center;
            color: #9aa3b3;
            font-size: 11px;
            padding: 32px 0 10px;
        }

        @media (max-width: 1100px) {
            .stats {
                grid-template-columns: repeat(3, 1fr);
            }

            .grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .server-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .backup-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 700px) {
            .shell {
                padding: 18px;
            }

            .topbar {
                align-items: flex-start;
                gap: 15px;
                flex-direction: column;
            }

            .stats {
                grid-template-columns: repeat(2, 1fr);
            }

            .grid {
                grid-template-columns: 1fr;
            }

            .server-grid {
                grid-template-columns: 1fr;
            }

            .backup-grid {
                grid-template-columns: 1fr;
            }

            .backup-panel-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .server-panel-head {
                align-items: flex-start;
                flex-direction: column;
            }
        }
    </style>
</head>

<body>

<div class="shell">

    <header class="topbar">
        <div class="brand">
            <div class="logo">LG</div>

            <div>
                <h1>LegGov Central</h1>
                <div class="subtitle">
                    Infraestrutura e monitoramento das Câmaras
                </div>
            </div>
        </div>

        <div class="server-ok">
            <span class="dot"></span>
            Servidor operacional
        </div>
    </header>

    <section class="stats">

        <div class="stat">
            <div class="stat-label">Instalações</div>
            <div class="stat-value">{{ $totals['instalacoes'] }}</div>
        </div>

        <div class="stat">
            <div class="stat-label">Online</div>
            <div class="stat-value">{{ $totals['online'] }}</div>
        </div>

        <div class="stat">
            <div class="stat-label">Usuários ativos</div>
            <div class="stat-value">{{ $totals['usuarios'] }}</div>
        </div>

        <div class="stat">
            <div class="stat-label">Laravel</div>
            <div class="stat-value">{{ $totals['laravel'] }}</div>
        </div>

        <div class="stat">
            <div class="stat-label">PHP puro</div>
            <div class="stat-value">{{ $totals['php'] }}</div>
        </div>

    </section>

    <section class="server-panel">

        <div class="server-panel-head">

            <div>
                <div class="server-panel-title">
                    Saúde do servidor · {{ $server['hostname'] }}
                </div>

                <div class="server-panel-subtitle">
                    Recursos e serviços principais em tempo real
                </div>
            </div>

            <div class="services">

                @foreach([
                    'apache' => 'Apache',
                    'mariadb' => 'MariaDB',
                    'php_fpm' => 'PHP-FPM'
                ] as $key => $label)

                    <span class="service-pill {{ $server['services'][$key] !== 'online' ? 'offline' : '' }}">
                        <span class="service-dot"></span>
                        {{ $label }}
                    </span>

                @endforeach

            </div>

        </div>

        <div class="server-grid">

            <div class="server-metric">
                <div class="server-metric-label">Carga</div>
                <div class="server-metric-value">
                    {{ $server['load']['1m'] }}
                </div>
                <div class="server-metric-detail">
                    5m {{ $server['load']['5m'] }} ·
                    15m {{ $server['load']['15m'] }}
                </div>
            </div>

            <div class="server-metric">
                <div class="server-metric-label">Memória</div>
                <div class="server-metric-value">
                    {{ $server['memory']['percent'] }}%
                </div>
                <div class="server-metric-detail">
                    {{ $server['memory']['used_human'] }}
                    de {{ $server['memory']['total_human'] }}
                </div>
            </div>

            <div class="server-metric">
                <div class="server-metric-label">Disco</div>
                <div class="server-metric-value">
                    {{ $server['disk']['percent'] }}%
                </div>
                <div class="server-metric-detail">
                    {{ $server['disk']['free_human'] }} livres
                </div>
            </div>

            <div class="server-metric">
                <div class="server-metric-label">Uptime</div>
                <div class="server-metric-value">
                    {{ $server['uptime'] }}
                </div>
                <div class="server-metric-detail">
                    Servidor em execução
                </div>
            </div>

        </div>

    </section>

    <section class="backup-panel">

        <div class="backup-panel-head">

            <div>
                <div class="backup-title">Proteção e backups</div>
                <div class="backup-subtitle">
                    Rotina automática diária e cópia externa
                </div>
            </div>

            @php
                $runOk = ($backup['run']['status'] ?? null) === 'ok';
                $remoteOk = (bool) ($backup['run']['remote_confirmed'] ?? false);
            @endphp

            <div class="backup-badge {{ (!$runOk || !$remoteOk) ? 'error' : '' }}">
                ● {{ ($runOk && $remoteOk) ? 'BACKUP PROTEGIDO' : 'VERIFICAR BACKUP' }}
            </div>

        </div>

        <div class="backup-grid">

            <div class="backup-box">
                <div class="backup-box-label">Sistemas protegidos</div>
                <div class="backup-box-value">
                    {{ $totals['backups_ok'] }}/{{ $totals['instalacoes'] }}
                </div>
                <div class="backup-box-detail">
                    instalações com backup recente
                </div>
            </div>

            <div class="backup-box">
                <div class="backup-box-label">Última execução</div>
                <div class="backup-box-value">
                    {{ $backup['run']['date_human'] }}
                </div>
                <div class="backup-box-detail">
                    duração {{ $backup['run']['duration_human'] }}
                </div>
            </div>

            <div class="backup-box">
                <div class="backup-box-label">Arquivos /var/www</div>
                <div class="backup-box-value">
                    {{ $backup['files']['size_human'] }}
                </div>
                <div class="backup-box-detail">
                    {{ $backup['files']['date_human'] }}
                </div>
            </div>

            <div class="backup-box">
                <div class="backup-box-label">Cópia externa</div>
                <div class="backup-box-value">
                    {{ $backup['run']['remote_confirmed'] ? 'Confirmada' : 'Não confirmada' }}
                </div>
                <div class="backup-box-detail">
                    OneDrive
                </div>
            </div>

        </div>

    </section>

    <div class="section-title">
        <h2>Instalações monitoradas</h2>
        <span>atividade considerada nos últimos 5 minutos</span>
    </div>

    <section class="grid">

        @foreach($apps as $app)

            <article class="app-card {{ $app['type'] === 'php' ? 'php' : '' }}">

                <div class="app-head">

                    <div>
                        <div class="app-name">
                            {{ $app['name'] }}
                        </div>

                        <div class="tech">
                            {{ $app['technology'] }}
                        </div>
                    </div>

                    <div class="status {{ $app['status'] !== 'online' ? 'offline' : '' }}">
                        <span class="status-dot"></span>
                        {{ $app['status'] === 'online' ? 'ONLINE' : 'OFFLINE' }}
                    </div>

                </div>

                <div class="metrics">

                    <div class="metric">
                        <div class="metric-label">Usuários</div>
                        <div class="metric-value">
                            {{ $app['active_users'] ?? 'N/D' }}
                        </div>
                    </div>

                    <div class="metric">
                        <div class="metric-label">Banco</div>
                        <div class="metric-value">
                            {{ $app['database_size'] }}
                        </div>
                    </div>

                    <div class="metric">
                        <div class="metric-label">Arquivos</div>
                        <div class="metric-value">
                            {{ $app['files_size'] }}
                        </div>
                    </div>

                </div>

                <div class="database">
                    <span class="database-name">
                        {{ $app['database'] ?? 'Banco não identificado' }}
                    </span>

                    <span class="db-ok">
                        ● DB {{ $app['database_status'] === 'online' ? 'online' : 'offline' }}
                    </span>
                </div>

                <div class="backup-line">

                    <span class="backup-info">
                        Último backup:
                        {{ $app['backup']['date_human'] ?? '—' }}
                        ·
                        {{ $app['backup']['size_human'] ?? '—' }}
                    </span>

                    <span class="backup-status {{ $app['backup']['status'] ?? 'nao_encontrado' }}">
                        @if(($app['backup']['status'] ?? null) === 'ok')
                            ● BACKUP OK
                        @elseif(($app['backup']['status'] ?? null) === 'atrasado')
                            ● ATRASADO
                        @else
                            ● AUSENTE
                        @endif
                    </span>

                </div>

            </article>

        @endforeach

    </section>

    <footer class="footer">
        LegGov Central · Monitoramento de infraestrutura
    </footer>

</div>

</body>
</html>
