import { Button, Card, Empty, Space, Tag, Typography } from '@arco-design/web-react'
import { IconApps, IconClockCircle, IconRobot } from '@arco-design/web-react/icon'

function AvailableAgents() {
  const availableAgents = [
    {
      id: 1,
      name: '代码助手',
      description: '专业的代码开发和调试助手',
      icon: '💻',
      status: '可用',
      expires: '2024-12-31'
    },
    {
      id: 2,
      name: '文档生成器',
      description: '自动化文档生成工具',
      icon: '📚',
      status: '可用',
      expires: '2024-12-31'
    },
    {
      id: 3,
      name: '数据分析',
      description: '智能数据分析和可视化',
      icon: '📊',
      status: '可用',
      expires: '2024-06-30'
    },
    {
      id: 4,
      name: '内容创作',
      description: 'AI 内容创作助手',
      icon: '✍️',
      status: '可用',
      expires: '2024-08-15'
    }
  ]

  return (
    <div className="available-agents-page">
      <div className="available-agents-header">
        <div>
          <Typography.Title heading={4} className="available-agents-title">可用智能体</Typography.Title>
          <Typography.Text className="available-agents-subtitle">管理您已获取的智能体权限</Typography.Text>
        </div>
        <Tag color="arcoblue" className="available-agents-count-tag">{availableAgents.length} 个可用</Tag>
      </div>

      <Card className="available-agents-card" bordered>
        {availableAgents.length === 0 ? (
          <Empty description="暂无可用智能体" />
        ) : (
          <div className="available-agents-list">
            {availableAgents.map(agent => (
              <div key={agent.id} className="available-agent-item">
                <div className="available-agent-main">
                  <div className="available-agent-icon">{agent.icon || <IconRobot />}</div>
                  <div className="available-agent-content">
                    <Typography.Text className="available-agent-name">{agent.name}</Typography.Text>
                    <Typography.Text className="available-agent-description">{agent.description}</Typography.Text>
                    <Space size={16} wrap className="available-agent-meta">
                      <span><IconApps />已授权</span>
                      <span><IconClockCircle />有效期至 {agent.expires}</span>
                    </Space>
                  </div>
                </div>
                <div className="available-agent-actions">
                  <Tag color="green" className="available-agent-status">{agent.status}</Tag>
                  <Button type="primary" className="available-agent-use-btn">立即使用</Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  )
}

export default AvailableAgents
