function formatRelativeTime(isoString) {
  const date = new Date(isoString)
  const diffMs = Date.now() - date.getTime()
  const diffMinutes = Math.round(diffMs / 60000)

  if (diffMinutes < 1) return 'just now'
  if (diffMinutes < 60) return `${diffMinutes}m ago`

  const diffHours = Math.round(diffMinutes / 60)
  if (diffHours < 24) return `${diffHours}h ago`

  const diffDays = Math.round(diffHours / 24)
  if (diffDays < 7) return `${diffDays}d ago`

  return date.toLocaleDateString()
}

export default function Sidebar({
  conversations,
  activeId,
  onSelect,
  onNew,
  onDelete,
}) {
  return (
    <aside className="sidebar">
      <div className="sidebar-header">
        <div className="brand">
          <span className="brand-mark">Æ</span>
          <span className="brand-name">Aegis</span>
        </div>
        <button className="new-chat-btn" onClick={onNew}>
          + New chat
        </button>
      </div>

      <div className="conversation-list">
        {conversations.length === 0 && (
          <div className="empty-history">No conversations yet</div>
        )}

        {conversations.map((conversation) => (
          <div
            key={conversation.id}
            className={
              'conversation-item' +
              (conversation.id === activeId ? ' active' : '')
            }
            onClick={() => onSelect(conversation.id)}
          >
            <div className="conversation-title">{conversation.title}</div>
            <div className="conversation-meta">
              <span>{formatRelativeTime(conversation.updated_at)}</span>
              <button
                className="delete-btn"
                title="Delete conversation"
                onClick={(event) => {
                  event.stopPropagation()
                  onDelete(conversation.id)
                }}
              >
                ×
              </button>
            </div>
          </div>
        ))}
      </div>

      <div className="sidebar-footer">
        Local model &middot; RAG enabled
      </div>
    </aside>
  )
}