// assets/js/app.js

document.addEventListener('DOMContentLoaded', () => {
    // Initialization Charts Settings
    Chart.register(ChartDataLabels); 
    Chart.defaults.font.family = "'Sarabun', sans-serif";
    Chart.defaults.color = '#64748b'; 
    Chart.defaults.scale.grid.color = '#f1f5f9';
    Chart.defaults.scale.grid.drawBorder = false;
    Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 23, 42, 0.9)';
    Chart.defaults.plugins.tooltip.titleFont = { size: 12, family: "'Sarabun', sans-serif", weight: 'bold' };
    Chart.defaults.plugins.tooltip.padding = 10;
    Chart.defaults.plugins.tooltip.cornerRadius = 8;
});

// ============================================================================
// ฟังก์ชัน Global UI สำหรับจัดการแท็บและเมนู Sidebar (เพื่อทดแทน mock_data.js)
// ============================================================================
window.toggleSubmenu = function(id, btn) {
    const el = document.getElementById(id);
    const icon = btn.querySelector('.fa-chevron-down');
    if (el && el.classList.contains('hidden')) {
        el.classList.remove('hidden'); el.classList.add('flex');
        if(icon) icon.classList.add('rotate-180'); 
        btn.classList.add('text-white');
    } else if (el) {
        el.classList.add('hidden'); el.classList.remove('flex');
        if(icon) icon.classList.remove('rotate-180'); 
        btn.classList.remove('text-white');
    }
};

window.switchTab = function(tabId, btnElement, pageTitle) {
    // ซ่อนทุกแท็บก่อน
    document.querySelectorAll('.tab-content').forEach(el => {
        el.classList.add('hidden');
        el.classList.remove('block', 'animate-fade-in');
    });
    
    // เคลียร์สถานะปุ่มเมนูทั้งหมด
    document.querySelectorAll('.sidebar-tab').forEach(btn => {
        btn.classList.remove('bg-blue-600/20', 'text-blue-400', 'font-bold', 'border-blue-500/20', 'shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]');
        btn.classList.add('text-slate-400', 'font-medium', 'border-transparent');
    });
    
    // แสดงแท็บที่เลือก
    const targetTab = document.getElementById(tabId);
    if (targetTab) {
        targetTab.classList.remove('hidden');
        targetTab.classList.add('block', 'animate-fade-in');
    }
    
    // ไฮไลต์ปุ่มปัจจุบัน
    btnElement.classList.remove('text-slate-400', 'font-medium', 'border-transparent');
    btnElement.classList.add('bg-blue-600/20', 'text-blue-400', 'font-bold', 'border-blue-500/20', 'shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]');
    
    // เปลี่ยนชื่อหัวเพจ
    const pageTitleEl = document.getElementById('page-title');
    if(pageTitleEl) pageTitleEl.innerText = pageTitle;
    
    // เลื่อนหน้าจอกลับขึ้นบนสุด
    const mainContent = document.getElementById('main-content');
    if(mainContent) mainContent.scrollTop = 0; 
    
    // ปิด Sidebar หากเป็นหน้าจอมือถือ
    if (window.innerWidth < 1024) window.closeSidebar();
    
    // Trigger Resize ให้ Chart อัปเดตขนาดให้พอดี
    window.dispatchEvent(new Event('resize'));
};

window.openSidebar = function() {
    const sb = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    if(sb) sb.classList.remove('-translate-x-full');
    if(overlay) {
        overlay.classList.remove('hidden');
        setTimeout(() => {
            overlay.classList.remove('opacity-0', 'pointer-events-none');
            overlay.classList.add('opacity-100', 'pointer-events-auto');
        }, 10);
    }
};

window.closeSidebar = function() {
    const sb = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    if(sb) sb.classList.add('-translate-x-full');
    if(overlay) {
        overlay.classList.remove('opacity-100', 'pointer-events-auto');
        overlay.classList.add('opacity-0', 'pointer-events-none');
        setTimeout(() => overlay.classList.add('hidden'), 300);
    }
};