<?php
require_once __DIR__ . '/db/config.php';

$secret_token = 'lili_admin_2026';
if (($_GET['token'] ?? '') !== $secret_token) {
    die('Acceso denegado. Se requiere un token válido.');
}

$db = db();

// Get active users (last 10 minutes)
$stmt = $db->query("SELECT COUNT(*) FROM visitor_logs WHERE last_activity > DATE_SUB(NOW(), INTERVAL 10 MINUTE)");
$active_users = $stmt->fetchColumn();

// Get active users with phone numbers
$stmt = $db->query("SELECT phone_number, country, last_activity FROM visitor_logs WHERE last_activity > DATE_SUB(NOW(), INTERVAL 10 MINUTE) AND phone_number IS NOT NULL AND phone_number != '' ORDER BY last_activity DESC");
$active_phones = $stmt->fetchAll();

// Get country distribution for active users
$stmt = $db->query("SELECT country, country_code, lat, lon, COUNT(*) as count FROM visitor_logs WHERE last_activity > DATE_SUB(NOW(), INTERVAL 10 MINUTE) GROUP BY country_code");
$locations = $stmt->fetchAll();

// Get announcement history
$stmt = $db->query("SELECT * FROM announcements_history ORDER BY created_at DESC LIMIT 10");
$announcements = $stmt->fetchAll();

// Get announcement stats
$stmt = $db->query("SELECT COUNT(*) FROM announcements_history WHERE created_at > DATE_SUB(NOW(), INTERVAL 24 HOUR)");
$announcements_24h = $stmt->fetchColumn();

// Get today's requests
$stmt = $db->query("SELECT COUNT(*) FROM song_requests WHERE DATE(created_at) = CURDATE()");
$requests_today = $stmt->fetchColumn();

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Admin Dashboard - Lili Records</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { background: #0f172a; color: white; font-family: 'Inter', sans-serif; }
        .card { background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255,255,255,0.1); color: white; backdrop-filter: blur(10px); }
        #map { height: 500px; border-radius: 15px; margin-top: 20px; }
        .stat-value { font-size: 3rem; font-weight: bold; color: #00e676; }
        .btn-success { background: #00e676; border: none; color: #0f172a; font-weight: bold; }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="row mb-4">
            <div class="col-md-12 text-center">
                <img src="./assets/pasted-20260215-163754-def41f49.png" alt="Logo" style="width: 100px; height: 100px; border-radius: 50%; border: 4px solid #00e676; margin-bottom: 1rem; object-fit: cover; box-shadow: 0 0 25px rgba(0, 230, 118, 0.7);">
                <h1>Panel de Administración Real-Time</h1>
                <p class="text-secondary">Lili Records Radio Statistics</p>
                <div class="mb-4">
                    <a href="weekly_report.php?token=<?= $secret_token ?>&action=preview" target="_blank" class="btn btn-outline-info">
                        <i class="bi bi-file-earmark-bar-graph"></i> GENERAR REPORTE SEMANAL
                    </a>
                    <div class="mt-2">
                        <span class="badge bg-secondary">
                            <i class="bi bi-clock-history"></i> Reporte automático programado: Todos los lunes 08:00 AM
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card p-3 border-success" style="background: rgba(37, 211, 102, 0.1);">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                        <div class="d-flex align-items-center">
                            <div class="bg-success p-3 rounded-circle me-3 shadow-lg">
                                <i class="bi bi-whatsapp fs-3 text-white"></i>
                            </div>
                            <div>
                                <h5 class="mb-0">Comunidad WhatsApp de Lili Records</h5>
                                <p class="mb-0 text-secondary small">Monitorea y comparte anuncios directamente en el grupo oficial.</p>
                            </div>
                        </div>
                        <a href="https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY" target="_blank" class="btn btn-success d-flex align-items-center gap-2">
                            <i class="bi bi-box-arrow-up-right"></i> IR AL GRUPO DE WHATSAPP
                        </a>
                        <button class="btn btn-outline-success" onclick="showManualRequestModal()">
                            <i class="bi bi-plus-circle"></i> REGISTRAR PETICIÓN DE WHATSAPP
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Now Playing Header -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card p-3 border-success" style="background: rgba(0, 230, 118, 0.05);">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="position-relative me-3">
                                <img id="admin-track-cover" src="./assets/pasted-20260215-163754-def41f49.png" style="width: 60px; height: 60px; border-radius: 10px; object-fit: cover; border: 2px solid #00e676;">
                                <span class="position-absolute bottom-0 end-0 p-1 bg-success border border-light rounded-circle" style="width: 12px; height: 12px;"></span>
                            </div>
                            <div>
                                <span class="text-success fw-bold x-small" style="font-size: 0.7rem; letter-spacing: 1px;">SONANDO AHORA:</span>
                                <h4 id="admin-track-title" class="mb-0">Lili Records Radio</h4>
                                <p id="admin-track-artist" class="text-secondary mb-0">En vivo desde el estudio</p>
                            </div>
                        </div>
                        <div class="text-end d-flex align-items-center gap-2">
                            <button class="btn btn-success btn-sm d-flex align-items-center gap-2" onclick="announceOnAir()" style="transition: all 0.3s; box-shadow: 0 0 10px rgba(0, 230, 118, 0.3);">
                                <i class="bi bi-whatsapp"></i> <span>ANUNCIAR AL AIRE</span>
                                <span class="spinner-grow spinner-grow-sm text-white" role="status" style="width: 8px; height: 8px;"></span>
                            </button>
                            <span id="admin-track-timer" class="badge bg-dark border border-secondary">00:00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="card p-4 text-center">
                    <h5>Usuarios Conectados</h5>
                    <div class="stat-value"><?= $active_users ?></div>
                    <p class="text-secondary">En los últimos 10 minutos</p>
                </div>

                <div class="card p-4 text-center mt-4 border-success" style="background: rgba(0, 230, 118, 0.05);">
                    <h5>Anuncios (24h)</h5>
                    <div id="announcements-24h-count" class="stat-value" style="color: #00e676;"><?= $announcements_24h ?></div>
                    <p class="text-secondary">Compartidos por WhatsApp</p>
                </div>

                <div class="card p-4 text-center mt-4 border-primary" style="background: rgba(13, 110, 253, 0.05);">
                    <h5>Peticiones Hoy</h5>
                    <div id="requests-today-count" class="stat-value" style="color: #0d6efd;"><?= $requests_today ?></div>
                    <p class="text-secondary">Canciones solicitadas</p>
                </div>

                <div class="card p-4 mt-4">
                    <h5>Móviles Conectados</h5>
                    <ul class="list-group list-group-flush bg-transparent">
                        <?php if (empty($active_phones)): ?>
                            <li class="list-group-item bg-transparent text-secondary border-secondary">No hay móviles registrados</li>
                        <?php else: ?>
                            <?php foreach ($active_phones as $phone): ?>
                            <li class="list-group-item bg-transparent text-white border-secondary d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="fw-bold"><?= htmlspecialchars($phone['phone_number']) ?></span><br>
                                    <small class="text-secondary"><?= htmlspecialchars($phone['country']) ?></small>
                                </div>
                                <span class="badge bg-success">Online</span>
                            </li>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </ul>
                </div>

                <div class="card p-4 mt-4">
                    <h5>Distribución por País</h5>
                    <ul class="list-group list-group-flush bg-transparent">
                        <?php foreach ($locations as $loc): ?>
                        <li class="list-group-item bg-transparent text-white border-secondary d-flex justify-content-between">
                            <span><?= htmlspecialchars($loc['country']) ?></span>
                            <span class="badge bg-primary"><?= $loc['count'] ?></span>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5>Mapa de Conexiones</h5>
                        <span class="badge bg-success"><i class="bi bi-broadcast"></i> En vivo</span>
                    </div>
                    <div id="map"></div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card p-4 border-info" style="background: rgba(13, 202, 240, 0.05);">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5><i class="bi bi-disc-fill text-info"></i> Mi Playlist de DJ (Canciones que voy a poner)</h5>
                        <button class="btn btn-info btn-sm" onclick="showDjAddModal()">
                            <i class="bi bi-plus-lg"></i> AGREGAR CANCIÓN A MI LISTA
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-dark table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>Artista</th>
                                    <th>Canción</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="dj-playlist-body">
                                <tr>
                                    <td colspan="4" class="text-center text-secondary">Cargando mi lista...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5><i class="bi bi-history text-success"></i> Historial de Anuncios Recientes</h5>
                        <button class="btn btn-sm btn-outline-success" onclick="fetchAnnouncements()">Actualizar Historial</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-dark table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>Fecha y Hora</th>
                                    <th>Canción Anunciada</th>
                                    <th>Plataforma</th>
                                    <th>Anunciante</th>
                                </tr>
                            </thead>
                            <tbody id="announcements-body">
                                <?php if (empty($announcements)): ?>
                                    <tr><td colspan="4" class="text-center text-secondary">No hay anuncios registrados</td></tr>
                                <?php else: ?>
                                    <?php foreach ($announcements as $ann): ?>
                                    <tr>
                                        <td><?= date('d/m/Y H:i', strtotime($ann['created_at'])) ?></td>
                                        <td><span class="text-success fw-bold"><?= htmlspecialchars($ann['song_name']) ?></span></td>
                                        <td><span class="badge bg-success"><i class="bi bi-whatsapp"></i> WhatsApp</span></td>
                                        <td><?= htmlspecialchars($ann['announcer_name']) ?></td>
                                    </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card p-4 h-100">
                    <h5><i class="bi bi-person-heart text-success"></i> Top 5 Artistas Más Pedidos</h5>
                    <div id="top-artists" class="mt-3">
                        <p class="text-secondary text-center">Cargando estadísticas...</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card p-4 h-100">
                    <h5><i class="bi bi-star-fill text-success"></i> Top 5 Canciones Más Pedidas</h5>
                    <div id="top-songs" class="mt-3">
                        <p class="text-secondary text-center">Cargando estadísticas...</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card p-4 h-100 border-info" style="background: rgba(13, 202, 240, 0.05);">
                    <h5><i class="bi bi-trophy-fill text-info"></i> Oyentes de la Semana (Top 5)</h5>
                    <div id="top-requesters" class="mt-3">
                        <p class="text-secondary text-center">Cargando ranking...</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card p-4">
                    <h5><i class="bi bi-graph-up-arrow text-success"></i> Volumen de Peticiones (Últimas 24h)</h5>
                    <div style="height: 250px;">
                        <canvas id="volumeChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5><i class="bi bi-images text-success"></i> Moderación de Galería y Chat</h5>
                        <button class="btn btn-sm btn-outline-success" onclick="fetchChatImages()">Cargar Imágenes Recientes</button>
                    </div>
                    <div class="row" id="chat-images-container">
                        <div class="col-12 text-center text-secondary py-4">
                            Cargando imágenes del chat...
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5><i class="bi bi-music-note-list text-success"></i> Moderación de Peticiones</h5>
                        <button class="btn btn-sm btn-outline-success" onclick="fetchRequests()">Actualizar Lista</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-dark table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>Artista</th>
                                    <th>Canción</th>
                                    <th>Solicitado por</th>
                                    <th>Vía</th>
                                    <th>Fecha</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="requests-body">
                                <tr>
                                    <td colspan="7" class="text-center text-secondary">Cargando peticiones...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="manualRequestModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark border-success">
                <div class="modal-header border-secondary">
                    <h5 class="modal-title text-success"><i class="bi bi-whatsapp"></i> Registrar Petición de WhatsApp</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="manual-request-form">
                        <div class="mb-3">
                            <label class="form-label">Nombre del Oyente</label>
                            <input type="text" class="form-control bg-secondary text-white border-0" id="manual-requester" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Artista</label>
                            <input type="text" class="form-control bg-secondary text-white border-0" id="manual-artist" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Canción</label>
                            <input type="text" class="form-control bg-secondary text-white border-0" id="manual-song" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-secondary">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" onclick="submitManualRequest()">Guardar Petición</button>
                </div>
            </div>
        </div>
    </div>

    <!-- DJ Playlist Modal -->
    <div class="modal fade" id="djAddModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark border-info">
                <div class="modal-header border-secondary">
                    <h5 class="modal-title text-info"><i class="bi bi-disc-fill"></i> Agregar Canción a mi Playlist</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="dj-add-form">
                        <div class="mb-3">
                            <label class="form-label">Artista</label>
                            <input type="text" class="form-control bg-secondary text-white border-0" id="dj-artist" placeholder="Ej: Bad Bunny" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Canción</label>
                            <input type="text" class="form-control bg-secondary text-white border-0" id="dj-song" placeholder="Ej: Monaco" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-secondary">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-info" onclick="submitDjRequest()">Añadir a mi Lista</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
    <script>
        const map = L.map('map').setView([20, 0], 2);
        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        let heatmapLayer;
        let markersGroup = L.layerGroup().addTo(map);

        function updateMap(locations) {
            markersGroup.clearLayers();
            const heatData = [];

            locations.forEach(loc => {
                if (loc.lat && loc.lon) {
                    // Add marker
                    L.marker([loc.lat, loc.lon])
                        .addTo(markersGroup)
                        .bindPopup(`<b>${loc.country}</b><br>${loc.count} usuario(s)`);
                    
                    // Add to heatmap data (lat, lon, intensity)
                    // We use the count as intensity, but capped/scaled for better visualization
                    heatData.push([loc.lat, loc.lon, Math.min(loc.count * 0.5, 1)]);
                }
            });

            if (heatmapLayer) {
                map.removeLayer(heatmapLayer);
            }
            
            heatmapLayer = L.heatLayer(heatData, {
                radius: 25,
                blur: 15,
                maxZoom: 10,
                gradient: {0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1: 'red'}
            }).addTo(map);
        }

        // Initial map data
        updateMap(<?= json_encode($locations) ?>);
        
        let volumeChart;
        function initChart() {
            const ctx = document.getElementById('volumeChart').getContext('2d');
            volumeChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: Array.from({length: 24}, (_, i) => `${i}:00`),
                    datasets: [{
                        label: 'Peticiones',
                        data: new Array(24).fill(0),
                        borderColor: '#00e676',
                        backgroundColor: 'rgba(0, 230, 118, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } },
                        x: { grid: { display: false }, ticks: { color: '#94a3b8' } }
                    },
                    plugins: {
                        legend: { display: false }
                    }
                }
            });
        }
        initChart();

        async function fetchRequests() {
            try {
                const response = await fetch('api/song_requests.php?status=pending');
                const data = await response.json();
                if (data.success) {
                    const tbody = document.getElementById('requests-body');
                    if (data.requests.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-secondary">No hay peticiones pendientes</td></tr>';
                    } else {
                        tbody.innerHTML = data.requests.map(req => `
                            <tr class="${req.source === 'whatsapp' ? 'table-success' : ''}" style="${req.source === 'whatsapp' ? 'background: rgba(37, 211, 102, 0.1) !important;' : ''}">
                                <td>${req.artist}</td>
                                <td>${req.song}</td>
                                <td>${req.requester}</td>
                                <td>
                                    ${req.source === 'whatsapp' 
                                        ? '<span class="badge bg-success"><i class="bi bi-whatsapp"></i> WhatsApp</span>' 
                                        : '<span class="badge bg-secondary"><i class="bi bi-globe"></i> Web</span>'}
                                </td>
                                <td>${new Date(req.created_at).toLocaleString()}</td>
                                <td><span class="badge bg-warning text-dark">${req.status}</span></td>
                                <td>
                                    <button class="btn btn-sm btn-success" onclick="updateStatus(${req.id}, 'mark_played')">Sonar</button>
                                    <button class="btn btn-sm btn-danger" onclick="updateStatus(${req.id}, 'delete')">Eliminar</button>
                                </td>
                            </tr>
                        `).join('');
                    }
                }
            } catch (error) {
                console.error('Error fetching requests:', error);
            }
        }

        async function fetchChatImages() {
            const container = document.getElementById('chat-images-container');
            try {
                const response = await fetch('api/chat.php');
                const messages = await response.json();
                
                const images = messages.filter(m => m.type === 'image');
                
                if (images.length === 0) {
                    container.innerHTML = '<div class="col-12 text-center text-secondary py-4">No hay imágenes recientes en el chat.</div>';
                    return;
                }
                
                container.innerHTML = images.map(img => `
                    <div class="col-md-3 mb-4">
                        <div class="card h-100 p-2" style="background: rgba(0,0,0,0.3);">
                            <img src="${img.message}" class="card-img-top rounded" style="height: 150px; object-fit: cover;">
                            <div class="card-body p-2">
                                <p class="small mb-1">Enviado por: <b>${img.username}</b></p>
                                <div class="input-group input-group-sm mb-2">
                                    <input type="text" class="form-control bg-dark text-white border-secondary" placeholder="Leyenda..." id="caption-${img.id}">
                                </div>
                                <button class="btn btn-sm btn-success w-100" onclick="promoteToGallery(${img.id})">
                                    <i class="bi bi-star-fill"></i> Publicar en Galería
                                </button>
                            </div>
                        </div>
                    </div>
                `).join('');
            } catch (error) {
                container.innerHTML = '<div class="col-12 text-center text-danger py-4">Error al cargar imágenes.</div>';
            }
        }

        async function promoteToGallery(messageId) {
            const caption = document.getElementById(`caption-${messageId}`).value;
            try {
                const response = await fetch('api/gallery.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        action: 'promote',
                        message_id: messageId,
                        caption: caption
                    })
                });
                const data = await response.json();
                if (data.success) {
                    alert('Imagen publicada en la galería con éxito.');
                    fetchChatImages();
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error de conexión.');
            }
        }

        fetchChatImages();

        async function fetchStats() {
            const artistsDiv = document.getElementById('top-artists');
            const songsDiv = document.getElementById('top-songs');
            try {
                const response = await fetch('api/song_requests.php?action=stats');
                const data = await response.json();
                
                if (data.success) {
                    if (data.top_artists.length === 0) {
                        artistsDiv.innerHTML = '<p class="text-secondary text-center">Sin datos aún</p>';
                    } else {
                        artistsDiv.innerHTML = '<div class="list-group list-group-flush bg-transparent">' + 
                            data.top_artists.map((item, index) => `
                                <div class="list-group-item bg-transparent text-white border-secondary d-flex justify-content-between align-items-center">
                                    <span>${index + 1}. ${item.artist}</span>
                                    <span class="badge bg-success rounded-pill">${item.count} peticiones</span>
                                </div>
                            `).join('') + '</div>';
                    }

                    if (data.top_songs.length === 0) {
                        songsDiv.innerHTML = '<p class="text-secondary text-center">Sin datos aún</p>';
                    } else {
                        songsDiv.innerHTML = '<div class="list-group list-group-flush bg-transparent">' + 
                            data.top_songs.map((item, index) => `
                                <div class="list-group-item bg-transparent text-white border-secondary d-flex justify-content-between align-items-center">
                                    <div>
                                        <span>${index + 1}. ${item.song}</span><br>
                                        <small class="text-secondary">${item.artist}</small>
                                    </div>
                                    <span class="badge bg-success rounded-pill">${item.count} peticiones</span>
                                </div>
                            `).join('') + '</div>';
                    }

                    if (data.volume_stats && volumeChart) {
                        const hourlyData = new Array(24).fill(0);
                        data.volume_stats.forEach(stat => {
                            hourlyData[stat.hour] = stat.count;
                        });
                        volumeChart.data.datasets[0].data = hourlyData;
                        volumeChart.update();
                    }

                    if (data.locations) {
                        updateMap(data.locations);
                    }
                    
                    if (data.requests_today !== undefined) {
                        const reqCounter = document.getElementById('requests-today-count');
                        if (reqCounter) reqCounter.innerText = data.requests_today;
                    }
                }
            } catch (error) {
                console.error('Error fetching stats:', error);
            }
        }

        async function updateStatus(id, action) {
            if (action === 'delete' && !confirm('¿Estás seguro de eliminar esta petición?')) return;
            
            const formData = new FormData();
            formData.append('id', id);
            formData.append('action', action);
            formData.append('username', 'Admin'); // Added default username for bonus logic
            
            try {
                const response = await fetch('api/song_requests.php', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                if (data.success) {
                    fetchRequests();
                    fetchDjPlaylist();
                    fetchStats();
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error al procesar la solicitud');
            }
        }

        function showManualRequestModal() {
            const modal = new bootstrap.Modal(document.getElementById('manualRequestModal'));
            modal.show();
        }

        async function submitManualRequest() {
            const requester = document.getElementById('manual-requester').value;
            const artist = document.getElementById('manual-artist').value;
            const song = document.getElementById('manual-song').value;

            if (!requester || !artist || !song) {
                alert('Por favor, rellena todos los campos.');
                return;
            }

            const formData = new FormData();
            formData.append('requester', requester);
            formData.append('artist', artist);
            formData.append('song', song);
            formData.append('source', 'whatsapp');

            try {
                const response = await fetch('api/song_requests.php', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                if (data.success) {
                    bootstrap.Modal.getInstance(document.getElementById('manualRequestModal')).hide();
                    document.getElementById('manual-request-form').reset();
                    fetchRequests();
                    fetchTopRequesters();
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error al guardar la petición.');
            }
        }

        async function announceOnAir() {
            const title = document.getElementById('admin-track-title').innerText.trim();
            const artist = document.getElementById('admin-track-artist').innerText.trim();
            const currentSong = artist !== 'Lili Records' ? `${artist} - ${title}` : title;
            const shareUrl = window.location.origin; // Link to the main radio page
            const text = `🔴 *¡ESTAMOS AL AIRE!* 🎙️📻\n\nSintoniza ahora *Lili Records Radio* para escuchar la mejor música en vivo.\n\n🎵 *Sonando:* ${currentSong}\n\n👉 *Escúchanos aquí:* ${shareUrl}\n\n¡Te esperamos! 💃🕺\n\n#LiliRecords #RadioEnVivo #LaQueTeGusta`;
            
            // Log the announcement
            try {
                await fetch('api/log_announcement.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ song_name: currentSong })
                });
                fetchAnnouncements();
            } catch (error) {
                console.error('Error logging announcement:', error);
            }

            const url = `https://wa.me/?text=${encodeURIComponent(text)}`;
            window.open(url, '_blank');
        }

        async function fetchAnnouncements() {
            try {
                // Since we don't have a dedicated API for fetching history yet, we'll reload the relevant part or create one.
                // For simplicity and following the project style, I'll create api/get_announcements.php
                const response = await fetch('api/get_announcements.php');
                const data = await response.json();
                if (data.success) {
                    const tbody = document.getElementById('announcements-body');
                    if (data.announcements.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-secondary">No hay anuncios registrados</td></tr>';
                    } else {
                        tbody.innerHTML = data.announcements.map(ann => `
                            <tr>
                                <td>${new Date(ann.created_at).toLocaleString()}</td>
                                <td><span class="text-success fw-bold">${ann.song_name}</span></td>
                                <td><span class="badge bg-success"><i class="bi bi-whatsapp"></i> WhatsApp</span></td>
                                <td>${ann.announcer_name}</td>
                            </tr>
                        `).join('');
                    }
                    
                    if (data.count_24h !== undefined) {
                        const counter = document.getElementById('announcements-24h-count');
                        if (counter) counter.innerText = data.count_24h;
                    }
                }
            } catch (error) {
                console.error('Error fetching announcements:', error);
            }
        }

        async function updateNowPlaying() {
            try {
                const response = await fetch('https://www.radioking.com/widgets/api/v1/radio/828046/track/current');
                const data = await response.json();
                if (data && data.title) {
                    document.getElementById('admin-track-title').textContent = data.title;
                    document.getElementById('admin-track-artist').textContent = data.artist || 'Lili Records';
                    if (data.cover) {
                        document.getElementById('admin-track-cover').src = data.cover;
                    }
                    
                    if (data.started_at && data.end_at) {
                        const start = new Date(data.started_at).getTime();
                        const end = new Date(data.end_at).getTime();
                        const duration = end - start;
                        const now = new Date().getTime();
                        const elapsed = Math.max(0, now - start);
                        const m = Math.floor(elapsed / 60000);
                        const s = Math.floor((elapsed % 60000) / 1000);
                        document.getElementById('admin-track-timer').textContent = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
                    }
                }
            } catch (error) {
                console.error('Error fetching now playing:', error);
            }
        }

        async function fetchTopRequesters() {
            const requestersDiv = document.getElementById('top-requesters');
            try {
                const response = await fetch('api/get_top_requesters.php');
                const data = await response.json();
                
                if (data.success) {
                    if (data.data.length === 0) {
                        requestersDiv.innerHTML = '<p class="text-secondary text-center">Sin datos aún</p>';
                    } else {
                        requestersDiv.innerHTML = '<div class="list-group list-group-flush bg-transparent">' + 
                            data.data.map((item, index) => `
                                <div class="list-group-item bg-transparent text-white border-secondary d-flex justify-content-between align-items-center">
                                    <span>
                                        ${index === 0 ? '<i class="bi bi-crown-fill text-warning me-1"></i>' : (index + 1) + '. '}
                                        <span class="${index === 0 ? 'fw-bold text-warning' : ''}">${item.requester}</span>
                                    </span>
                                    <span class="badge ${index === 0 ? 'bg-warning text-dark' : 'bg-info'} rounded-pill">${item.total_requests} peticiones</span>
                                </div>
                            `).join('') + '</div>';
                    }
                }
            } catch (error) {
                console.error('Error fetching top requesters:', error);
            }
        }

        function showDjAddModal() {
            const modal = new bootstrap.Modal(document.getElementById('djAddModal'));
            modal.show();
        }

        async function submitDjRequest() {
            const artist = document.getElementById('dj-artist').value;
            const song = document.getElementById('dj-song').value;

            if (!artist || !song) {
                alert('Por favor, rellena artista y canción.');
                return;
            }

            const formData = new FormData();
            formData.append('requester', 'Lili Records DJ');
            formData.append('artist', artist);
            formData.append('song', song);
            formData.append('source', 'admin');

            try {
                const response = await fetch('api/song_requests.php', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                if (data.success) {
                    bootstrap.Modal.getInstance(document.getElementById('djAddModal')).hide();
                    document.getElementById('dj-add-form').reset();
                    fetchDjPlaylist();
                    fetchRequests();
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error al guardar la canción.');
            }
        }

        async function fetchDjPlaylist() {
            try {
                const response = await fetch('api/song_requests.php?source=admin&status=pending');
                const data = await response.json();
                if (data.success) {
                    const tbody = document.getElementById('dj-playlist-body');
                    if (data.requests.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-secondary">No tienes canciones en tu lista actual</td></tr>';
                    } else {
                        tbody.innerHTML = data.requests.map(req => `
                            <tr>
                                <td>${req.artist}</td>
                                <td>${req.song}</td>
                                <td><span class="badge bg-warning text-dark">${req.status}</span></td>
                                <td>
                                    <button class="btn btn-sm btn-success" onclick="updateStatus(${req.id}, 'mark_played')">Sonar</button>
                                    <button class="btn btn-sm btn-danger" onclick="updateStatus(${req.id}, 'delete')">Quitar</button>
                                </td>
                            </tr>
                        `).join('');
                    }
                }
            } catch (error) {
                console.error('Error fetching DJ playlist:', error);
            }
        }

        fetchRequests();
        fetchStats();
        updateNowPlaying();
        fetchAnnouncements();
        fetchTopRequesters();
        fetchDjPlaylist();
        setInterval(() => {
            fetchRequests();
            fetchStats();
            updateNowPlaying();
            fetchAnnouncements();
            fetchTopRequesters();
            fetchDjPlaylist();
        }, 15000);
    </script>
</body>
</html>
