// ==========================================
// Notes Surface — SidebarFolders Component
// ==========================================
// Collapsible folder tree for the notes sidebar.
// v0.37.11

const html = window.html;

const CHEVRON_SVG = html`
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="9 18 15 12 9 6"/>
    </svg>`;

const FOLDER_SVG = html`
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
    </svg>`;

/**
 * @param {{
 *   folders: Array<{ path: string, count: number }>,
 *   activeFolder: string,
 *   collapsed: boolean,
 *   onToggle: () => void,
 *   onSelect: (path: string) => void,
 * }} props
 */
export function SidebarFolders({ folders, activeFolder, collapsed, onToggle, onSelect }) {
    const totalCount = folders.reduce((sum, f) => sum + (f.count || 0), 0);

    return html`
        <div class="sw-notes-surface__section">
            <button class="sw-notes-surface__section-header"
                    onClick=${onToggle}
                    aria-expanded=${!collapsed}>
                <span class=${'sw-notes-surface__chevron' + (collapsed ? '' : ' sw-notes-surface__chevron--open')}>
                    ${CHEVRON_SVG}
                </span>
                <span class="sw-notes-surface__section-label">Folders</span>
                ${totalCount > 0 && html`
                    <span class="sw-notes-surface__section-count">${totalCount}</span>`}
            </button>
            ${!collapsed && html`
                <div class="sw-notes-surface__section-body" role="listbox">
                    ${/* "All Notes" clears folder filter */''}
                    <button class=${'sw-notes-surface__item' + (!activeFolder ? ' sw-notes-surface__item--active' : '')}
                            onClick=${() => onSelect('')}
                            role="option"
                            aria-selected=${!activeFolder}>
                        <span class="sw-notes-surface__item-icon">${FOLDER_SVG}</span>
                        <span class="sw-notes-surface__item-title">All Notes</span>
                    </button>
                    ${folders.map(f => html`
                        <button key=${f.path}
                                class=${'sw-notes-surface__item' + (activeFolder === f.path ? ' sw-notes-surface__item--active' : '')}
                                onClick=${() => onSelect(f.path)}
                                role="option"
                                aria-selected=${activeFolder === f.path}
                                title=${f.path}>
                            <span class="sw-notes-surface__item-icon">${FOLDER_SVG}</span>
                            <span class="sw-notes-surface__item-title">${f.path}</span>
                            ${f.count > 0 && html`
                                <span class="sw-notes-surface__item-count">${f.count}</span>`}
                        </button>`)}
                    ${folders.length === 0 && html`
                        <div class="sw-notes-surface__empty">No folders</div>`}
                </div>`}
        </div>`;
}
