<?php
// =============================================
// CONFIGURAÇÃO DO BANCO DE DADOS - RÁDIO TERÇO MARIANO
// =============================================
define('DB_HOST', '82.197.82.29');
define('DB_NAME', 'u489002097_joao');
define('DB_USER', 'u489002097_joao');
define('DB_PASS', 'Eunapolis@2025');

// =============================================
// CONEXÃO COM O BANCO (PDO)
// =============================================
try {
    $pdo = new PDO(
        "mysql:host=".DB_HOST.";dbname=".DB_NAME.";charset=utf8mb4", 
        DB_USER, 
        DB_PASS,
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_EMULATE_PREPARES => false
        ]
    );
    
    // Criar tabelas se não existirem
    initDatabase($pdo);
} catch (PDOException $e) {
    die("Erro ao conectar: " . $e->getMessage());
}

// =============================================
// FUNÇÃO PARA INICIALIZAR O BANCO DE DADOS
// =============================================
function initDatabase($pdo) {
    $queries = [
        // Tabela principal de músicas
        "CREATE TABLE IF NOT EXISTS radio_musicas (
            id INT AUTO_INCREMENT PRIMARY KEY,
            titulo VARCHAR(255) NOT NULL,
            artista VARCHAR(255) NOT NULL,
            arquivo VARCHAR(500) NOT NULL,
            categoria VARCHAR(100) DEFAULT 'Geral',
            duracao TIME NULL,
            data_upload TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            ativo TINYINT(1) DEFAULT 1,
            plays INT DEFAULT 0,
            INDEX idx_artista (artista),
            INDEX idx_categoria (categoria),
            INDEX idx_ativo (ativo)
        )",
        
        // Tabela de programas da rádio
        "CREATE TABLE IF NOT EXISTS radio_programas (
            id INT AUTO_INCREMENT PRIMARY KEY,
            nome VARCHAR(255) NOT NULL,
            descricao TEXT,
            horario TIME,
            dias_semana VARCHAR(50),
            apresentador VARCHAR(255),
            ativo TINYINT(1) DEFAULT 1
        )",
        
        // Tabela de pedidos de música
        "CREATE TABLE IF NOT EXISTS radio_pedidos (
            id INT AUTO_INCREMENT PRIMARY KEY,
            nome_ouvinte VARCHAR(255) NOT NULL,
            mensagem TEXT,
            musica_pedida VARCHAR(255),
            data_pedido TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            status ENUM('pendente', 'tocada') DEFAULT 'pendente'
        )",
        
        // Tabela de configurações
        "CREATE TABLE IF NOT EXISTS radio_config (
            id INT AUTO_INCREMENT PRIMARY KEY,
            nome_radio VARCHAR(255) DEFAULT 'Rádio Terço Mariano',
            slogan VARCHAR(500) DEFAULT 'Sua rádio católica online',
            stream_url VARCHAR(500),
            telefone_contato VARCHAR(20),
            email_contato VARCHAR(255)
        )"
    ];
    
    foreach ($queries as $query) {
        try {
            $pdo->exec($query);
        } catch (PDOException $e) {
            // Ignora erros de tabelas já existentes
        }
    }
    
    // Inserir configuração padrão
    $pdo->exec("INSERT IGNORE INTO radio_config (nome_radio, slogan) VALUES ('Rádio Terço Mariano', 'Sua rádio católica online')");
    
    // Inserir alguns programas padrão
    $programas = [
        ['Santo Terço', 'Oração do Santo Terço em comunidade', '18:00:00', 'Segunda a Sexta', 'Irmã Maria'],
        ['Missa Diária', 'Transmissão da Santa Missa', '07:00:00', 'Todos os dias', 'Padre João'],
        ['Momentos de Fé', 'Reflexões e mensagens de fé', '12:00:00', 'Segunda a Sexta', 'Irmão Carlos'],
        ['Músicas Sacras', 'Melhores músicas católicas', '20:00:00', 'Sábado e Domingo', 'Irmã Ana']
    ];
    
    $stmt = $pdo->prepare("INSERT IGNORE INTO radio_programas (nome, descricao, horario, dias_semana, apresentador) VALUES (?, ?, ?, ?, ?)");
    foreach ($programas as $programa) {
        $stmt->execute($programa);
    }
}

// =============================================
// PROCESSAMENTO DE FORMULÁRIOS
// =============================================
session_start();
$mensagem = '';
$erro = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['adicionar_musica'])) {
        $titulo = $_POST['titulo'] ?? '';
        $artista = $_POST['artista'] ?? '';
        $arquivo = $_POST['arquivo'] ?? '';
        $categoria = $_POST['categoria'] ?? 'Geral';
        
        if (!empty($titulo) && !empty($artista) && !empty($arquivo)) {
            $sql = "INSERT INTO radio_musicas (titulo, artista, arquivo, categoria) VALUES (?, ?, ?, ?)";
            $stmt = $pdo->prepare($sql);
            if ($stmt->execute([$titulo, $artista, $arquivo, $categoria])) {
                $mensagem = "Música adicionada com sucesso!";
            } else {
                $erro = "Erro ao adicionar música.";
            }
        } else {
            $erro = "Preencha todos os campos!";
        }
    }
    
    if (isset($_POST['excluir_musica'])) {
        $id = $_POST['id'] ?? '';
        if (!empty($id)) {
            $sql = "DELETE FROM radio_musicas WHERE id = ?";
            $stmt = $pdo->prepare($sql);
            if ($stmt->execute([$id])) {
                $mensagem = "Música excluída com sucesso!";
            } else {
                $erro = "Erro ao excluir música.";
            }
        }
    }
    
    if (isset($_POST['fazer_pedido'])) {
        $nome = $_POST['nome'] ?? '';
        $mensagem_pedido = $_POST['mensagem'] ?? '';
        $musica = $_POST['musica'] ?? '';
        
        if (!empty($nome) && !empty($musica)) {
            $sql = "INSERT INTO radio_pedidos (nome_ouvinte, mensagem, musica_pedida) VALUES (?, ?, ?)";
            $stmt = $pdo->prepare($sql);
            if ($stmt->execute([$nome, $mensagem_pedido, $musica])) {
                $mensagem = "Seu pedido foi enviado! Obrigado!";
            } else {
                $erro = "Erro ao enviar pedido.";
            }
        } else {
            $erro = "Preencha seu nome e a música desejada!";
        }
    }
}

// =============================================
// BUSCAR DADOS DO BANCO
// =============================================
// Músicas para o player
$sqlPlayer = "SELECT * FROM radio_musicas WHERE ativo = 1 ORDER BY RAND() LIMIT 15";
$playlist = $pdo->query($sqlPlayer)->fetchAll();

// Todas as músicas para administração
$sqlMusicas = "SELECT * FROM radio_musicas WHERE ativo = 1 ORDER BY titulo";
$musicas = $pdo->query($sqlMusicas)->fetchAll();

// Programas da rádio
$sqlProgramas = "SELECT * FROM radio_programas WHERE ativo = 1 ORDER BY horario";
$programas = $pdo->query($sqlProgramas)->fetchAll();

// Pedidos pendentes
$sqlPedidos = "SELECT * FROM radio_pedidos WHERE status = 'pendente' ORDER BY data_pedido DESC LIMIT 10";
$pedidos = $pdo->query($sqlPedidos)->fetchAll();

// Configurações
$config = $pdo->query("SELECT * FROM radio_config LIMIT 1")->fetch();
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $config['nome_radio'] ?? 'Rádio Terço Mariano'; ?></title>
    <style>
        :root {
            --primary-color: #8B0000;
            --secondary-color: #2C1E1E;
            --accent-color: #D4AF37;
            --light-color: #FFF8F0;
            --dark-color: #5E1914;
            --success-color: #4E7C3A;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, var(--secondary-color), var(--dark-color));
            color: white;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background: rgba(0, 0, 0, 0.8);
            padding: 1rem 0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            border-bottom: 3px solid var(--accent-color);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .logo {
            font-size: 2rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo i {
            color: var(--accent-color);
        }
        
        .slogan {
            font-style: italic;
            opacity: 0.8;
            margin-top: 5px;
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 20px;
            transition: all 0.3s;
            border: 1px solid transparent;
        }
        
        nav ul li a:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--accent-color);
        }
        
        .player-section {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 2rem;
            margin: 2rem 0;
            text-align: center;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }
        
        .player-title {
            color: var(--accent-color);
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
        }
        
        .player-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 2rem 0;
            gap: 15px;
        }
        
        .control-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .control-btn:hover {
            background: var(--accent-color);
            transform: scale(1.1);
        }
        
        .control-btn.play {
            background: var(--accent-color);
            width: 70px;
            height: 70px;
            font-size: 1.8rem;
        }
        
        .control-btn.play:hover {
            background: #b8941f;
        }
        
        .volume-control {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1rem;
            gap: 10px;
        }
        
        .volume-slider {
            width: 150px;
        }
        
        .now-playing {
            margin-top: 2rem;
            padding: 1.5rem;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            border-left: 4px solid var(--accent-color);
        }
        
        .song-title {
            font-weight: bold;
            font-size: 1.3rem;
            color: var(--accent-color);
        }
        
        .song-artist {
            opacity: 0.9;
            font-size: 1.1rem;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
            margin: 2rem 0;
        }
        
        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(212, 175, 55, 0.2);
        }
        
        .card h3 {
            color: var(--accent-color);
            margin-bottom: 1rem;
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 0.5rem;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.3);
            color: white;
            font-size: 1rem;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--accent-color);
        }
        
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
            text-decoration: none;
        }
        
        .btn:hover {
            background: var(--accent-color);
            transform: translateY(-2px);
        }
        
        .btn-success {
            background: var(--success-color);
        }
        
        .btn-danger {
            background: #A52A2A;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .table th,
        .table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .table th {
            background: rgba(0, 0, 0, 0.3);
            color: var(--accent-color);
        }
        
        .playlist {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .playlist-item {
            padding: 0.75rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .playlist-item:hover {
            background: rgba(212, 175, 55, 0.1);
        }
        
        .playlist-item.active {
            background: var(--primary-color);
            border-left: 3px solid var(--accent-color);
        }
        
        .programa-item {
            padding: 0.75rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
        }
        
        .programa-horario {
            color: var(--accent-color);
            font-weight: bold;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 1rem;
            border-left: 4px solid transparent;
        }
        
        .alert-success {
            background: rgba(78, 124, 58, 0.3);
            border-left-color: var(--success-color);
        }
        
        .alert-danger {
            background: rgba(165, 42, 42, 0.3);
            border-left-color: #A52A2A;
        }
        
        footer {
            background: rgba(0, 0, 0, 0.8);
            text-align: center;
            padding: 2rem 0;
            margin-top: 3rem;
            border-top: 3px solid var(--accent-color);
        }
        
        .progress-container {
            margin-top: 1rem;
        }
        
        .progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress {
            width: 0%;
            height: 100%;
            background: var(--accent-color);
            transition: width 0.1s;
        }
        
        .progress-time {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo-area">
                    <div class="logo">
                        <i>??</i> <?php echo $config['nome_radio'] ?? 'Rádio Terço Mariano'; ?>
                    </div>
                    <div class="slogan"><?php echo $config['slogan'] ?? 'Sua rádio católica online'; ?></div>
                </div>
                <nav>
                    <ul>
                        <li><a href="#player">?? Player</a></li>
                        <li><a href="#programacao">?? Programação</a></li>
                        <li><a href="#pedidos">?? Pedidos</a></li>
                        <li><a href="#admin">?? Admin</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <div class="container">
        <!-- Mensagens -->
        <?php if (!empty($mensagem)): ?>
            <div class="alert alert-success"><?php echo $mensagem; ?></div>
        <?php endif; ?>
        
        <?php if (!empty($erro)): ?>
            <div class="alert alert-danger"><?php echo $erro; ?></div>
        <?php endif; ?>

        <!-- Player de Rádio -->
        <section id="player" class="player-section">
            <h2 class="player-title">?? <?php echo $config['nome_radio'] ?? 'Rádio Terço Mariano'; ?> - Ao Vivo</h2>
            
            <div class="player-controls">
                <button class="control-btn" id="prev-btn">?</button>
                <button class="control-btn play" id="play-btn">?</button>
                <button class="control-btn" id="next-btn">?</button>
            </div>
            
            <div class="volume-control">
                <span>??</span>
                <input type="range" min="0" max="100" value="50" class="volume-slider" id="volume-slider">
            </div>
            
            <div class="now-playing">
                <div id="current-song">
                    <div class="song-title">Selecione uma música para começar</div>
                    <div class="song-artist"><?php echo $config['nome_radio'] ?? 'Rádio Terço Mariano'; ?></div>
                </div>
            </div>
            
            <div class="progress-container">
                <div class="progress-time">
                    <span id="current-time">0:00</span>
                    <span id="duration">0:00</span>
                </div>
                <div class="progress-bar">
                    <div class="progress" id="progress-bar"></div>
                </div>
            </div>
        </section>

        <div class="content-grid">
            <!-- Coluna Principal -->
            <div class="main-content">
                <!-- Playlist -->
                <section class="card">
                    <h3>?? Playlist do Dia</h3>
                    <div class="playlist">
                        <?php if (count($playlist) > 0): ?>
                            <?php foreach ($playlist as $index => $musica): ?>
                                <div class="playlist-item" data-index="<?php echo $index; ?>" 
                                     data-title="<?php echo htmlspecialchars($musica['titulo']); ?>" 
                                     data-artist="<?php echo htmlspecialchars($musica['artista']); ?>" 
                                     data-src="<?php echo htmlspecialchars($musica['arquivo']); ?>">
                                    <div class="song-title"><?php echo htmlspecialchars($musica['titulo']); ?></div>
                                    <div class="song-artist"><?php echo htmlspecialchars($musica['artista']); ?></div>
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <p>Nenhuma música na playlist. Adicione músicas no painel administrativo.</p>
                        <?php endif; ?>
                    </div>
                </section>

                <!-- Pedidos de Música -->
                <section id="pedidos" class="card">
                    <h3>?? Faça seu Pedido Musical</h3>
                    <form method="POST">
                        <div class="form-group">
                            <label for="nome">Seu Nome</label>
                            <input type="text" id="nome" name="nome" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="musica">Música Desejada</label>
                            <input type="text" id="musica" name="musica" class="form-control" placeholder="Nome da música e artista" required>
                        </div>
                        <div class="form-group">
                            <label for="mensagem">Mensagem (opcional)</label>
                            <textarea id="mensagem" name="mensagem" class="form-control" placeholder="Deixe uma mensagem especial..."></textarea>
                        </div>
                        <button type="submit" name="fazer_pedido" class="btn">?? Enviar Pedido</button>
                    </form>
                </section>
            </div>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Programação -->
                <section id="programacao" class="card">
                    <h3>?? Programação</h3>
                    <?php if (count($programas) > 0): ?>
                        <?php foreach ($programas as $programa): ?>
                            <div class="programa-item">
                                <div>
                                    <strong><?php echo htmlspecialchars($programa['nome']); ?></strong>
                                    <div style="font-size: 0.9rem; opacity: 0.8;"><?php echo htmlspecialchars($programa['apresentador']); ?></div>
                                </div>
                                <div class="programa-horario"><?php echo date('H:i', strtotime($programa['horario'])); ?></div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <p>Programação em atualização...</p>
                    <?php endif; ?>
                </section>

                <!-- Pedidos Recentes -->
                <section class="card">
                    <h3>?? Pedidos Recentes</h3>
                    <?php if (count($pedidos) > 0): ?>
                        <?php foreach ($pedidos as $pedido): ?>
                            <div style="padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);">
                                <strong><?php echo htmlspecialchars($pedido['nome_ouvinte']); ?></strong>
                                <div style="font-size: 0.9rem;"><?php echo htmlspecialchars($pedido['musica_pedida']); ?></div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <p>Nenhum pedido recente.</p>
                    <?php endif; ?>
                </section>
            </div>
        </div>

        <!-- Painel Administrativo -->
        <section id="admin" class="card">
            <h3>?? Painel Administrativo - Gerenciar Músicas</h3>
            
            <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;">
                <!-- Formulário para adicionar música -->
                <div>
                    <h4>Adicionar Nova Música</h4>
                    <form method="POST">
                        <div class="form-group">
                            <label for="titulo">Título da Música</label>
                            <input type="text" id="titulo" name="titulo" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="artista">Artista</label>
                            <input type="text" id="artista" name="artista" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="categoria">Categoria</label>
                            <select id="categoria" name="categoria" class="form-control">
                                <option value="Geral">Geral</option>
                                <option value="Música Sacra">Música Sacra</option>
                                <option value="Hinos Católicos">Hinos Católicos</option>
                                <option value="Canto Gregoriano">Canto Gregoriano</option>
                                <option value="Música Contemporânea">Música Contemporânea</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="arquivo">URL do Arquivo de Áudio</label>
                            <input type="text" id="arquivo" name="arquivo" class="form-control" placeholder="https://exemplo.com/musica.mp3" required>
                        </div>
                        <button type="submit" name="adicionar_musica" class="btn btn-success">? Adicionar Música</button>
                    </form>
                </div>
                
                <!-- Lista de músicas -->
                <div>
                    <h4>Músicas Cadastradas (<?php echo count($musicas); ?>)</h4>
                    <?php if (count($musicas) > 0): ?>
                        <div style="max-height: 400px; overflow-y: auto;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Título</th>
                                        <th>Artista</th>
                                        <th>Categoria</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($musicas as $musica): ?>
                                        <tr>
                                            <td><?php echo htmlspecialchars($musica['titulo']); ?></td>
                                            <td><?php echo htmlspecialchars($musica['artista']); ?></td>
                                            <td><?php echo htmlspecialchars($musica['categoria']); ?></td>
                                            <td>
                                                <form method="POST" style="display: inline;">
                                                    <input type="hidden" name="id" value="<?php echo $musica['id']; ?>">
                                                    <button type="submit" name="excluir_musica" class="btn btn-danger" onclick="return confirm('Tem certeza que deseja excluir esta música?')">??? Excluir</button>
                                                </form>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    <?php else: ?>
                        <p>Nenhuma música cadastrada ainda.</p>
                    <?php endif; ?>
                </div>
            </div>
        </section>
    </div>

    <footer>
        <div class="container">
            <p>&copy; <?php echo date('Y'); ?> <?php echo $config['nome_radio'] ?? 'Rádio Terço Mariano'; ?> - Todos os direitos reservados</p>
            <p style="opacity: 0.7; margin-top: 10px;"><?php echo $config['slogan'] ?? 'Sua rádio católica online'; ?></p>
        </div>
    </footer>

    <script>
        // Elementos do player
        const playBtn = document.getElementById('play-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const volumeSlider = document.getElementById('volume-slider');
        const currentSongElement = document.getElementById('current-song');
        const progressBar = document.getElementById('progress-bar');
        const currentTimeElement = document.getElementById('current-time');
        const durationElement = document.getElementById('duration');
        
        // Estado do player
        let audio = new Audio();
        let isPlaying = false;
        let currentSongIndex = 0;
        let playlistItems = document.querySelectorAll('.playlist-item');
        
        // Função para carregar e tocar uma música
        function loadSong(index) {
            if (playlistItems.length === 0) return;
            
            const item = playlistItems[index];
            const title = item.getAttribute('data-title');
            const artist = item.getAttribute('data-artist');
            const src = item.getAttribute('data-src');
            
            // Atualizar UI
            currentSongElement.innerHTML = `
                <div class="song-title">${title}</div>
                <div class="song-artist">${artist}</div>
            `;
            
            // Remover classe active de todos os itens
            playlistItems.forEach(item => item.classList.remove('active'));
            // Adicionar classe active ao item atual
            item.classList.add('active');
            
            // Carregar áudio
            audio.src = src;
            audio.load();
            
            // Atualizar índice atual
            currentSongIndex = index;
            
            // Se estava tocando, continuar tocando
            if (isPlaying) {
                playSong();
            }
        }
        
        // Função para tocar música
        function playSong() {
            audio.play();
            isPlaying = true;
            playBtn.innerHTML = '?';
        }
        
        // Função para pausar música
        function pauseSong() {
            audio.pause();
            isPlaying = false;
            playBtn.innerHTML = '?';
        }
        
        // Função para próxima música
        function nextSong() {
            currentSongIndex = (currentSongIndex + 1) % playlistItems.length;
            loadSong(currentSongIndex);
            if (isPlaying) playSong();
        }
        
        // Função para música anterior
        function prevSong() {
            currentSongIndex = (currentSongIndex - 1 + playlistItems.length) % playlistItems.length;
            loadSong(currentSongIndex);
            if (isPlaying) playSong();
        }
        
        // Event Listeners
        playBtn.addEventListener('click', () => {
            if (playlistItems.length === 0) {
                alert('Adicione músicas à playlist primeiro!');
                return;
            }
            
            if (audio.src === '') {
                loadSong(0);
            }
            
            isPlaying ? pauseSong() : playSong();
        });
        
        nextBtn.addEventListener('click', nextSong);
        prevBtn.addEventListener('click', prevSong);
        
        volumeSlider.addEventListener('input', () => {
            audio.volume = volumeSlider.value / 100;
        });
        
        // Atualizar barra de progresso
        audio.addEventListener('timeupdate', () => {
            const { currentTime, duration } = audio;
            
            // Atualizar barra de progresso
            const progressPercent = (currentTime / duration) * 100;
            progressBar.style.width = `${progressPercent}%`;
            
            // Atualizar tempo
            currentTimeElement.textContent = formatTime(currentTime);
            
            if (!isNaN(duration)) {
                durationElement.textContent = formatTime(duration);
            }
        });
        
        // Quando o áudio terminar, tocar próxima música
        audio.addEventListener('ended', nextSong);
        
        // Formatar tempo (segundos para MM:SS)
        function formatTime(seconds) {
            const min = Math.floor(seconds / 60);
            const sec = Math.floor(seconds % 60);
            return `${min}:${sec < 10 ? '0' : ''}${sec}`;
        }
        
        // Adicionar evento de clique aos itens da playlist
        playlistItems.forEach((item, index) => {
            item.addEventListener('click', () => {
                loadSong(index);
                if (!isPlaying) {
                    playSong();
                }
            });
        });
        
        // Carregar primeira música se houver playlist
        if (playlistItems.length > 0) {
            loadSong(0);
        }
        
        // Smooth scroll para âncoras
        document.querySelectorAll('nav a').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html>