export class NotesView {
    constructor(containerId, app) {
        this.container = document.getElementById(containerId);
        this.app = app;
        this.render();
        this.attachEvents();
    }

    render() {
        const currentNote = localStorage.getItem('hydroflux_note_content') || '';

        this.container.innerHTML = `
            <div class="w-full max-w-md bg-white min-h-screen relative overflow-hidden mx-auto bg-gradient-to-br from-blue-50 to-blue-100 flex flex-col p-6">
                <!-- Header -->
                <div class="flex justify-between items-center mb-6">
                     <button id="backBtn" class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-md text-gray-700">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                    </button>
                    <span class="text-lg font-bold text-gray-800">Notes & Thoughts</span>
                    <button id="saveNoteBtn" class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-md">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    </button>
                </div>

                <!-- Editor -->
                <div class="flex-1 bg-white rounded-3xl p-6 shadow-sm border border-gray-100 relative">
                    <textarea id="fullNoteInput" class="w-full h-full resize-none outline-none text-gray-700 text-lg leading-relaxed placeholder-gray-400" placeholder="Write roughly, reflect deeply...">${currentNote}</textarea>
                    
                    <div class="absolute bottom-4 right-4 text-xs text-gray-400" id="saveStatus">Auto-saved</div>
                </div>

                <!-- Keyboard spacer helper if needed on mobile, but padding usually suffices -->
                <div class="h-4"></div>
            </div>
        `;

        // Focus textarea automatically
        setTimeout(() => {
            const el = this.container.querySelector('#fullNoteInput');
            if (el) {
                el.focus();
                el.setSelectionRange(el.value.length, el.value.length);
            }
        }, 300);
    }

    attachEvents() {
        this.container.querySelector('#backBtn').addEventListener('click', () => this.app.back());

        const textarea = this.container.querySelector('#fullNoteInput');
        const status = this.container.querySelector('#saveStatus');

        textarea.addEventListener('input', (e) => {
            status.textContent = 'Saving...';
            localStorage.setItem('hydroflux_note_content', e.target.value);
            setTimeout(() => {
                status.textContent = 'Auto-saved';
            }, 800);
        });

        this.container.querySelector('#saveNoteBtn').addEventListener('click', () => this.app.back());
    }
}
