// Sidebar — driven by real persisted threads.

const { useState: useStateSb } = React;

const Sidebar = ({ threads, active, onSelect, onNew, onDelete, onClose, onOpenSaved, onOpenSettings, onOpenSources }) => {
  const [query, setQuery] = useStateSb('');
  const AGENTS = window.OMNI_DATA.AGENTS;

  const realThreads = threads || [];
  const filtered = realThreads.filter(h => !query || (h.title || '').toLowerCase().includes(query.toLowerCase()));

  const agentOf = (id) => AGENTS.find(a => a.id === id) || AGENTS.find(a => a.id === 'mydash');

  const relWhen = (ts) => {
    if (!ts) return '';
    const diff = Date.now() - ts;
    const min = Math.floor(diff / 60000);
    if (min < 1) return 'now';
    if (min < 60) return min + 'm';
    const hr = Math.floor(min / 60);
    if (hr < 24) return hr + 'h';
    const d = Math.floor(hr / 24);
    if (d < 7) return d + 'd';
    return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
  };

  const renderItem = (h) => {
    const A = agentOf(h.agent);
    return (
      <div key={h.id}
           className={'sb-item' + (active === h.id ? ' active' : '')}>
        <button className="sb-item-main" onClick={() => onSelect(h.id)}>
          <span className="ico" style={A ? { color: A.tint } : null}>{A ? A.icon : '◦'}</span>
          <span className="ttl">{h.title || 'New thread'}</span>
          <span className="when">{relWhen(h.updatedAt || h.createdAt)}</span>
        </button>
        <button className="sb-item-del"
                title="Delete thread"
                onClick={(e) => { e.stopPropagation(); if (confirm('Delete this thread?')) onDelete(h.id); }}>
          <Icon name="x" size={11}/>
        </button>
      </div>
    );
  };

  return (
    <aside className="sb">
      <div className="sb-hd">
        <div className="sb-brand">
          <div className="mark">O</div>
          <div className="name">Omni<em>Buddy</em></div>
        </div>
        {onClose && (
          <button className="sb-close" onClick={onClose} title="Close sidebar">
            <Icon name="x" size={14}/>
          </button>
        )}
      </div>

      <button className="sb-newbtn" onClick={onNew}>
        <span className="plus">+</span>
        <span>New thread</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, opacity: .6, fontFamily: 'var(--font-mono)' }}>⌘N</span>
      </button>

      <div className="sb-search">
        <span className="ico"><Icon name="search" size={14}/></span>
        <input placeholder="Search threads…" value={query} onChange={e => setQuery(e.target.value)}/>
      </div>

      <div className="sb-list">
        {filtered.length === 0 ? (
          <div className="sb-empty">
            <div className="sb-empty-icon">💬</div>
            <div className="sb-empty-text">
              {query ? 'No threads match' : 'Your conversation history will appear here'}
            </div>
          </div>
        ) : (
          <>
            <div className="sb-group"><h4>Recent</h4></div>
            {filtered.map(renderItem)}
          </>
        )}
      </div>

      <div className="sb-foot">
        <button onClick={onOpenSources}>
          <Icon name="layers" size={14}/>
          <span>Data sources</span>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--muted-2)', fontFamily: 'var(--font-mono)' }}>8</span>
        </button>
        <button onClick={onOpenSaved}>
          <Icon name="bookmark" size={14}/>
          <span>Saved questions</span>
        </button>
        <button onClick={onOpenSettings}>
          <Icon name="settings" size={14}/>
          <span>Settings</span>
        </button>
      </div>
    </aside>
  );
};

Object.assign(window, { Sidebar });