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

function History() {
  const historyRecords = [
    {
      id: 1,
      agent: '代码助手',
      title: 'React 组件开发',
      time: '2024-01-15 14:30',
      duration: '15分钟'
    },
    {
      id: 2,
      agent: '文档生成器',
      title: 'API 文档编写',
      time: '2024-01-15 11:20',
      duration: '8分钟'
    },
    {
      id: 3,
      agent: '数据分析',
      title: '销售数据分析',
      time: '2024-01-14 16:45',
      duration: '22分钟'
    },
    {
      id: 4,
      agent: '内容创作',
      title: '产品推广文案',
      time: '2024-01-14 10:15',
      duration: '12分钟'
    },
    {
      id: 5,
      agent: '代码助手',
      title: 'Python 脚本调试',
      time: '2024-01-13 15:30',
      duration: '25分钟'
    },
    {
      id: 6,
      agent: '图像生成',
      title: '产品设计图',
      time: '2024-01-13 09:00',
      duration: '10分钟'
    }
  ]

  return (
    <div className="history-page">
      <div className="history-page-header">
        <div>
          <Typography.Title heading={4} className="history-page-title">历史记录</Typography.Title>
          <Typography.Text className="history-page-subtitle">查看您使用智能体的历史记录</Typography.Text>
        </div>
        <Tag color="arcoblue" className="history-count-tag">{historyRecords.length} 条记录</Tag>
      </div>

      <Card className="history-card" bordered>
        {historyRecords.length === 0 ? (
          <Empty description="暂无历史记录" />
        ) : (
          <div className="history-list">
            {historyRecords.map(record => (
              <div key={record.id} className="history-item">
                <div className="history-item-main">
                  <div className="history-item-icon"><IconHistory /></div>
                  <div className="history-item-content">
                    <Typography.Text className="history-item-title">{record.title}</Typography.Text>
                    <Space size={16} wrap className="history-item-meta">
                      <span><IconRobot />{record.agent}</span>
                      <span><IconClockCircle />{record.time}</span>
                      <span>耗时 {record.duration}</span>
                    </Space>
                  </div>
                </div>
                <Button type="text" status="normal" className="history-detail-btn">查看详情</Button>
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  )
}

export default History
