script.js

// --- Navigation ---
const navBtns = document.querySelectorAll('.nav-btn');
const sections = document.querySelectorAll('.section');
const sectionTitle = document.getElementById('section-title');

navBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        navBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const section = btn.dataset.section;
        sections.forEach(sec => sec.classList.remove('active'));
        document.getElementById(section + '-section').classList.add('active');
        // Change title
        if (section === 'notes') sectionTitle.innerHTML = '📝 Notes';
        if (section === 'todos') sectionTitle.innerHTML = '✅ To-Do';
        if (section === 'reminders') sectionTitle.innerHTML = '⏰ Reminders';
        if (section === 'settings') sectionTitle.innerHTML = '⚙️ Settings';
    });
});

// --- Notes ---
const addBtn = document.getElementById('add');
const notesContainer = document.getElementById('notes-container');
const colorTags = document.querySelectorAll('#color-tags .tag');
const searchInput = document.getElementById('search');

function getNotesFromLS() {
    return JSON.parse(localStorage.getItem('notes')) || [];
}
function saveNotesToLS(notes) {
    localStorage.setItem('notes', JSON.stringify(notes));
}

function renderNotes(filter = {}) {
    notesContainer.innerHTML = '';
    let notes = getNotesFromLS();
    if (filter.color && filter.color !== 'all') {
        notes = notes.filter(n => n.color === filter.color);
    }
    if (filter.search) {
        notes = notes.filter(n => n.text.toLowerCase().includes(filter.search.toLowerCase()));
    }
    notes.reverse().forEach(note => addNewNote(note.text, note.color, false));
}

function addNewNote(text = '', color = 'yellow', save = true) {
    const note = document.createElement('div');
    note.classList.add('note', 'fade-in', `note-${color}`);
    note.setAttribute('tabindex', '0');

    note.innerHTML = `
        <div class="tools">
            <button class="edit" aria-label="Edit note" title="Edit"><i class="fas fa-edit"></i></button>
            <button class="pin" aria-label="Pin note" title="Pin"><i class="fas fa-thumbtack"></i></button>
            <button class="delete" aria-label="Delete note" title="Delete"><i class="fas fa-trash-alt"></i></button>
            <select class="color-select" title="Change color">
                <option value="yellow" ${color==='yellow'?'selected':''}>🟨</option>
                <option value="blue" ${color==='blue'?'selected':''}>🟦</option>
                <option value="pink" ${color==='pink'?'selected':''}>🩷</option>
                <option value="green" ${color==='green'?'selected':''}>🟩</option>
            </select>
        </div>
        <div class="main ${text ? '' : 'hidden'}"></div>
        <textarea class="${text ? 'hidden' : ''}" placeholder="Write your note here..."></textarea>
    `;

    const editBtn = note.querySelector('.edit');
    const deleteBtn = note.querySelector('.delete');
    const pinBtn = note.querySelector('.pin');
    const colorSelect = note.querySelector('.color-select');
    const main = note.querySelector('.main');
    const textArea = note.querySelector('textarea');

    textArea.value = text;
    main.innerHTML = marked(text);

    // Delete note with confirmation
    deleteBtn.addEventListener('click', () => {
        if (confirm('Are you sure you want to delete this note?')) {
            note.classList.add('fade-out');
            setTimeout(() => {
                note.remove();
                updateNotesLS();
            }, 300);
        }
    });

    // Edit note
    editBtn.addEventListener('click', () => {
        main.classList.toggle('hidden');
        textArea.classList.toggle('hidden');
        if (!textArea.classList.contains('hidden')) {
            textArea.focus();
        }
    });

    // Pin note
    pinBtn.addEventListener('click', () => {
        note.classList.toggle('pinned');
        updateNotesLS();
        renderNotes(getCurrentFilter());
    });

    // Change color
    colorSelect.addEventListener('change', (e) => {
        note.classList.remove('note-yellow', 'note-blue', 'note-pink', 'note-green');
        note.classList.add(`note-${e.target.value}`);
        updateNotesLS();
        renderNotes(getCurrentFilter());
    });

    // Live update
    textArea.addEventListener('input', (e) => {
        const { value } = e.target;
        main.innerHTML = marked(value);
        updateNotesLS();
    });

    // Save on blur
    textArea.addEventListener('blur', updateNotesLS);

    // Keyboard shortcuts
    textArea.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.key === 'Enter') {
            main.classList.remove('hidden');
            textArea.classList.add('hidden');
        }
    });

    notesContainer.prepend(note);
    if (save) updateNotesLS();
    textArea.focus();
}

function updateNotesLS() {
    const notes = [];
    document.querySelectorAll('.note').forEach(note => {
        const text = note.querySelector('textarea').value;
        let color = 'yellow';
        if (note.classList.contains('note-blue')) color = 'blue';
        if (note.classList.contains('note-pink')) color = 'pink';
        if (note.classList.contains('note-green')) color = 'green';
        notes.push({ text, color });
    });
    saveNotesToLS(notes);
}

addBtn.addEventListener('click', () => addNewNote());

// Color tag filter
colorTags.forEach(tag => {
    tag.addEventListener('click', () => {
        colorTags.forEach(t => t.classList.remove('active'));
        tag.classList.add('active');
        renderNotes(getCurrentFilter());
    });
});

function getCurrentFilter() {
    const color = document.querySelector('#color-tags .tag.active').dataset.color;
    const search = searchInput.value;
    return { color, search };
}

// Search
searchInput.addEventListener('input', () => {
    renderNotes(getCurrentFilter());
});

// Initial render
renderNotes();

// --- To-Do List ---
const todosContainer = document.getElementById('todos-container');
const addTodoBtn = document.getElementById('add-todo');

function getTodosFromLS() {
    return JSON.parse(localStorage.getItem('todos')) || [];
}
function saveTodosToLS(todos) {
    localStorage.setItem('todos', JSON.stringify(todos));
}

function renderTodos() {
    todosContainer.innerHTML = '';
    let todos = getTodosFromLS();
    todos.reverse().forEach(todo => addNewTodo(todo.text, todo.done, false));
}

function addNewTodo(text = '', done = false, save = true) {
    const todo = document.createElement('div');
    todo.classList.add('todo-item');
    todo.innerHTML = `
        <input type="checkbox" class="todo-check" ${done ? 'checked' : ''}>
        <input type="text" class="todo-text" value="${text}" placeholder="New to-do...">
        <button class="delete-todo" title="Delete"><i class="fas fa-trash-alt"></i></button>
    `;
    const check = todo.querySelector('.todo-check');
    const textInput = todo.querySelector('.todo-text');
    const deleteBtn = todo.querySelector('.delete-todo');

    check.addEventListener('change', () => {
        updateTodosLS();
    });
    textInput.addEventListener('input', () => {
        updateTodosLS();
    });
    deleteBtn.addEventListener('click', () => {
        todo.remove();
        updateTodosLS();
    });

    todosContainer.prepend(todo);
    if (save) updateTodosLS();
    textInput.focus();
}

function updateTodosLS() {
    const todos = [];
    document.querySelectorAll('.todo-item').forEach(todo => {
        const text = todo.querySelector('.todo-text').value;
        const done = todo.querySelector('.todo-check').checked;
        todos.push({ text, done });
    });
    saveTodosToLS(todos);
}

addTodoBtn.addEventListener('click', () => addNewTodo());
renderTodos();

// --- Reminders ---
const remindersContainer = document.getElementById('reminders-container');
const addReminderBtn = document.getElementById('add-reminder');

function getRemindersFromLS() {
    return JSON.parse(localStorage.getItem('reminders')) || [];
}
function saveRemindersToLS(reminders) {
    localStorage.setItem('reminders', JSON.stringify(reminders));
}

function renderReminders() {
    remindersContainer.innerHTML = '';
    let reminders = getRemindersFromLS();
    reminders.reverse().forEach(reminder => addNewReminder(reminder.text, reminder.time, false));
}

function addNewReminder(text = '', time = '', save = true) {
    const reminder = document.createElement('div');
    reminder.classList.add('reminder-item');
    reminder.innerHTML = `
        <input type="text" class="reminder-text" value="${text}" placeholder="Reminder...">
        <input type="datetime-local" class="reminder-time" value="${time}">
        <button class="delete-reminder" title="Delete"><i class="fas fa-trash-alt"></i></button>
    `;
    const textInput = reminder.querySelector('.reminder-text');
    const timeInput = reminder.querySelector('.reminder-time');
    const deleteBtn = reminder.querySelector('.delete-reminder');

    textInput.addEventListener('input', () => {
        updateRemindersLS();
    });
    timeInput.addEventListener('change', () => {
        updateRemindersLS();
    });
    deleteBtn.addEventListener('click', () => {
        reminder.remove();
        updateRemindersLS();
    });

    remindersContainer.prepend(reminder);
    if (save) updateRemindersLS();
    textInput.focus();
}

function updateRemindersLS() {
    const reminders = [];
    document.querySelectorAll('.reminder-item').forEach(reminder => {
        const text = reminder.querySelector('.reminder-text').value;
        const time = reminder.querySelector('.reminder-time').value;
        reminders.push({ text, time });
    });
    saveRemindersToLS(reminders);
}

addReminderBtn.addEventListener('click', () => addNewReminder());
renderReminders();

// --- Settings: Dark Mode ---
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('change', () => {
    document.body.classList.toggle('dark-mode', darkModeToggle.checked);
    localStorage.setItem('darkMode', darkModeToggle.checked);
});
// Load dark mode from LS
if (localStorage.getItem('darkMode') === 'true') {
    document.body.classList.add('dark-mode');
    darkModeToggle.checked = true;
}