<?php
declare(strict_types=1);

$track = $_GET['track'] ?? '';
$artist = $_GET['artist'] ?? '';

?>
<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Letras - <?= htmlspecialchars($track) ?> - 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;
        }

        [data-theme="light"] {
            --glass-bg: rgba(255, 255, 255, 0.9);
            --glass-border: rgba(0, 0, 0, 0.1);
            --text-color: #1a1a1a;
        }

        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);
        }

        .lyrics-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: 2rem;
            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: 1.8rem; font-weight: 800; color: var(--primary-color); }
        h2 { margin: 0.5rem 0 0; font-size: 1.1rem; opacity: 0.8; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }

        .lyrics-content {
            font-size: 1.2rem;
            line-height: 1.8;
            white-space: pre-wrap;
            text-align: center;
            margin-top: 2rem;
            min-height: 300px;
        }

        .loading-spinner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            margin-top: 5rem;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid var(--glass-border);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        .error-msg { color: #ff4444; text-align: center; margin-top: 5rem; }
        
        .search-fallback {
            margin-top: 2rem;
            text-align: center;
        }
        
        .btn-search {
            background: var(--primary-color);
            color: #000;
            text-decoration: none;
            padding: 0.8rem 1.5rem;
            border-radius: 12px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: transform 0.2s;
        }
        
        .btn-search:hover { transform: translateY(-2px); }

    </style>
</head>
<body>
    <div class="background"></div>

    <div class="lyrics-container">
        <header>
            <a href="index.php" class="back-btn"><i class="bi bi-arrow-left"></i></a>
            <h1><?= htmlspecialchars($track ?: 'Letras') ?></h1>
            <?php if ($artist): ?><h2><?= htmlspecialchars($artist) ?></h2><?php endif; ?>
        </header>

        <div id="lyrics-body" class="lyrics-content">
            <div class="loading-spinner">
                <div class="spinner"></div>
                <p>Buscando letra...</p>
            </div>
        </div>

        <div id="fallback" class="search-fallback" style="display: none;">
            <p style="margin-bottom: 1rem; opacity: 0.7;">No pudimos encontrar la letra automáticamente.</p>
            <a href="https://www.google.com/search?q=<?= urlencode($track . ' ' . $artist . ' letras') ?>" target="_blank" class="btn-search">
                <i class="bi bi-google"></i> BUSCAR EN GOOGLE
            </a>
        </div>
    </div>

    <script>
        const theme = localStorage.getItem('theme') || 'dark';
        document.documentElement.setAttribute('data-theme', theme);

        const track = "<?= addslashes($track) ?>";
        const artist = "<?= addslashes($artist) ?>";

        async function fetchLyrics() {
            if (!track || !artist) {
                document.getElementById('lyrics-body').innerHTML = '<p class="error-msg">Información de canción insuficiente.</p>';
                return;
            }

            try {
                const response = await fetch(`https://api.lyrics.ovh/v1/${encodeURIComponent(artist)}/${encodeURIComponent(track)}`);
                const data = await response.json();

                if (data.lyrics) {
                    document.getElementById('lyrics-body').textContent = data.lyrics;
                } else {
                    showFallback();
                }
            } catch (error) {
                console.error('Error fetching lyrics:', error);
                showFallback();
            }
        }

        function showFallback() {
            document.getElementById('lyrics-body').innerHTML = '<p class="error-msg">Letra no encontrada.</p>';
            document.getElementById('fallback').style.display = 'block';
        }

        if (track && artist) {
            fetchLyrics();
        } else {
            document.getElementById('lyrics-body').innerHTML = '<p class="error-msg">No hay ninguna canción reproduciéndose ahora mismo.</p>';
        }
    </script>
</body>
</html>
