import { IconPlus, IconLogout } from '@tabler/icons-react'
import type { Session } from '../lib/types'

interface SessionSidebarProps {
  sessions: Session[]
  activeSessionId: string | null
  onSelect: (id: string) => void
  onCreate: () => void
  onLogout: () => void
}

export function SessionSidebar({
  sessions,
  activeSessionId,
  onSelect,
  onCreate,
  onLogout,
}: SessionSidebarProps) {
  return (
    <div className='sidebar'>
      <div className='sidebar-header'>
        <h3>Sessions</h3>
        <div style={{ display: 'flex' }}>
          <button
            title='New session'
            onClick={onCreate}
            style={{
              border: 'none',
              background: 'transparent',
              cursor: 'pointer',
              padding: '4px',
            }}
          >
            <IconPlus size={18} color='#7aa2f7' />
          </button>
          <button
            title='Log out'
            onClick={onLogout}
            style={{
              border: 'none',
              background: 'transparent',
              cursor: 'pointer',
              padding: '4px',
            }}
          >
            <IconLogout size={18} color='#8888aa' />
          </button>
        </div>
      </div>
      <div className='session-list'>
        {sessions.length === 0 ? (
          <div
            style={{
              color: '#6a6a8a',
              fontSize: '0.85rem',
              padding: '1rem',
            }}
          >
            No sessions yet. Click + to start researching.
          </div>
        ) : (
          sessions.map(s => (
            <div
              key={s.session_id}
              className={`session-item ${s.session_id === activeSessionId ? 'active' : ''}`}
              onClick={() => onSelect(s.session_id)}
            >
              {s.session_id.slice(0, 12)}...
              <div className='session-meta'>
                {s.total_messages ?? 0} msgs · {s.status}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}