document.addEventListener('DOMContentLoaded', () => {
    // DOM Elements
    const notesList = document.getElementById('notes-list');
    const noteTitle = document.getElementById('note-title');
    const noteContent = document.getElementById('note-content');
    const saveNoteBtn = document.getElementById('save-note');
    const deleteNoteBtn = document.getElementById('delete-note');
    const addNoteBtn = document.getElementById('add-note-btn');
    const editorContainer = document.getElementById('editor-container');
    const noNoteSelected = document.getElementById('no-note-selected');
    const themeToggle = document.getElementById('theme-toggle');
    
    // State
    let notes = JSON.parse(localStorage.getItem('sumnotes-redesign')) || [];
    let currentNoteId = null;
    
    // Initialize
    renderNotesList();
    setupEventListeners();
    
    // Functions
    function renderNotesList() {
        notesList.innerHTML = '';
        
        if (notes.length === 0) {
            notesList.innerHTML = '<p class="text-gray-400 text-center py-4">No notes yet. Create your first note!</p>';
            return;
        }
        
        notes.forEach(note => {
            const noteElement = document.createElement('div');
            noteElement.className = `note-item ${note.id === currentNoteId ? 'active' : ''}`;
            noteElement.dataset.id = note.id;
            
            const date = new Date(note.lastModified).toLocaleDateString('en-US', {
                month: 'short',
                day: 'numeric',
                year: 'numeric'
            });
            
            noteElement.innerHTML = `
                <h3>${note.title || 'Untitled Note'}</h3>
                <p>${note.content.substring(0, 100)}${note.content.length > 100 ? '...' : ''}</p>
                <div class="date">${date}</div>
            `;
            
            noteElement.addEventListener('click', () => openNote(note.id));
            notesList.appendChild(noteElement);
        });
    }
    
    function openNote(id) {
        const note = notes.find(n => n.id === id);
        if (!note) return;
        
        currentNoteId = id;
        noteTitle.value = note.title || '';
        noteContent.value = note.content || '';
        
        editorContainer.classList.add('active');
        renderNotesList(); // Re-render to update active state
    }
    
    function saveNote() {
        if (!currentNoteId) return;
        
        const noteIndex = notes.findIndex(n => n.id === currentNoteId);
        if (noteIndex === -1) return;
        
        notes[noteIndex].title = noteTitle.value;
        notes[noteIndex].content = noteContent.value;
        notes[noteIndex].lastModified = new Date().toISOString();
        
        localStorage.setItem('sumnotes-redesign', JSON.stringify(notes));
        renderNotesList();
    }
    
    function deleteNote() {
        if (!currentNoteId) return;
        
        if (confirm('Are you sure you want to delete this note?')) {
            notes = notes.filter(n => n.id !== currentNoteId);
            localStorage.setItem('sumnotes-redesign', JSON.stringify(notes));
            
            currentNoteId = null;
            noteTitle.value = '';
            noteContent.value = '';
            editorContainer.classList.remove('active');
            
            renderNotesList();
        }
    }
    
    function addNote() {
        const newNote = {
            id: Date.now().toString(),
            title: '',
            content: '',
            lastModified: new Date().toISOString()
        };
        
        notes.unshift(newNote);
        localStorage.setItem('sumnotes-redesign', JSON.stringify(notes));
        
        openNote(newNote.id);
        renderNotesList();
        
        // Focus on title input
        setTimeout(() => {
            noteTitle.focus();
        }, 100);
    }
    
    function toggleTheme() {
        document.body.classList.toggle('dark');
        const isDark = document.body.classList.contains('dark');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
        
        // Update icon
        const themeIcon = themeToggle.querySelector('i');
        themeIcon.setAttribute('data-feather', isDark ? 'sun' : 'moon');
        feather.replace();
    }
    
    function setupEventListeners() {
        saveNoteBtn.addEventListener('click', saveNote);
        deleteNoteBtn.addEventListener('click', deleteNote);
        addNoteBtn.addEventListener('click', addNote);
        themeToggle.addEventListener('click', toggleTheme);
        
        noteTitle.addEventListener('input', () => {
            // Auto-save title as user types
            if (currentNoteId) {
                const noteIndex = notes.findIndex(n => n.id === currentNoteId);
                if (noteIndex !== -1) {
                    notes[noteIndex].title = noteTitle.value;
                    notes[noteIndex].lastModified = new Date().toISOString();
                    localStorage.setItem('sumnotes-redesign', JSON.stringify(notes));
                    renderNotesList();
                }
            }
        });
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            // Ctrl+S to save
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                saveNote();
            }
            
            // Ctrl+N to create new note
            if (e.ctrlKey && e.key === 'n') {
                e.preventDefault();
                addNote();
            }
        });
    }
    
    // Load theme preference
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
    }
});