const opt_con_elem = document.getElementById("option-container");
const frame_elem = document.getElementById("box");
const box_elem = document.getElementById("box-2");
const char_elem = document.getElementById("charater-box");
const char_div = document.getElementById("char");
let counter=0;  
const lockicon = document.getElementById("lock-icon");
const iloveirene = document.getElementById("lockscreen-container");

const maincontent = document.getElementById("love-irene-container");

function texter(text, speed = 30) {
    return new Promise(resolve => {
        let i = 0;
        text_elem.innerHTML = "";

        const interval = setInterval(() => {
            text_elem.innerHTML += text[i];
            i++;

            if (i >= text.length) {
                clearInterval(interval);
                resolve(); // <-- tells the script "I'm done"
            }
        }, speed);
    });
}

function typing_effect(text, elem, speed) {
    let i = 0;
    function type() {
        elem.innerHTML += text[i];
        i++;
        if (i < text.length) {
            setTimeout(type, speed);
        }
    }
    type();
}

if(localStorage.getItem('unlocked')){
    lockicon.addEventListener("click", () => {
        console.log("Paw clicked");
        console.log(localStorage.getItem('unlocked'));

        lockicon.style.height = '300px';
        lockicon.style.transition = 'all 0.7s ease-out';

        setTimeout(() => {
            iloveirene.style.transition = 'opacity 0.7s ease-out';
            iloveirene.style.opacity = '0';
            lockicon.style.opacity = '0';

            setTimeout(() => {
                iloveirene.remove();
                lockicon.remove();
                maincontent.style.display = 'block';
            }, 700);
        }, 700);

        // initianlizing continue button and character
        const char = document.createElement('img');
        char.src = "./sources/happy2.png";
        char.style.transform = "translateY(10%)";
        char.style.opacity = "0";
        
        char_div.appendChild(char);
        const clickIcon = document.createElement('img');
        clickIcon.src = "./sources/BERRY.png";
        clickIcon.a = true
        clickIcon.style.marginLeft = "10px";
        clickIcon.style.display = "inline-block";
        clickIcon.id = "click-icon-image";

        // load character and the continue button (i love you btw)
        setTimeout(() => {
            char.style.transition = "transform 0.5s ease-out, opacity 0.5s ease-out";
            char.style.transform = "translateY(0)";
            char.style.opacity = "1";
            frame_elem.style.transition = 'opacity 0.7s ease-out, transform 1s ease-out';
            frame_elem.style.opacity = '0.7';
            frame_elem.style.transform = 'translate(-50%, 50%)';
            setTimeout(() => {
                box_elem.appendChild(clickIcon);
            }, 1200);

        }, 1400);

        // first script
        if (clickIcon.a==true) {
            box_elem.addEventListener("click", () => {
                clickIcon.a = false;
                if (counter==0) {
                    console.log("Frame clicked");
                    clickIcon.remove();

                    let message = " \"Hey you there! Are you Irene?\"";
                    texter(message, 10);
                    setTimeout(() => {
                        message = "She tilts her head slightly, studying you with curious eyes. Her smile is gentle, but there’s something deliberate in it — as if this meeting was planned long before now. You hesitate for a moment before answering.";
                        texter(message, 10);
                    }, message.length * 30);

                    setTimeout(() => {
                        // first deciding scene
                        let option1 = document.createElement("div");
                        option1.className = "option";
                        option1.innerText = "Yes";
                        option1.id = "option-1";

                        let option2 = document.createElement("div");
                        option2.className = "option";
                        option2.innerText = "No";
                        option2.id = "option-2";
                        setTimeout(() => {
                            opt_con_elem.appendChild(option1);
                            opt_con_elem.appendChild(option2);
                            
                            // option1.style.transition = 'opacity 0.7s ease-out, transform 1s ease-out';
                            // option2.style.transition = 'opacity 0.7s ease-out, transform 1s ease-out';
                            // option1.style.opacity = '0.7';
                            // option2.style.opacity = '0.7';
                            // option1.style.transform = 'translate(-50%, 50%)';
                            // option2.style.transform = 'translate(-50%, 50%)';
                        }, message.length * 30 + 50);

                        option1.addEventListener("click", () => {
                            localStorage.setItem('unlocked', true);
                            option1.remove();
                            option2.remove();
                            clickIcon.remove();
                            setTimeout(() => {
                                message =" \"Y-Yes! That's me!\" ";
                                texter(message);
                                setTimeout(() => {
                                    message="Her expression brightens, relief flickering across her face.";
                                    texter(message);
                                    setTimeout(() => {
                                        message="\"Good, I thought he wouldn't make it in time and I'd never be able to see you like I am right now. \" ";
                                        texter(message, 50);
                                        setTimeout(() => {
                                            message= "She steps a little closer, lowering her voice.";
                                            texter(message, 30);
                                            setTimeout(() => {
                                                message = "\“There’s something I need to tell you. Something… important.\”"
                                            },message.length * 30 + 500)
                                        }, message.length * 30 + 1000);
                                    }, message.length * 30 + 500);
                                }, message.length * 30 + 500);
                            }, message.length * 30 );
                            console.log("No clicked");
                        });

                        option2.addEventListener("click", () => {
                            option1.remove();
                            option2.remove();
                            clickIcon.remove();
                            let message = "\"Oh. . .\" ";
                            localStorage.setItem('unlocked', false);
                            texter(message, 70);
                                                
                            setTimeout(() => {
                                let nextMessage = "She stares at you for a while. Then, she smiles softly.";
                                texter(nextMessage, 30);
                                setTimeout(() => {
                                    message = "\"Then. . . Why are you human here anyway. This is only for that girl. You are not supposed to be here.\" ";
                                    texter(message, 50);
                                }, nextMessage.length * 30 + 500);
                            }, message.length * 30 + 500);
                            console.log("NO clicked");

                        });
                    }, message.length * 30 + 100);

                    counter++;
                }
            });
        }
    });
}