document.addEventListener('DOMContentLoaded', () => {
    // Navigation Elements
    const menuToggle = document.getElementById('menu-toggle');
    const sideNav = document.getElementById('side-nav');
    const closeNavBtn = document.getElementById('close-nav-btn');
    const navLinks = document.querySelectorAll('#side-nav .nav-link');
    const overlay = document.getElementById('overlay');

    // Content Area Elements
    const mainContentAreas = document.querySelectorAll('.main-content-area');
    const assessmentContent = document.getElementById('assessment-content');
    const frameworkSection = document.getElementById('framework-section');
    const frameworkResultsHeader = document.getElementById('framework-results-header');
    const frameworkViewHeader = document.getElementById('framework-view-header');

    // Assessment Elements
    const assessmentSections = document.querySelectorAll('.assessment-section');
    const startButton = document.getElementById('start-assessment');
    const nextButtons = document.querySelectorAll('.next-btn');
    const assessmentForm = document.getElementById('assessment-form');
    const submitButton = document.getElementById('submit-assessment');
    const allRadioButtons = assessmentForm.querySelectorAll('input[type="radio"]');

    // Framework Elements
    const frameworkTableCells = document.querySelectorAll('#framework-section td[id^="framework-cat"]');
    const frameworkRestartButton = document.getElementById('restart-assessment-framework');

    // Screen reader status
    const srStatus = document.getElementById('sr-status');

    // --- State ---
    let currentAssessmentSectionId = 'welcome';
    let currentActiveContentArea = 'assessment-content';

    // --- Functions ---

    function announceStatus(message) {
        if (srStatus) {
            srStatus.textContent = message;
            setTimeout(() => { if (srStatus) srStatus.textContent = ''; }, 1000);
        }
    }

    function showContentArea(targetId, isResultsView = false) {
        mainContentAreas.forEach(area => area.classList.remove('active'));
        const areaToShow = document.getElementById(targetId);
        if (areaToShow) {
            areaToShow.classList.add('active');
            currentActiveContentArea = targetId;
            if (targetId === 'framework-section') {
                frameworkResultsHeader.style.display = isResultsView ? 'block' : 'none';
                frameworkViewHeader.style.display = isResultsView ? 'none' : 'block';
                const headerToAnimate = isResultsView ? frameworkResultsHeader : frameworkViewHeader;
                 if (headerToAnimate) headerToAnimate.querySelectorAll('.animate-in').forEach(el => { el.style.animation = 'none'; el.offsetHeight; el.style.animation = ''; });
                 announceStatus(isResultsView ? "Displaying competency profile results." : "Displaying competency framework.");
                 // Focus the heading when showing framework
                 const headingToFocus = isResultsView ? document.getElementById('framework-heading-results') : document.getElementById('framework-heading-view');
                 if (headingToFocus) setTimeout(() => headingToFocus.focus({ preventScroll: true }), 100); // Focus after slight delay

            } else if (targetId === 'assessment-content') {
                // When switching back to assessment, show the correct section
                showAssessmentSection(currentAssessmentSectionId, false); // Don't scroll initially
            }
        }
        setActiveNavLink(targetId);
        // Scroll to top only when navigating to a non-results view
        if (!isResultsView || targetId !== 'framework-section') {
             window.scrollTo({ top: 0, behavior: 'smooth' });
        } else if (isResultsView && targetId === 'framework-section') {
            // Scroll to results header
            const resultsHeader = document.getElementById('framework-results-header');
            if (resultsHeader) {
                setTimeout(() => {
                    resultsHeader.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 50);
            }
        }
    }

    function showAssessmentSection(sectionId, shouldScroll = true) {
        let previousSectionId = currentAssessmentSectionId;
        assessmentSections.forEach(section => {
            section.style.display = 'none';
            section.classList.remove('active');
        });
        const sectionToShow = document.getElementById(sectionId);
        if (sectionToShow) {
            sectionToShow.style.display = 'flex';
            currentAssessmentSectionId = sectionId;
            setTimeout(() => {
                sectionToShow.classList.add('active');
                sectionToShow.querySelectorAll('.animate-in').forEach(el => {
                     el.style.animation = 'none'; el.offsetHeight; el.style.animation = '';
                });
                 const titleElement = sectionToShow.querySelector('.category-title') || sectionToShow.querySelector('h1');
                 if (titleElement) announceStatus(`Now viewing section: ${titleElement.textContent}`);

                 // Focus the heading of the new section for accessibility
                 if (shouldScroll && titleElement) {
                     setTimeout(() => titleElement.focus({ preventScroll: true }), 100); // Focus after animation starts
                 }

            }, 50);
        }

        // Scroll section into view if requested
        if (shouldScroll && assessmentContent.classList.contains('active')) {
             setTimeout(() => {
                 const headerOffset = 70; // Approx header height + buffer
                 const elementPosition = sectionToShow.getBoundingClientRect().top;
                 const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                 window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
             }, 100); // Delay scroll slightly
        }
    }

    function setActiveNavLink(targetId) {
        navLinks.forEach(link => {
            link.classList.toggle('active-nav-link', link.dataset.target === targetId);
        });
    }

    function openNav() {
        if (sideNav) {
            sideNav.classList.add('nav-open');
            sideNav.setAttribute('aria-hidden', 'false');
        }
        if (overlay) overlay.classList.add('active');
        if (menuToggle) menuToggle.setAttribute('aria-expanded', 'true');
        if (closeNavBtn) closeNavBtn.focus();
    }

    function closeNav() {
        if (sideNav) {
            sideNav.classList.remove('nav-open');
            sideNav.setAttribute('aria-hidden', 'true');
        }
        if (overlay) overlay.classList.remove('active');
        if (menuToggle) {
             menuToggle.setAttribute('aria-expanded', 'false');
             menuToggle.focus();
        }
    }

    function areAllQuestionsAnswered(sectionElement) {
        if (!sectionElement) return false;
        const radioGroups = {};
        sectionElement.querySelectorAll('input[type="radio"]').forEach(radio => {
            radioGroups[radio.name] = true;
        });
        for (const name in radioGroups) {
            if (!assessmentForm.querySelector(`input[name="${name}"]:checked`)) return false;
        }
        return true;
    }

    function getLevel(score) {
        if (score <= 4) return { number: 1, name: 'Explorer' };
        if (score <= 7) return { number: 2, name: 'Practitioner' };
        if (score <= 10) return { number: 3, name: 'Strategist' };
        return { number: 4, name: 'Innovator' };
    }

    function removeTableHighlights() {
        frameworkTableCells.forEach(cell => cell.classList.remove('highlighted-level'));
    }

    function calculateResults() {
        const formData = new FormData(assessmentForm);
        const scores = { cat1: 0, cat2: 0, cat3: 0 };
        const questionMap = {
            q1: 'cat1', q2: 'cat1', q3: 'cat1',
            q4: 'cat2', q5: 'cat2', q6: 'cat2',
            q7: 'cat3', q8: 'cat3', q9: 'cat3'
        };
        for (let [name, value] of formData.entries()) {
            const category = questionMap[name];
            if (category) scores[category] += parseInt(value, 10);
        }
        const level1 = getLevel(scores.cat1);
        const level2 = getLevel(scores.cat2);
        const level3 = getLevel(scores.cat3);
        displayResultsOnFramework(level1, level2, level3);
    }

    function displayResultsOnFramework(level1, level2, level3) {
        removeTableHighlights();
        const cell1 = document.getElementById(`framework-cat1-level${level1.number}`);
        const cell2 = document.getElementById(`framework-cat2-level${level2.number}`);
        const cell3 = document.getElementById(`framework-cat3-level${level3.number}`);
        if (cell1) cell1.classList.add('highlighted-level');
        if (cell2) cell2.classList.add('highlighted-level');
        if (cell3) cell3.classList.add('highlighted-level');
        showContentArea('framework-section', true);
    }

    // CORRECTED Auto-scroll function
    function handleAutoScroll(event) {
        const currentRadio = event.target;
        const currentQuestionDiv = currentRadio.closest('.question');
        if (!currentQuestionDiv) return;

        const currentSection = currentQuestionDiv.closest('.assessment-section');
        if (!currentSection) return;

        const questionsInSection = Array.from(currentSection.querySelectorAll('.question'));
        const currentIndex = questionsInSection.findIndex(div => div === currentQuestionDiv);

        if (currentIndex !== -1 && currentIndex < questionsInSection.length - 1) {
            const nextQuestionDiv = questionsInSection[currentIndex + 1];
            setTimeout(() => {
                const headerOffset = 80; // Header height + buffer
                const elementPosition = nextQuestionDiv.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
                 const nextRadio = nextQuestionDiv.querySelector('input[type="radio"]');
                 if(nextRadio) {
                    // Focusing immediately after scrollIntoView can be unreliable
                    // setTimeout(() => nextRadio.focus(), 400); // Optional focus
                 }
            }, 100); // Delay before scroll
        }
    }


    // --- Event Listeners ---

    // Navigation
    if (menuToggle) {
        menuToggle.addEventListener('click', openNav);
        menuToggle.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') openNav(); });
    }
    if (closeNavBtn) closeNavBtn.addEventListener('click', closeNav);
    if (overlay) overlay.addEventListener('click', closeNav);
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && sideNav.classList.contains('nav-open')) closeNav();
    });

    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = link.dataset.target;
            if (targetId) {
                 if(targetId === 'assessment-content' && currentActiveContentArea !== 'assessment-content') {
                     currentAssessmentSectionId = 'welcome';
                     assessmentForm.reset();
                     removeTableHighlights();
                 } else if(targetId === 'framework-section' && currentActiveContentArea !== 'framework-section') {
                     removeTableHighlights();
                 }
                showContentArea(targetId);
                closeNav();
            }
        });
    });

    // Assessment Flow
    if (startButton) {
        startButton.addEventListener('click', () => {
            if (!assessmentContent.classList.contains('active')) {
                showContentArea('assessment-content');
            }
            assessmentForm.reset();
            removeTableHighlights();
            currentAssessmentSectionId = 'category-1';
            showAssessmentSection('category-1', true); // Scroll to first section
        });
    }
    nextButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            const currentCategorySection = document.getElementById(currentAssessmentSectionId);
            if (areAllQuestionsAnswered(currentCategorySection)) {
                const nextSectionId = e.target.dataset.next;
                if (nextSectionId) {
                    showAssessmentSection(nextSectionId, true); // Scroll to next section
                }
            } else {
                alert('Please answer all questions in this section before proceeding.');
            }
        });
    });
    if (assessmentForm && submitButton) {
         submitButton.addEventListener('click', (e) => {
             e.preventDefault();
             const currentCategorySection = document.getElementById(currentAssessmentSectionId);
             if (areAllQuestionsAnswered(currentCategorySection)) {
                 calculateResults();
             } else {
                  alert('Please answer all questions in this section before submitting.');
             }
         });
    }

     // Framework Restart Button
     if (frameworkRestartButton) {
        frameworkRestartButton.addEventListener('click', () => {
            assessmentForm.reset();
            removeTableHighlights();
            currentAssessmentSectionId = 'welcome';
            showContentArea('assessment-content');
            // showAssessmentSection('welcome'); // Handled by showContentArea
        });
    }

    // Add Auto-Scroll Listener
    allRadioButtons.forEach(radio => {
        radio.addEventListener('change', handleAutoScroll);
    });

    // --- Initial Setup ---
    showContentArea('assessment-content');
    setActiveNavLink('assessment-content');

});