import { Avatar, Button, Card, Input, Space, Tag, Typography } from '@arco-design/web-react'
import { IconPlus, IconRobot, IconSend } from '@arco-design/web-react/icon'
import { aiSessions } from './project-data'
import type { Project } from './project-types'

const { Title, Text, Paragraph } = Typography

const messages = [
  { role: 'user', text: '请基于当前项目资料，整理本周风险和推进建议。' },
  { role: 'assistant', text: '我建议优先处理导出问题、权限边界和 Q3 策略评审，并把客户反馈同步到工作计划。' },
  { role: 'user', text: '把建议拆成可执行任务。' },
]

export function ProjectAi({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
  return (
    <div className="project-channel-page project-ai-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>AI 会话</Title>
          <Text type="secondary">{activeProject.name} 的项目内 AI session，左侧会话列表，右侧对话详情。</Text>
        </div>
        <Button type="primary" icon={<IconPlus />}>新建会话</Button>
      </div>

      <div className="ai-workspace">
        <Card className="ai-session-list queue-section" bordered>
          <div className="section-header">
            <Title heading={6}>Session</Title>
            <Tag color="purple">{aiSessions.length}</Tag>
          </div>
          {aiSessions.map((session, index) => (
            <button
              className={index === 0 ? 'ai-session active' : 'ai-session'}
              key={session.title}
              onClick={() => onSelectItem(session.title)}
            >
              <Text>{session.title}</Text>
              <Text type="secondary">{session.summary}</Text>
              <time>{session.time}</time>
            </button>
          ))}
        </Card>

        <Card className="ai-chat-panel queue-section" bordered>
          <div className="section-header">
            <Title heading={6}>{aiSessions[0].title}</Title>
            <Tag color="green">队列空闲</Tag>
          </div>
          <div className="chat-thread">
            {messages.map((message, index) => (
              <div className={`chat-message ${message.role}`} key={`${message.role}-${index}`}>
                <Avatar size={30}>{message.role === 'assistant' ? <IconRobot /> : '张'}</Avatar>
                <Paragraph>{message.text}</Paragraph>
              </div>
            ))}
          </div>
          <div className="chat-input">
            <Input.TextArea placeholder="输入你的问题，结合项目上下文继续追问" autoSize={{ minRows: 3, maxRows: 4 }} />
            <Space>
              <Button>引用资料</Button>
              <Button type="primary" icon={<IconSend />}>发送</Button>
            </Space>
          </div>
        </Card>
      </div>
    </div>
  )
}