// Global DataTables Configuration
if (typeof $ !== 'undefined' && $.fn && $.fn.dataTable) {
    $.extend(true, $.fn.dataTable.defaults, {
        pageLength: 10,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
        },
        dom: '<"row mb-3"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row mt-3"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
    });
}

document.addEventListener('DOMContentLoaded', () => {
    // 1. Sidebar Toggle
    const sidebar = document.getElementById('sidebar');
    const toggleBtn = document.getElementById('sidebarToggle');
    const mobileToggleBtn = document.getElementById('mobileSidebarToggle');
    
    if (toggleBtn && sidebar) {
        toggleBtn.addEventListener('click', () => {
            if (window.innerWidth >= 992) {
                sidebar.classList.toggle('collapsed');
            }
        });
    }

    if (mobileToggleBtn && sidebar) {
        mobileToggleBtn.addEventListener('click', () => {
            sidebar.classList.toggle('show');
        });
    }

    // 2. Theme Management (Light/Dark)
    const themeToggleBtn = document.getElementById('themeToggle');
    const htmlEl = document.documentElement;
    const themeIcon = themeToggleBtn ? themeToggleBtn.querySelector('i') : null;

    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);

    if (themeToggleBtn) {
        themeToggleBtn.addEventListener('click', () => {
            const currentTheme = htmlEl.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            setTheme(newTheme);
        });
    }

    function setTheme(theme) {
        htmlEl.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
        if (themeIcon) {
            themeIcon.className = theme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
        }
        
        // Update Chart.js colors dynamically if function exists
        if (typeof window.updateChartsTheme === 'function') {
            setTimeout(window.updateChartsTheme, 50); // wait for CSS variables to apply
        }
    }

    // 3. Command Palette (Ctrl + K)
    const cmdPalette = document.getElementById('commandPalette');
    const cmdInput = document.getElementById('cmdInput');
    
    if (cmdPalette && cmdInput) {
        document.addEventListener('keydown', (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                cmdPalette.classList.add('active');
                cmdInput.focus();
            }
            if (e.key === 'Escape' && cmdPalette.classList.contains('active')) {
                cmdPalette.classList.remove('active');
            }
        });

        // Close when clicking outside
        cmdPalette.addEventListener('click', (e) => {
            if (e.target === cmdPalette) {
                cmdPalette.classList.remove('active');
            }
        });

        // Simple Search Filter
        cmdInput.addEventListener('input', function() {
            const val = this.value.toLowerCase();
            const items = cmdPalette.querySelectorAll('.cmd-item');
            items.forEach(item => {
                const text = item.textContent.toLowerCase();
                item.style.display = text.includes(val) ? 'flex' : 'none';
            });
        });
    }

    // 4. Toast Notifications
    window.showToast = function(message, type = 'success') {
        const container = document.getElementById('toastContainer');
        if (!container) return;

        const bgClass = type === 'success' ? 'bg-success text-white' : 
                        type === 'danger' ? 'bg-danger text-white' : 
                        type === 'warning' ? 'bg-warning text-dark' : 'bg-primary text-white';
        const iconClass = type === 'success' ? 'bi-check-circle' : 
                          type === 'danger' ? 'bi-x-circle' : 
                          type === 'warning' ? 'bi-exclamation-triangle' : 'bi-info-circle';

        const toastHtml = `
            <div class="toast align-items-center ${bgClass} border-0 mb-2" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi ${iconClass} me-2"></i> ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', toastHtml);
        const toastEl = container.lastElementChild;
        const bsToast = new bootstrap.Toast(toastEl, { delay: 3000 });
        bsToast.show();
        
        toastEl.addEventListener('hidden.bs.toast', () => {
            toastEl.remove();
        });
    };

    // 5. Real-time Clock
    const rClock = document.getElementById('realtimeClock');
    const rDate = document.getElementById('realtimeDate');
    
    function updateClock() {
        if (!rClock) return;
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        rClock.textContent = `${hours}:${minutes}:${seconds}`;
        
        if (rDate) {
            const options = { year: 'numeric', month: 'short', day: 'numeric' };
            // Adjust Thai year (+543)
            let thDate = now.toLocaleDateString('th-TH', options);
            rDate.textContent = thDate;
        }
    }
    
    if (rClock) {
        updateClock();
        setInterval(updateClock, 1000);
    }
    
    // 6. Fetch Today's Meetings for Notifications
    const notifButton = document.getElementById('notifButton');
    if (notifButton) {
        notifButton.addEventListener('show.bs.dropdown', function () {
            const content = document.getElementById('notifContent');
            const badge = document.getElementById('notifBadge');
            
            // Format today's date for API call
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            const startStr = `${year}-${month}-${day}T00:00:00+07:00`;
            const endStr = `${year}-${month}-${day}T23:59:59+07:00`;
            
            fetch(`api/get_events.php?start=${startStr}&end=${endStr}`)
                .then(res => res.json())
                .then(events => {
                    if (events.length > 0) {
                        badge.classList.remove('d-none');
                        let html = '';
                        events.forEach(evt => {
                            let sourceBadge = evt.extendedProps.source === 'internal' 
                                ? '<span class="badge bg-primary text-white" style="font-size: 0.6rem;">ระบบ</span>' 
                                : '<span class="badge bg-warning text-dark" style="font-size: 0.6rem;">ภายนอก</span>';
                            
                            // format time
                            let tStart = new Date(evt.start).toLocaleTimeString('th-TH', {hour: '2-digit', minute:'2-digit'});
                            html += `
                                <li>
                                    <a class="dropdown-item py-2" href="calendar.php">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1 text-truncate" style="max-width: 180px;">${evt.title}</h6>
                                            <small class="text-muted">${tStart}</small>
                                        </div>
                                        <div class="mt-1">${sourceBadge}</div>
                                    </a>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                            `;
                        });
                        content.innerHTML = html;
                    } else {
                        badge.classList.add('d-none');
                        content.innerHTML = `<li><a class="dropdown-item text-center text-muted py-3" href="#">ไม่มีการประชุมวันนี้</a></li>`;
                    }
                })
                .catch(err => {
                    content.innerHTML = `<li><a class="dropdown-item text-center text-danger py-3" href="#">โหลดข้อมูลล้มเหลว</a></li>`;
                });
        });
        
        // Initial fetch just to check if we should show the red dot badge
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        const startStr = `${year}-${month}-${day}T00:00:00+07:00`;
        const endStr = `${year}-${month}-${day}T23:59:59+07:00`;
        
        fetch(`api/get_events.php?start=${startStr}&end=${endStr}`)
            .then(res => res.json())
            .then(events => {
                const badge = document.getElementById('notifBadge');
                if (events.length > 0 && badge) {
                    badge.classList.remove('d-none');
                }
            }).catch(e => {});
    }
});