const audioCustom = document.getElementById("audiocustom");
const playBtnpy = document.getElementById("play2");
const progressPf = document.getElementById("progress-player-f");
const currentTime = document.getElementById("current-time");
const durationTime = document.getElementById("duration-time");
const lessons = document.querySelectorAll(".lesson");
const title = document.getElementById("title");
const bibliotecaTs = {
    "U1": {
        "track_1": "<p><strong>1</strong> adult<br><strong>2</strong> child<br><strong>3</strong> boy<br><strong>4</strong> girl<br><strong>5</strong> friends<br><strong>6</strong> teacher<br><strong>7</strong> student</p>",
        "track_2": "<p>one, two, three, four, five, six, seven, eight, nine, ten</p>",
        "track_3": "<p><strong>Eva:</strong> Hello. Are you our new teacher?<br><strong>Teacher:</strong> Yes, I'm Mr. Baxter. Nice to meet you.<br><strong>Eva:</strong> I'm Eva.<br><strong>Alex:</strong> And I'm Alex.<br><strong>Eva and Alex:</strong> We're friends!<br><strong>Alex:</strong> Coco! You're a cat! You're not a student.</p>",
        "track_4": "<p><strong>1</strong> short<br><strong>2</strong> tall<br><strong>3</strong> nervous<br><strong>4</strong> nice</p>",
        "track_5": "<p><strong>\"Mouse's First Day\"</strong></p><p><strong>Mouse:</strong> Hi! I'm Mouse. I'm new. I'm nervous. Wow! You're very tall! Are you the teacher?<br><strong>Giraffe:</strong> I'm not the teacher. I'm a student. My name's Giraffe. Nice to meet you!<br><strong>Miss Emu:</strong> Hello! I'm Miss Emu. Let's count the students. One, two, three, four... Where's Mouse?<br><strong>Mouse:</strong> I'm here. I'm very short!<br><strong>Giraffe:</strong> Sit here. We're friends.<br><strong>Mouse:</strong> Thank you, Giraffe! You're nice. I'm not nervous anymore!</p>",
        "track_6": "<p><strong>Teacher:</strong> Welcome to class! Tell us your name and a little bit about you.<br><strong>Jackie:</strong> Hi! My name's Jackie. I'm new in school. Um... I'm a little nervous!<br><strong>Teacher:</strong> That's OK. You're doing well! Tell us your age.<br><strong>Jackie:</strong> OK. I'm six years old. And as you can see, I'm a girl. I'm not very tall. I'm short. I'm not very good at sports, but I'm good at schoolwork. It's nice to meet you!<br><strong>Other students:</strong> Hi! Hello! Welcome! Nice to meet you, Jackie!</p>",
        "track_7": "<p><strong>Emily:</strong> Hello! My name's Emily.<br><strong>Ana:</strong> Hi! My name's Ana.<br><strong>Tim:</strong> Hello! My name's Tim.<br><strong>Emily:</strong> I'm a girl.<br><strong>Ana:</strong> I'm a girl.<br><strong>Tim:</strong> I'm a boy.<br><strong>Emily:</strong> I'm five.<br><strong>Ana:</strong> I'm six.<br><strong>Tim:</strong> I'm seven.</p>",
        "track_8": "<p><strong>Narrator:</strong> Listen and look. Look at the example.<br><strong>Girl:</strong> Here's a picture of me and my friends. We're on the playground.<br><strong>Man:</strong> Great! Who's that? The boy saying hello to the teacher.<br><strong>Girl:</strong> He's Matt. He's nice.<br><strong>Narrator:</strong> Can you see the line? This is an example. Now you listen and draw lines.</p>",
        "track_9": "<p><strong>1</strong><br><strong>Man:</strong> And there's a girl, too. She's short. She's in front of square number one.<br><strong>Girl:</strong> Oh, she's Anna. She's new in school.<br><strong>Man:</strong> Oh, I see.</p><br><p><strong>2</strong><br><strong>Girl:</strong> And there's Sam. He's tall.<br><strong>Man:</strong> The boy with the books? <br><strong>Girl:</strong> Yes! He has five books.</p><br><p><strong>3</strong><br><strong>Man:</strong> And who's that girl with a ball? <br><strong>Girl:</strong> She's Lucy. She likes sports. <br><strong>Man:</strong> Me, too!</p>",
        "track_10": "<p><strong>Oliver:</strong> Hi. This is my school ID. Look! Here's my picture. My name's Oliver. My school's Macaw Academy. I'm in first grade. My teacher's Miss Perry. I'm six! My fun fact is... It's my birthday today!<br><strong>Class:</strong> Happy birthday, Oliver!</p>",
        "track_11": "<p>Are you funny? Yes, I am! <br>Make a face! <br>Are you funny? Yes, I am! <br>Make a face! <br>We are different, but we're friends. <br>Let's sing our song again. <br>Are you funny? Yes, I am! <br>Make a face! </p> <br> <p>Are you loud? Yes, I am! <br>Sing and shout!<br>Are you loud? Yes, I am! <br>Sing and shout! <br>We are different, but we're friends.<br>Let's sing our song again.<br>Are you loud? Yes, I am! <br>Sing and shout!</p> <br> <p>Are you quiet? Yes, I am!<br>Say \"shh!\" <br>Are you quiet? Yes, I am! <br>Say \"shh!\" <br>We are different, but we're friends. <br>Let's sing our song again. <br>Are you quiet? Yes, I am! <br>Say \"shh!\" </p> <br> <p>Are you strong? Yes, I am! <br>Flex your arms. <br>Are you strong? Yes, I am! <br>Flex your arms. <br>We are different, but we're friends. <br>Let's sing our song again.<br>Are you strong? Yes, I am! <br>Flex your arms.</p> <br> <p>Are you smart? Yes, I am! <br>Tap your head. <br>Are you smart? Yes, I am!<br>Tap your head. <br>We are different, but we're friends.<br>Let's sing our song again. <br>Are you smart? Yes, I am! <br>Tap your head.</p> <br> <p>Are you big? Yes, I am!<br>Stretch out wide.<br>Are you big? Yes, I am! <br>Stretch out wide. <br>We are different, but we're friends.<br>Let's sing our song again. <br>Are you big? Yes, I am! <br>Stretch out wide.</p> <br> <p>Are you small? Yes, I am!<br>Get down low. <br>Are you small? Yes, I am! <br>Get down low.<br>We are different, but we're friends. <br>Let's sing our song again. <br>Are you small? Yes, I am! <br>Get down low. </p>",
        "track_12": "<p>Hello! Come meet my friends. They're both in first grade. Are they similar? No, they're not. Padma’s a girl. She's short. She's good at art. Look at her picture. It's nice! Jay’s a boy. He's not short. He's tall. He's good at music. He's smart!</p>",
        "track_13": "<p><strong>1</strong> book<br><strong>2</strong> computer<br> <strong>3</strong> robot<br> <strong>4</strong> soccer</p>",
        "track_14": "<p><strong>Ryan:</strong> Hi! My name's Ryan. I'm short. I'm good at sports. I like school, too. The students in my class are nice. We're all smart, but we're good at different things. This is Colin. He's strong. He has a lot of books! He's good at reading. This is Kelly. She's quiet. She's good at math.</p><p><strong>Kelly:</strong> Two plus five is seven!</p><p><strong>Ryan:</strong> This is Abby. She's good at music. She's loud!</p><p><strong>Abby:</strong> Ooo-yeah!</p><p><strong>Ryan:</strong> This is Harry. He's funny. He's good at computers.</p>"
    }
};


let isPlayingpyr = false;

playBtnpy.addEventListener("click", () => {
    if (isPlayingpyr) {
        audioCustom.pause();
        playBtnpy.innerHTML = '<img src="icons/play2.svg">';
    } else {
        audioCustom.play();
        playBtnpy.innerHTML = '<img src="icons/pause.svg">';
    }
    isPlayingpyr = !isPlayingpyr;
});

lessons.forEach(lesson => {
    lesson.addEventListener("click", () => {
        document.querySelector(".lesson.active")?.classList.remove("active");
        lesson.classList.add("active");

        const src = lesson.dataset.audio;
        const unit = lesson.dataset.unit;

        const ts = document.getElementById('transcriptionText');
        ts.innerHTML = 'No transcript available.';

        

        if( unit in bibliotecaTs){
            ts.innerHTML = bibliotecaTs[unit][src];
        }

        audioCustom.src = `recursos/0/audios/LL/${unit}/${src}.mp3`;
        title.textContent = lesson.textContent;

        audioCustom.play();
        playBtnpy.innerHTML = '<img src="icons/pause.svg">';
        isPlayingpyr = true;
    });
});

/* Update progress */
audioCustom.addEventListener("timeupdate", () => {
    progressPf.value = (audioCustom.currentTime / audioCustom.duration) * 100 || 0;

    currentTime.textContent = formatTime(audioCustom.currentTime);
    durationTime.textContent = formatTime(audioCustom.duration);
});

// Termino el audio
audioCustom.addEventListener("ended", () => {
    playBtnpy.innerHTML = '<img src="icons/play2.svg">';
    isPlayingpyr = false;
    progressPf.value = 0;
    currentTime.textContent = "00:00";
});

/* Seek */
progressPf.addEventListener("input", () => {
    audioCustom.currentTime = (progressPf.value / 100) * audioCustom.duration;
});

const playNext = () => {
    const allLessons = Array.from(document.querySelectorAll(".lesson"));
    const activeLesson = document.querySelector(".lesson.active");
    const currentIndex = allLessons.indexOf(activeLesson);
    if (currentIndex !== -1 && currentIndex < allLessons.length - 1) {
        const nextLesson = allLessons[currentIndex + 1];
        const parentDetails = nextLesson.closest('details');

        if (parentDetails && !parentDetails.open) {
            parentDetails.open = true;
        }

        nextLesson.click();
    } else {
        console.log("Has llegado al final de la lista.");
        isPlayingpyr = false;
        playBtnpy.innerHTML = '<img src="icons/play2.svg">';
    }
};

document.getElementById("next").addEventListener("click", playNext);

document.getElementById("prev").addEventListener("click", () => {
  const allLessons = Array.from(document.querySelectorAll(".lesson"));
  const activeLesson = document.querySelector(".lesson.active");
  const currentIndex = allLessons.indexOf(activeLesson);

  if (currentIndex > 0) {
    allLessons[currentIndex - 1].click();
  }
});

/* Format time */
function formatTime(time) {
    if (!time) return "00:00";
    const min = Math.floor(time / 60);
    const sec = Math.floor(time % 60);
    return `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
}

/* Transcription toggle */
document.getElementById("toggleTranscription").addEventListener("click", () => {
    const content = document.getElementById("transcriptionText");
    content.style.display = content.style.display === "block" ? "none" : "block";
});