// ==========================================
// Notes Surface — Sidebar Component
// ==========================================
// Search bar, new note, folder tree, tag cloud.
// Footer has UserMenu — same pattern as chat sidebar.
//
// v0.37.11

import { SidebarFolders } from './sidebar-folders.js';
import { SidebarTags }    from './sidebar-tags.js';
import { UserMenu }       from '../../shell/user-menu.js';

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

const PLUS_SVG = html`
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"/>
        <line x1="5" y1="12" x2="19" y2="12"/>
    </svg>`;

const SEARCH_SVG = html`
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"/>
        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
    </svg>`;

const COLLAPSE_SVG = html`
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/>
        <line x1="9" y1="3" x2="9" y2="21"/>
    </svg>`;

/**
 * @param {{
 *   sidebar: ReturnType<import('./use-sidebar.js').useSidebar>,
 *   onNewNote: () => void,
 *   onCollapse: () => void,
 *   onFolderSelect: (path: string) => void,
 *   onTagSelect: (tag: string) => void,
 *   onSearch: (query: string) => void,
 * }} props
 */
export function Sidebar({ sidebar, onNewNote, onCollapse, onFolderSelect, onTagSelect, onSearch }) {
    const searchTimerRef = useRef(null);

    const _onSearchInput = useCallback((e) => {
        const val = e.target.value;
        sidebar.setSearch(val);
        clearTimeout(searchTimerRef.current);
        searchTimerRef.current = setTimeout(() => {
            onSearch(val.trim());
        }, 300);
    }, [sidebar.setSearch, onSearch]);

    const _onFolderSelect = useCallback((path) => {
        sidebar.setActiveFolder(path);
        onFolderSelect(path);
    }, [sidebar.setActiveFolder, onFolderSelect]);

    const _onTagSelect = useCallback((tag) => {
        sidebar.setActiveTag(tag);
        onTagSelect(tag);
    }, [sidebar.setActiveTag, onTagSelect]);

    return html`
        <div class="sw-notes-surface__sidebar" role="navigation" aria-label="Notes sidebar">
            ${/* Header: new note + collapse */''}
            <div class="sw-notes-surface__sidebar-header">
                <button class="sw-notes-surface__new-note-btn"
                        onClick=${onNewNote}
                        title="New note"
                        aria-label="Create new note">
                    ${PLUS_SVG}
                    <span>New Note</span>
                </button>
                <button class="sw-notes-surface__collapse-btn"
                        onClick=${onCollapse}
                        title="Collapse sidebar"
                        aria-label="Collapse sidebar">
                    ${COLLAPSE_SVG}
                </button>
            </div>

            ${/* Search */''}
            <div class="sw-notes-surface__search-wrap">
                <span class="sw-notes-surface__search-icon">${SEARCH_SVG}</span>
                <input class="sw-notes-surface__search"
                       type="text"
                       placeholder="Search notes\u2026"
                       value=${sidebar.search}
                       onInput=${_onSearchInput}
                       aria-label="Search notes" />
            </div>

            ${/* Scrollable content */''}
            <div class="sw-notes-surface__sidebar-body">
                <${SidebarFolders}
                    folders=${sidebar.folders}
                    activeFolder=${sidebar.activeFolder}
                    collapsed=${sidebar.collapsed.folders}
                    onToggle=${() => sidebar.toggleCollapsed('folders')}
                    onSelect=${_onFolderSelect} />

                <${SidebarTags}
                    tags=${sidebar.tags}
                    activeTag=${sidebar.activeTag}
                    collapsed=${sidebar.collapsed.tags}
                    onToggle=${() => sidebar.toggleCollapsed('tags')}
                    onSelect=${_onTagSelect} />
            </div>

            ${/* Footer: UserMenu only */''}
            <div class="sw-notes-surface__sidebar-footer">
                <${UserMenu} placement="up-right" />
            </div>
        </div>`;
}
