<?php
declare(strict_types=1);
require_once __DIR__ . '/db/config.php';

try {
    $fans = db()->query("SELECT * FROM fans ORDER BY points DESC LIMIT 10")->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $fans = [];
}
?>
<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Ranking de Fans - Lili Records</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #38bdf8;
            --accent-color: #00c853;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.2);
            --text-color: #ffffff;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            color: var(--text-color);
            background: #000;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 2rem 1rem;
        }

        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('assets/images/background.jpg') center/cover no-repeat;
            z-index: -1;
            filter: blur(20px);
        }

        .background::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.6);
        }

        .ranking-container {
            width: 100%;
            max-width: 600px;
            background: var(--glass-bg);
            backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 32px;
            padding: 2.5rem;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        header {
            text-align: center;
            margin-bottom: 2.5rem;
            position: relative;
        }

        .back-btn {
            position: absolute;
            left: 0;
            top: 0;
            color: var(--text-color);
            text-decoration: none;
            font-size: 1.5rem;
            opacity: 0.7;
            transition: opacity 0.3s;
        }

        .back-btn:hover { opacity: 1; }

        h1 { margin: 0; font-size: 2rem; font-weight: 800; color: var(--primary-color); }
        p.subtitle { margin: 0.5rem 0 0; font-size: 0.9rem; opacity: 0.6; }

        .fan-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .fan-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            transition: transform 0.2s, background 0.2s;
        }

        .fan-item:hover {
            transform: scale(1.02);
            background: rgba(255,255,255,0.06);
        }

        .rank {
            font-size: 1.2rem;
            font-weight: 800;
            width: 30px;
            text-align: center;
            color: var(--primary-color);
        }

        .rank-1 { color: #facc15; font-size: 1.5rem; }
        .rank-2 { color: #94a3b8; }
        .rank-3 { color: #b45309; }

        .fan-photo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--glass-border);
        }

        .fan-info { flex: 1; }
        .fan-name { font-weight: 700; font-size: 1.1rem; }
        .fan-points { font-size: 0.8rem; opacity: 0.6; }

        .level-badge {
            font-size: 0.6rem;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 8px;
            text-transform: uppercase;
            color: white;
            margin-left: 8px;
        }

        .trophy { color: #facc15; font-size: 1.2rem; }

        .empty-state {
            text-align: center;
            padding: 3rem;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="background"></div>

    <div class="ranking-container">
        <header>
            <a href="index.php" class="back-btn"><i class="bi bi-arrow-left"></i></a>
            <h1>Top Fans</h1>
            <p class="subtitle">Los oyentes más activos del chat</p>
        </header>

        <div class="fan-list">
            <?php if (empty($fans)): ?>
                <div class="empty-state">
                    <i class="bi bi-people" style="font-size: 3rem; display: block; margin-bottom: 1rem;"></i>
                    Aún no hay fans destacados. ¡Empieza a chatear para aparecer aquí!
                </div>
            <?php else: ?>
                <?php foreach ($fans as $index => $fan): ?>
                    <?php 
                        $rank = $index + 1;
                        $rankClass = $rank <= 3 ? "rank-$rank" : "";
                        $points = $fan['points'];
                        
                        // Level Calculation
                        if ($points >= 2500) { $level = 5; $levelColor = '#a855f7'; $emoji = '👑'; }
                        elseif ($points >= 1000) { $level = 4; $levelColor = '#f97316'; $emoji = '🔥'; }
                        elseif ($points >= 500) { $level = 3; $levelColor = '#22c55e'; $emoji = '⭐'; }
                        elseif ($points >= 100) { $level = 2; $levelColor = '#3b82f6'; $emoji = ''; }
                        else { $level = 1; $levelColor = '#94a3b8'; $emoji = ''; }
                        
                        if ($fan['is_fan_of_month']) $levelColor = '#facc15';
                    ?>
                    <div class="fan-item">
                        <div class="rank <?= $rankClass ?>">
                            <?php if ($rank === 1): ?>
                                <i class="bi bi-trophy-fill"></i>
                            <?php else: ?>
                                <?= $rank ?>
                            <?php endif; ?>
                        </div>
                        <img src="<?= htmlspecialchars($fan['photo'] ?: 'assets/pasted-20260215-163754-def41f49.png') ?>" alt="<?= htmlspecialchars($fan['name']) ?>" class="fan-photo">
                        <div class="fan-info">
                            <div class="fan-name">
                                <span style="color: <?= $levelColor ?>"><?= htmlspecialchars($fan['name']) ?></span>
                                <?= $emoji ?>
                                <span class="level-badge" style="background: <?= $levelColor ?>">Nivel <?= $level ?></span>
                            </div>
                            <div class="fan-points"><?= number_format($fan['points']) ?> puntos</div>
                        </div>
                        <?php if ($fan['is_fan_of_month']): ?>
                            <div class="trophy" title="Fan del Mes">
                                <i class="bi bi-star-fill"></i>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>

        <div style="margin-top: 3rem; text-align: center; font-size: 0.8rem; opacity: 0.5;">
            Gana 10 puntos por cada mensaje enviado en el chat.
        </div>
    </div>
</body>
</html>
