// ==========================================
// Notes Surface — Root Component
// ==========================================
// Main notes surface: sidebar + workspace.
// Follows the chat surface mount pattern.
//
// v0.37.11: New Preact surface replacing the legacy template mount.

import { ToastContainer } from '../../primitives/toast.js';
import { DialogStack }    from '../../shell/dialog-stack.js';
import { useWorkspace }   from './use-workspace.js';
import { useSidebar }     from './use-sidebar.js';
import { Sidebar }        from './sidebar.js';
import { NotesWorkspace } from './notes-workspace.js';

const { render } = window.preact;
const html = window.html;
const { useRef, useCallback } = window.hooks;

function NotesSurface() {
    const workspace = useWorkspace();
    const sidebar = useSidebar();
    const notesRef = useRef(null);

    const _onNewNote = useCallback(() => {
        if (notesRef.current) notesRef.current.newNote();
    }, []);

    const _toggleSidebar = useCallback(() => {
        workspace.setSidebarOpen(!workspace.sidebarOpen);
    }, [workspace.sidebarOpen, workspace.setSidebarOpen]);

    const _onFolderSelect = useCallback((path) => {
        if (notesRef.current?.setFolder) notesRef.current.setFolder(path);
    }, []);

    const _onTagSelect = useCallback((tag) => {
        if (notesRef.current?.setTagFilter) notesRef.current.setTagFilter(tag);
    }, []);

    const _onSearch = useCallback((query) => {
        if (notesRef.current?.setSearchQuery) notesRef.current.setSearchQuery(query);
    }, []);

    const _onNoteChange = useCallback((note) => {
        if (note?.id) {
            workspace.selectNote(note.id);
        }
    }, [workspace.selectNote]);

    return html`
        <div class="sw-notes-surface">
            ${/* Mobile sidebar overlay */''}
            ${workspace.sidebarOpen && html`
                <div class="sw-notes-surface__sidebar-overlay"
                     onClick=${_toggleSidebar} />`}

            ${/* Sidebar */''}
            ${workspace.sidebarOpen && html`
                <${Sidebar}
                    sidebar=${sidebar}
                    onNewNote=${_onNewNote}
                    onCollapse=${_toggleSidebar}
                    onFolderSelect=${_onFolderSelect}
                    onTagSelect=${_onTagSelect}
                    onSearch=${_onSearch} />`}

            ${/* Main workspace */''}
            <div class="sw-notes-surface__main">
                <${NotesWorkspace}
                    sidebarOpen=${workspace.sidebarOpen}
                    onToggleSidebar=${_toggleSidebar}
                    initialNoteId=${workspace.activeNoteId}
                    onNoteChange=${_onNoteChange}
                    handleRef=${notesRef} />
            </div>
        </div>
        <${ToastContainer} />
        <${DialogStack} />
    `;
}

// ── Mount ────────────────────────────────────
const mount = document.getElementById('notes-mount');
if (mount) {
    render(html`<${NotesSurface} />`, mount);
    console.log('[notes] Surface mounted (v0.37.11)');
}

export { NotesSurface };
