// ==================== ADMIN DASHBOARD MAIN SCRIPT ==================== 

let ADMIN_CONFIG = null;
let supabase = null;
let revenueChart = null;
let currentPage = 1;
let studentsData = [];
let selectedStudent = null;
let selectedSessions = [];
let selectedSessionNumber = null;
let originalSessionsData = [];
let adminSessionToken = null;

const months = ['Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'];
const dayNames = ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'];

// ==================== HELPER FUNCTIONS ====================
function showToast(message, type = 'success') {
    const toast = document.getElementById('toast');
    if (!toast) return;
    toast.textContent = message;
    toast.className = `toast ${type}`;
    toast.style.display = 'block';
    setTimeout(() => { toast.style.display = 'none'; }, 3000);
}

function showLoading() {
    const overlay = document.getElementById('loadingOverlay');
    if (overlay) overlay.style.display = 'flex';
}

function hideLoading() {
    const overlay = document.getElementById('loadingOverlay');
    if (overlay) overlay.style.display = 'none';
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function getTodayDate() {
    const today = new Date();
    return today.toISOString().split('T')[0];
}

function isSessionPassed(sessionDate) {
    return sessionDate < getTodayDate();
}

function formatDate(dateString) {
    if (!dateString) return '-';
    return new Date(dateString).toLocaleDateString('ms-MY');
}

function formatDateTime(dateString) {
    if (!dateString) return '-';
    return new Date(dateString).toLocaleString('ms-MY');
}

// ==================== AUTHENTICATION ====================
async function checkAdminAuth() {
    const savedSession = localStorage.getItem(ADMIN_CONFIG.ADMIN_SESSION_KEY);
    const savedToken = localStorage.getItem('dale_admin_token');
    const savedExpiry = localStorage.getItem('dale_admin_expiry');
    
    if (savedSession === 'true' && savedToken && savedExpiry) {
        if (Date.now() < parseInt(savedExpiry)) {
            adminSessionToken = savedToken;
            return true;
        } else {
            localStorage.removeItem(ADMIN_CONFIG.ADMIN_SESSION_KEY);
            localStorage.removeItem('dale_admin_token');
            localStorage.removeItem('dale_admin_expiry');
        }
    }
    
    const password = prompt('🔐 Masukkan kata laluan admin:');
    if (!password) {
        window.location.href = 'https://dale-eduhub.pages.dev/';
        return false;
    }
    
    showLoading();
    
    try {
        const response = await fetch(ADMIN_CONFIG.EDGE_FUNCTIONS.ADMIN_AUTH, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ password: password })
        });
        
        const result = await response.json();
        hideLoading();
        
        if (result.success) {
            adminSessionToken = result.sessionToken;
            localStorage.setItem(ADMIN_CONFIG.ADMIN_SESSION_KEY, 'true');
            localStorage.setItem('dale_admin_token', result.sessionToken);
            localStorage.setItem('dale_admin_expiry', (Date.now() + 24 * 60 * 60 * 1000).toString());
            return true;
        } else {
            alert('Kata laluan salah!');
            window.location.href = 'https://dale-eduhub.pages.dev/';
            return false;
        }
    } catch (error) {
        hideLoading();
        console.error('Auth error:', error);
        alert('Gagal mengesahkan kata laluan. Sila cuba sebentar lagi.');
        window.location.href = 'https://dale-eduhub.pages.dev/';
        return false;
    }
}

// ==================== SIDEBAR FUNCTIONS ====================
function setupSidebar() {
    const menuToggle = document.getElementById('menuToggle');
    if (menuToggle) menuToggle.addEventListener('click', toggleSidebar);
    
    const overlay = document.getElementById('sidebarOverlay');
    if (overlay) overlay.addEventListener('click', closeSidebar);
    
    document.querySelectorAll('.nav-item').forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth <= 1023) closeSidebar();
        });
    });
}

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    if (sidebar) sidebar.classList.toggle('open');
    if (overlay) overlay.classList.toggle('active');
}

function closeSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    if (sidebar) sidebar.classList.remove('open');
    if (overlay) overlay.classList.remove('active');
}

function setupLogout() {
    const logoutBtn = document.getElementById('logoutBtn');
    if (logoutBtn) {
        logoutBtn.addEventListener('click', (e) => {
            e.preventDefault();
            localStorage.removeItem(ADMIN_CONFIG.ADMIN_SESSION_KEY);
            localStorage.removeItem('dale_admin_token');
            localStorage.removeItem('dale_admin_expiry');
            window.location.href = 'https://dale-eduhub.pages.dev/';
        });
    }
}

// ==================== DASHBOARD FUNCTIONS ====================
async function loadDashboardStats() {
    try {
        const { count: sc } = await supabase.from('students').select('*', { count: 'exact', head: true });
        const totalStudentsEl = document.getElementById('totalStudents');
        if (totalStudentsEl) totalStudentsEl.textContent = sc || 0;
        
        const { count: pc } = await supabase.from('payments').select('*', { count: 'exact', head: true }).eq('status', 'pending');
        const pendingPaymentsEl = document.getElementById('pendingPayments');
        if (pendingPaymentsEl) pendingPaymentsEl.textContent = pc || 0;
        
        const today = getTodayDate();
        const eow = new Date();
        eow.setDate(eow.getDate() + 7);
        const { count: sec } = await supabase.from('sessions').select('*', { count: 'exact', head: true })
            .eq('attendance', false)
            .gte('session_date', today)
            .lte('session_date', eow.toISOString().split('T')[0]);
        const upcomingSessionsEl = document.getElementById('upcomingSessions');
        if (upcomingSessionsEl) upcomingSessionsEl.textContent = sec || 0;
        
        const { count: cc } = await supabase.from('contracts').select('*', { count: 'exact', head: true }).eq('signed', false);
        const contractsPendingEl = document.getElementById('contractsPending');
        if (contractsPendingEl) contractsPendingEl.textContent = cc || 0;
    } catch (error) {
        console.error('Error loading stats:', error);
    }
}

async function loadRecentStudents() {
    try {
        const { data } = await supabase
            .from('students')
            .select('name, student_level, created_at, registration_status')
            .order('created_at', { ascending: false })
            .limit(5);
        
        const tbody = document.getElementById('recentStudents');
        const cardContainer = document.getElementById('recentStudentsCard');
        
        if (!data?.length) {
            if (tbody) tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;">Tiada data</td></tr>';
            if (cardContainer) cardContainer.innerHTML = '<div class="card-view-item">Tiada data</div>';
            return;
        }
        
        if (tbody) {
            tbody.innerHTML = data.map(s => `
                <tr>
                    <td>${escapeHtml(s.name)}</td>
                    <td>${escapeHtml(s.student_level || '-')}</td>
                    <td>${formatDate(s.created_at)}</td>
                    <td><span class="status-badge ${s.registration_status === 'approved' ? 'status-verified' : 'status-pending'}">${s.registration_status || 'pending'}</span></td>
                </tr>
            `).join('');
        }
        
        if (cardContainer) {
            cardContainer.innerHTML = data.map(s => `
                <div class="card-view-item">
                    <div class="card-view-row">
                        <span class="card-view-label">Nama</span>
                        <span class="card-view-value">${escapeHtml(s.name)}</span>
                    </div>
                    <div class="card-view-row">
                        <span class="card-view-label">Tingkatan</span>
                        <span class="card-view-value">${escapeHtml(s.student_level || '-')}</span>
                    </div>
                    <div class="card-view-row">
                        <span class="card-view-label">Tarikh</span>
                        <span class="card-view-value">${formatDate(s.created_at)}</span>
                    </div>
                    <div class="card-view-row">
                        <span class="card-view-label">Status</span>
                        <span class="card-view-value"><span class="status-badge ${s.registration_status === 'approved' ? 'status-verified' : 'status-pending'}">${s.registration_status || 'pending'}</span></span>
                    </div>
                </div>
            `).join('');
        }
    } catch (error) {
        console.error('Error loading recent students:', error);
    }
}

async function loadRecentPayments() {
    try {
        const { data } = await supabase
            .from('payments')
            .select(`id, amount, status, created_at, students(name)`)
            .order('created_at', { ascending: false })
            .limit(5);
        
        const tbody = document.getElementById('recentPayments');
        const cardContainer = document.getElementById('recentPaymentsCard');
        
        if (!data?.length) {
            if (tbody) tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;">Tiada data</td></tr>';
            if (cardContainer) cardContainer.innerHTML = '<div class="card-view-item">Tiada data</div>';
            return;
        }
        
        if (tbody) {
            tbody.innerHTML = data.map(p => `
                <tr>
                    <td>${escapeHtml(p.students?.name || '-')}</td>
                    <td>RM ${p.amount || 0}</td>
                    <td><span class="status-badge ${p.status === 'verified' ? 'status-verified' : 'status-pending'}">${p.status || 'pending'}</span></td>
                    <td>${p.status === 'pending' ? `<button class="btn btn-success btn-sm" onclick="window.verifyPayment(${p.id})">Verify</button>` : '-'}</td>
                </tr>
            `).join('');
        }
        
        if (cardContainer) {
            cardContainer.innerHTML = data.map(p => `
                <div class="card-view-item">
                    <div class="card-view-row">
                        <span class="card-view-label">Pelajar</span>
                        <span class="card-view-value">${escapeHtml(p.students?.name || '-')}</span>
                    </div>
                    <div class="card-view-row">
                        <span class="card-view-label">Jumlah</span>
                        <span class="card-view-value">RM ${p.amount || 0}</span>
                    </div>
                    <div class="card-view-row">
                        <span class="card-view-label">Status</span>
                        <span class="card-view-value"><span class="status-badge ${p.status === 'verified' ? 'status-verified' : 'status-pending'}">${p.status || 'pending'}</span></span>
                    </div>
                    <div class="card-view-row">
                        <span class="card-view-label">Tarikh</span>
                        <span class="card-view-value">${formatDate(p.created_at)}</span>
                    </div>
                    ${p.status === 'pending' ? `
                    <div class="card-view-actions">
                        <button class="btn btn-success btn-sm" onclick="window.verifyPayment(${p.id})"><i class="fas fa-check"></i> Verify</button>
                    </div>
                    ` : ''}
                </div>
            `).join('');
        }
    } catch (error) {
        console.error('Error loading recent payments:', error);
    }
}

async function loadRevenueChart() {
    const year = document.getElementById('yearSelect')?.value || '2026';
    const { data } = await supabase
        .from('payments')
        .select('amount, verified_at')
        .eq('status', 'verified')
        .gte('verified_at', `${year}-01-01`)
        .lte('verified_at', `${year}-12-31`);
    
    const monthly = Array(12).fill(0);
    data?.forEach(p => {
        if (p.verified_at) {
            const m = new Date(p.verified_at).getMonth();
            monthly[m] += p.amount || 0;
        }
    });
    
    const monthLabels = ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis'];
    
    if (revenueChart) revenueChart.destroy();
    
    const ctx = document.getElementById('revenueChart')?.getContext('2d');
    if (ctx && typeof Chart !== 'undefined') {
        revenueChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: monthLabels,
                datasets: [{
                    label: 'Pendapatan (RM)',
                    data: monthly,
                    backgroundColor: 'rgba(79,70,229,0.7)',
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: { display: false }
                },
                scales: { 
                    y: { 
                        beginAtZero: true, 
                        ticks: { callback: v => `RM ${v}` } 
                    } 
                }
            }
        });
    }
}

// ==================== STUDENTS PAGE FUNCTIONS ====================
async function loadStudents() {
    showLoading();
    const search = document.getElementById('searchInput')?.value || '';
    const status = document.getElementById('statusFilter')?.value || '';
    const level = document.getElementById('levelFilter')?.value || '';
    
    let query = supabase.from('students').select('*', { count: 'exact' });
    if (search) query = query.or(`name.ilike.%${search}%,dale_id.ilike.%${search}%`);
    if (status) query = query.eq('registration_status', status);
    if (level) query = query.eq('student_level', level);
    
    const { data, error, count } = await query
        .order('created_at', { ascending: false })
        .range((currentPage - 1) * 20, currentPage * 20 - 1);
    
    if (error) { console.error(error); hideLoading(); return; }
    
    studentsData = data || [];
    const totalPages = Math.ceil((count || 0) / 20);
    
    const tbody = document.getElementById('studentsTableBody');
    const cardContainer = document.getElementById('studentsCardView');
    
    if (!tbody) { hideLoading(); return; }
    
    if (studentsData.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;">Tiada data</td></tr>';
        if (cardContainer) cardContainer.innerHTML = '<div class="card-view-item">Tiada data</div>';
    } else {
        tbody.innerHTML = studentsData.map(s => `
            <tr>
                <td>${s.id}</td>
                <td>${escapeHtml(s.dale_id || '-')}</td>
                <td>${escapeHtml(s.name)}</td>
                <td>${escapeHtml(s.student_level || '-')}</td>
                <td>${escapeHtml(s.subject || '-')}</td>
                <td><span class="status-badge ${s.registration_status === 'approved' ? 'status-verified' : 'status-pending'}">${s.registration_status || 'pending'}</span></td>
                <td class="action-buttons">
                    <button class="btn btn-primary btn-sm" onclick="window.editStudent(${s.id})"><i class="fas fa-edit"></i></button>
                    <button class="btn btn-danger btn-sm" onclick="window.deleteStudent(${s.id}, '${escapeHtml(s.name)}')"><i class="fas fa-trash"></i></button>
                    <button class="btn btn-success btn-sm" onclick="window.viewClasses(${s.id})"><i class="fas fa-calendar"></i></button>
                </td>
            </tr>
        `).join('');
        
        if (cardContainer) {
            cardContainer.innerHTML = studentsData.map(s => `
                <div class="card-view-item">
                    <div class="card-view-row"><span class="card-view-label">ID</span><span class="card-view-value">${s.id}</span></div>
                    <div class="card-view-row"><span class="card-view-label">DALe ID</span><span class="card-view-value">${escapeHtml(s.dale_id || '-')}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Nama</span><span class="card-view-value">${escapeHtml(s.name)}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Tingkatan</span><span class="card-view-value">${escapeHtml(s.student_level || '-')}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Subjek</span><span class="card-view-value">${escapeHtml(s.subject || '-')}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Status</span><span class="card-view-value"><span class="status-badge ${s.registration_status === 'approved' ? 'status-verified' : 'status-pending'}">${s.registration_status || 'pending'}</span></span></div>
                    <div class="card-view-actions">
                        <button class="btn btn-primary btn-sm" onclick="window.editStudent(${s.id})"><i class="fas fa-edit"></i> Edit</button>
                        <button class="btn btn-danger btn-sm" onclick="window.deleteStudent(${s.id}, '${escapeHtml(s.name)}')"><i class="fas fa-trash"></i> Padam</button>
                        <button class="btn btn-success btn-sm" onclick="window.viewClasses(${s.id})"><i class="fas fa-calendar"></i> Kelas</button>
                    </div>
                </div>
            `).join('');
        }
    }
    
    const paginationEl = document.getElementById('pagination');
    if (paginationEl) {
        let pgHtml = '';
        for (let i = 1; i <= totalPages; i++) {
            pgHtml += `<button class="${i === currentPage ? 'active' : ''}" onclick="window.goToPage(${i})">${i}</button>`;
        }
        paginationEl.innerHTML = pgHtml;
    }
    hideLoading();
}

function goToPage(page) { 
    currentPage = page; 
    loadStudents(); 
}

function openAddStudentModal() {
    const form = document.getElementById('studentForm');
    if (form) form.reset();
    const studentId = document.getElementById('studentId');
    if (studentId) studentId.value = '';
    const modalTitle = document.getElementById('modalTitle');
    if (modalTitle) modalTitle.textContent = 'Tambah Pelajar';
    const modal = document.getElementById('studentModal');
    if (modal) modal.style.display = 'flex';
}

function closeModal() { 
    const modal = document.getElementById('studentModal');
    if (modal) modal.style.display = 'none';
}

function closeDetailModal() { 
    const modal = document.getElementById('detailModal');
    if (modal) modal.style.display = 'none';
}

window.editStudent = function(id) {
    const s = studentsData.find(s => s.id === id);
    if (!s) return;
    
    const modalTitle = document.getElementById('modalTitle');
    if (modalTitle) modalTitle.textContent = 'Edit Pelajar';
    
    const studentId = document.getElementById('studentId');
    if (studentId) studentId.value = s.id;
    
    const studentName = document.getElementById('studentName');
    if (studentName) studentName.value = s.name || '';
    
    const studentPhone = document.getElementById('studentPhone');
    if (studentPhone) studentPhone.value = s.student_phone || '';
    
    const studentEmail = document.getElementById('studentEmail');
    if (studentEmail) studentEmail.value = s.student_email || '';
    
    const parentName = document.getElementById('parentName');
    if (parentName) parentName.value = s.parent_name || '';
    
    const parentPhone = document.getElementById('parentPhone');
    if (parentPhone) parentPhone.value = s.parent_phone || '';
    
    const parentEmail = document.getElementById('parentEmail');
    if (parentEmail) parentEmail.value = s.parent_email || '';
    
    const studentLevel = document.getElementById('studentLevel');
    if (studentLevel) studentLevel.value = s.student_level || '';
    
    const subject = document.getElementById('subject');
    if (subject) subject.value = s.subject || '';
    
    const registrationStatus = document.getElementById('registrationStatus');
    if (registrationStatus) registrationStatus.value = s.registration_status || 'pending';
    
    const modal = document.getElementById('studentModal');
    if (modal) modal.style.display = 'flex';
};

window.deleteStudent = async function(id, name) {
    if (!confirm(`Padam pelajar "${name}"?`)) return;
    showLoading();
    const { error } = await supabase.from('students').delete().eq('id', id);
    if (error) { showToast('Gagal memadam', 'error'); }
    else { showToast('Pelajar dipadam', 'success'); loadStudents(); }
    hideLoading();
};

window.viewClasses = function(id) {
    window.location.href = `https://dale-eduhub.pages.dev/attendance/?student=${id}`;
};

async function saveStudent() {
    const id = document.getElementById('studentId')?.value;
    const data = {
        name: document.getElementById('studentName')?.value,
        student_phone: document.getElementById('studentPhone')?.value,
        student_email: document.getElementById('studentEmail')?.value,
        parent_name: document.getElementById('parentName')?.value,
        parent_phone: document.getElementById('parentPhone')?.value,
        parent_email: document.getElementById('parentEmail')?.value,
        student_level: document.getElementById('studentLevel')?.value,
        subject: document.getElementById('subject')?.value,
        registration_status: document.getElementById('registrationStatus')?.value || 'pending'
    };
    
    if (!data.name || !data.student_level || !data.subject) {
        showToast('Sila lengkapkan maklumat wajib', 'error'); 
        return;
    }
    
    showLoading();
    let error;
    if (id) {
        const r = await supabase.from('students').update(data).eq('id', id);
        error = r.error;
    } else {
        const r = await supabase.from('students').insert([data]);
        error = r.error;
    }
    
    if (error) { showToast('Gagal simpan', 'error'); }
    else { showToast('Disimpan', 'success'); closeModal(); loadStudents(); }
    hideLoading();
}

// ==================== PAYMENTS PAGE FUNCTIONS ====================
async function loadPayments() {
    showLoading();
    const search = document.getElementById('searchInput')?.value?.toLowerCase() || '';
    const status = document.getElementById('statusFilter')?.value || '';
    
    let query = supabase
        .from('payments')
        .select(`id, amount, status, created_at, cycle_number, students(id, name, dale_id)`);
    
    if (status) query = query.eq('status', status);
    
    const { data, error } = await query.order('created_at', { ascending: false });
    
    if (error) { console.error(error); hideLoading(); return; }
    
    let filtered = data || [];
    if (search) filtered = filtered.filter(p => p.students?.name?.toLowerCase().includes(search));
    
    const tbody = document.getElementById('paymentsTableBody');
    const cardContainer = document.getElementById('paymentsCardView');
    
    if (!tbody) { hideLoading(); return; }
    
    if (filtered.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;">Tiada data</td></tr>';
        if (cardContainer) cardContainer.innerHTML = '<div class="card-view-item">Tiada data</div>';
    } else {
        tbody.innerHTML = filtered.map(p => `
            <tr>
                <td>${p.id}</td>
                <td>${escapeHtml(p.students?.name || '-')}<br><small>${escapeHtml(p.students?.dale_id || '-')}</small></td>
                <td>RM ${p.amount || 0}</td>
                <td>${p.cycle_number || 1}</td>
                <td><span class="status-badge ${p.status === 'verified' ? 'status-verified' : 'status-pending'}">${p.status || 'pending'}</span></td>
                <td>${formatDate(p.created_at)}</td>
                <td class="action-buttons">
                    ${p.status === 'pending' ? `
                        <button class="btn btn-success btn-sm" onclick="window.verifyPayment(${p.id})"><i class="fas fa-check"></i> Verify</button>
                        <button class="btn btn-warning btn-sm" onclick="window.remindPayment(${p.id})"><i class="fas fa-bell"></i> Remind</button>
                    ` : '-'}
                </td>
            </tr>
        `).join('');
        
        if (cardContainer) {
            cardContainer.innerHTML = filtered.map(p => `
                <div class="card-view-item">
                    <div class="card-view-row"><span class="card-view-label">ID</span><span class="card-view-value">${p.id}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Pelajar</span><span class="card-view-value">${escapeHtml(p.students?.name || '-')}<br><small>${escapeHtml(p.students?.dale_id || '-')}</small></span></div>
                    <div class="card-view-row"><span class="card-view-label">Jumlah</span><span class="card-view-value">RM ${p.amount || 0}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Kitaran</span><span class="card-view-value">${p.cycle_number || 1}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Status</span><span class="card-view-value"><span class="status-badge ${p.status === 'verified' ? 'status-verified' : 'status-pending'}">${p.status || 'pending'}</span></span></div>
                    <div class="card-view-row"><span class="card-view-label">Tarikh</span><span class="card-view-value">${formatDate(p.created_at)}</span></div>
                    ${p.status === 'pending' ? `
                        <div class="card-view-actions">
                            <button class="btn btn-success btn-sm" onclick="window.verifyPayment(${p.id})"><i class="fas fa-check"></i> Verify</button>
                            <button class="btn btn-warning btn-sm" onclick="window.remindPayment(${p.id})"><i class="fas fa-bell"></i> Remind</button>
                        </div>
                    ` : ''}
                </div>
            `).join('');
        }
    }
    hideLoading();
}

window.verifyPayment = async function(paymentId) {
    if (!confirm('Sahkan pembayaran ini?')) return;
    showLoading();
    try {
        const { data: payment } = await supabase
            .from('payments')
            .select('student_id, class_id, cycle_number')
            .eq('id', paymentId)
            .single();
        
        const response = await fetch(ADMIN_CONFIG.EDGE_FUNCTIONS.VERIFY_PAYMENT, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                paymentId: parseInt(paymentId),
                studentId: payment.student_id,
                classId: payment.class_id,
                cycleNumber: payment.cycle_number || 1
            })
        });
        
        if (response.ok) { 
            showToast('Pembayaran disahkan!', 'success'); 
        } else { 
            throw new Error('Verification failed'); 
        }
        
        if (document.getElementById('paymentsTableBody')) { 
            loadPayments(); 
        } else { 
            loadRecentPayments(); 
            loadDashboardStats(); 
        }
    } catch (e) { 
        console.error(e);
        showToast('Gagal mengesahkan pembayaran', 'error'); 
    }
    hideLoading();
};

window.remindPayment = async function(paymentId) {
    if (!confirm('Hantar reminder ke WhatsApp?')) return;
    showLoading();
    try {
        const { data: payment } = await supabase
            .from('payments')
            .select('student_id, class_id, amount, cycle_number')
            .eq('id', paymentId)
            .single();
        
        const { data: student } = await supabase
            .from('students')
            .select('name, parent_phone, student_phone, dale_id')
            .eq('id', payment.student_id)
            .single();
        
        let phone = student.parent_phone || student.student_phone;
        if (phone) {
            phone = phone.replace(/^0/, '+60');
            if (!phone.startsWith('+')) phone = '+60' + phone;
        }
        
        const msg = `🔔 *PERINGATAN BAYARAN* 🔔\n\nKami belum terima bayaran untuk *${student.name}*.\n\n💰 Jumlah: RM ${payment.amount}\n🆔 DALe ID: ${student.dale_id || '-'}\n📌 Kitaran: ${payment.cycle_number || 1}\n\n🏦 Bank Islam\n📌 88300020171400\n📌 DG NURFATIN FATIHAH BINTI AHMAD\n\nSila buat pembayaran secepat mungkin. Terima kasih.\n\n_DALe EduHub_`;
        
        if (phone) {
            window.open(`https://wa.me/${phone}?text=${encodeURIComponent(msg)}`, '_blank');
            showToast('Reminder dihantar', 'success');
        } else {
            showToast('Nombor telefon tidak dijumpai', 'warning');
        }
    } catch (e) { 
        console.error(e);
        showToast('Gagal menghantar reminder', 'error'); 
    }
    hideLoading();
};

// ==================== SESSIONS PAGE FUNCTIONS ====================
async function loadSessions() {
    showLoading();
    const search = document.getElementById('searchInput')?.value?.toLowerCase() || '';
    const statusFilter = document.getElementById('statusFilter')?.value || '';
    
    let query = supabase
        .from('sessions')
        .select(`id, session_date, session_time, session_number, cycle_number, attendance, attendance_marked_at, learning_topic, students(id, name, dale_id)`)
        .order('session_date', { ascending: false });
    
    const { data } = await query;
    
    let filtered = data || [];
    if (search) filtered = filtered.filter(s => s.students?.name?.toLowerCase().includes(search));
    if (statusFilter === 'hadir') filtered = filtered.filter(s => s.attendance === true);
    else if (statusFilter === 'tidak_hadir') filtered = filtered.filter(s => s.attendance === false && s.attendance_marked_at);
    else if (statusFilter === 'belum') filtered = filtered.filter(s => s.attendance === false && !s.attendance_marked_at);
    
    const tbody = document.getElementById('sessionsTableBody');
    const cardContainer = document.getElementById('sessionsCardView');
    
    if (!tbody) { hideLoading(); return; }
    
    if (filtered.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;">Tiada data</td></tr>';
        if (cardContainer) cardContainer.innerHTML = '<div class="card-view-item">Tiada data</div>';
    } else {
        tbody.innerHTML = filtered.map(s => `
            <tr>
                <td>${formatDate(s.session_date)}</td>
                <td>${s.session_time || '-'}</td>
                <td>${escapeHtml(s.students?.name || '-')}<br><small>${escapeHtml(s.students?.dale_id || '-')}</small></td>
                <td>Sesi ${s.session_number || '-'}</td>
                <td>${s.cycle_number || '-'}</td>
                <td>${escapeHtml(s.learning_topic) || '-'}</td>
                <td>${s.attendance === true ? '<span class="status-badge status-verified">Hadir</span>' : (s.attendance_marked_at ? '<span class="status-badge status-pending">Tidak Hadir</span>' : '<span class="status-badge">Belum</span>')}</td>
                <td class="action-buttons"><button class="btn btn-primary btn-sm" onclick="window.markAttendance(${s.id}, ${s.students?.id})"><i class="fas fa-edit"></i> Isi</button></td>
            </tr>
        `).join('');
        
        if (cardContainer) {
            cardContainer.innerHTML = filtered.map(s => `
                <div class="card-view-item">
                    <div class="card-view-row"><span class="card-view-label">Tarikh</span><span class="card-view-value">${formatDate(s.session_date)}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Masa</span><span class="card-view-value">${s.session_time || '-'}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Pelajar</span><span class="card-view-value">${escapeHtml(s.students?.name || '-')}<br><small>${escapeHtml(s.students?.dale_id || '-')}</small></span></div>
                    <div class="card-view-row"><span class="card-view-label">Sesi</span><span class="card-view-value">Sesi ${s.session_number || '-'} (Kitaran ${s.cycle_number || '-'})</span></div>
                    <div class="card-view-row"><span class="card-view-label">Topik</span><span class="card-view-value">${escapeHtml(s.learning_topic) || '-'}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Status</span><span class="card-view-value">${s.attendance === true ? '<span class="status-badge status-verified">Hadir</span>' : (s.attendance_marked_at ? '<span class="status-badge status-pending">Tidak Hadir</span>' : '<span class="status-badge">Belum</span>')}</span></div>
                    <div class="card-view-actions"><button class="btn btn-primary btn-sm" onclick="window.markAttendance(${s.id}, ${s.students?.id})"><i class="fas fa-edit"></i> Isi Kehadiran</button></div>
                </div>
            `).join('');
        }
    }
    hideLoading();
}

window.markAttendance = function(sessionId, studentId) {
    window.location.href = `https://dale-eduhub.pages.dev/attendance/?student=${studentId}`;
};

// ==================== LAPORAN PAGE FUNCTIONS ====================
window.viewDetail = function(laporan) {
    const monthName = months[laporan.month - 1] || laporan.month;
    const reportYear = laporan.created_at ? new Date(laporan.created_at).getFullYear() : '-';
    
    const html = `
        <div class="detail-label"><i class="fas fa-user-graduate"></i> Maklumat Pelajar</div>
        <div class="detail-value"><strong>Nama:</strong> ${escapeHtml(laporan.students?.name || '-')}<br><strong>DALe ID:</strong> ${escapeHtml(laporan.students?.dale_id || '-')}<br><strong>Tingkatan:</strong> ${escapeHtml(laporan.students?.student_level || '-')}<br><strong>Subjek:</strong> ${escapeHtml(laporan.students?.subject || '-')}</div>
        <div class="detail-label"><i class="fas fa-chart-simple"></i> Keputusan</div>
        <div class="detail-value"><strong>Bulan:</strong> ${monthName} ${reportYear}<br><strong>Markah:</strong> ${laporan.markah || 0}/100<br><strong>Gred:</strong> ${laporan.gred || '-'}<br><strong>Tahap Penguasaan (TP):</strong> ${laporan.tp || '-'}</div>
        <div class="detail-label"><i class="fas fa-thumbs-up"></i> Kekuatan & Penguasaan</div>
        <div class="detail-value">${escapeHtml(laporan.kekuatan) || '-'}</div>
        <div class="detail-label"><i class="fas fa-exclamation-triangle"></i> Cabaran & Penambahbaikan</div>
        <div class="detail-value">${escapeHtml(laporan.cabaran) || '-'}</div>
        <div class="detail-label"><i class="fas fa-calendar"></i> Tarikh Laporan</div>
        <div class="detail-value">${formatDateTime(laporan.created_at)}</div>
    `;
    
    const modalBody = document.getElementById('detailModalBody');
    if (modalBody) modalBody.innerHTML = html;
    const modal = document.getElementById('detailModal');
    if (modal) modal.style.display = 'flex';
};

async function loadLaporan() {
    showLoading();
    const search = document.getElementById('searchInput')?.value?.toLowerCase() || '';
    const month = document.getElementById('monthFilter')?.value || '';
    const year = document.getElementById('yearFilter')?.value || '';
    
    let query = supabase
        .from('laporan')
        .select(`id, month, markah, gred, tp, kekuatan, cabaran, created_at, students(id, name, dale_id, student_level, subject)`)
        .order('created_at', { ascending: false });
    
    const { data, error } = await query;
    
    if (error) { console.error(error); showToast('Gagal memuatkan data', 'error'); hideLoading(); return; }
    
    let filtered = data || [];
    if (search) filtered = filtered.filter(l => l.students?.name?.toLowerCase().includes(search));
    if (month) filtered = filtered.filter(l => l.month === parseInt(month));
    if (year) filtered = filtered.filter(l => l.created_at && new Date(l.created_at).getFullYear() === parseInt(year));
    
    const tbody = document.getElementById('laporanTableBody');
    const cardContainer = document.getElementById('laporanCardView');
    
    if (!tbody) { hideLoading(); return; }
    
    if (filtered.length === 0) {
        tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;">Tiada data</td></tr>';
        if (cardContainer) cardContainer.innerHTML = '<div class="card-view-item">Tiada data</div>';
    } else {
        tbody.innerHTML = filtered.map(l => {
            const monthName = months[l.month - 1] || l.month;
            const reportYear = l.created_at ? new Date(l.created_at).getFullYear() : '-';
            return `<tr>
                <td>${escapeHtml(l.students?.name || '-')}<br><small>${escapeHtml(l.students?.dale_id || '-')}</small></td>
                <td>${monthName}</td><td>${reportYear}</td><td><strong>${l.markah || 0}/100</strong></td>
                <td><span style="background:#e2e8f0; padding:4px 10px; border-radius:20px;">${l.gred || '-'}</span></td>
                <td>${l.tp || '-'}</td>
                <td style="max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escapeHtml((l.kekuatan || '').substring(0, 50))}${(l.kekuatan || '').length > 50 ? '...' : ''}</td>
                <td style="max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escapeHtml((l.cabaran || '').substring(0, 50))}${(l.cabaran || '').length > 50 ? '...' : ''}</td>
                <td>${formatDate(l.created_at)}</td>
                <td><button class="btn btn-primary btn-sm" onclick='window.viewDetail(${JSON.stringify(l).replace(/'/g, "\\'")})'><i class="fas fa-eye"></i> Lihat</button></td>
            </tr>`;
        }).join('');
        
        if (cardContainer) {
            cardContainer.innerHTML = filtered.map(l => {
                const monthName = months[l.month - 1] || l.month;
                const reportYear = l.created_at ? new Date(l.created_at).getFullYear() : '-';
                return `<div class="card-view-item">
                    <div class="card-view-row"><span class="card-view-label">Pelajar</span><span class="card-view-value">${escapeHtml(l.students?.name || '-')}<br><small>${escapeHtml(l.students?.dale_id || '-')}</small></span></div>
                    <div class="card-view-row"><span class="card-view-label">Bulan/Tahun</span><span class="card-view-value">${monthName} ${reportYear}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Markah</span><span class="card-view-value"><strong>${l.markah || 0}/100</strong> (${l.gred || '-'})</span></div>
                    <div class="card-view-row"><span class="card-view-label">TP</span><span class="card-view-value">${l.tp || '-'}</span></div>
                    <div class="card-view-row"><span class="card-view-label">Tarikh</span><span class="card-view-value">${formatDate(l.created_at)}</span></div>
                    <div class="card-view-actions"><button class="btn btn-primary btn-sm" onclick='window.viewDetail(${JSON.stringify(l).replace(/'/g, "\\'")})'><i class="fas fa-eye"></i> Lihat Detail</button></div>
                </div>`;
            }).join('');
        }
    }
    hideLoading();
}

// ==================== FEEDBACK PAGE FUNCTIONS ====================
async function loadFeedback() {
    showLoading();
    const search = document.getElementById('searchInput')?.value?.toLowerCase() || '';
    const rating = document.getElementById('ratingFilter')?.value || '';
    const year = document.getElementById('yearFilterFeedback')?.value || '';
    
    let query = supabase
        .from('feedback')
        .select(`id, satisfaction, likes, improvements, progress, comments, created_at, students(id, name, dale_id, student_level, subject)`)
        .order('created_at', { ascending: false });
    
    const { data, error } = await query;
    
    if (error) { console.error(error); showToast('Gagal memuatkan feedback', 'error'); hideLoading(); return; }
    
    let filtered = data || [];
    if (search) filtered = filtered.filter(f => f.students?.name?.toLowerCase().includes(search));
    if (rating) filtered = filtered.filter(f => f.satisfaction === parseInt(rating));
    if (year) filtered = filtered.filter(f => f.created_at && new Date(f.created_at).getFullYear() === parseInt(year));
    
    const total = filtered.length;
    const totalRating = filtered.reduce((sum, f) => sum + (f.satisfaction || 0), 0);
    const avgRating = total > 0 ? (totalRating / total).toFixed(1) : 0;
    const fiveStarCount = filtered.filter(f => f.satisfaction === 5).length;
    
    const totalFeedbackEl = document.getElementById('totalFeedback');
    if (totalFeedbackEl) totalFeedbackEl.textContent = total;
    const avgRatingEl = document.getElementById('avgRating');
    if (avgRatingEl) avgRatingEl.textContent = avgRating;
    const fiveStarCountEl = document.getElementById('fiveStarCount');
    if (fiveStarCountEl) fiveStarCountEl.textContent = fiveStarCount;
    
    const container = document.getElementById('feedbackList');
    if (!container) { hideLoading(); return; }
    
    if (filtered.length === 0) {
        container.innerHTML = '<div style="text-align:center; padding:2rem; background:white; border-radius:20px;">📭 Tiada feedback buat masa ini.</div>';
    } else {
        container.innerHTML = filtered.map(f => {
            let stars = '';
            for (let i = 1; i <= 5; i++) {
                stars += i <= (f.satisfaction || 0) ? '<i class="fas fa-star star"></i>' : '<i class="far fa-star star empty"></i>';
            }
            const ratingText = { 5: 'Sangat Puas', 4: 'Puas', 3: 'Sederhana', 2: 'Tidak Puas', 1: 'Sangat Tidak Puas' }[f.satisfaction] || '';
            
            return `<div class="feedback-card">
                <div class="feedback-header">
                    <div><span class="feedback-student">${escapeHtml(f.students?.name || '-')}</span><span style="color:var(--admin-gray); margin-left:10px;">${escapeHtml(f.students?.dale_id || '-')}</span><span style="color:var(--admin-gray); margin-left:10px;">${escapeHtml(f.students?.subject || '-')}</span></div>
                    <div class="feedback-rating">${stars}<span class="rating-value">(${ratingText})</span></div>
                </div>
                <div class="feedback-content">
                    ${f.likes ? `<div class="feedback-label"><i class="fas fa-thumbs-up"></i> Yang Disukai:</div><p>${escapeHtml(f.likes)}</p>` : ''}
                    ${f.improvements ? `<div class="feedback-label"><i class="fas fa-tools"></i> Penambahbaikan:</div><p>${escapeHtml(f.improvements)}</p>` : ''}
                    ${f.progress ? `<div class="feedback-label"><i class="fas fa-chart-line"></i> Perkembangan:</div><p>${escapeHtml(f.progress)}</p>` : ''}
                    ${f.comments ? `<div class="feedback-label"><i class="fas fa-comment"></i> Komen Tambahan:</div><p>${escapeHtml(f.comments)}</p>` : ''}
                    <div class="feedback-date"><i class="fas fa-calendar-alt"></i> ${formatDateTime(f.created_at)}</div>
                </div>
            </div>`;
        }).join('');
    }
    hideLoading();
}

// ==================== RESCHEDULE PAGE FUNCTIONS ====================
async function loadStudentsForReschedule() {
    const { data, error } = await supabase
        .from('students')
        .select('id, name, dale_id, subject')
        .eq('registration_status', 'approved')
        .order('name');
    
    if (error) { console.error('Error loading students:', error); showToast('Gagal memuatkan senarai pelajar', 'error'); return; }
    
    const select = document.getElementById('studentSelect');
    if (!select) return;
    
    select.innerHTML = '<option value="">-- Pilih Pelajar --</option>';
    data?.forEach(student => {
        select.innerHTML += `<option value="${student.id}">${escapeHtml(student.name)} (${escapeHtml(student.dale_id || 'No ID')}) - ${escapeHtml(student.subject || '-')}</option>`;
    });
    
    const searchInput = document.getElementById('studentSearch');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const options = select.options;
            for (let i = 1; i < options.length; i++) {
                options[i].style.display = options[i].text.toLowerCase().includes(searchTerm) ? '' : 'none';
            }
        });
    }
    
    select.addEventListener('change', function() {
        if (this.value) { 
            loadStudentSessionsForReschedule(this.value); 
        } else { 
            const container = document.getElementById('sessionsContainer');
            if (container) container.style.display = 'none'; 
            selectedStudent = null; 
            selectedSessionNumber = null; 
        }
    });
}

async function loadStudentSessionsForReschedule(studentId) {
    showLoading();
    
    const { data: student, error: studentError } = await supabase.from('students').select('*').eq('id', parseInt(studentId)).single();
    if (studentError) { showToast('Gagal memuatkan data pelajar', 'error'); hideLoading(); return; }
    selectedStudent = student;
    
    const { data: sessions, error: sessionsError } = await supabase.from('sessions').select('*').eq('student_id', parseInt(studentId)).order('session_number');
    if (sessionsError) { showToast('Gagal memuatkan sesi kelas', 'error'); hideLoading(); return; }
    
    selectedSessions = sessions || [];
    originalSessionsData = JSON.parse(JSON.stringify(selectedSessions));
    
    renderSessionsListForReschedule();
    const container = document.getElementById('sessionsContainer');
    if (container) container.style.display = 'block';
    hideLoading();
}

function renderSessionsListForReschedule() {
    const container = document.getElementById('sessionsList');
    if (!container) return;
    
    const upcomingSessions = selectedSessions.filter(s => !s.attendance && !isSessionPassed(s.session_date));
    const passedSessions = selectedSessions.filter(s => !s.attendance && isSessionPassed(s.session_date));
    
    let html = '';
    
    if (upcomingSessions.length > 0) {
        html += `<h4 style="margin-bottom: 0.8rem; color: var(--admin-dark);">Sesi Akan Datang:</h4>`;
        upcomingSessions.forEach(session => {
            const dayName = dayNames[new Date(session.session_date).getDay()];
            html += `<div class="session-item" data-session="${session.session_number}" onclick="window.selectSessionForReschedule(${session.session_number})"><div><strong>Sesi ${session.session_number}</strong><br><span style="font-size: 0.85rem;">${session.session_date} (${dayName}) - ${session.session_time || '-'}</span></div><i class="fas fa-chevron-right" style="color: var(--admin-primary);"></i></div>`;
        });
    } else { 
        html += `<p style="color: var(--admin-gray);">✅ Tiada sesi yang perlu direschedule.</p>`; 
    }
    
    if (passedSessions.length > 0) {
        html += `<h4 style="margin: 1.5rem 0 0.8rem; color: var(--admin-dark);">Sesi Telah Berlalu (Tidak boleh reschedule):</h4>`;
        passedSessions.forEach(session => {
            const dayName = dayNames[new Date(session.session_date).getDay()];
            html += `<div class="session-item" style="opacity: 0.5;"><div><strong>Sesi ${session.session_number}</strong><br><span style="font-size: 0.85rem;">${session.session_date} (${dayName}) - ${session.session_time || '-'}</span></div><span class="info-badge badge-past">Telah Berlalu</span></div>`;
        });
    }
    
    container.innerHTML = html;
}

window.selectSessionForReschedule = function(sessionNumber) {
    selectedSessionNumber = sessionNumber;
    document.querySelectorAll('.session-item').forEach(item => {
        item.classList.remove('selected-session');
        if (item.getAttribute('data-session') == sessionNumber) item.classList.add('selected-session');
    });
    const selectedSessionText = document.getElementById('selectedSessionText');
    if (selectedSessionText) selectedSessionText.innerHTML = `Sesi ${sessionNumber}`;
    
    const rescheduleType = document.querySelector('input[name="rescheduleType"]:checked')?.value;
    const submitBtn = document.getElementById('submitRescheduleBtn');
    if (rescheduleType === 'single' && submitBtn) submitBtn.disabled = false;
};

function setupReschedulePage() {
    const radioButtons = document.querySelectorAll('input[name="rescheduleType"]');
    if (!radioButtons.length) return;
    
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            const singleDiv = document.getElementById('singleSessionDiv');
            const dateTimeDiv = document.getElementById('dateTimeDiv');
            const postponeDiv = document.getElementById('postponeDiv');
            const submitBtn = document.getElementById('submitRescheduleBtn');
            
            if (singleDiv) singleDiv.style.display = 'none';
            if (dateTimeDiv) dateTimeDiv.style.display = 'none';
            if (postponeDiv) postponeDiv.style.display = 'none';
            
            if (this.value === 'single') {
                if (singleDiv) singleDiv.style.display = 'block';
                if (dateTimeDiv) dateTimeDiv.style.display = 'block';
                if (submitBtn) submitBtn.disabled = !selectedSessionNumber;
            } else if (this.value === 'all') {
                if (dateTimeDiv) dateTimeDiv.style.display = 'block';
                if (submitBtn) submitBtn.disabled = false;
            } else if (this.value === 'postpone') {
                if (postponeDiv) postponeDiv.style.display = 'block';
                if (submitBtn) submitBtn.disabled = false;
            }
        });
    });
    
    const submitBtn = document.getElementById('submitRescheduleBtn');
    if (submitBtn) submitBtn.addEventListener('click', submitReschedule);
    
    const newDate = document.getElementById('newDate');
    if (newDate) newDate.min = getTodayDate();
}

async function submitReschedule() {
    const rescheduleType = document.querySelector('input[name="rescheduleType"]:checked')?.value;
    if (!rescheduleType) { showToast('Sila pilih jenis perubahan', 'error'); return; }
    
    showLoading();
    
    try {
        let waMessage = '';
        let rescheduledSessions = [];
        
        if (rescheduleType === 'single') {
            if (!selectedSessionNumber) { showToast('Sila pilih sesi', 'error'); hideLoading(); return; }
            
            const newDate = document.getElementById('newDate')?.value;
            const newTime = document.getElementById('newTime')?.value;
            if (!newDate || !newTime) { showToast('Sila masukkan tarikh dan masa baru', 'error'); hideLoading(); return; }
            
            const originalSession = originalSessionsData.find(s => s.session_number === selectedSessionNumber);
            if (!originalSession) { showToast('Sesi tidak ditemui', 'error'); hideLoading(); return; }
            if (isSessionPassed(originalSession.session_date)) { showToast('Sesi ini telah berlalu dan tidak boleh direschedule', 'error'); hideLoading(); return; }
            
            const { error: updateError } = await supabase
                .from('sessions')
                .update({ 
                    session_date: newDate, 
                    session_time: newTime, 
                    rescheduled: true, 
                    rescheduled_at: new Date().toISOString(), 
                    original_date: originalSession.session_date, 
                    original_time: originalSession.session_time 
                })
                .eq('student_id', selectedStudent.id)
                .eq('session_number', selectedSessionNumber);
            
            if (updateError) throw updateError;
            rescheduledSessions = [selectedSessionNumber];
            
            waMessage = `🔄 *PEMBERITAHUAN PERUBAHAN JADUAL* 🔄\n\nJadual kelas untuk *${selectedStudent.name}* telah diubah.\n\n📋 *Perubahan:* Sesi ${selectedSessionNumber} dijadualkan semula\n📅 *Tarikh Asal:* ${originalSession.session_date}\n⏰ *Masa Asal:* ${originalSession.session_time}\n📅 *Tarikh Baru:* ${newDate}\n⏰ *Masa Baru:* ${newTime}\n`;
            
        } else if (rescheduleType === 'all') {
            const newDate = document.getElementById('newDate')?.value;
            const newTime = document.getElementById('newTime')?.value;
            if (!newDate || !newTime) { showToast('Sila masukkan tarikh dan masa baru', 'error'); hideLoading(); return; }
            
            const upcomingSessions = selectedSessions.filter(s => !s.attendance && !isSessionPassed(s.session_date));
            if (upcomingSessions.length === 0) { showToast('Tiada sesi yang perlu direschedule', 'error'); hideLoading(); return; }
            
            const startDate = new Date(newDate);
            for (let i = 0; i < upcomingSessions.length; i++) {
                const sessionDate = new Date(startDate);
                sessionDate.setDate(startDate.getDate() + (i * 7));
                const newSessionDate = sessionDate.toISOString().split('T')[0];
                
                const { error: updateError } = await supabase
                    .from('sessions')
                    .update({ 
                        session_date: newSessionDate, 
                        session_time: newTime, 
                        rescheduled: true, 
                        rescheduled_at: new Date().toISOString(), 
                        original_date: upcomingSessions[i].session_date, 
                        original_time: upcomingSessions[i].session_time 
                    })
                    .eq('id', upcomingSessions[i].id);
                
                if (updateError) throw updateError;
                rescheduledSessions.push(upcomingSessions[i].session_number);
            }
            
            waMessage = `🔄 *PEMBERITAHUAN PERUBAHAN JADUAL* 🔄\n\nJadual kelas untuk *${selectedStudent.name}* telah diubah.\n\n📋 *Perubahan:* ${upcomingSessions.length} sesi direschedule\n📅 *Tarikh Mula Baru:* ${newDate}\n⏰ *Masa Baru:* ${newTime}\n`;
            
        } else if (rescheduleType === 'postpone') {
            const days = parseInt(document.getElementById('postponeDays')?.value);
            if (!days || days <= 0) { showToast('Sila masukkan bilangan hari yang sah', 'error'); hideLoading(); return; }
            
            const upcomingSessions = selectedSessions.filter(s => !s.attendance && !isSessionPassed(s.session_date));
            if (upcomingSessions.length === 0) { showToast('Tiada sesi yang perlu dipostpone', 'error'); hideLoading(); return; }
            
            for (const session of upcomingSessions) {
                const currentDate = new Date(session.session_date);
                const newDate = new Date(currentDate);
                newDate.setDate(currentDate.getDate() + days);
                const newSessionDate = newDate.toISOString().split('T')[0];
                
                const { error: updateError } = await supabase
                    .from('sessions')
                    .update({ 
                        session_date: newSessionDate, 
                        rescheduled: true, 
                        rescheduled_at: new Date().toISOString(), 
                        postpone_days: days, 
                        original_date: session.session_date, 
                        original_time: session.session_time 
                    })
                    .eq('id', session.id);
                
                if (updateError) throw updateError;
                rescheduledSessions.push(session.session_number);
            }
            
            waMessage = `🔄 *PEMBERITAHUAN PERUBAHAN JADUAL* 🔄\n\nJadual kelas untuk *${selectedStudent.name}* telah diubah.\n\n📋 *Perubahan:* ${upcomingSessions.length} sesi ditangguhkan ${days} hari\n`;
        }
        
        const { data: updatedSessions } = await supabase.from('sessions').select('*').eq('student_id', selectedStudent.id).order('session_number');
        
        waMessage += `\n📊 *JADUAL LENGKAP:*\n`;
        updatedSessions?.forEach(session => {
            const dayName = dayNames[new Date(session.session_date).getDay()];
            const isRescheduled = rescheduledSessions.includes(session.session_number);
            waMessage += `${isRescheduled ? '🔄 ' : '📅 '}Sesi ${session.session_number}: ${session.session_date} (${dayName}) - ${session.session_time || '-'}\n`;
        });
        waMessage += `\n\nTerima kasih.\n\n_DALe EduHub - Dream • Act • Learn_`;
        
        const phone = selectedStudent.parent_phone || selectedStudent.student_phone;
        let formattedPhone = phone ? phone.replace(/^0/, '+60') : '';
        if (formattedPhone && !formattedPhone.startsWith('+')) formattedPhone = '+60' + formattedPhone;
        
        if (formattedPhone) {
            showToast('Jadual berjaya dikemaskini!', 'success');
            setTimeout(() => { 
                window.open(`https://wa.me/${formattedPhone}?text=${encodeURIComponent(waMessage)}`, '_blank'); 
            }, 1500);
        } else { 
            showToast('Jadual dikemaskini tetapi nombor telefon tidak dijumpai', 'warning'); 
        }
        
        setTimeout(() => { 
            loadStudentSessionsForReschedule(selectedStudent.id); 
            selectedSessionNumber = null; 
        }, 2000);
        
    } catch (error) { 
        console.error('Error:', error); 
        showToast('Gagal mengemaskini jadual: ' + error.message, 'error'); 
    } finally { 
        hideLoading(); 
    }
}

// ==================== FORCE MOBILE/DESKTOP VIEW FIX ====================
function enforceResponsiveView() {
    const isMobile = window.innerWidth <= 767;
    const tableContainers = document.querySelectorAll('.table-container');
    const cardViews = document.querySelectorAll('.mobile-card-view');
    
    if (isMobile) {
        tableContainers.forEach(el => { if (el) el.style.display = 'none'; });
        cardViews.forEach(el => { if (el) el.style.display = 'flex'; });
    } else {
        tableContainers.forEach(el => { if (el) el.style.display = 'block'; });
        cardViews.forEach(el => { if (el) el.style.display = 'none'; });
    }
}

// ==================== PAGE INITIALIZATION ====================
function initPage() {
    const fullPath = window.location.pathname;
    const filename = fullPath.split('/').pop();
    const pathSegments = fullPath.split('/').filter(p => p);
    const lastSegment = pathSegments[pathSegments.length - 1] || '';
    
    // Dashboard
    if (filename === 'index.html' || filename === '' || fullPath === '/' || lastSegment === 'dashboard') {
        if (document.getElementById('revenueChart')) {
            loadDashboardStats(); 
            loadRecentStudents(); 
            loadRecentPayments(); 
            loadRevenueChart();
            const yearSelect = document.getElementById('yearSelect');
            if (yearSelect) yearSelect.addEventListener('change', loadRevenueChart);
        }
    } 
    // Students
    else if (filename === 'pelajar' || lastSegment === 'pelajar' || fullPath.includes('/pelajar')) {
        loadStudents();
        const addBtn = document.getElementById('addStudentBtn');
        if (addBtn) addBtn.addEventListener('click', openAddStudentModal);
        const saveBtn = document.getElementById('saveStudentBtn');
        if (saveBtn) saveBtn.addEventListener('click', saveStudent);
        const searchInput = document.getElementById('searchInput');
        if (searchInput) searchInput.addEventListener('input', () => { currentPage = 1; loadStudents(); });
        const statusFilter = document.getElementById('statusFilter');
        if (statusFilter) statusFilter.addEventListener('change', () => { currentPage = 1; loadStudents(); });
        const levelFilter = document.getElementById('levelFilter');
        if (levelFilter) levelFilter.addEventListener('change', () => { currentPage = 1; loadStudents(); });
        
        window.onclick = function(event) { 
            if (event.target === document.getElementById('studentModal')) closeModal(); 
        };
    }
    // Payments
    else if (filename === 'pembayaran' || lastSegment === 'pembayaran' || fullPath.includes('/pembayaran')) {
        loadPayments();
        const searchInput = document.getElementById('searchInput');
        if (searchInput) searchInput.addEventListener('input', loadPayments);
        const statusFilter = document.getElementById('statusFilter');
        if (statusFilter) statusFilter.addEventListener('change', loadPayments);
    }
    // Sessions
    else if (filename === 'sesi' || lastSegment === 'sesi' || fullPath.includes('/sesi')) {
        loadSessions();
        const searchInput = document.getElementById('searchInput');
        if (searchInput) searchInput.addEventListener('input', loadSessions);
        const statusFilter = document.getElementById('statusFilter');
        if (statusFilter) statusFilter.addEventListener('change', loadSessions);
    }
    // Reports
    else if (filename === 'laporan' || lastSegment === 'laporan' || fullPath.includes('/laporan')) {
        loadLaporan();
        const searchInput = document.getElementById('searchInput');
        if (searchInput) searchInput.addEventListener('input', loadLaporan);
        const monthFilter = document.getElementById('monthFilter');
        if (monthFilter) monthFilter.addEventListener('change', loadLaporan);
        const yearFilter = document.getElementById('yearFilter');
        if (yearFilter) yearFilter.addEventListener('change', loadLaporan);
        window.onclick = function(event) { 
            if (event.target === document.getElementById('detailModal')) closeDetailModal(); 
        };
    }
    // Feedback
    else if (filename === 'feedback' || lastSegment === 'feedback' || fullPath.includes('/feedback')) {
        loadFeedback();
        const searchInput = document.getElementById('searchInput');
        if (searchInput) searchInput.addEventListener('input', loadFeedback);
        const ratingFilter = document.getElementById('ratingFilter');
        if (ratingFilter) ratingFilter.addEventListener('change', loadFeedback);
        const yearFilter = document.getElementById('yearFilterFeedback');
        if (yearFilter) yearFilter.addEventListener('change', loadFeedback);
    }
    // Reschedule
    else if (filename === 'reschedule' || lastSegment === 'reschedule' || fullPath.includes('/reschedule')) {
        loadStudentsForReschedule();
        setupReschedulePage();
    }
}

function initPageWithResponsiveFix() { 
    initPage(); 
    setTimeout(() => { enforceResponsiveView(); }, 200); 
}

// ==================== INITIALIZATION ====================
async function initAdmin() {
    try {
        if (typeof ADMIN_CONFIG === 'undefined') {
            const response = await fetch('/admin-config.js');
            const configText = await response.text();
            const configMatch = configText.match(/const ADMIN_CONFIG = ({[\s\S]*?});/);
            if (configMatch) { 
                ADMIN_CONFIG = eval('(' + configMatch[1] + ')'); 
            }
        }
        
        if (!ADMIN_CONFIG) { throw new Error('Failed to load configuration'); }
        
        if (typeof window.supabase !== 'undefined' && window.supabase.createClient) {
            supabase = window.supabase.createClient(ADMIN_CONFIG.SUPABASE_URL, ADMIN_CONFIG.SUPABASE_ANON_KEY);
        } else { 
            throw new Error('Supabase library not loaded'); 
        }
        
        if (!await checkAdminAuth()) return;
        
        setupSidebar();
        setupLogout();
        initPageWithResponsiveFix();
        
    } catch (error) { 
        console.error('Init error:', error); 
        showToast('Gagal memuatkan konfigurasi: ' + error.message, 'error'); 
    }
}

window.addEventListener('resize', function() { 
    setTimeout(enforceResponsiveView, 100); 
});

// ==================== EXPOSE FUNCTIONS TO WINDOW ====================
window.goToPage = goToPage;
window.closeModal = closeModal;
window.closeDetailModal = closeDetailModal;
window.verifyPayment = verifyPayment;
window.remindPayment = remindPayment;
window.markAttendance = markAttendance;
window.editStudent = editStudent;
window.deleteStudent = deleteStudent;
window.viewClasses = viewClasses;
window.selectSessionForReschedule = selectSessionForReschedule;
window.viewDetail = viewDetail;

// Start the app
document.addEventListener('DOMContentLoaded', initAdmin);