<?php

// 🔴 🔴 🔴 CANVI 1: Mapeig de codis curts ('cat', 'eng', etc.) a codis d'idioma vàlids
session_start();

// Mapeig de codis curts a codis d'idioma vàlids per a l'àudio
// Mapeig de codis curts a codis d'idioma vàlids per a l'àudio
$langMap = [
    'cat' => 'ca-ES', // Català (Espanya)
    'eus' => 'eu-ES', // Euskera / Basc (Espanya)
    'cas' => 'es-ES', // Castellà / Espanyol (Espanya)
    'eng' => 'en-US', // Anglès (Estats Units)
    'fra' => 'fr-FR', // Francès (França)
    'ger' => 'de-DE', // Alemany (Alemanya)
    'por' => 'pt-PT', // Portuguès (Portugal)
    'ita' => 'it-IT'  // Italià (Itàlia)
];

// Comprovem si $_SESSION['lang'] està definit i és vàlid
$shortLang = $_SESSION['lang'] ; // Assigna 'cat' si $_SESSION['lang'] no està definit

// Assignem el codi d'àudio corresponent
$_SESSION['lang_audio'] = $langMap[$shortLang] ?? 'es-ES'; // Assegura que sigui 'ca-ES' si el codi no es troba al mapeig

// Mostrem el resultat
//echo "<br>SESSION['lang_audio']: " . $_SESSION['lang_audio'];

// 🔴 🔴 🔴 fi CANVI
?>
<?php 
//echo $_SESSION['resposta']; //prova per veure que entra bé
   // exit ('31');
?>
 <form id="cercaForm" method="POST" action="BD_conexions/conexio_diccionari_bd.php">
 
             <div class="search-container">
                <!-- Camp de cerca -->
                <input 
            type="text" 
            id="cercar" 
            name="cercar" 
            onkeyup="" 
            placeholder="cercar.." 
            autofocus 
            value="<?php echo isset($_SESSION['cercar']) ? htmlspecialchars($_SESSION['cercar'], 
                    ENT_QUOTES, 'UTF-8') : ''; ?>"
                    >
                <!-- Botó de cerca -->
                <button type="submit">Cercar/Confirmar</button>
                <button id="speakButton" title="Llegir en veu alta">
                <span>🔊</span> 
                </button>
            </div> 
    <div>
  
    <p>
    <input type="button" value="<?php echo '-num-'.  $_SESSION['num'].'--'; ?>" style="display:none;">
    <input type="button" value="<?php echo '-id-'.  $_SESSION['id'].'--'; ?>" style="display:none;">
    <input type="button" value="<?php echo '-retorn-'. $_SESSION['nom'].'--'; ?>" style="display:none;">
    <input type="button" value="<?php echo '--'.  $_SESSION['lang_r'].'--'; ?>" style="display:none;">
    <input type="button" value="<?php echo '-1-'. $_SESSION['diccionari'].'--'; ?>" style="display:none;">
    <input type="button" value="<?php echo '-2-'. $_SESSION['diccionari_r'].'--'; ?>" style="display:none;">
    <input type="button" value="<?php echo '-3-'. $_SESSION['dic'].'--'; ?>" style="display:none;">
    <input type="button" value="<?php echo '--'. $_SESSION['bd']; ?>" style="display:none;">
    <input type="button" value="<?php echo '--'. $_SESSION['bd_r']; ?>" style="display:none;">
    <input
        type="text" 
        id="dicionari_A"
        name="dicionari_AJ" 
        onkeyup="" 
        placeholder=<?php echo htmlspecialchars($_SESSION['diccionari']); ?>
        autofocus
        data-diccionari=<?php echo htmlspecialchars($_SESSION['diccionari']); ?>
        style="display:none;">
</p>
<script>
        // Capturar elements del DOM
        const entrada = document.getElementById('cercar'); // Primer camp de text
        const boto = document.getElementById('boto');       // Botó
        const sortida = document.getElementById('replicar'); // Segon camp de text

        // Afegir un event listener al botó
        boto.addEventListener('click', function() {
            // Obtenir el valor de la primera entrada
            const text = entrada.value;

            // Assignar el valor a la segona entrada
            sortida.value = text;
        });
        
    </script>



<script>
  
  document.addEventListener('DOMContentLoaded', () => {
    const inputElement = document.getElementById('cercar');
    const speakBtn = document.getElementById('speakButton');
    let voices = [];

    // 🔴 Carreguem l'idioma des de PHP
    const userLang = '<?php echo addslashes($_SESSION["lang_audio"]); ?>';

    function loadVoices() {
      voices = speechSynthesis.getVoices();
    }

    speechSynthesis.onvoiceschanged = loadVoices;
    loadVoices();

    function speakText() {
      const text = inputElement.value.trim();
      if (!text) return;

      const utterance = new SpeechSynthesisUtterance(text);

      // 🔴 Busquem una veu que suporti l'idioma de la sessió (ex: 'ca-ES')
      let selectedVoice = voices.find(v => v.lang === userLang);

      // Si no n'hi ha d'exacta, provem amb el codi base (ex: 'ca')
      if (!selectedVoice) {
        const baseLang = userLang.split('-')[0];
        selectedVoice = voices.find(v => v.lang.startsWith(baseLang));
      }

      // Assignem la veu trobada (o només l'idioma si no hi ha veu específica)
      if (selectedVoice) {
        utterance.voice = selectedVoice;
        utterance.lang = selectedVoice.lang;
      } else {
        utterance.lang = userLang; // el navegador triarà una veu
      }

      utterance.rate = 1;
      utterance.pitch = 1;

      speechSynthesis.cancel();
      speechSynthesis.speak(utterance);
    }

    speakBtn.addEventListener('click', (e) => {
      e.preventDefault();
      speakText();
    });
  });

</script>


    </div>
             <!-- Contenidor de l'autocompletat -->
             <div id="resultats_autocompletar_container">
                <ul id="resultats_autocompletar">
                    <!-- Resultats dinàmics via JavaScript -->
                </ul>
            </div>
            


        </form>