import { Card, Row, Col, Typography, Button, Tag, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { ExperimentOutlined, RocketOutlined, LockOutlined } from '@ant-design/icons'

const { Title, Paragraph } = Typography

const AGENTS = [
  { id: 'topic-evaluation', name: '选题评价智能体', icon: '🎯', desc: '从创新性、临床价值、科学性和可行性等维度评估研究选题', enabled: true },
  { id: 'scientific-question', name: '科学问题梳理智能体', icon: '🔬', desc: '将模糊的研究想法提炼成清晰、具体、可验证的科学问题', enabled: false },
  { id: 'picos-construction', name: 'PICOS构建智能体', icon: '📋', desc: '按照PICOS原则结构化定义临床研究的核心要素', enabled: false },
  { id: 'observation-design', name: '观察指标设计智能体', icon: '📊', desc: '推荐合适的主要、次要及安全性观察指标集', enabled: false },
  { id: 'crf-development', name: 'CRF制定智能体', icon: '📝', desc: '自动生成结构化、符合规范的病例报告表（CRF）框架', enabled: false },
  { id: 'sample-size', name: '样本量计算智能体', icon: '🔢', desc: '根据研究参数提供科学合理的样本量估算结果', enabled: false },
  { id: 'protocol-writing', name: '临床研究方案撰写智能体', icon: '📄', desc: '自动生成结构完整的临床研究设计方案', enabled: false },
  { id: 'paper-polishing', name: '论文润色智能体', icon: '✨', desc: '提供专业级的语言润色，修正语法、拼写和表达方式', enabled: false },
  { id: 'paper-translation', name: '论文翻译智能体', icon: '🌐', desc: '提供专业、精准的中英互译服务', enabled: false },
  { id: 'methodology-review', name: '方法学评审智能体', icon: '🔍', desc: '对研究方案或论文进行全面的方法学评审', enabled: false },
  { id: 'journal-methodology-review', name: '期刊方法学评审智能体', icon: '📑', desc: '模拟期刊审稿人视角，进行方法学挑战', enabled: false },
  { id: 'journal-guidelines-review', name: '期刊稿约评审智能体', icon: '✅', desc: '检查文章格式、字数、参考文献规范等是否符合投稿要求', enabled: false },
]

const HomePage = () => {
  const navigate = useNavigate()

  const handleAgentClick = (agent: typeof AGENTS[0]) => {
    if (!agent.enabled) {
      message.info('该智能体正在开发中，敬请期待！')
      return
    }
    navigate(`/agent/${agent.id}`)
  }

  return (
    <div style={{ padding: '24px' }}>
      {/* 欢迎区域 */}
      <Card style={{ marginBottom: 24, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
        <div style={{ color: 'white', padding: '20px 0' }}>
          <Title level={2} style={{ color: 'white', marginBottom: 16 }}>
            <RocketOutlined /> 欢迎使用 AI临床研究平台
          </Title>
          <Paragraph style={{ color: 'white', fontSize: 16, marginBottom: 0 }}>
            基于大语言模型的智能临床研究助手，覆盖研究全流程的12个智能体
          </Paragraph>
        </div>
      </Card>

      {/* 智能体卡片 */}
      <Title level={3} style={{ marginBottom: 16 }}>
        <ExperimentOutlined /> 智能体工具箱
      </Title>
      <Row gutter={[16, 16]}>
        {AGENTS.map((agent) => (
          <Col xs={24} sm={12} md={8} lg={6} key={agent.id}>
            <Card
              hoverable={agent.enabled}
              style={{
                height: '100%',
                opacity: agent.enabled ? 1 : 0.7,
                position: 'relative',
              }}
              onClick={() => handleAgentClick(agent)}
            >
              {!agent.enabled && (
                <Tag
                  color="orange"
                  icon={<LockOutlined />}
                  style={{ position: 'absolute', top: 8, right: 8 }}
                >
                  即将上线
                </Tag>
              )}
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 48, marginBottom: 12 }}>{agent.icon}</div>
                <Title level={4} style={{ marginBottom: 8 }}>
                  {agent.name}
                </Title>
                <Paragraph type="secondary" style={{ marginBottom: 16, minHeight: 44 }}>
                  {agent.desc}
                </Paragraph>
                <Button type={agent.enabled ? 'primary' : 'default'} block disabled={!agent.enabled}>
                  {agent.enabled ? '开始使用' : '敬请期待'}
                </Button>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default HomePage