export class NotesTracker {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.STORAGE_KEY = 'hydroflux_notes';
        this.notes = [];
        this.loadState();
        this.render();
    }

    loadState() {
        const saved = localStorage.getItem(this.STORAGE_KEY);
        if (saved) {
            this.notes = JSON.parse(saved);
        } else {
            this.notes = [
                { id: 1, text: "Feeling hydrated today. Remember to add those gym sessions!", date: new Date().toISOString() }
            ];
            this.saveState();
        }
    }

    saveState() {
        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.notes));
    }

    addNote(text) {
        if (!text.trim()) return;
        this.notes.unshift({
            id: Date.now(),
            text: text,
            date: new Date().toISOString()
        });
        this.saveState();
        this.render();
    }

    deleteNote(id) {
        if (confirm("Delete this note?")) {
            this.notes = this.notes.filter(n => n.id !== id);
            this.saveState();
            this.render();
        }
    }

    render() {
        if (!this.container) return;

        this.container.innerHTML = `
            <div class="notes-container">
                <h2 class="section-title">NOTES</h2>
                
                <div class="note-input-area">
                    <textarea id="new-note-text" placeholder="Write a thought..." rows="3" class="glow-input"></textarea>
                    <button id="add-note-btn" class="connect-glow-btn full-width">SAVE NOTE</button>
                </div>

                <div class="notes-grid">
                    ${this.notes.map(note => `
                        <div class="sticky-note">
                            <p class="note-content">${note.text}</p>
                            <div class="note-footer">
                                <span class="note-date">${new Date(note.date).toLocaleDateString()}</span>
                                <button class="delete-note-btn" data-id="${note.id}">🗑</button>
                            </div>
                        </div>
                    `).join('')}
                </div>
            </div>
        `;

        this.attachEvents();
    }

    attachEvents() {
        const btn = this.container.querySelector('#add-note-btn');
        const input = this.container.querySelector('#new-note-text');

        btn.addEventListener('click', () => {
            this.addNote(input.value);
            input.value = '';
        });

        this.container.querySelectorAll('.delete-note-btn').forEach(b => {
            b.addEventListener('click', (e) => {
                this.deleteNote(parseInt(e.currentTarget.dataset.id));
            });
        });
    }
}