app.js

/* ==========================================================================
   AuraStudy Core Application Script
   ========================================================================== */

// --- Global State Store ---
let state = {
    settings: {
        userName: "Sanidhya",
        userGrade: "B.Tech Computer Science",
        attendanceTarget: 75
    },
    subjects: [],
    assignments: [],
    planner: [],
    notes: []
};

// --- Mock / Demo Data (Loaded on First Run) ---
const demoSubjects = [
    { id: "sub-1", name: "Computer Networks", attended: 11, total: 16 },
    { id: "sub-2", name: "Mathematics IV", attended: 14, total: 18 },
    { id: "sub-3", name: "Database Systems", attended: 15, total: 16 },
    { id: "sub-4", name: "Software Engineering", attended: 12, total: 15 }
];

const demoAssignments = [
    { 
        id: "asn-1", 
        title: "Networks Lab 3 - Socket Programming", 
        subjectId: "sub-1", 
        deadline: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().slice(0, 16), // Tomorrow
        priority: "high", 
        notes: "Implement basic TCP multi-client chat application in Python.",
        isCompleted: false,
        isExam: false
    },
    { 
        id: "asn-2", 
        title: "Maths Problem Set 4 - Fourier Transforms", 
        subjectId: "sub-2", 
        deadline: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16), // In 2 days
        priority: "medium", 
        notes: "Solve Questions 1 to 10 on page 245.",
        isCompleted: false,
        isExam: false
    },
    { 
        id: "asn-3", 
        title: "Database SQL Queries Assignment", 
        subjectId: "sub-3", 
        deadline: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16), // In 5 days
        priority: "low", 
        notes: "Complete schema creation and join statements sheet.",
        isCompleted: false,
        isExam: false
    },
    { 
        id: "asn-4", 
        title: "Networks Mid-Term Theory Exam", 
        subjectId: "sub-1", 
        deadline: new Date(Date.now() + 4 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16), // In 4 days
        priority: "high", 
        notes: "Chapters 1 to 4 coverage. Focus on OSI model layers.",
        isCompleted: false,
        isExam: true
    },
    { 
        id: "asn-5", 
        title: "Software Engineering Project proposal", 
        subjectId: "sub-4", 
        deadline: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16), // 2 days ago
        priority: "medium", 
        notes: "Submit team member details and wireframes draft.",
        isCompleted: true,
        isExam: false
    }
];

const demoPlanner = [
    { id: "tsk-1", title: "Revise routing algorithms", priority: "high", isCompleted: false, dateCreated: new Date().toDateString() },
    { id: "tsk-2", title: "Solve calculus practice sheet", priority: "medium", isCompleted: true, dateCreated: new Date().toDateString() },
    { id: "tsk-3", title: "Watch SQL indexes video lecture", priority: "medium", isCompleted: false, dateCreated: new Date().toDateString() },
    { id: "tsk-4", title: "Read Chapter 4 of Software Engineering book", priority: "low", isCompleted: false, dateCreated: new Date().toDateString() }
];

const demoNotes = [
    { 
        id: "nte-1", 
        title: "Subnet Masking Tricks", 
        subject: "Networks", 
        content: "A subnet mask splits the IP address into network and host addresses.\n\nKey rules:\n- Class A: 255.0.0.0 (/8)\n- Class B: 255.255.0.0 (/16)\n- Class C: 255.255.255.0 (/24)\n\nQuick formula for hosts: 2^(32 - CIDR) - 2. Always subtract 2 for network & broadcast addresses.",
        dateCreated: new Date().toLocaleDateString()
    },
    { 
        id: "nte-2", 
        title: "SQL Joins Cheatsheet", 
        subject: "Database Systems", 
        content: "- INNER JOIN: returns matching records in both tables.\n- LEFT JOIN: returns all records from left table + matched right.\n- RIGHT JOIN: returns all records from right table + matched left.\n- FULL OUTER JOIN: returns all records when there is a match in either table.",
        dateCreated: new Date().toLocaleDateString()
    },
    { 
        id: "nte-3", 
        title: "SOLID Principles Notes", 
        subject: "Software Engineering", 
        content: "S - Single Responsibility: A class should have only one reason to change.\nO - Open/Closed: Open for extension, closed for modification.\nL - Liskov Substitution: Derived classes must be substitutable for base classes.\nI - Interface Segregation: Keep interfaces small and specific.\nD - Dependency Inversion: Depend on abstractions, not concretions.",
        dateCreated: new Date().toLocaleDateString()
    }
];

// --- Initialize State & LocalStorage ---
function loadState() {
    const localData = localStorage.getItem("aurastudy_state");
    if (localData) {
        try {
            state = JSON.parse(localData);
        } catch (e) {
            console.error("Error parsing local state data. Initializing demo.", e);
            initDemoData();
        }
    } else {
        initDemoData();
    }
}

function initDemoData() {
    state.subjects = [...demoSubjects];
    state.assignments = [...demoAssignments];
    state.planner = [...demoPlanner];
    state.notes = [...demoNotes];
    saveState();
}

function saveState() {
    localStorage.setItem("aurastudy_state", JSON.stringify(state));
}

// --- Navigation View Router ---
let currentView = "dashboard";

function initRouter() {
    const navLinks = document.querySelectorAll(".nav-link, .mobile-nav-link, .clickable[data-target-view]");
    
    function changeView(viewId) {
        if (!viewId) return;
        currentView = viewId;
        
        // Update URL Hash
        window.location.hash = viewId;

        // Toggle active views styling in side/mobile nav
        document.querySelectorAll(".nav-link, .mobile-nav-link").forEach(link => {
            if (link.getAttribute("data-view") === viewId) {
                link.classList.add("active");
            } else {
                link.classList.remove("active");
            }
        });

        // Hide all views & show target view
        document.querySelectorAll(".view-section").forEach(section => {
            section.classList.remove("active");
        });
        const activeSection = document.getElementById(`view-${viewId}`);
        if (activeSection) {
            activeSection.classList.add("active");
        }

        // Update main header title
        const headerTitle = document.getElementById("view-title");
        const headerActionBtn = document.getElementById("btn-header-action");
        const actionText = document.getElementById("header-action-text");
        
        // Capitalize title
        headerTitle.textContent = viewId.charAt(0).toUpperCase() + viewId.slice(1);
        
        // Adjust Header Quick Action Button depending on view
        headerActionBtn.style.display = "inline-flex";
        if (viewId === "dashboard") {
            actionText.textContent = "New Assignment";
            headerActionBtn.onclick = () => openModal("assignment");
        } else if (viewId === "assignments") {
            actionText.textContent = "Add Assignment";
            headerActionBtn.onclick = () => openModal("assignment");
        } else if (viewId === "attendance") {
            actionText.textContent = "Add Subject";
            headerActionBtn.onclick = () => openModal("subject");
        } else if (viewId === "planner") {
            actionText.textContent = "Clear Checked";
            headerActionBtn.onclick = () => clearCompletedTasks();
        } else if (viewId === "notes") {
            actionText.textContent = "Create Note";
            headerActionBtn.onclick = () => openModal("note");
        } else {
            headerActionBtn.style.display = "none";
        }

        // Render target view data
        renderViewData(viewId);
    }

    // Bind link click triggers
    navLinks.forEach(link => {
        link.addEventListener("click", (e) => {
            const viewTarget = link.getAttribute("data-view") || link.getAttribute("data-target-view");
            changeView(viewTarget);
        });
    });

    // Check location hash on load
    const hash = window.location.hash.replace("#", "");
    if (hash && ["dashboard", "assignments", "attendance", "planner", "notes"].includes(hash)) {
        changeView(hash);
    } else {
        changeView("dashboard");
    }

    // Listen for hash changes
    window.addEventListener("hashchange", () => {
        const h = window.location.hash.replace("#", "");
        if (h && h !== currentView && ["dashboard", "assignments", "attendance", "planner", "notes"].includes(h)) {
            changeView(h);
        }
    });
}

function renderViewData(viewId) {
    // Render specific view UI blocks
    if (viewId === "dashboard") {
        renderDashboardView();
    } else if (viewId === "assignments") {
        renderAssignmentsView();
    } else if (viewId === "attendance") {
        renderAttendanceView();
    } else if (viewId === "planner") {
        renderPlannerView();
    } else if (viewId === "notes") {
        renderNotesView();
    }
    
    // Sync active badges (e.g. pending assignment counts)
    updateGlobalBadges();
}

// --- Global Badges updates ---
function updateGlobalBadges() {
    const pendingAsn = state.assignments.filter(a => !a.isCompleted).length;
    const badge = document.getElementById("badge-assignments-count");
    if (badge) {
        badge.textContent = pendingAsn;
        badge.style.display = pendingAsn > 0 ? "block" : "none";
    }
}

// --- 1. DASHBOARD VIEW RENDER ---
function renderDashboardView() {
    // Student info details
    document.querySelectorAll(".student-name-fill").forEach(el => {
        el.textContent = state.settings.userName;
    });
    
    // Counts
    const totalSubjects = state.subjects.length;
    const pendingAssignments = state.assignments.filter(a => !a.isCompleted && !a.isExam).length;
    const upcomingExams = state.assignments.filter(a => !a.isCompleted && a.isExam && new Date(a.deadline) >= new Date()).length;
    
    // Avg attendance calculation
    let avgAttendance = 0;
    let totalAttended = 0;
    let totalClasses = 0;
    
    state.subjects.forEach(sub => {
        totalAttended += sub.attended;
        totalClasses += sub.total;
    });
    
    if (totalClasses > 0) {
        avgAttendance = Math.round((totalAttended / totalClasses) * 100);
    }
    
    document.getElementById("dashboard-total-subjects").textContent = totalSubjects;
    document.getElementById("dashboard-pending-assignments").textContent = pendingAssignments;
    document.getElementById("dashboard-avg-attendance").textContent = avgAttendance + "%";
    document.getElementById("dashboard-upcoming-exams").textContent = upcomingExams;
    
    // Circular attendance ring in dashboard panel
    const ring = document.getElementById("dashboard-attendance-ring");
    const ringText = document.getElementById("dashboard-attendance-percent");
    if (ring && ringText) {
        ringText.textContent = avgAttendance + "%";
        // stroke-dasharray is 314.16. Calculate offset.
        const offset = 314.16 - (314.16 * avgAttendance) / 100;
        ring.style.strokeDashoffset = offset;
        
        // Colors warning levels
        if (avgAttendance < state.settings.attendanceTarget) {
            ring.style.stroke = "var(--color-danger)";
        } else {
            ring.style.stroke = "var(--color-success)";
        }
    }
    
    // Dashboard Attendance Verdict
    const verdict = document.getElementById("dashboard-attendance-verdict");
    if (verdict) {
        if (totalSubjects === 0) {
            verdict.innerHTML = "No subjects logged yet. Go to <a href='#attendance'>Attendance</a> to get started.";
        } else {
            const target = state.settings.attendanceTarget;
            if (avgAttendance >= target) {
                // Calculate how many overall classes can be missed
                let missCount = 0;
                while (true) {
                    let nextTotal = totalClasses + (missCount + 1);
                    let rate = (totalAttended / nextTotal) * 100;
                    if (rate >= target) {
                        missCount++;
                    } else {
                        break;
                    }
                }
                if (missCount > 0) {
                    verdict.innerHTML = `Your average attendance is <strong>${avgAttendance}%</strong>. You can safely miss up to <strong>${missCount}</strong> classes across your subjects without dipping below the ${target}% target.`;
                } else {
                    verdict.innerHTML = `Your attendance is exactly on target (<strong>${avgAttendance}%</strong>). Do not miss the next class!`;
                }
            } else {
                // Calculate consecutive classes needed to cross target
                let attendCount = 0;
                while (true) {
                    let nextAttended = totalAttended + attendCount;
                    let nextTotal = totalClasses + attendCount;
                    let rate = (nextAttended / nextTotal) * 100;
                    if (rate >= target) {
                        break;
                    }
                    attendCount++;
                }
                verdict.innerHTML = `⚠️ Average attendance (<strong>${avgAttendance}%</strong>) is below your ${target}% target. You must attend the next <strong>${attendCount}</strong> consecutive classes to recover.`;
            }
        }
    }
    
    // Study planner progress bar
    const plannerProgressText = document.getElementById("dashboard-planner-progress-text");
    const plannerProgressBar = document.getElementById("dashboard-planner-progress-bar");
    const todayStr = new Date().toDateString();
    
    const todaysTasks = state.planner.filter(t => t.dateCreated === todayStr || !t.isCompleted);
    const completedTasksCount = todaysTasks.filter(t => t.isCompleted).length;
    const totalTasksCount = todaysTasks.length;
    
    if (plannerProgressText && plannerProgressBar) {
        plannerProgressText.textContent = `${completedTasksCount}/${totalTasksCount} Tasks`;
        const percentage = totalTasksCount > 0 ? Math.round((completedTasksCount / totalTasksCount) * 100) : 0;
        plannerProgressBar.style.width = percentage + "%";
    }
    
    // Render top 4 today's planner tasks in Dashboard
    const dashTaskList = document.getElementById("dashboard-task-list");
    if (dashTaskList) {
        if (todaysTasks.length === 0) {
            dashTaskList.innerHTML = `
                <div class="empty-state">
                    <p>No study tasks created for today.</p>
                    <a href="#planner" class="btn btn-secondary btn-sm mt-2">Go to Planner</a>
                </div>
            `;
        } else {
            // Sort by priority (High, Medium, Low)
            const sortedTasks = [...todaysTasks].sort((a, b) => {
                const priorityWeight = { high: 3, medium: 2, low: 1 };
                return (priorityWeight[b.priority] || 0) - (priorityWeight[a.priority] || 0);
            }).slice(0, 4);
            
            dashTaskList.innerHTML = sortedTasks.map(task => `
                <div class="dashboard-task-item ${task.isCompleted ? 'completed' : ''}">
                    <span class="task-dot ${task.priority}"></span>
                    <span class="task-item-text">${task.title}</span>
                </div>
            `).join("");
        }
    }
    
    // Urgent Assignments (due within 3 days)
    const assignmentList = document.getElementById("dashboard-assignment-list");
    if (assignmentList) {
        const urgent = state.assignments.filter(a => {
            if (a.isCompleted) return false;
            const diffDays = getDiffDays(a.deadline);
            return diffDays >= 0 && diffDays <= 3;
        }).sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
        
        if (urgent.length === 0) {
            assignmentList.innerHTML = `
                <div class="empty-state">
                    <p>No urgent assignments due in next 3 days.</p>
                </div>
            `;
        } else {
            assignmentList.innerHTML = urgent.map(a => {
                const diff = getDiffDays(a.deadline);
                const countBadgeClass = diff <= 1 ? "countdown-danger" : "countdown-warning";
                const countText = diff === 0 ? "Due Today" : diff === 1 ? "Due Tomorrow" : `Due in ${diff} days`;
                const subName = getSubjectName(a.subjectId);
                
                return `
                    <div class="dash-list-item">
                        <div class="dash-item-info">
                            <h5>${a.title}</h5>
                            <p>${subName} • Priority: ${a.priority.toUpperCase()}</p>
                        </div>
                        <div class="dash-item-meta">
                            <span class="countdown-badge ${countBadgeClass}">${countText}</span>
                        </div>
                    </div>
                `;
            }).join("");
        }
    }
    
    // Recent Notes (Top 3)
    const notesList = document.getElementById("dashboard-notes-list");
    if (notesList) {
        const recentNotes = [...state.notes].slice(-3).reverse();
        if (recentNotes.length === 0) {
            notesList.innerHTML = `
                <div class="empty-state">
                    <p>No study notes created yet.</p>
                </div>
            `;
        } else {
            notesList.innerHTML = recentNotes.map(note => `
                <div class="dash-list-item">
                    <div class="dash-item-info">
                        <h5>${note.title}</h5>
                        <p>Subject Tag: ${note.subject} • Created ${note.dateCreated}</p>
                    </div>
                </div>
            `).join("");
        }
    }
}

// --- 2. ASSIGNMENTS TRACKER VIEW RENDER ---
let activeAssignmentFilter = "all";
let assignmentSearchQuery = "";

function initAssignmentsFilter() {
    const filterContainer = document.getElementById("assignment-filters");
    if (filterContainer) {
        filterContainer.querySelectorAll(".filter-btn").forEach(btn => {
            btn.addEventListener("click", () => {
                filterContainer.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
                btn.classList.add("active");
                activeAssignmentFilter = btn.getAttribute("data-filter");
                renderAssignmentsView();
            });
        });
    }
    
    const searchInput = document.getElementById("search-assignments");
    if (searchInput) {
        searchInput.addEventListener("input", (e) => {
            assignmentSearchQuery = e.target.value.toLowerCase().trim();
            renderAssignmentsView();
        });
    }
}

function renderAssignmentsView() {
    const grid = document.getElementById("assignments-grid");
    if (!grid) return;
    
    let list = [...state.assignments];
    const now = new Date();
    
    // Apply search filter
    if (assignmentSearchQuery) {
        list = list.filter(a => {
            const subName = getSubjectName(a.subjectId).toLowerCase();
            return a.title.toLowerCase().includes(assignmentSearchQuery) || 
                   subName.includes(assignmentSearchQuery) ||
                   (a.notes && a.notes.toLowerCase().includes(assignmentSearchQuery));
        });
    }
    
    // Apply tab filter
    if (activeAssignmentFilter === "pending") {
        list = list.filter(a => !a.isCompleted);
    } else if (activeAssignmentFilter === "completed") {
        list = list.filter(a => a.isCompleted);
    } else if (activeAssignmentFilter === "overdue") {
        list = list.filter(a => !a.isCompleted && new Date(a.deadline) < now);
    }
    
    // Sort by: Pending first, then deadline ascending
    list.sort((a, b) => {
        if (a.isCompleted !== b.isCompleted) {
            return a.isCompleted ? 1 : -1;
        }
        return new Date(a.deadline) - new Date(b.deadline);
    });
    
    if (list.length === 0) {
        grid.innerHTML = `
            <div class="empty-state card" style="grid-column: 1 / -1;">
                <h3>No assignments found</h3>
                <p>Try modifying your search filter or add a new assignment.</p>
            </div>
        `;
        return;
    }
    
    grid.innerHTML = list.map(a => {
        const subName = getSubjectName(a.subjectId);
        const deadlineDate = new Date(a.deadline);
        const diffDays = getDiffDays(a.deadline);
        
        let deadlineLabel = "";
        let deadlineClass = "";
        
        if (a.isCompleted) {
            deadlineLabel = "Completed";
            deadlineClass = "status-good";
        } else if (diffDays < 0) {
            deadlineLabel = "Overdue";
            deadlineClass = "status-danger";
        } else if (diffDays === 0) {
            deadlineLabel = "Today";
            deadlineClass = "status-danger";
        } else if (diffDays === 1) {
            deadlineLabel = "Tomorrow";
            deadlineClass = "status-warning";
        } else {
            deadlineLabel = `In ${diffDays} days`;
            deadlineClass = "status-good";
        }
        
        const dateOptions = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
        const formattedDeadline = deadlineDate.toLocaleDateString(undefined, dateOptions);
        
        return `
            <div class="card assignment-card priority-${a.priority} ${a.isCompleted ? 'completed-status' : ''}" id="card-asn-${a.id}">
                <div class="card-header-row">
                    <span class="subject-tag">${subName}</span>
                    <span class="priority-badge ${a.priority}">${a.priority} Priority</span>
                </div>
                <div class="card-body-section">
                    <h4>${a.title}</h4>
                    <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.75rem;">
                        ${a.notes ? a.notes : 'No extra notes.'}
                    </p>
                </div>
                <div class="card-meta-row">
                    <div class="deadline-text">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        <span>Deadline: ${formattedDeadline}</span>
                    </div>
                    <div class="deadline-text">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.25-2.5 3-2.5 5h20c0-2-1-3.75-2.5-5"/><circle cx="12" cy="10" r="6"/></svg>
                        <span>Type: ${a.isExam ? 'Exam Review' : 'Homework / Lab'}</span>
                    </div>
                </div>
                <div class="card-actions-row">
                    <label class="switch-label">
                        <input type="checkbox" class="switch-checkbox" ${a.isCompleted ? 'checked' : ''} onchange="toggleAssignmentStatus('${a.id}')">
                        <span class="switch-slider"></span>
                        <span>Completed</span>
                    </label>
                    <div style="display: flex; gap: 4px;">
                        <button class="btn-card-action btn-edit-action" onclick="editAssignment('${a.id}')" title="Edit">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
                        </button>
                        <button class="btn-card-action" onclick="deleteAssignment('${a.id}')" title="Delete">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        `;
    }).join("");
}

window.toggleAssignmentStatus = function(id) {
    const index = state.assignments.findIndex(a => a.id === id);
    if (index !== -1) {
        state.assignments[index].isCompleted = !state.assignments[index].isCompleted;
        saveState();
        updateGlobalBadges();
        
        // Visual feedback toast
        const statusStr = state.assignments[index].isCompleted ? "completed" : "pending";
        showToast(`Assignment marked as ${statusStr}!`, "success");
        
        // Re-render
        renderAssignmentsView();
    }
};

window.deleteAssignment = function(id) {
    if (confirm("Are you sure you want to delete this assignment?")) {
        state.assignments = state.assignments.filter(a => a.id !== id);
        saveState();
        showToast("Assignment deleted.", "warning");
        renderAssignmentsView();
    }
};

window.editAssignment = function(id) {
    const asn = state.assignments.find(a => a.id === id);
    if (asn) {
        openModal("assignment", asn);
    }
};

// --- 3. ATTENDANCE VIEW RENDER ---
function renderAttendanceView() {
    // Target threshold setup
    const targetInput = document.getElementById("input-attendance-target");
    const targetText = document.getElementById("global-target-value");
    if (targetInput && targetText) {
        targetInput.value = state.settings.attendanceTarget;
        targetText.textContent = state.settings.attendanceTarget + "%";
    }
    
    // Overall stats display
    let avgAttendance = 0;
    let totalAttended = 0;
    let totalClasses = 0;
    
    state.subjects.forEach(sub => {
        totalAttended += sub.attended;
        totalClasses += sub.total;
    });
    
    if (totalClasses > 0) {
        avgAttendance = Math.round((totalAttended / totalClasses) * 100);
    }
    
    const bannerPercent = document.getElementById("attendance-total-percentage");
    const bannerBadge = document.getElementById("attendance-total-badge");
    const target = state.settings.attendanceTarget;
    
    if (bannerPercent && bannerBadge) {
        bannerPercent.textContent = avgAttendance + "%";
        
        if (state.subjects.length === 0) {
            bannerBadge.textContent = "No Data";
            bannerBadge.className = "status-badge status-warning";
        } else if (avgAttendance >= target) {
            bannerBadge.textContent = "On Track";
            bannerBadge.className = "status-badge status-good";
        } else {
            bannerBadge.textContent = "Critical";
            bannerBadge.className = "status-badge status-danger";
        }
    }
    
    const grid = document.getElementById("subjects-grid");
    if (!grid) return;
    
    if (state.subjects.length === 0) {
        grid.innerHTML = `
            <div class="empty-state card" style="grid-column: 1 / -1;">
                <h3>No subjects added yet</h3>
                <p>Add subjects you are currently studying to log and simulate attendance requirements.</p>
                <button class="btn btn-primary btn-sm mt-3" onclick="openModal('subject')">Add First Subject</button>
            </div>
        `;
        return;
    }
    
    grid.innerHTML = state.subjects.map(sub => {
        const percent = sub.total > 0 ? Math.round((sub.attended / sub.total) * 100) : 0;
        let ringClass = "good";
        if (percent < target) {
            ringClass = "danger";
        } else if (percent - target < 5) {
            ringClass = "warning";
        }
        
        // Simulator helper calculations
        let simulatorText = "";
        
        if (sub.total === 0) {
            simulatorText = "No classes recorded. Log first attendance.";
        } else if (percent >= target) {
            // Find max classes they can miss consecutively
            let missCount = 0;
            while (true) {
                let nextTotal = sub.total + (missCount + 1);
                let rate = (sub.attended / nextTotal) * 100;
                if (rate >= target) {
                    missCount++;
                } else {
                    break;
                }
            }
            if (missCount > 0) {
                simulatorText = `Safe: You can miss up to <strong>${missCount}</strong> class(es) consecutively.`;
            } else {
                simulatorText = "Safe: On target limit! Do not miss the next class.";
            }
        } else {
            // Find min classes they must attend consecutively
            let attendCount = 0;
            while (true) {
                let nextAttended = sub.attended + attendCount;
                let nextTotal = sub.total + attendCount;
                let rate = (nextAttended / nextTotal) * 100;
                if (rate >= target) {
                    break;
                }
                attendCount++;
            }
            simulatorText = `Warning: Attend the next <strong>${attendCount}</strong> class(es) consecutively to cross ${target}%.`;
        }
        
        return `
            <div class="card attendance-card" id="card-sub-${sub.id}">
                <div class="attendance-card-header">
                    <h4>${sub.name}</h4>
                    <span class="attendance-percent-badge ${ringClass}">${percent}%</span>
                </div>
                <div class="attendance-count-box">
                    <span>${sub.attended}</span>
                    <span class="denominator">/ ${sub.total} classes</span>
                </div>
                <div class="progress-bar-container mb-3">
                    <div class="progress-bar" style="width: ${percent}%; background: ${percent >= target ? 'var(--color-success)' : 'var(--color-danger)'}"></div>
                </div>
                <p class="attendance-verdict" style="font-size: 0.75rem; text-align: left; background: rgba(0,0,0,0.15)">
                    ${simulatorText}
                </p>
                <div class="attendance-log-buttons">
                    <button class="btn-log btn-attended" onclick="logClassAttendance('${sub.id}', true)">+ Attended</button>
                    <button class="btn-log btn-missed" onclick="logClassAttendance('${sub.id}', false)">+ Missed</button>
                </div>
                <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 0.5rem;">
                    <button class="btn-card-action btn-edit-action" onclick="editSubject('${sub.id}')" title="Edit">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
                    </button>
                    <button class="btn-card-action" onclick="deleteSubject('${sub.id}')" title="Delete">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                    </button>
                </div>
            </div>
        `;
    }).join("");
}

window.logClassAttendance = function(id, attended) {
    const idx = state.subjects.findIndex(s => s.id === id);
    if (idx !== -1) {
        state.subjects[idx].total++;
        if (attended) {
            state.subjects[idx].attended++;
            showToast(`Logged class attended for ${state.subjects[idx].name}!`, "success");
        } else {
            showToast(`Logged class missed for ${state.subjects[idx].name}.`, "warning");
        }
        saveState();
        renderAttendanceView();
    }
};

window.deleteSubject = function(id) {
    if (confirm("Deleting this subject will also delete associated assignments. Proceed?")) {
        state.subjects = state.subjects.filter(s => s.id !== id);
        // Clean assignments tied to subject
        state.assignments = state.assignments.filter(a => a.subjectId !== id);
        saveState();
        showToast("Subject deleted.", "warning");
        renderAttendanceView();
    }
};

window.editSubject = function(id) {
    const sub = state.subjects.find(s => s.id === id);
    if (sub) {
        openModal("subject", sub);
    }
};

// --- 4. STUDY PLANNER VIEW RENDER ---
function renderPlannerView() {
    const todayStr = new Date().toDateString();
    
    // Filter today's tasks
    const todaysTasks = state.planner.filter(t => t.dateCreated === todayStr || !t.isCompleted);
    
    // Count variables
    const completedTasksCount = todaysTasks.filter(t => t.isCompleted).length;
    const totalTasksCount = todaysTasks.length;
    
    const percentage = totalTasksCount > 0 ? Math.round((completedTasksCount / totalTasksCount) * 100) : 0;
    
    // Update big circular progress ring
    const bigRing = document.getElementById("planner-big-ring");
    const bigText = document.getElementById("planner-big-text");
    if (bigRing && bigText) {
        bigText.textContent = percentage + "%";
        // Calculate offset (stroke-dasharray is 314.16)
        const offset = 314.16 - (314.16 * percentage) / 100;
        bigRing.style.strokeDashoffset = offset;
    }
    
    // Update Counts by Priority
    document.getElementById("planner-high-count").textContent = todaysTasks.filter(t => t.priority === "high" && !t.isCompleted).length;
    document.getElementById("planner-medium-count").textContent = todaysTasks.filter(t => t.priority === "medium" && !t.isCompleted).length;
    document.getElementById("planner-low-count").textContent = todaysTasks.filter(t => t.priority === "low" && !t.isCompleted).length;
    
    // Render list
    const listElement = document.getElementById("planner-task-list");
    if (!listElement) return;
    
    if (todaysTasks.length === 0) {
        listElement.innerHTML = `
            <div class="empty-state">
                <p>No study tasks scheduled. Use the form above to add a task!</p>
            </div>
        `;
        return;
    }
    
    // Sort tasks: pending first, then priority weight
    const sorted = [...todaysTasks].sort((a, b) => {
        if (a.isCompleted !== b.isCompleted) {
            return a.isCompleted ? 1 : -1;
        }
        const weight = { high: 3, medium: 2, low: 1 };
        return (weight[b.priority] || 0) - (weight[a.priority] || 0);
    });
    
    listElement.innerHTML = sorted.map(t => `
        <li class="task-item ${t.isCompleted ? 'completed-task' : ''}" id="task-${t.id}">
            <div class="task-item-left">
                <div class="checkbox-custom" onclick="togglePlannerTask('${t.id}')">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <span class="task-item-text">${t.title}</span>
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
                <span class="task-prio-dot ${t.priority}" title="${t.priority} priority"></span>
                <button class="btn-card-action" onclick="deletePlannerTask('${t.id}')" title="Delete">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                </button>
            </div>
        </li>
    `).join("");
}

window.togglePlannerTask = function(id) {
    const idx = state.planner.findIndex(t => t.id === id);
    if (idx !== -1) {
        state.planner[idx].isCompleted = !state.planner[idx].isCompleted;
        saveState();
        renderPlannerView();
    }
};

window.deletePlannerTask = function(id) {
    state.planner = state.planner.filter(t => t.id !== id);
    saveState();
    renderPlannerView();
};

function clearCompletedTasks() {
    const completedCount = state.planner.filter(t => t.isCompleted).length;
    if (completedCount > 0) {
        state.planner = state.planner.filter(t => !t.isCompleted);
        saveState();
        showToast("Completed tasks cleared.", "info");
        renderPlannerView();
    } else {
        showToast("No completed tasks to clear.", "info");
    }
}

// --- 5. NOTES SECTION VIEW RENDER ---
let activeNoteSubjectFilter = "all";
let noteSearchQuery = "";

function renderNotesView() {
    const grid = document.getElementById("notes-grid");
    if (!grid) return;
    
    // Filter notes
    let list = [...state.notes];
    
    if (noteSearchQuery) {
        list = list.filter(n => 
            n.title.toLowerCase().includes(noteSearchQuery) || 
            n.subject.toLowerCase().includes(noteSearchQuery) ||
            n.content.toLowerCase().includes(noteSearchQuery)
        );
    }
    
    if (activeNoteSubjectFilter !== "all") {
        list = list.filter(n => n.subject.toLowerCase() === activeNoteSubjectFilter.toLowerCase());
    }
    
    // Render Filters Row dynamically based on current unique subject tags
    const filterContainer = document.getElementById("note-subject-filters");
    if (filterContainer) {
        const uniqueSubjects = ["All", ...new Set(state.notes.map(n => n.subject.trim()))];
        filterContainer.innerHTML = uniqueSubjects.map(sub => {
            const key = sub.toLowerCase();
            const activeKey = activeNoteSubjectFilter.toLowerCase();
            const isActive = key === activeKey;
            return `
                <button class="filter-btn ${isActive ? 'active' : ''}" onclick="filterNotesBySubject('${key}')">
                    ${sub}
                </button>
            `;
        }).join("");
    }
    
    if (list.length === 0) {
        grid.innerHTML = `
            <div class="empty-state card" style="grid-column: 1 / -1;">
                <h3>No notes found</h3>
                <p>Try searching for another topic or create a new note.</p>
            </div>
        `;
        return;
    }
    
    grid.innerHTML = list.map(n => {
        return `
            <div class="card note-card" id="note-${n.id}">
                <div class="note-card-header">
                    <h4 class="note-card-title">${n.title}</h4>
                    <span class="subject-tag">${n.subject}</span>
                </div>
                <div class="note-card-body">${escapeHTML(n.content)}</div>
                <div class="note-card-footer">
                    <span>${n.dateCreated}</span>
                    <div style="display: flex; gap: 4px;">
                        <button class="btn-card-action btn-edit-action" onclick="editNote('${n.id}')" title="Edit">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
                        </button>
                        <button class="btn-card-action" onclick="deleteNote('${n.id}')" title="Delete">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        `;
    }).join("");
}

window.filterNotesBySubject = function(subjectKey) {
    activeNoteSubjectFilter = subjectKey;
    renderNotesView();
};

window.deleteNote = function(id) {
    if (confirm("Are you sure you want to delete this note?")) {
        state.notes = state.notes.filter(n => n.id !== id);
        saveState();
        showToast("Note deleted.", "warning");
        renderNotesView();
    }
};

window.editNote = function(id) {
    const note = state.notes.find(n => n.id === id);
    if (note) {
        openModal("note", note);
    }
};

function initNotesSearch() {
    const searchInput = document.getElementById("search-notes");
    if (searchInput) {
        searchInput.addEventListener("input", (e) => {
            noteSearchQuery = e.target.value.toLowerCase().trim();
            renderNotesView();
        });
    }
}

// --- MODAL HANDLING & DIALOG FORM SUBMISSIONS ---
function openModal(modalType, editData = null) {
    const backdrop = document.getElementById(`modal-${modalType}`);
    if (!backdrop) return;
    
    backdrop.classList.add("active");
    
    // Clear / setup inputs
    if (modalType === "subject") {
        const titleEl = document.getElementById("subject-modal-title");
        const idInput = document.getElementById("input-subject-id");
        const nameInput = document.getElementById("input-subject-name");
        const attendedInput = document.getElementById("input-subject-attended");
        const totalInput = document.getElementById("input-subject-total");
        
        if (editData) {
            titleEl.textContent = "Edit Subject";
            idInput.value = editData.id;
            nameInput.value = editData.name;
            attendedInput.value = editData.attended;
            totalInput.value = editData.total;
        } else {
            titleEl.textContent = "Add Subject";
            idInput.value = "";
            nameInput.value = "";
            attendedInput.value = "0";
            totalInput.value = "0";
        }
    } else if (modalType === "assignment") {
        const titleEl = document.getElementById("assignment-modal-title");
        const idInput = document.getElementById("input-assignment-id");
        const titleInput = document.getElementById("input-assignment-title");
        const subjectSelect = document.getElementById("select-assignment-subject");
        const deadlineInput = document.getElementById("input-assignment-deadline");
        const prioritySelect = document.getElementById("select-assignment-priority");
        const notesInput = document.getElementById("input-assignment-notes");
        const examCheckbox = document.getElementById("checkbox-assignment-exam");
        
        // Populate subject selector options
        subjectSelect.innerHTML = `
            <option value="" disabled selected>Select Subject</option>
            ${state.subjects.map(s => `<option value="${s.id}">${s.name}</option>`).join("")}
        `;
        
        if (editData) {
            titleEl.textContent = "Edit Assignment";
            idInput.value = editData.id;
            titleInput.value = editData.title;
            subjectSelect.value = editData.subjectId;
            deadlineInput.value = editData.deadline;
            prioritySelect.value = editData.priority;
            notesInput.value = editData.notes || "";
            examCheckbox.checked = editData.isExam || false;
        } else {
            titleEl.textContent = "Add Assignment";
            idInput.value = "";
            titleInput.value = "";
            subjectSelect.selectedIndex = 0;
            // Set default deadline to tomorrow same hour
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            tomorrow.setMinutes(tomorrow.getMinutes() - tomorrow.getTimezoneOffset());
            deadlineInput.value = tomorrow.toISOString().slice(0, 16);
            prioritySelect.value = "medium";
            notesInput.value = "";
            examCheckbox.checked = false;
        }
    } else if (modalType === "note") {
        const titleEl = document.getElementById("note-modal-title");
        const idInput = document.getElementById("input-note-id");
        const titleInput = document.getElementById("input-note-title");
        const subjectInput = document.getElementById("input-note-subject");
        const contentInput = document.getElementById("textarea-note-content");
        
        if (editData) {
            titleEl.textContent = "Edit Note";
            idInput.value = editData.id;
            titleInput.value = editData.title;
            subjectInput.value = editData.subject;
            contentInput.value = editData.content;
        } else {
            titleEl.textContent = "Create Note";
            idInput.value = "";
            titleInput.value = "";
            subjectInput.value = "";
            contentInput.value = "";
        }
    }
}

function closeModal(modalType) {
    const backdrop = document.getElementById(`modal-${modalType}`);
    if (backdrop) {
        backdrop.classList.remove("active");
    }
}

function initModalEvents() {
    // Subject Modal Close
    document.getElementById("btn-close-subject-modal").addEventListener("click", () => closeModal("subject"));
    document.getElementById("btn-cancel-subject-modal").addEventListener("click", () => closeModal("subject"));
    
    // Assignment Modal Close
    document.getElementById("btn-close-assignment-modal").addEventListener("click", () => closeModal("assignment"));
    document.getElementById("btn-cancel-assignment-modal").addEventListener("click", () => closeModal("assignment"));
    
    // Note Modal Close
    document.getElementById("btn-close-note-modal").addEventListener("click", () => closeModal("note"));
    document.getElementById("btn-cancel-note-modal").addEventListener("click", () => closeModal("note"));
    
    // Close on backdrop clicks
    document.querySelectorAll(".modal-backdrop").forEach(backdrop => {
        backdrop.addEventListener("click", (e) => {
            if (e.target === backdrop) {
                const modalId = backdrop.id.replace("modal-", "");
                closeModal(modalId);
            }
        });
    });
    
    // Form Submissions
    // 1. Subject Form
    document.getElementById("form-subject").addEventListener("submit", (e) => {
        e.preventDefault();
        const id = document.getElementById("input-subject-id").value;
        const name = document.getElementById("input-subject-name").value.trim();
        const attended = parseInt(document.getElementById("input-subject-attended").value) || 0;
        const total = parseInt(document.getElementById("input-subject-total").value) || 0;
        
        if (attended > total) {
            alert("Attended classes cannot exceed total classes.");
            return;
        }
        
        if (id) {
            // Edit
            const idx = state.subjects.findIndex(s => s.id === id);
            if (idx !== -1) {
                state.subjects[idx] = { ...state.subjects[idx], name, attended, total };
                showToast("Subject details updated.", "success");
            }
        } else {
            // Add new
            const newSub = {
                id: "sub-" + Date.now(),
                name,
                attended,
                total
            };
            state.subjects.push(newSub);
            showToast("New subject added!", "success");
        }
        
        saveState();
        closeModal("subject");
        renderViewData(currentView);
    });
    
    // 2. Assignment Form
    document.getElementById("form-assignment").addEventListener("submit", (e) => {
        e.preventDefault();
        const id = document.getElementById("input-assignment-id").value;
        const title = document.getElementById("input-assignment-title").value.trim();
        const subjectId = document.getElementById("select-assignment-subject").value;
        const deadline = document.getElementById("input-assignment-deadline").value;
        const priority = document.getElementById("select-assignment-priority").value;
        const notes = document.getElementById("input-assignment-notes").value.trim();
        const isExam = document.getElementById("checkbox-assignment-exam").checked;
        
        if (!subjectId) {
            alert("Please select a subject. If none are listed, create one first under Attendance.");
            return;
        }
        
        if (id) {
            // Edit
            const idx = state.assignments.findIndex(a => a.id === id);
            if (idx !== -1) {
                state.assignments[idx] = { 
                    ...state.assignments[idx], 
                    title, 
                    subjectId, 
                    deadline, 
                    priority, 
                    notes,
                    isExam
                };
                showToast("Assignment updated.", "success");
            }
        } else {
            // New
            const newAsn = {
                id: "asn-" + Date.now(),
                title,
                subjectId,
                deadline,
                priority,
                notes,
                isCompleted: false,
                isExam
            };
            state.assignments.push(newAsn);
            showToast("New assignment added successfully!", "success");
        }
        
        saveState();
        closeModal("assignment");
        renderViewData(currentView);
    });
    
    // 3. Note Form
    document.getElementById("form-note").addEventListener("submit", (e) => {
        e.preventDefault();
        const id = document.getElementById("input-note-id").value;
        const title = document.getElementById("input-note-title").value.trim();
        const subject = document.getElementById("input-note-subject").value.trim();
        const content = document.getElementById("textarea-note-content").value.trim();
        
        if (id) {
            // Edit
            const idx = state.notes.findIndex(n => n.id === id);
            if (idx !== -1) {
                state.notes[idx] = { 
                    ...state.notes[idx], 
                    title, 
                    subject, 
                    content
                };
                showToast("Note content updated.", "success");
            }
        } else {
            // Create New
            const newNote = {
                id: "nte-" + Date.now(),
                title,
                subject,
                content,
                dateCreated: new Date().toLocaleDateString()
            };
            state.notes.push(newNote);
            showToast("New note created!", "success");
        }
        
        saveState();
        closeModal("note");
        renderViewData(currentView);
    });
    
    // Quick Study Task add form
    const quickTaskForm = document.getElementById("form-quick-add-task");
    if (quickTaskForm) {
        quickTaskForm.addEventListener("submit", (e) => {
            e.preventDefault();
            const titleInput = document.getElementById("input-task-title");
            const prioritySelect = document.getElementById("select-task-priority");
            
            const title = titleInput.value.trim();
            const priority = prioritySelect.value;
            
            if (title) {
                const newTask = {
                    id: "tsk-" + Date.now(),
                    title,
                    priority,
                    isCompleted: false,
                    dateCreated: new Date().toDateString()
                };
                state.planner.push(newTask);
                saveState();
                
                titleInput.value = "";
                prioritySelect.value = "medium";
                
                showToast("Study task added.", "success");
                renderPlannerView();
            }
        });
    }
}

// --- Attendance Target Adjustments ---
function initAttendanceTargetControl() {
    const updateBtn = document.getElementById("btn-update-target");
    if (updateBtn) {
        updateBtn.addEventListener("click", () => {
            const targetVal = parseInt(document.getElementById("input-attendance-target").value) || 75;
            if (targetVal < 50 || targetVal > 100) {
                alert("Please enter a valid attendance target target between 50% and 100%.");
                return;
            }
            
            state.settings.attendanceTarget = targetVal;
            saveState();
            showToast(`Attendance target updated to ${targetVal}%`, "info");
            renderAttendanceView();
        });
    }
}

// --- Quick Note Dashboard Button ---
function initQuickNoteDashboard() {
    const quickNoteBtn = document.getElementById("btn-quick-note");
    if (quickNoteBtn) {
        quickNoteBtn.addEventListener("click", () => {
            openModal("note");
        });
    }
}

// --- Reset All Data ---
function initResetButton() {
    const btn = document.getElementById("btn-reset-data");
    if (btn) {
        btn.addEventListener("click", () => {
            if (confirm("This will clear all custom logs and restore the original student demo records. Proceed?")) {
                localStorage.removeItem("aurastudy_state");
                loadState();
                showToast("Database reset to demo state.", "info");
                renderViewData(currentView);
            }
        });
    }
}

// --- TOAST NOTIFICATIONS ENGINE ---
function showToast(message, type = "info") {
    const container = document.getElementById("toast-container");
    if (!container) return;
    
    const toast = document.createElement("div");
    toast.className = `toast toast-${type}`;
    
    // Choose toast icon
    let iconSvg = "";
    if (type === "success") {
        iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--color-success)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;"><polyline points="20 6 9 17 4 12"/></svg>`;
    } else if (type === "warning") {
        iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--color-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg>`;
    } else if (type === "danger") {
        iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--color-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;"><circle cx="12" cy="12" r="10"/><line x1="15" x2="9" y1="9" y2="15"/><line x1="9" x2="15" y1="9" y2="15"/></svg>`;
    } else {
        iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="16" y2="12"/><line x1="12" x2="12.01" y1="8" y2="8"/></svg>`;
    }
    
    toast.innerHTML = `
        ${iconSvg}
        <span>${message}</span>
        <button class="toast-close">&times;</button>
    `;
    
    container.appendChild(toast);
    
    // Bind toast dismiss
    const closeBtn = toast.querySelector(".toast-close");
    closeBtn.onclick = () => {
        toast.remove();
    };
    
    // Auto remove toast after 4s
    setTimeout(() => {
        if (toast.parentNode) {
            toast.style.animation = "toast-fade-in 0.3s reverse forwards";
            setTimeout(() => toast.remove(), 300);
        }
    }, 4000);
}

// --- HELPER UTILITY ENGINES ---
function getSubjectName(subjectId) {
    const sub = state.subjects.find(s => s.id === subjectId);
    return sub ? sub.name : "Unknown Subject";
}

function getDiffDays(deadlineStr) {
    const deadline = new Date(deadlineStr);
    const now = new Date();
    // Normalize dates to mid-night to compare exact calendar days difference
    const dDate = new Date(deadline.getFullYear(), deadline.getMonth(), deadline.getDate());
    const nDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const diffTime = dDate - nDate;
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}

function escapeHTML(str) {
    return str
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

// --- Application Bootloader ---
document.addEventListener("DOMContentLoaded", () => {
    // Load local storage states
    loadState();
    
    // Update headers date display
    const dateEl = document.getElementById("current-date");
    if (dateEl) {
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        dateEl.textContent = new Date().toLocaleDateString(undefined, options);
    }
    
    // Initialize feature listeners
    initRouter();
    initAssignmentsFilter();
    initNotesSearch();
    initModalEvents();
    initAttendanceTargetControl();
    initQuickNoteDashboard();
    initResetButton();
    
    // Trigger initial badges update
    updateGlobalBadges();
});