<?php

add_shortcode('radio_player_laranja', function () {
    static $instance = 0;
    static $printed_css = false;

    $instance++;
    $id = 'rpl-player-' . $instance;

    ob_start();

    if (!$printed_css) {
        $printed_css = true;
        ?>
        <style>
            .rpl-player,
            .rpl-player * {
                box-sizing: border-box;
            }

            .rpl-player {
                --h: clamp(86px, 10vw, 132px);
                width: 100%;
                max-width: 1180px;
                margin: 18px auto;
                padding: calc(var(--h) * 0.1);
                display: flex;
                align-items: center;
                gap: calc(var(--h) * 0.1);
                background: #f5630a;
                border-radius: 999px;
                box-shadow: 0 18px 40px rgba(245, 99, 10, 0.22);
                font-family: Gotham, sans-serif;
            }

            .rpl-toggle {
                width: calc(var(--h) * 0.78);
                height: calc(var(--h) * 0.78);
                border: none;
                border-radius: 999px;
                background: #fff;
                color: #ff7109;
                cursor: pointer;
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }

            .rpl-toggle svg {
                width: 42%;
                height: 42%;
                display: block;
                stroke: currentColor;
                fill: none;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .rpl-icon-on {
                display: none;
            }

            .rpl-player.is-playing .rpl-icon-off {
                display: none;
            }

            .rpl-player.is-playing .rpl-icon-on {
                display: block;
            }

            .rpl-content {
                flex: 1 1 auto;
                min-width: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px;
            }

            .rpl-info {
                min-width: 0;
            }

            .rpl-live {
                display: flex;
                align-items: center;
                gap: 10px;
                color: rgba(255,255,255,0.88);
                font-size: clamp(11px, 1.2vw, 17px);
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                line-height: 1;
            }

            .rpl-dot {
                width: clamp(8px, 1vw, 14px);
                height: clamp(8px, 1vw, 14px);
                border-radius: 50%;
                background: #8debaF;
                box-shadow: 0 0 0 4px rgba(141, 235, 175, 0.18);
                flex: 0 0 auto;
            }

            .rpl-title {
                margin-top: 6px;
                color: #fff;
                font-size: clamp(28px, 4vw, 54px);
                font-weight: 800;
                line-height: 0.95;
                letter-spacing: -0.03em;
                white-space: nowrap;
            }

            .rpl-stations {
                display: flex;
                gap: calc(var(--h) * 0.08);
                flex: 0 0 auto;
            }

            .rpl-station {
                border: none;
                min-width: calc(var(--h) * 1.55);
                height: calc(var(--h) * 0.78);
                padding: 0 22px;
                border-radius: 999px;
                background: rgba(255,255,255,0.2);
                color: rgba(255,255,255,0.85);
                font-family: inherit;
                font-size: clamp(22px, 2.8vw, 46px);
                font-weight: 700;
                line-height: 1;
                cursor: pointer;
            }

            .rpl-station.is-active {
                background: #fff;
                color: #f5630a;
            }

            .rpl-player audio {
                display: none;
            }

            @media (max-width: 760px) {
                .rpl-player {
                    border-radius: 28px;
                    padding: 14px;
                }

                .rpl-content {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .rpl-stations {
                    width: 100%;
                }

                .rpl-station {
                    flex: 1 1 0;
                    min-width: 0;
                }

                .rpl-title {
                    white-space: normal;
                }
            }
        </style>
        <?php
    }
    ?>

    <div class="rpl-player" id="<?php echo esc_attr($id); ?>">
        <button class="rpl-toggle" type="button" aria-label="Tocar rádio" aria-pressed="false">
            <svg class="rpl-icon-off" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M4 10v4h4l5 4V6L8 10H4z"></path>
                <path d="M16.5 8.5l5 5"></path>
                <path d="M21.5 8.5l-5 5"></path>
            </svg>
            <svg class="rpl-icon-on" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M4 10v4h4l5 4V6L8 10H4z"></path>
                <path d="M16 9.5a4.5 4.5 0 0 1 0 5"></path>
                <path d="M18.8 7a8 8 0 0 1 0 10"></path>
            </svg>
        </button>

        <div class="rpl-content">
            <div class="rpl-info">
                <div class="rpl-live">
                    <span class="rpl-dot"></span>
                    <span>Ao Vivo</span>
                </div>
                <div class="rpl-title">91.7 FM</div>
            </div>

            <div class="rpl-stations">
                <button class="rpl-station is-active" type="button" data-key="917" data-title="91.7 FM" aria-pressed="true">91.7</button>
                <button class="rpl-station" type="button" data-key="107" data-title="107.1 FM" aria-pressed="false">107</button>
            </div>
        </div>

        <audio class="rpl-audio rpl-audio-917" preload="none" src="https://audio.heek.com.br/am1010"></audio>
        <audio class="rpl-audio rpl-audio-107" preload="none" src="https://audio.heek.com.br/107fm"></audio>
    </div>

    <script>
        (function () {
            var root = document.getElementById('<?php echo esc_js($id); ?>');
            if (!root || root.dataset.ready === '1') return;
            root.dataset.ready = '1';

            var toggle = root.querySelector('.rpl-toggle');
            var title = root.querySelector('.rpl-title');
            var buttons = root.querySelectorAll('.rpl-station');
            var audios = {
                '917': root.querySelector('.rpl-audio-917'),
                '107': root.querySelector('.rpl-audio-107')
            };
            var currentKey = '917';

            function setPlayingState(isPlaying) {
                if (isPlaying) {
                    root.classList.add('is-playing');
                    toggle.setAttribute('aria-pressed', 'true');
                    toggle.setAttribute('aria-label', 'Pausar rádio');
                } else {
                    root.classList.remove('is-playing');
                    toggle.setAttribute('aria-pressed', 'false');
                    toggle.setAttribute('aria-label', 'Tocar rádio');
                }
            }

            function setActiveStation(key) {
                currentKey = key;

                for (var i = 0; i < buttons.length; i++) {
                    var active = buttons[i].getAttribute('data-key') === key;
                    buttons[i].classList.toggle('is-active', active);
                    buttons[i].setAttribute('aria-pressed', active ? 'true' : 'false');

                    if (active) {
                        title.textContent = buttons[i].getAttribute('data-title');
                    }
                }
            }

            function pauseOtherAudios(exceptKey) {
                for (var key in audios) {
                    if (audios.hasOwnProperty(key) && key !== exceptKey && audios[key]) {
                        audios[key].pause();
                    }
                }
            }

            function playCurrent() {
                var audio = audios[currentKey];
                if (!audio) return;

                pauseOtherAudios(currentKey);

                var promise = audio.play();

                if (promise && typeof promise.then === 'function') {
                    promise.then(function () {
                        setPlayingState(true);
                    }).catch(function () {
                        setPlayingState(false);
                    });
                } else {
                    setPlayingState(true);
                }
            }

            function toggleCurrent() {
                var audio = audios[currentKey];
                if (!audio) return;

                if (audio.paused) {
                    playCurrent();
                } else {
                    audio.pause();
                    setPlayingState(false);
                }
            }

            toggle.addEventListener('click', function () {
                toggleCurrent();
            });

            for (var i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener('click', function () {
                    setActiveStation(this.getAttribute('data-key'));
                    playCurrent();
                });
            }

            for (var key in audios) {
                if (audios.hasOwnProperty(key) && audios[key]) {
                    audios[key].addEventListener('play', function () {
                        setPlayingState(true);
                    });

                    audios[key].addEventListener('pause', function () {
                        var activeAudio = audios[currentKey];
                        if (!activeAudio || activeAudio.paused) {
                            setPlayingState(false);
                        }
                    });

                    audios[key].addEventListener('ended', function () {
                        setPlayingState(false);
                    });

                    audios[key].addEventListener('error', function () {
                        setPlayingState(false);
                    });
                }
            }

            setActiveStation('917');
            setPlayingState(false);
        })();
    </script>

    <?php
    return ob_get_clean();
});