// Check for a thread.
if (!/^bag\/|\/bag\/|Blue Archive|BIue Archive/.test(document?.querySelector('.postInfo.desktop .subject')?.textContent?.trim() ?? '')) return;

//////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////// BIRTHDAY SECTION ////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
await (async function() {
    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    let fullStringTop = "";
    let fullStringBottom = "";

    // Check if DVDoomParent exists, if not, create it
    let dvDoomParent = document.getElementById("DVDoomParent");
    if (!dvDoomParent) {
        dvDoomParent = document.createElement('div');
        dvDoomParent.id = "DVDoomParent";
        dvDoomParent.style.display = 'flex';
        dvDoomParent.style.marginLeft = '3.5px';
        dvDoomParent.style.marginRight = '12.5px';
        dvDoomParent.style.justifyContent = 'space-between';

        // Find an appropriate place to insert DVDoomParent
        let targetElement = document.querySelector('.navLinks.desktop');
        if (targetElement) {
            targetElement.parentNode.insertBefore(dvDoomParent, targetElement);
        } else {
            document.body.appendChild(dvDoomParent);
        }
    }

    // Create and append the birthday and clock container
    let birthdayContainer = document.createElement('div');
    birthdayContainer.style.flexGrow = '5';
    birthdayContainer.style.flexBasis = '0';
    birthdayContainer.style.display = 'flex';
    birthdayContainer.style.flexDirection = 'column';
    birthdayContainer.style.alignItems = 'flex-start';
    birthdayContainer.style.justifyContent = 'center';
    dvDoomParent.appendChild(birthdayContainer);

    // Add updated styles for birthday table with vertical header
    const birthdayStyles = `
.birthday-table-container {
    width: fit-content;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    height: fit-content;
}
.vertical-header {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 0 5px;
    border: 1px solid #ccc;
    border-radius: 0 5px 5px 0;
    border-left: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.birthday-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
    border-radius: 0 5px 5px 0;
    overflow: hidden;
    margin: 0;
    width: auto;
    height: auto;
}
.birthday-table th, .birthday-table td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
    padding: 8px;
}
.birthday-table th:last-child, .birthday-table td:last-child {
    border-right: none;
}
.birthday-table tr:last-child td {
    border-bottom: none;  /* Ensure last row has no bottom border */
}
.birthday-table tr {
    height: auto;
}
.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin: auto;
}
.image-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

    // Function to add days to a date
    function addDays(date, days) {
        const copy = new Date(Number(date));
        copy.setDate(date.getDate() + days);
        return copy;
    }

    // Fetch birthdays data from the API
    async function fetchBirthdays() {
        const response = await fetch('https://schaledb.com/data/en/students.json');
        const data = await response.json();

        const responseCustom = await fetch('https://rentry.org/dvdoombday/raw');
        const dataCustom = await responseCustom.json();

        // Iterate through each custom birthday list.
        for (let i = 0; i < dataCustom.length; i++) {
            // The current student.
            const customStudent = dataCustom[i];
            let actualStudent = {};
            // Check if it should replace.
            if (customStudent.Id) {
                // Obtain the existing student.
                actualStudent = data[customStudent.Id];
            } else {
                data[`DVDOOM_${i}`] = actualStudent;
            }
            // Override the values.
            actualStudent.FamilyName = customStudent.FamilyName;
            actualStudent.PersonalName = customStudent.PersonalName;
            actualStudent.BirthDay = customStudent.BirthDay;
            actualStudent.DirectImage = customStudent.DirectImage;
        }

        return Object.values(data).reduce((acc, student) => {
            const birthdayMatch = student.BirthDay.match(/(\d+)\/(\d+)/);
            if (!birthdayMatch) return acc;

            const monthNumber = parseInt(birthdayMatch[1], 10);
            const day = parseInt(birthdayMatch[2], 10);

            if (!acc[monthNumber]) {
                acc[monthNumber] = {};
            }
            if (!acc[monthNumber][day]) {
                acc[monthNumber][day] = [];
            }

            const studentFullName = `${student.FamilyName} ${student.PersonalName}`;
            let studentEntry = acc[monthNumber][day].find(char => char.name === studentFullName);

            const studentImage = (student.DirectImage) ? student.DirectImage : `https://schaledb.com/images/student/collection/${student.Id}.webp`;

            if (studentEntry) {
                if (!studentEntry.images.includes(studentImage)) {
                    studentEntry.images.push(studentImage);
                }
            } else {
                acc[monthNumber][day].push({
                    name: studentFullName,
                    images: [studentImage]
                });
            }
            return acc;
        }, {});
    }

    async function initBirthdayAndClock() {
        const birthdays = await fetchBirthdays();
        const baseDate = new Date();
        // This loop checks for birthdays today and up to the next 7 days
        for (let i = 0; i <= 6; i++) {
            const currentDate = addDays(baseDate, i);
            const month = currentDate.getMonth() + 1;
            const day = currentDate.getDate();

            const studentsByBirthday = birthdays[month]?.[day];
            if (studentsByBirthday) {
                fullStringTop += `<td style="font-weight: bold; padding: 8px; text-align: center;">${months[currentDate.getMonth()]} ${day}</td>`;
                fullStringBottom += `<td style="font-weight: bold; text-align: center;">`;

                for (const student of studentsByBirthday) {
                    fullStringBottom += `<div style="display: inline-block; padding: 8px;">
                    <div style="position: relative; text-align: justify;">
                        <center style="white-space: pre;">${student.name.replace(' ', '\n')}</center>
                        <center class="image-container" data-images="${student.images.join(',')}" style="width:60px;height:60px;">
                            <img src="${student.images[0]}" alt="${student.name}" style="width:60px;height:60px;">
                        </center>
                    </div>
                </div>`;
                }

                fullStringBottom += `</td>`;
            }
        }

        if (fullStringTop === '') {
            fullStringBottom = `
            <td style="font-weight: bold; text-align: center;">
                <div style="display: inline-block; padding: 8px;">
                    <div style="position: relative; text-align: justify;">
                        <center style="white-space: pre;">No upcoming student birthdays in the next 7 days</center>
                    </div>
                </div>
            </td>
        `;
        }

        // Updated HTML structure with vertical header
        let finalString = `
        <div class="birthday-table-container">
            <div class="vertical-header">Student Birthdays</div>
            <table class="birthday-table">
                <tr>${fullStringTop}</tr>
                <tr>${fullStringBottom}</tr>
            </table>
        </div>`;

        birthdayContainer.innerHTML = finalString;

        // Image cycling logic for multiple character images
        document.querySelectorAll('.image-container').forEach(container => {
            let images = container.dataset.images.split(',');
            let currentImageIndex = 0;

            images = [...new Set(images)];

            if (images.length > 1) {
                setInterval(() => {
                    currentImageIndex = (currentImageIndex + 1) % images.length;
                    container.querySelector('img').src = images[currentImageIndex];
                }, 5000);
            }
        });
    }

    // Initialize the birthday and clock functionality
    initBirthdayAndClock();
})();

//////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////// CLOCKS SECTION ///////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////

await (async function() {

    // Check if DVDoomParent exists, if not, create it
    let dvDoomParent = document.getElementById("DVDoomParent");
    if (!dvDoomParent) {
        dvDoomParent = document.createElement('div');
        dvDoomParent.id = "DVDoomParent";
        dvDoomParent.style.display = 'flex';
        dvDoomParent.style.marginLeft = '3.5px';
        dvDoomParent.style.marginRight = '12.5px';
        dvDoomParent.style.justifyContent = 'space-between';

        // Find an appropriate place to insert DVDoomParent
        let targetElement = document.querySelector('.navLinks.desktop');
        if (targetElement) {
            targetElement.parentNode.insertBefore(dvDoomParent, targetElement);
        } else {
            document.body.appendChild(dvDoomParent);
        }
    }

    // Modify the table creation part
    document.getElementById("DVDoomParent").insertAdjacentHTML(
        'beforeend',
        `<div style="flex-grow: 2; flex-basis: 0; align-items: center; justify-content: center; display: flex;">
            <table id="seia-table" class="dvdoom-table" style="border: 1px solid #ccc; border-radius: 5px; flex: 1;">
                <tr><th id="clockJST" colspan="100%" style="width: 100%; font-size: 18px; font-weight: bold; padding: 12px; text-align: center; border-bottom-width: 0px;">JST TIME</th></tr>
                <tr><th id="clockUTC" colspan="100%" style="width: 100%; font-size: 18px; font-weight: bold; padding: 12px; text-align: center; border-top: 1px solid #ccc; border-bottom-width: 0px;">UTC TIME</th></tr>
            </table>
        </div>
    `);

    // Clock logic
    const clockCallbacks = {};
    const clockJST = document.getElementById("clockJST");
    const clockUTC = document.getElementById("clockUTC");
    const clockStyle = {
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
        weekday: "short",
        month: "long",
        day: "numeric",
        hourCycle: 'h23'
    }
    setInterval(() => {
        const dateToUpdate = new Date();
        clockJST.textContent = dateToUpdate.toLocaleString('en-US', {
            ...clockStyle,
            ...{
                timeZone: 'Japan'
            }
        }).replace(' at', ',') + ' JST';
        clockUTC.textContent = dateToUpdate.toLocaleString('en-US', {
            ...clockStyle,
            ...{
                timeZone: 'UTC'
            }
        }).replace(' at', ',') + ' UTC';
        for (const [_, callbackFunction] of Object.entries(clockCallbacks)) {
            callbackFunction(dateToUpdate);
        }
    }, 1000);


})();

//////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////// DVDOOM SECTION ///////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
await (async function() {
    // Inject styles
    const styleElement = document.createElement('style');
    styleElement.textContent = `
    .image-container { display: flex; align-items: center; justify-content: center; height: 60px; margin: auto; }
    .image-container img { max-width: 100%; max-height: 100%; display: block; }
    .centered-text { text-align: center; margin: 0; font-size: 14px; line-height: 20px; height: 20px; overflow: hidden; }
    .student-name { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .seia-heart { display: inline-block; width: 200px; aspect-ratio: 1; border-image: radial-gradient(red 69%, #0000 70%) 84.5%/50%; clip-path: polygon(-41% 0, 50% 91%, 141% 0); }
    @keyframes seia-heart-animation { from { transform: translate3d(0, 0, 0); opacity: 0.65; } }
    .seia-text { font: 800 20px Arial; -webkit-text-fill-color: black; -webkit-text-stroke: 1px; -webkit-text-stroke-color: white}

    .quantity {   display: flex;   align-items: center;   justify-content: center;   padding: 0; }
    .quantity__minus, .quantity__plus {   display: block;   flex-grow: 1;  width: 0; height: 23px;   margin: 0;   background: #dee0ee;   text-decoration: none;   text-align: center;   line-height: 23px; }
    .seia-button {  display: block;   margin: 0;   background: #dee0ee;   text-decoration: none;   text-align: center;   line-height: 23px; }
    .seia-button:hover {  cursor: pointer; background: #575b71; color: currentColor !important; }
    .quantity__minus:hover, .quantity__plus:hover {  cursor: pointer; background: #575b71; color: #fff !important; }
    .quantity__minus {   border-radius: 3px 0 0 3px; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; }
    .quantity__plus {   border-radius: 0 3px 3px 0; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; }
    .quantity__input {   width: 40px;   height: 19px;   margin: 0;   padding: 0;   text-align: center;   border-top: 2px solid #dee0ee;   border-bottom: 2px solid #dee0ee;   border-left: 1px solid #dee0ee;   border-right: 2px solid #dee0ee;   background: #fff;   color: #8184a1; }
    input.quantity__input[type=number] { -moz-appearance: textfield; }
    input.quantity__input::-webkit-outer-spin-button, input.quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .quantity__minus:link, .quantity__plus:link {   color: #8184a1; }
    .quantity__minus:visited, .quantity__plus:visited {   color: #fff; }
`;
    // Add these styles to your existing styles
    const dvdoomStyles = `

display: inline-flex;
align-items: center;