document.addEventListener('DOMContentLoaded', () => {
    const clinicSelects = document.querySelectorAll('.js-clinic-select');
    clinicSelects.forEach((clinicSelect) => {
        const form = clinicSelect.closest('form');
        if (!form) return;
        const doctorSelect = form.querySelector('.js-doctor-select');
        if (!doctorSelect) return;

        const syncDoctors = () => {
            const clinicId = clinicSelect.value;
            Array.from(doctorSelect.options).forEach((option) => {
                if (!option.value) {
                    option.hidden = false;
                    return;
                }
                const visible = option.dataset.clinicId === clinicId;
                option.hidden = !visible;
                if (!visible && option.selected) {
                    doctorSelect.value = '';
                }
            });
        };

        clinicSelect.addEventListener('change', syncDoctors);
        syncDoctors();
    });

    const ticketPrintButton = document.querySelector('.js-print-ticket');
    if (ticketPrintButton) {
        ticketPrintButton.addEventListener('click', () => window.print());
    }

    document.querySelectorAll('.js-app-toast').forEach((toastNode) => {
        if (window.bootstrap && bootstrap.Toast) {
            bootstrap.Toast.getOrCreateInstance(toastNode, { delay: 3200 }).show();
        }
    });

    const liveClock = document.querySelector('.js-live-clock');
    if (liveClock) {
        const renderClock = () => {
            const now = new Date();
            liveClock.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        };
        renderClock();
        window.setInterval(renderClock, 1000 * 30);
    }

    const page = document.body.dataset.page;
    if (page === 'display') {
        const fullscreenButton = document.querySelector('.js-fullscreen-toggle');
        const syncFullscreenButton = () => {
            if (!fullscreenButton) return;
            const isFullscreen = !!document.fullscreenElement;
            fullscreenButton.textContent = isFullscreen ? 'Exit full display / إنهاء العرض الكامل' : 'Full display / عرض كامل';
            fullscreenButton.setAttribute('aria-pressed', isFullscreen ? 'true' : 'false');
        };

        if (fullscreenButton && document.fullscreenEnabled) {
            fullscreenButton.addEventListener('click', async () => {
                try {
                    if (document.fullscreenElement) {
                        await document.exitFullscreen();
                    } else {
                        await document.documentElement.requestFullscreen();
                    }
                } catch (error) {
                    console.warn('Fullscreen toggle failed', error);
                }
            });
            document.addEventListener('fullscreenchange', syncFullscreenButton);
            syncFullscreenButton();
        } else if (fullscreenButton) {
            fullscreenButton.hidden = true;
        }

        const cards = Array.from(document.querySelectorAll('.announcement-card'));
        const latest = cards[0];
        if (latest && 'speechSynthesis' in window) {
            const announcementKey = latest.dataset.announcementKey || '';
            const storedKey = window.localStorage.getItem('hospitalQueue:lastAnnouncement') || '';
            if (announcementKey && announcementKey !== storedKey) {
                const speakText = (text, lang) => {
                    if (!text) return;
                    const utterance = new SpeechSynthesisUtterance(text);
                    utterance.lang = lang;
                    const voices = window.speechSynthesis.getVoices();
                    const preferredVoice = voices.find((voice) => voice.lang.toLowerCase().startsWith(lang.slice(0, 2)));
                    if (preferredVoice) utterance.voice = preferredVoice;
                    window.speechSynthesis.speak(utterance);
                };

                window.speechSynthesis.cancel();
                speakText(latest.dataset.announcementEn || '', 'en-US');
                window.setTimeout(() => speakText(latest.dataset.announcementAr || '', 'ar-SA'), 1750);
                window.localStorage.setItem('hospitalQueue:lastAnnouncement', announcementKey);
            }
        }

        const autoRefreshSeconds = parseInt(document.querySelector('[data-auto-refresh]')?.dataset.autoRefresh || '0', 10);
        if (autoRefreshSeconds > 0) {
            window.setTimeout(() => window.location.reload(), autoRefreshSeconds * 1000);
        }
    }
});