<?php
/*
Arquivo: wp-content/themes/cancao-verdadeira/single-musica.php

Resumo:
Template principal para exibição de músicas.
Renderiza página completa estilo Spotify com capa, player integrado,
informações da música, sistema de favoritos, letra otimizada para SEO
e sincronização com player global.
Inclui também recomendação automática baseada no gênero.
Este arquivo é central para experiência do usuário e estratégia SEO.
*/

if (!defined('ABSPATH')) exit;

get_header();

if (have_posts()) :
while (have_posts()) : the_post();

$post_id = get_the_ID();

// META
$meta = function_exists('cancao_get_musica_meta') ? cancao_get_musica_meta($post_id) : [];

$mp3       = $meta['mp3'] ?? '';
$artista   = $meta['artista'] ?? '';
$views     = $meta['views'] ?? 0;
$favoritos = $meta['favoritos'] ?? 0;

$capa = get_the_post_thumbnail_url($post_id, 'large');
$titulo = get_the_title();

// GÊNERO
$generos = get_the_terms($post_id, 'genero');
$genero_slug = $generos[0]->slug ?? '';
?>

<div class="musica-page">

    <!-- HERO -->
    <div class="musica-hero">

        <img src="<?php echo esc_url($capa); ?>" class="musica-capa">

        <div class="musica-info">
            <h1><?php echo esc_html($titulo); ?></h1>
            <p><?php echo esc_html($artista); ?></p>

            <div class="musica-actions">
                <button class="btn-play"
                    data-mp3="<?php echo esc_url($mp3); ?>"
                    data-title="<?php echo esc_attr($titulo); ?>"
                    data-artist="<?php echo esc_attr($artista); ?>"
                    data-cover="<?php echo esc_url($capa); ?>">
                    ▶ Tocar
                </button>

                <span class="btn-favorito" data-id="<?php echo $post_id; ?>">
                    ❤️
                </span>
            </div>

            <div class="musica-meta">
                👁️ <?php echo number_format($views); ?>
                ❤️ <?php echo number_format($favoritos); ?>
            </div>
        </div>

    </div>


    <!-- LETRA (SEO + SYNC) -->
    <div class="musica-letra">

        <h2>Letra da música <?php echo esc_html($titulo); ?></h2>

        <div class="letra">
            <?php the_content(); ?>
        </div>

    </div>


    <!-- SOBRE (SEO) -->
    <div class="musica-sobre">

        <h2>Sobre a música</h2>
        <p>
            <?php echo esc_html($titulo); ?> é uma música do gênero 
            <?php echo esc_html($genero_slug); ?> interpretada por 
            <?php echo esc_html($artista); ?>.
        </p>

    </div>


    <!-- RECOMENDADAS -->
    <div class="musica-relacionadas">

        <h2>🔥 Você também pode gostar</h2>

        <div class="grid-musicas">

            <?php
            $relacionadas = new WP_Query([
                'post_type' => 'musica',
                'posts_per_page' => 6,
                'post__not_in' => [$post_id],
                'tax_query' => [
                    [
                        'taxonomy' => 'genero',
                        'field' => 'slug',
                        'terms' => $genero_slug
                    ]
                ]
            ]);

            if ($relacionadas->have_posts()) :
                while ($relacionadas->have_posts()) : $relacionadas->the_post();
                    get_template_part('template-parts/card', 'musica');
                endwhile;
                wp_reset_postdata();
            endif;
            ?>

        </div>

    </div>

</div>

<?php
endwhile;
endif;

get_footer();