<?php
require_once __DIR__ . '/../../includes/header.php';

$stmt = $pdo->prepare("
    SELECT p.*,
           (SELECT COUNT(*) FROM ubiquiti_alerts a
            WHERE a.panel_id = p.id AND a.created_at >= NOW() - INTERVAL '24 hours') AS alerts_24h
    FROM ubiquiti_panels p
    WHERE p.user_id = ?
    ORDER BY p.last_status ASC, p.name ASC
");
$stmt->execute([$user['id']]);
$panels = $stmt->fetchAll(PDO::FETCH_ASSOC);

$total   = count($panels);
$online  = count(array_filter($panels, fn($p) => $p['last_status'] === 'online'));
$offline = count(array_filter($panels, fn($p) => $p['last_status'] === 'offline'));

function speed_badge(mixed $speed): string {
    if ($speed === null) return '<span style="color:#94a3b8;font-size:0.78rem;">–</span>';
    $s = (int)$speed;
    $color = match(true) {
        $s >= 1000 => '#16a34a',
        $s >= 100  => '#d97706',
        default    => '#dc2626',
    };
    return "<span style='background:{$color}20;color:{$color};border:1px solid {$color}40;border-radius:6px;padding:2px 8px;font-size:0.78rem;font-weight:700;'>{$s}M</span>";
}

function ccq_badge(mixed $ccq): string {
    if ($ccq === null) return '<span style="color:#94a3b8;font-size:0.78rem;">–</span>';
    $c = (int)$ccq;
    $color = match(true) {
        $c >= 90  => '#16a34a',
        $c >= 75  => '#d97706',
        default   => '#dc2626',
    };
    return "<span style='color:{$color};font-weight:700;font-size:0.88rem;'>{$c}%</span>";
}
?>

<div style="display:flex;flex-direction:column;gap:20px;">

    <!-- Breadcrumb -->
    <div style="display:flex;align-items:center;gap:8px;font-size:0.85rem;color:#64748b;">
        <span style="color:#0f172a;font-weight:700;">Ubiquiti</span>
        <span>›</span>
        <span>Painéis</span>
    </div>

    <!-- Header -->
    <div style="background:linear-gradient(135deg,#1e3a5f,#1d4ed8);border-radius:20px;padding:28px 32px;color:#eff6ff;position:relative;overflow:hidden;">
        <div style="position:absolute;right:-20px;top:-20px;width:160px;height:160px;background:rgba(255,255,255,0.05);border-radius:50%;"></div>
        <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;">
            <div>
                <h1 style="margin:0 0 6px;font-size:1.7rem;font-weight:800;">
                    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align:middle;margin-right:8px;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
                    </svg>
                    Painéis Ubiquiti
                </h1>
                <p style="margin:0;opacity:0.8;font-size:0.92rem;"><?= $total ?> painel<?= $total !== 1 ? 'is' : '' ?> cadastrado<?= $total !== 1 ? 's' : '' ?></p>
            </div>
            <a href="<?= UBNT_URL ?>?page=ubnt_panel_form" style="text-decoration:none;">
                <button style="background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:12px 24px;border-radius:12px;font-weight:700;cursor:pointer;font-size:0.95rem;display:inline-flex;align-items:center;gap:8px;">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
                    Novo Painel
                </button>
            </a>
        </div>
        <!-- Stats -->
        <div style="display:flex;gap:20px;margin-top:20px;flex-wrap:wrap;">
            <div style="background:rgba(255,255,255,0.1);border-radius:12px;padding:12px 20px;text-align:center;min-width:90px;">
                <div style="font-size:1.8rem;font-weight:800;"><?= $online ?></div>
                <div style="font-size:0.78rem;opacity:0.8;text-transform:uppercase;letter-spacing:0.05em;">Online</div>
            </div>
            <div style="background:rgba(255,255,255,0.1);border-radius:12px;padding:12px 20px;text-align:center;min-width:90px;">
                <div style="font-size:1.8rem;font-weight:800;"><?= $offline ?></div>
                <div style="font-size:0.78rem;opacity:0.8;text-transform:uppercase;letter-spacing:0.05em;">Offline</div>
            </div>
            <div style="background:rgba(255,255,255,0.1);border-radius:12px;padding:12px 20px;text-align:center;min-width:90px;">
                <div style="font-size:1.8rem;font-weight:800;"><?= $total ?></div>
                <div style="font-size:0.78rem;opacity:0.8;text-transform:uppercase;letter-spacing:0.05em;">Total</div>
            </div>
        </div>
    </div>

    <!-- Tabela -->
    <div style="background:#fff;border-radius:20px;border:1px solid #e2e8f0;box-shadow:0 4px 16px rgba(0,0,0,0.04);overflow:hidden;">

        <?php if (empty($panels)): ?>
            <div style="padding:60px;text-align:center;color:#64748b;">
                <svg width="48" height="48" fill="none" stroke="#cbd5e1" viewBox="0 0 24 24" style="margin-bottom:12px;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
                </svg>
                <p style="font-size:1.05rem;font-weight:600;margin:0 0 8px;color:#475569;">Nenhum painel cadastrado</p>
                <p style="margin:0 0 20px;font-size:0.9rem;">Adicione seu primeiro painel Ubiquiti para começar o monitoramento.</p>
                <a href="<?= UBNT_URL ?>?page=ubnt_panel_form" style="display:inline-flex;align-items:center;gap:8px;background:#1d4ed8;color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:700;">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
                    Adicionar Painel
                </a>
            </div>
        <?php else: ?>
            <div style="overflow-x:auto;">
                <table style="width:100%;border-collapse:collapse;">
                    <thead>
                        <tr style="background:#f8fafc;border-bottom:2px solid #e2e8f0;">
                            <th style="padding:14px 20px;text-align:left;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">Painel</th>
                            <th style="padding:14px 16px;text-align:center;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">Status</th>
                            <th style="padding:14px 16px;text-align:center;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">Clientes</th>
                            <th style="padding:14px 16px;text-align:center;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">Link</th>
                            <th style="padding:14px 16px;text-align:center;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">CCQ</th>
                            <th style="padding:14px 16px;text-align:center;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">Sinal</th>
                            <th style="padding:14px 16px;text-align:center;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">Alertas 24h</th>
                            <th style="padding:14px 16px;text-align:center;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($panels as $p):
                            $isOnline  = $p['last_status'] === 'online';
                            $isOffline = $p['last_status'] === 'offline';
                            $stColor   = $isOnline ? '#16a34a' : ($isOffline ? '#dc2626' : '#94a3b8');
                            $stBg      = $isOnline ? '#f0fdf4' : ($isOffline ? '#fef2f2' : '#f8fafc');
                            $stLabel   = $isOnline ? 'Online' : ($isOffline ? 'Offline' : 'Desconhecido');
                            $alerts24h = (int)$p['alerts_24h'];
                        ?>
                        <tr style="border-bottom:1px solid #f1f5f9;" onmouseover="this.style.background='#fafafa'" onmouseout="this.style.background=''">
                            <td style="padding:16px 20px;">
                                <div style="font-weight:700;color:#0f172a;font-size:0.95rem;"><?= h($p['name']) ?></div>
                                <div style="font-size:0.8rem;color:#64748b;margin-top:2px;"><?= h($p['hostname']) ?>
                                    <?php if ($p['location']): ?>
                                        <span style="margin-left:6px;color:#94a3b8;">· <?= h($p['location']) ?></span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td style="padding:16px;text-align:center;">
                                <span style="display:inline-flex;align-items:center;gap:6px;background:<?= $stBg ?>;color:<?= $stColor ?>;border:1px solid <?= $stColor ?>30;border-radius:20px;padding:4px 12px;font-size:0.8rem;font-weight:700;">
                                    <span style="width:7px;height:7px;border-radius:50%;background:<?= $stColor ?>;<?= $isOnline ? 'animation:pulse 2s infinite' : '' ?>"></span>
                                    <?= $stLabel ?>
                                </span>
                            </td>
                            <td style="padding:16px;text-align:center;">
                                <?php if ($p['last_client_count'] !== null): ?>
                                    <span style="font-size:1.4rem;font-weight:800;color:#0f172a;"><?= (int)$p['last_client_count'] ?></span>
                                    <div style="font-size:0.72rem;color:#94a3b8;">clientes</div>
                                <?php else: ?>
                                    <span style="color:#94a3b8;font-size:0.85rem;">–</span>
                                <?php endif; ?>
                            </td>
                            <td style="padding:16px;text-align:center;"><?= speed_badge($p['last_iface_speed']) ?></td>
                            <td style="padding:16px;text-align:center;"><?= ccq_badge($p['last_ccq']) ?></td>
                            <td style="padding:16px;text-align:center;">
                                <?php if ($p['last_signal'] !== null): ?>
                                    <span style="font-size:0.88rem;font-weight:600;color:<?= (int)$p['last_signal'] >= -70 ? '#16a34a' : ((int)$p['last_signal'] >= -80 ? '#d97706' : '#dc2626') ?>;">
                                        <?= (int)$p['last_signal'] ?> dBm
                                    </span>
                                <?php else: ?>
                                    <span style="color:#94a3b8;font-size:0.85rem;">–</span>
                                <?php endif; ?>
                            </td>
                            <td style="padding:16px;text-align:center;">
                                <?php if ($alerts24h > 0): ?>
                                    <a href="<?= UBNT_URL ?>?page=ubnt_alerts&panel_id=<?= $p['id'] ?>" style="text-decoration:none;">
                                        <span style="background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:20px;padding:3px 10px;font-size:0.8rem;font-weight:700;"><?= $alerts24h ?></span>
                                    </a>
                                <?php else: ?>
                                    <span style="color:#94a3b8;font-size:0.8rem;">–</span>
                                <?php endif; ?>
                            </td>
                            <td style="padding:16px;text-align:center;">
                                <div style="display:flex;gap:8px;justify-content:center;">
                                    <a href="<?= UBNT_URL ?>?page=ubnt_panel_detail&id=<?= $p['id'] ?>" style="display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:8px;background:#f1f5f9;color:#475569;text-decoration:none;font-size:0.82rem;font-weight:600;" title="Detalhes">
                                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                                        Ver
                                    </a>
                                    <a href="<?= UBNT_URL ?>?page=ubnt_panel_form&id=<?= $p['id'] ?>" style="display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:8px;background:#eff6ff;color:#1d4ed8;text-decoration:none;font-size:0.82rem;font-weight:600;" title="Editar">
                                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                        Editar
                                    </a>
                                    <form method="POST" action="<?= UBNT_URL ?>?page=ubnt_panels" style="display:inline;" onsubmit="return confirm('Excluir painel <?= h(addslashes($p['name'])) ?>?')">
                                        <input type="hidden" name="action" value="delete_panel">
                                        <input type="hidden" name="id" value="<?= $p['id'] ?>">
                                        <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
                                        <button type="submit" style="display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:8px;background:#fef2f2;color:#dc2626;border:none;cursor:pointer;font-size:0.82rem;font-weight:600;">
                                            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                            Excluir
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Rodapé com última atualização -->
            <div style="padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;font-size:0.8rem;color:#94a3b8;display:flex;justify-content:space-between;align-items:center;">
                <span>Dados atualizados pelo poller a cada 60s</span>
                <a href="<?= UBNT_URL ?>?page=ubnt_alerts" style="color:#1d4ed8;text-decoration:none;font-weight:600;">Ver todos os alertas →</a>
            </div>
        <?php endif; ?>
    </div>
</div>

<style>
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }
</style>

<?php require_once __DIR__ . '/../../includes/footer.php'; ?>
