<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TPH-900</title>
    <style>
        @font-face {
            font-family: 'Digital-7';
            src: url('digital-7.ttf') format('truetype');
        }
        
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100vh;
            background-color: #00000000;
            cursor: none;
        }
        
        .radio-container {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 400px;
            height: 600px;
            background: url('assets/radio.png') no-repeat center center;
            background-size: contain;
            display: none;
        }
        
        .screen {
            position: absolute;
            top: 250px;
            left: 50%;
            transform: translateX(-50%);
            width: 240px;
            height: 140px;
            background-color: #00000000;
            border: 2px solid #00000000;
            border-radius: 5px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        
        .banner {
            width: 100%;
            height: 40px;
            background-color: #00000000;
            color: #fff;
            font-family: Arial, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
            border-bottom: 0px solid #555;
        }
        
        .display {
            width: 100%;
            height: calc(100% - 40px);
            color: #01010195;
            font-family: 'Digital-7', Courier, monospace;
            font-size: 31px;
            text-align: center;
            line-height: 130px;
            letter-spacing: -3px;
            font-weight: 560;
            transform: scaleX(0.8);
            image-rendering: pixelated;
            text-shadow: 0 0 1px #3131313e, 0 0 2px #3131313e;
            position: relative;
            z-index: 20;
            user-select: none;
        }
        
        #logo {
            width: 30%;
            height: 30%;
            object-fit: contain;
            position: absolute;
            top: 80px;
            left: 83px;
            z-index: 5;
            opacity: 1;
            transition: opacity 0.3s ease;
            user-select: none;
        }
        
        .button {
            position: absolute;
            width: 28px;
            height: 10px;
            background-color: #00000000;
            border: 0px solid #000;
            border-radius: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
        }
        
        .btn-close {
            position: absolute;
            width: 19px;
            height: 19px;
            background-color: #00000000;
            color: #fff;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            bottom: 340px;
            left: 237px;
        }
        
        .btn-connect,
        .btn-disconnect {
            position: absolute;
            width: 23px;
            height: 17px;
            background-color: #00000000;
            color: #fff;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        
        .btn-connect {
            bottom: 106px;
            left: 145px;
        }
        
        .btn-disconnect {
            bottom: 106px;
            left: 226px;
        }
        
        .btn-1 {
            top: 503.5px;
            left: 143px;
        }
        
        .btn-2 {
            top: 503.5px;
            left: 182px;
        }
        
        .btn-3 {
            top: 504px;
            left: 221px;
        }
        
        .btn-4 {
            top: 521.5px;
            left: 143px;
        }
        
        .btn-5 {
            top: 521.5px;
            left: 182px;
        }
        
        .btn-6 {
            top: 522.5px;
            left: 221px;
        }
        
        .btn-7 {
            top: 539.5px;
            left: 143px;
        }
        
        .btn-8 {
            top: 539.5px;
            left: 182px;
        }
        
        .btn-9 {
            top: 540px;
            left: 221px;
        }
        
        .btn-0 {
            top: 557.5px;
            left: 182px;
        }
        
        .btn-dot {
            top: 557.5px;
            left: 143px;
        }
        
        .btn-delete {
            top: 557.5px;
            left: 221px;
        }
        
        .flashing-light {
            position: absolute;
            width: 4.2px;
            height: 11.5px;
            background-color: rgba(255, 255, 0, 0);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            animation: flash 3s infinite;
            top: 469px;
            left: 1694.4px;
            opacity: 0;
            display: none;
            z-index: 1;
        }
        
        @keyframes flash {
            0% {
                opacity: 0.1;
                background-color: rgba(56, 173, 20, 0);
            }
            10% {
                opacity: 1;
                background-color: rgba(56, 173, 20, 0.637);
            }
            100% {
                opacity: 0.1;
                background-color: rgba(56, 173, 20, 0);
            }
        }
    </style>
</head>

<body>
    <audio id="frequency-sound" src="assets/on.ogg" preload="auto"></audio>
    <audio id="disconnect-sound" src="assets/off.ogg" preload="auto"></audio>

    <div class="radio-container" id="radio-screen">
        <div class="screen">
            <div class="banner"></div>
            <img id="logo" src="assets/logo.png" alt="Logo">
            <div class="display" id="display"></div>
        </div>

        <div class="button btn-1" data-value="1"></div>
        <div class="button btn-2" data-value="2"></div>
        <div class="button btn-3" data-value="3"></div>
        <div class="button btn-4" data-value="4"></div>
        <div class="button btn-5" data-value="5"></div>
        <div class="button btn-6" data-value="6"></div>
        <div class="button btn-7" data-value="7"></div>
        <div class="button btn-8" data-value="8"></div>
        <div class="button btn-9" data-value="9"></div>
        <div class="button btn-0" data-value="0"></div>
        <div class="button btn-dot" data-value="."></div>
        <div class="button btn-delete" id="btn-delete"></div>

        <button class="btn-connect" id="btn-connect"></button>
        <button class="btn-disconnect" id="btn-disconnect"></button>
        <button class="btn-close" id="btn-close"></button>
    </div>

    <div class="flashing-light" id="flashing-light"></div>

    <script>
        const display = document.getElementById('display');
        const logo = document.getElementById('logo');
        let currentInput = '';
        let isFrequencyActive = false;
        const radioScreen = document.getElementById('radio-screen');
        const flashingLight = document.getElementById('flashing-light');
        const frequencySound = document.getElementById('frequency-sound');
        const btnConnect = document.getElementById('btn-connect');
        const btnDisconnect = document.getElementById('btn-disconnect');
        const disconnectSound = document.getElementById('disconnect-sound');

        // FONCTION POUR METTRE A JOUR L'ETAT DES BOUTON
        function updateButtonStates() {
            const hasInput = currentInput.trim() !== '';
            btnConnect.disabled = !hasInput;
        }

        // FONCTION POUR BASCULER L'ETAT DE LA RADIO //
        function toggleRadio() {
            const isRadioOpen = radioScreen.style.display === 'block';
            if (isRadioOpen) {
                radioScreen.style.display = 'none';
                flashingLight.style.opacity = '0';
                flashingLight.style.display = 'none';
                document.body.style.cursor = 'default';
                fetch(`https://Slupix_radio/setFocus`, {
                    method: 'POST',
                    body: JSON.stringify({
                        focus: false
                    })
                });

            } else {
                radioScreen.style.display = 'block';
                flashingLight.style.opacity = '1';
                flashingLight.style.display = 'block';
                document.body.style.cursor = 'none';
                fetch(`https://Slupix_radio/setFocus`, {
                    method: 'POST',
                    body: JSON.stringify({
                        focus: true
                    })
                });
            }
        }

        window.addEventListener('message', function(event) {
            if (event.data.action === 'open') toggleRadio();
            if (event.data.action === 'close') toggleRadio();
        });

        // GESTION DE L'INTERACTION AVEC LES BOUTONS //
        document.querySelectorAll('.button').forEach(button => {
            button.addEventListener('click', () => {
                const value = button.getAttribute('data-value');
                if (value) {

                    if (currentInput.length < 5 && !(value === '.' && currentInput.includes('.'))) {
                        currentInput += value;
                    }
                } else if (button.id === 'btn-delete') {
                    currentInput = currentInput.slice(0, -1);
                }

                display.textContent = currentInput || '';

                logo.style.opacity = currentInput !== '' ? '0' : '1';

                updateButtonStates();
            });
        });

        // ACTION DES GESTION TOUCHE CLAVIER //
        document.addEventListener('keydown', function(event) {
            if (event.key === "Enter") {
                connectToFrequency();
            }
            if (event.key === "Escape") toggleRadio();
        });


        // FONCTION DE CONNEXION A LA FREQUENCE VOULU //
        function connectToFrequency() {
            const frequency = display.textContent;

            if (frequency) {
                if (!isFrequencyActive) {

                    frequencySound.play();
                    fetch(`https://Slupix_radio/connectFrequency`, {
                        method: 'POST',
                        body: JSON.stringify({
                            frequency
                        })
                    });

                    frequencySound.volume = 0.1;

                    isFrequencyActive = true;
                }
            }
            updateButtonStates();
        }


        // FONCTION DE DECONNEXION AVEC LE SON JOUER A LA DECONNEXION //
        function handleDisconnect() {

            if (isFrequencyActive) {
                disconnectSound.currentTime = 0;
                disconnectSound.play().catch(e => {
                    console.error("Erreur lors de la lecture du son de déconnexion : ", e);
                });
            }

            disconnectSound.volume = 0.1;

            isFrequencyActive = false;

            currentInput = '';
            display.textContent = '';

            fetch(`https://Slupix_radio/disconnectFrequency`, {
                method: 'POST'
            });

            logo.style.opacity = '1';

            updateButtonStates();
        }

        // ACTION DU BOUTON DE CONNEXION //
        btnConnect.addEventListener('click', () => {
            connectToFrequency();
        });

        // ACTION DU BOUTON DE DECONNEXION //
        btnDisconnect.addEventListener('click', () => {
            handleDisconnect();
        });

        // ACTION DU BOUTON DE FERMETURE //
        const btnClose = document.getElementById('btn-close');
        btnClose.addEventListener('click', () => {
            toggleRadio();
        });

        // DESACTIVE LES BOUTON AU DEMARAGE //
        updateButtonStates();
    </script>


</body>

</html>