import { DeleteOutlined, EditOutlined, MessageOutlined } from '@ant-design/icons';
import { Button, Popconfirm, Space, Tag } from 'antd';
import dayjs from 'dayjs';
import { Link } from 'react-router-dom';
import type { Agent } from '../../../api';
import type { AgentListLogicOutput } from '../AgentListLogic';

interface Props {
  agent: Agent;
  logic: AgentListLogicOutput;
  notifyDeleted: () => void;
}

export default function AgentListWebCard({ agent, logic, notifyDeleted }: Props) {
  const { handleDelete, isImageUrl, getModelLabel } = logic;
  const modelLabel = getModelLabel(agent.model);

  return (
    <div className="agent-card agent-list-web-card">
      <div className="agent-list-web-card-head">
        <div className="avatar agent-list-web-avatar" style={{ background: agent.avatar || 'var(--gradient-brand)' }}>
          {isImageUrl(agent.avatar) ? <img src={agent.avatar} className="w-full h-full object-cover" alt="avatar" /> : (agent.name?.charAt(0) || '?').toUpperCase()}
        </div>
        <div className="agent-list-web-card-title-block">
          <div className="agent-list-web-card-title">{agent.name}</div>
          <div className="agent-list-web-card-meta">最近更新于 {dayjs(agent.updated_at).format('YYYY-MM-DD')}</div>
        </div>
      </div>

      <div className="agent-list-web-desc-box">
        <div className="desc agent-list-web-desc">{agent.description || '还没有填写描述，可以补充这个智能体适合解决什么问题。'}</div>
      </div>

      <Space size={6} wrap className="agent-list-web-tags">
        {agent.visibility === 'public' && <Tag bordered={false} className="agent-list-web-tag-success">公开</Tag>}
        {agent.visibility === 'team' && <Tag bordered={false} className="agent-list-web-tag-info">团队</Tag>}
        {agent.visibility === 'private' && <Tag bordered={false} className="agent-list-web-tag-neutral">私有</Tag>}
        {modelLabel && (
          <Tag bordered={false} className="agent-list-web-tag-brand">
            <span className="agent-list-web-model-label">{modelLabel}</span>
          </Tag>
        )}
        {(agent.fork_count ?? 0) > 0 && <Tag bordered={false} className="agent-list-web-tag-neutral">Fork {agent.fork_count}</Tag>}
      </Space>

      <div className="agent-list-web-card-actions">
        <Link to={`/chat/${agent.id}`} className="agent-list-web-action-link">
          <Button type="primary" block icon={<MessageOutlined />} className="agent-list-web-action-btn">
            聊天
          </Button>
        </Link>
        <Link to={`/agents/${agent.id}`} className="agent-list-web-action-link">
          <Button block icon={<EditOutlined />} className="agent-list-web-action-btn">
            管理
          </Button>
        </Link>
        <Popconfirm
          title="确定删除该智能体？"
          description="将删除其知识库与对话记录"
          onConfirm={() => {
            handleDelete(agent.id);
            notifyDeleted();
          }}
          okText="删除"
          cancelText="取消"
        >
          <Button danger icon={<DeleteOutlined />} className="agent-list-web-delete-btn" />
        </Popconfirm>
      </div>
    </div>
  );
}