// Load saved items from sessionStorage or use default
if (!localStorage.getItem("savedItems")) {
    
    const defaultItems = [
        { "speaker": "Donald Trump", "text": "I’ve got the best idea: Trump Airlines!" },
        { "speaker": "Elon Musk", "text": "Do we have rockets for the planes?" },
        { "speaker": "Morgan Freeman", "text": "And so, they took off, defying all logic." }
    ];
    localStorage.setItem("savedItems", JSON.stringify(defaultItems));
    
}
const savedItems = localStorage.getItem("savedItems");
const items = JSON.parse(savedItems);


const speakers = ["Donald Trump", "Elon Musk", "Taylor Swift", "Mike Tyson", "Joe Rogan", "Morgan Freeman", "Joe Biden", "Justin Trudeau"];

function debounce(fn, delay) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn.apply(this, args), delay);
    };
}

function autoSave(index, newData) {
    console.log("Saving item", index, newData);
    localStorage.setItem("savedItems", JSON.stringify(items)); // Example saving logic

}

const debouncedSave = debounce((index, newData) => {
    autoSave(index, newData);
}, 500);

function swapItems(index1, index2) {
    if (index1 < 0 || index2 >= items.length || index2 < 0 || index1 >= items.length) return;
    [items[index1], items[index2]] = [items[index2], items[index1]];
    renderSwiper();
}

function addSlide(index) {
    const newItem = { speaker: "Donald Trump", text: "" };
    items.splice(index + 1, 0, newItem); // Insert next to current index
    renderSwiper();
    debouncedSave();
}

function deleteSlide(index) {
    if (items.length > 1) {
        items.splice(index, 1);
        renderSwiper();
        debouncedSave();
    }
}

function renderSwiper() {
    const swiperWrapper = document.querySelector(".swiper-wrapper");
    swiperWrapper.innerHTML = "";

    items.forEach((item, index) => {
        const slide = document.createElement("div");
        slide.className = "swiper-slide";

        const dropdown = document.createElement("select");
        dropdown.className = "dropdown-swiper";
        speakers.forEach(name => {
            const option = document.createElement("option");
            option.value = name;
            option.textContent = name;
            if (name === item.speaker) option.selected = true;
            dropdown.appendChild(option);
        });

        const textArea = document.createElement("div");
        textArea.className = "text-area";
        textArea.contentEditable = "true";
        textArea.textContent = item.text;

        textArea.addEventListener("input", function () {
            let lines = textArea.textContent.split("\n").slice(0, 3);
            lines = lines.map(line => line.slice(0, 80));
            textArea.textContent = lines.join("\n");

            const range = document.createRange();
            const sel = window.getSelection();
            range.selectNodeContents(textArea);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);

            items[index].text = textArea.textContent;
            debouncedSave(index, items[index]);
        });

        dropdown.addEventListener("change", () => {
            items[index].speaker = dropdown.value;
            debouncedSave(index, items[index]);
        });

        const btnContainer = document.createElement("div");
        btnContainer.className = "btn-container";

        // Left Button (for swapping)
        if (index === 0) {
            const leftButton = document.createElement('button');
            leftButton.classList.add('swiper-button');
            leftButton.textContent = '◀';
            leftButton.onclick = () => swapItems(index, index - 1);
            btnContainer.classList.add('align-right'); // Align first button to the right
            leftButton.style.opacity = 0;
            btnContainer.appendChild(leftButton);
        } else if (index > 0) {
            const leftButton = document.createElement('button');
            leftButton.classList.add('swiper-button');
            leftButton.textContent = '◀';
            leftButton.onclick = () => swapItems(index, index - 1);
            btnContainer.appendChild(leftButton);
        }

        // Right Button (for swapping)
        if (index < items.length - 1) {
            const rightButton = document.createElement('button');
            rightButton.classList.add('swiper-button');
            rightButton.textContent = '▶';
            rightButton.onclick = () => swapItems(index, index + 1);
            btnContainer.appendChild(rightButton);
        }

        // Add Button (Insert next to the current item)
        const addButton = document.createElement("button");
        addButton.classList.add("swiper-button", "add-button");
        addButton.textContent = "+";
        addButton.onclick = () => {
            items.splice(index + 1, 0, { speaker: "New Speaker", text: "New text" });
            renderSwiper();
            debouncedSave();
        };

        // Delete Button (Removes current item)
        const deleteButton = document.createElement("button");
        deleteButton.classList.add("swiper-button", "delete-button");
        deleteButton.textContent = "🗑";
        deleteButton.onclick = () => {
            if (items.length > 1) {
                items.splice(index, 1);
                renderSwiper();
                debouncedSave();
            }
        };

        btnContainer.appendChild(addButton);
        btnContainer.appendChild(deleteButton);

        slide.appendChild(dropdown);
        slide.appendChild(textArea);
        slide.appendChild(btnContainer);
        swiperWrapper.appendChild(slide);
    });

    swiper.update();
}


const swiper = new Swiper(".swiper", {
    direction: "horizontal", // Ensure horizontal scrolling
    slidesPerView: "auto",
    spaceBetween: 18,
    freeMode: true,
    mousewheel: true,
    grabCursor: true, // Makes it feel more natural
    resistanceRatio: 0.5, // Adjusts resistance when swiping
    touchReleaseOnEdges: true, // Allows release when swiping to the end
    passiveListeners: false, // Improve touch responsiveness
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    }
});

renderSwiper();