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

{% block content %}
<div class="container py-5">
    <div class="row align-items-center min-vh-75">
        <!-- Hero & Player Section -->
        <div class="col-lg-6 mb-5 mb-lg-0">
            <h1 class="display-3 fw-bold mb-4">
                Siente el <span style="color: var(--accent-primary);">Ritmo</span> de Lili Records
            </h1>
            <p class="lead text-muted mb-5">
                La radio que te acompaña en cada momento. Música, entrevistas y el mejor contenido en vivo directamente en tus oídos.
            </p>
            
            <div class="glass p-4 p-md-5 position-relative overflow-hidden">
                <!-- Decorative Circle -->
                <div class="position-absolute" style="top: -20px; right: -20px; width: 100px; height: 100px; background: var(--accent-secondary); filter: blur(60px); opacity: 0.3;"></div>
                
                <div class="d-flex align-items-center mb-4">
                    <div class="show-art me-4 position-relative">
                        {% if current_show and current_show.image_url %}
                        <img src="{{ current_show.image_url }}" alt="{{ current_show.title }}" class="rounded-circle shadow-lg" style="width: 120px; height: 120px; object-fit: cover; border: 4px solid rgba(255,255,255,0.1);">
                        {% else %}
                        <div class="rounded-circle shadow-lg d-flex align-items-center justify-content-center bg-dark" style="width: 120px; height: 120px; border: 4px solid rgba(255,255,255,0.1);">
                            <i class="fas fa-music fa-3x text-muted"></i>
                        </div>
                        {% endif %}
                        <div class="live-badge position-absolute top-0 start-0 bg-danger text-white px-2 py-1 rounded-pill" style="font-size: 0.7rem; font-weight: bold;">LIVE</div>
                    </div>
                    <div>
                        <h3 class="mb-1">{% if current_show %}{{ current_show.title }}{% else %}Música Continua{% endif %}</h3>
                        <p class="text-muted mb-0">{% if current_show %}Con {{ current_show.host }}{% else %}Lili Records Radio{% endif %}</p>
                    </div>
                </div>

                <!-- Custom Audio Player -->
                <div class="player-controls">
                    {% if active_stream %}
                    <audio id="radio-player" src="{{ active_stream.url }}"></audio>
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <button id="play-btn" class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 64px; height: 64px;">
                            <i class="fas fa-play fa-lg"></i>
                        </button>
                        <div class="flex-grow-1 mx-4">
                            <div class="progress bg-dark" style="height: 6px; border-radius: 3px;">
                                <div id="player-progress" class="progress-bar" style="width: 0%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));"></div>
                            </div>
                        </div>
                        <div class="volume-control d-flex align-items-center">
                            <i class="fas fa-volume-up text-muted me-2"></i>
                            <input type="range" id="volume-slider" class="form-range" min="0" max="1" step="0.1" value="0.8" style="width: 80px;">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between text-muted small">
                        <span id="status-text">Listo para transmitir</span>
                        <span id="stream-name">{{ active_stream.name }}</span>
                    </div>
                    {% else %}
                    <div class="alert alert-dark border-0 glass text-center">
                        <i class="fas fa-exclamation-triangle me-2"></i> No hay transmisiones activas en este momento.
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- App Features Section -->
        <div class="col-lg-5 offset-lg-1">
            <div class="row g-4">
                <div class="col-12">
                    <div class="glass p-4 d-flex align-items-start">
                        <div class="icon-box bg-primary bg-opacity-10 p-3 rounded-4 me-3">
                            <i class="fas fa-mobile-alt text-primary fa-xl"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold">Optimizado para iOS</h5>
                            <p class="text-muted mb-0">Disfruta de la mejor experiencia móvil con nuestra interfaz diseñada para tu iPhone.</p>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="glass p-4 d-flex align-items-start">
                        <div class="icon-box bg-rose bg-opacity-10 p-3 rounded-4 me-3" style="--bg-opacity: 0.1;">
                            <i class="fas fa-calendar-alt text-rose fa-xl" style="color: var(--accent-secondary);"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold">Programación 24/7</h5>
                            <p class="text-muted mb-0">Nunca te pierdas tus shows favoritos con nuestra grilla de programación actualizada.</p>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="glass p-4 d-flex align-items-start">
                        <div class="icon-box bg-info bg-opacity-10 p-3 rounded-4 me-3">
                            <i class="fas fa-podcast text-info fa-xl"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold">Episodios On-Demand</h5>
                            <p class="text-muted mb-0">¿Te perdiste un programa? Escúchalo cuando quieras en nuestra sección de podcasts.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const player = document.getElementById('radio-player');
        const playBtn = document.getElementById('play-btn');
        const playIcon = playBtn ? playBtn.querySelector('i') : null;
        const volumeSlider = document.getElementById('volume-slider');
        const statusText = document.getElementById('status-text');
        const progressBar = document.getElementById('player-progress');

        if (player) {
            playBtn.addEventListener('click', function() {
                if (player.paused) {
                    player.play().then(() => {
                        playIcon.classList.remove('fa-play');
                        playIcon.classList.add('fa-pause');
                        statusText.innerText = 'Transmitiendo en vivo...';
                        startVisualizer();
                    }).catch(err => {
                        console.error("Error playing stream:", err);
                        statusText.innerText = 'Error al conectar';
                    });
                } else {
                    player.pause();
                    playIcon.classList.remove('fa-pause');
                    playIcon.classList.add('fa-play');
                    statusText.innerText = 'Pausado';
                    stopVisualizer();
                }
            });

            volumeSlider.addEventListener('input', function() {
                player.volume = this.value;
            });

            let progressInterval;
            function startVisualizer() {
                let width = 0;
                progressInterval = setInterval(() => {
                    width = (width + 1) % 100;
                    progressBar.style.width = width + '%';
                }, 100);
            }

            function stopVisualizer() {
                clearInterval(progressInterval);
                progressBar.style.width = '0%';
            }
        }
    });
</script>

<style>
    .min-vh-75 { min-height: 75vh; }
    .text-rose { color: var(--accent-secondary); }
    .bg-rose { background-color: var(--accent-secondary); }
    
    .progress {
        overflow: visible;
    }
    
    .progress-bar {
        transition: width 0.1s linear;
        box-shadow: 0 0 10px var(--accent-primary);
    }

    input[type=range]::-webkit-slider-runnable-track {
        background: rgba(255,255,255,0.1);
        height: 4px;
        border-radius: 2px;
    }
    
    input[type=range]::-webkit-slider-thumb {
        background: var(--accent-primary);
        margin-top: -6px;
    }
</style>
{% endblock %}
