import { Button } from 'antd';
import type { Agent } from '../../../api';

const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');

export default function AgentSidebar(props: {
  agentList: Agent[];
  activeAgentId?: string;
  onCreate: () => void;
  onSelect: (agentId: string) => void;
}) {
  const { agentList, activeAgentId, onCreate, onSelect } = props;

  return (
    <aside className="chat-side">
      <div style={{ padding: '16px', borderBottom: '1px solid var(--color-border)' }}>
        <Button block type="dashed" onClick={onCreate}>
          + 创建智能体
        </Button>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
        {agentList.map((a) => {
          const isActive = a.id === activeAgentId;
          return (
            <div
              key={a.id}
              onClick={() => onSelect(a.id)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                padding: '10px 16px',
                cursor: 'pointer',
                background: isActive ? 'var(--color-surface-2)' : 'transparent',
                borderLeft: `3px solid ${isActive ? 'var(--color-brand)' : 'transparent'}`,
                transition: 'background 0.2s'
              }}
            >
              <div
                style={{
                  width: 32,
                  height: 32,
                  borderRadius: '50%',
                  background: a.avatar || 'var(--gradient-brand)',
                  color: '#fff',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontWeight: 700,
                  fontSize: 14,
                  overflow: 'hidden'
                }}
              >
                {isImageUrl(a.avatar) ? <img src={a.avatar} className="w-full h-full object-cover" alt="avatar" /> : (a.name?.charAt(0) || '?').toUpperCase()}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div
                  style={{
                    fontWeight: isActive ? 600 : 500,
                    fontSize: 14,
                    color: 'var(--color-text)',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }}
                >
                  {a.name}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </aside>
  );
}

