// SearchPanel - slide-in right panel of search-result cards.
// Clicking a card highlights the matching org in the current view.

function SearchPanel({ query, results, highlightOrgId, onPick, onOpen, onClose, facets }) {
  const q = (query || '').trim();
  const typeLabel = (t) => (facets?.types?.labels?.[t]) || t;

  const Highlight = ({ text }) => {
    if (!q || !text) return text || '';
    const lower = text.toLowerCase();
    const needle = q.toLowerCase();
    const i = lower.indexOf(needle);
    if (i < 0) return text;
    return (
      <>
        {text.slice(0, i)}
        <mark className="sp-hl">{text.slice(i, i + q.length)}</mark>
        {text.slice(i + q.length)}
      </>
    );
  };

  return (
    <aside className="sp-panel" role="dialog" aria-label="Search results">
      <header className="sp-header">
        <div>
          <div className="sp-label">Search</div>
          <div className="sp-count">
            {results.length} {results.length === 1 ? 'match' : 'matches'} for <em>"{q}"</em>
          </div>
        </div>
        <button type="button" className="sp-close" onClick={onClose} aria-label="Close search">×</button>
      </header>

      <div className="sp-hint">
        Click a card to highlight it in the view. Double-click to open details.
      </div>

      <div className="sp-list">
        {results.length === 0 && (
          <div className="sp-empty">
            <div className="sp-empty-title">Nothing found</div>
            <div className="sp-empty-sub">Try a shorter or different term - searches across name, description, topics, regions, and known collaborators.</div>
          </div>
        )}
        {results.map((o) => {
          const isActive = highlightOrgId === o.id;
          return (
            <button
              key={o.id}
              type="button"
              className={'sp-card' + (isActive ? ' is-active' : '')}
              onClick={() => onPick(o)}
              onDoubleClick={() => onOpen(o)}
            >
              <div className="sp-card-row">
                <span className={'sp-card-pillar sp-pillar--' + (o.pillar || 'both')} aria-hidden="true"></span>
                <div className="sp-card-name"><Highlight text={o.name} /></div>
              </div>
              <div className="sp-card-meta">
                <span className="sp-card-type">{typeLabel(o.type)}</span>
                {o.regions && o.regions.length > 0 && (
                  <span className="sp-card-regions">{o.regions.slice(0, 2).join(' · ')}{o.regions.length > 2 ? ` +${o.regions.length - 2}` : ''}</span>
                )}
              </div>
              {o.description && (
                <div className="sp-card-desc"><Highlight text={o.description.length > 120 ? o.description.slice(0, 118) + '...' : o.description} /></div>
              )}
              {isActive && (
                <div className="sp-card-actions">
                  <span className="sp-card-tag">Highlighted in view</span>
                  <span className="sp-card-open" onClick={(e) => { e.stopPropagation(); onOpen(o); }}>Open details →</span>
                </div>
              )}
            </button>
          );
        })}
      </div>
    </aside>
  );
}

window.SearchPanel = SearchPanel;