{% extends "base.html" %}
{% load static %}

{% block title %}{{ config.title }}{% endblock %}

{% block head %}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{% endblock %}

{% block content %}
<div class="radio-container">
    <header>
        <h1 class="brand-font" style="color: var(--primary-yellow); margin-bottom: 0;">{{ config.title }}</h1>
        <p style="color: var(--primary-red); letter-spacing: 2px; font-weight: 600;">MÚSICA 24/7</p>
    </header>

    <div class="disc-container">
        <div class="disc" id="radio-disc"></div>
    </div>

    <div class="controls">
        <button id="play-btn" class="btn-play">
            <i class="fas fa-play" id="play-icon"></i>
        </button>
        <p id="status-text" style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.7;">Presiona Play para escuchar</p>
    </div>

    <div class="social-links">
        <a href="https://wa.me/{{ config.whatsapp_number|cut:' '|cut:'+' }}" class="social-icon whatsapp" target="_blank" title="WhatsApp">
            <i class="fab fa-whatsapp"></i>
        </a>
        <a href="{{ config.facebook_url }}" class="social-icon facebook" target="_blank" title="Facebook">
            <i class="fab fa-facebook-f"></i>
        </a>
        <a href="{{ config.tiktok_url }}" class="social-icon tiktok" target="_blank" title="TikTok">
            <i class="fab fa-tiktok"></i>
        </a>
    </div>

    <audio id="radio-player">
        <source src="{{ config.stream_url }}" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div>

<a href="/admin/" class="admin-link">Admin Panel</a>

<script>
    const player = document.getElementById('radio-player');
    const playBtn = document.getElementById('play-btn');
    const playIcon = document.getElementById('play-icon');
    const disc = document.getElementById('radio-disc');
    const statusText = document.getElementById('status-text');

    let isPlaying = false;

    playBtn.addEventListener('click', () => {
        if (!isPlaying) {
            player.play().then(() => {
                isPlaying = true;
                playIcon.classList.remove('fa-play');
                playIcon.classList.add('fa-pause');
                disc.classList.add('playing');
                statusText.innerText = 'Transmitiendo en vivo...';
            }).catch(error => {
                console.error("Playback error:", error);
                statusText.innerText = 'Error al cargar el stream.';
            });
        } else {
            player.pause();
            isPlaying = false;
            playIcon.classList.remove('fa-pause');
            playIcon.classList.add('fa-play');
            disc.classList.remove('playing');
            statusText.innerText = 'Presiona Play para escuchar';
        }
    });
</script>
{% endblock %}
