// ==========================================
// NotesPane Kit — NoteListItem
// ==========================================
// Single note row in the list view.
// Independently importable.

const html = window.html;

function _relativeTime(iso) {
    if (!iso) return '';
    const diff = Date.now() - new Date(iso).getTime();
    const s = Math.floor(diff / 1000);
    if (s < 60)    return 'just now';
    const m = Math.floor(s / 60);
    if (m < 60)    return m + 'm ago';
    const h = Math.floor(m / 60);
    if (h < 24)    return h + 'h ago';
    const d = Math.floor(h / 24);
    if (d < 30)    return d + 'd ago';
    return new Date(iso).toLocaleDateString();
}

function _esc(s) {
    const el = document.createElement('span');
    el.textContent = s;
    return el.innerHTML;
}

function _highlightHeadline(headline) {
    const escaped = _esc(headline);
    return escaped.replace(/\*\*(.+?)\*\*/g, '<mark>$1</mark>');
}

/**
 * @param {{
 *   note: object,
 *   isSearch?: boolean,
 *   onClick: (id: string) => void,
 *   selectMode?: boolean,
 *   selected?: boolean,
 *   onToggleSelect?: (id: string) => void,
 *   pinned?: boolean,
 *   onTogglePin?: (id: string) => void,
 * }} props
 */
export function NoteListItem(props) {
    const { note, isSearch, onClick, selectMode, selected, onToggleSelect, pinned, onTogglePin } = props;

    const preview = isSearch && note.headline
        ? html`<div class="sw-notes-pane__item-preview"
                     dangerouslySetInnerHTML=${{ __html: _highlightHeadline(note.headline) }} />`
        : html`<div class="sw-notes-pane__item-preview">
                ${(note.preview || note.content || '').slice(0, 120)}
              </div>`;

    const tags = (note.tags || []).map(t =>
        html`<span class="sw-notes-pane__item-tag" key=${t}>${t}</span>`
    );

    const folderBadge = note.folder_path && note.folder_path !== '/'
        ? html`<span class="sw-notes-pane__item-folder">${note.folder_path}</span>`
        : null;

    const onItemClick = (e) => {
        if (selectMode && onToggleSelect) {
            onToggleSelect(note.id);
        } else {
            onClick(note.id);
        }
    };

    const onCheckChange = (e) => {
        e.stopPropagation();
        if (onToggleSelect) onToggleSelect(note.id);
    };

    const onPinClick = (e) => {
        e.stopPropagation();
        if (onTogglePin) onTogglePin(note.id);
    };

    return html`
        <div class=${'sw-notes-pane__item' + (selected ? ' sw-notes-pane__item--selected' : '')}
             onClick=${onItemClick}>
            ${selectMode && html`
                <input type="checkbox" class="sw-notes-pane__item-checkbox"
                       checked=${selected} onChange=${onCheckChange} />`}
            <div class="sw-notes-pane__item-body">
                <div class="sw-notes-pane__item-header">
                    <span class="sw-notes-pane__item-title">${note.title}</span>
                    <span class="sw-notes-pane__item-time">${_relativeTime(note.updated_at)}</span>
                </div>
                ${preview}
                ${(folderBadge || tags.length > 0) && html`
                    <div class="sw-notes-pane__item-meta">${folderBadge}${tags}</div>`}
            </div>
            ${onTogglePin && html`
                <button class=${'sw-notes-pane__item-pin' + (pinned ? ' sw-notes-pane__item-pin--active' : '')}
                        onClick=${onPinClick} title=${pinned ? 'Unpin' : 'Pin'}>
                    ${pinned ? '\u{1F4CC}' : '\u{1F4CC}'}
                </button>`}
        </div>`;
}
