import { initTodayPage } from './modules/today.js';
import { initSequencePage } from './modules/sequence.js';
import { initKnowledgePage } from './modules/knowledge.js';

document.addEventListener("DOMContentLoaded", () => {
    const container = document.getElementById("content-container");
    const triggers = document.querySelectorAll("[data-file]");
    const settingsBtn = document.getElementById('settingsBtn');
    const settingsModal = document.getElementById('settingsModal');
    const closeSettingsBtn = document.getElementById('closeSettingsBtn');
    const darkModeToggle = document.getElementById('darkModeToggle');

    settingsBtn.addEventListener('click', () => {
        settingsModal.classList.add('active');
    });

    closeSettingsBtn.addEventListener('click', () => {
        settingsModal.classList.remove('active');
    });

    settingsModal.addEventListener('click', (e) => {
        if (e.target === settingsModal) {
            settingsModal.classList.remove('active');
        }
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && settingsModal.classList.contains('active')) {
            settingsModal.classList.remove('active');
        }
    });

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const systemPrefersDark = mediaQuery.matches;

    const storedDarkMode = localStorage.getItem('darkMode');

    let isDark;
    if (storedDarkMode !== null) {
        isDark = storedDarkMode === 'true';
    } else {
        isDark = systemPrefersDark;
    }

    function applyDarkMode(enable) {
        document.body.classList.toggle('dark-mode', enable);
        if (darkModeToggle) {
            darkModeToggle.checked = enable;
        }
    }

    applyDarkMode(isDark);

    darkModeToggle.addEventListener('change', () => {
        const isDarkNow = darkModeToggle.checked;
        applyDarkMode(isDarkNow);
        localStorage.setItem('darkMode', isDarkNow);
    });

    function handleSystemChange(e) {
        if (localStorage.getItem('darkMode') === null) {
            applyDarkMode(e.matches);
        }
    }

    if (mediaQuery.addEventListener) {
        mediaQuery.addEventListener('change', handleSystemChange);
    } else {
        mediaQuery.addListener(handleSystemChange);
    }


    async function loadPage(file) {
        try {
            const response = await fetch(file);
            if (!response.ok) throw new Error("Error loading page: " + response.statusText);

            container.innerHTML = await response.text();

            triggers.forEach(item => {
                item.classList.toggle("active", item.getAttribute("data-file") === file);
            });

            if (file.includes("today")) initTodayPage();
            if (file.includes("sequence")) initSequencePage();
            if (file.includes("knowledge")) initKnowledgePage();

        } catch (error) {
            container.innerHTML = "<p>Error loading content.</p>";
            console.error(error);
        }
    }

    loadPage("pages/today.html");

    triggers.forEach(trigger => {
        trigger.addEventListener("click", (e) => {
            e.preventDefault();
            loadPage(trigger.getAttribute("data-file"));
        });
    });
});