import { Button, Card, Grid, Space, Tag, Typography } from '@arco-design/web-react'
import {
  IconCheckCircleFill,
  IconDashboard,
  IconEmail,
  IconFile,
  IconRobot,
  IconRight,
  IconUserGroup,
} from '@arco-design/web-react/icon'
import { aiSessions, inbox, notes, projects, tasks } from './projects/project-data'
import type { Project } from './projects/project-types'

const { Row, Col } = Grid
const { Title, Text } = Typography

export function WorkspacePage({ onSelectProject }: { onSelectProject: (project: Project) => void }) {
  const totalProjectBadges = projects.reduce((sum, project) => sum + project.badge, 0)
  const urgentProjects = projects.filter((project) => project.urgent).length
  const workspaceMetrics = [
    { title: '项目总数', value: projects.length, delta: `${urgentProjects} 个高优先级`, icon: <IconDashboard />, color: 'arcoblue' },
    { title: '全局待处理', value: totalProjectBadges, delta: '跨项目聚合', icon: <IconEmail />, color: 'red' },
    { title: '进行中任务', value: tasks.length, delta: '本周持续推进', icon: <IconCheckCircleFill />, color: 'green' },
    { title: 'AI 会话', value: aiSessions.length, delta: '队列空闲', icon: <IconRobot />, color: 'purple' },
    { title: '知识资料', value: notes.length, delta: '最近 7 天更新', icon: <IconFile />, color: 'cyan' },
  ]

  return (
    <div className="workspace-page overview-page">
      <div className="overview-head">
        <div>
          <Text type="secondary">所有项目的统一工作台，汇总项目动态、任务压力和知识资产。</Text>
          <Title heading={4}>工作台</Title>
        </div>
        <Space>
          <Button icon={<IconUserGroup />}>团队视图</Button>
          <Button type="primary" icon={<IconRight />}>进入重点项目</Button>
        </Space>
      </div>

      <Row gutter={12} className="metric-row">
        {workspaceMetrics.map((metric) => (
          <Col span={24 / workspaceMetrics.length} key={metric.title}>
            <Card className="metric-card" bordered>
              <Space align="start">
                <Tag color={metric.color}>{metric.icon}</Tag>
                <div>
                  <Text type="secondary">{metric.title}</Text>
                  <Title heading={3}>{metric.value}</Title>
                  <Text className="metric-delta">{metric.delta}</Text>
                </div>
              </Space>
            </Card>
          </Col>
        ))}
      </Row>

      <Card className="queue-section" bordered>
        <div className="section-header">
          <Title heading={6}>项目健康度</Title>
          <Button type="text" size="mini">查看全部项目</Button>
        </div>
        {projects.map((project) => (
          <button key={project.id} className="data-row" onClick={() => onSelectProject(project)}>
            <span className="row-title"><IconDashboard /> {project.name}</span>
            <Tag color={project.urgent ? 'red' : 'green'}>{project.urgent ? '高优先级' : '正常'}</Tag>
            <span>待处理 {project.badge}</span>
            <span>项目代码 {project.short}</span>
            <time>今日更新</time>
          </button>
        ))}
      </Card>

      <Card className="queue-section" bordered>
        <div className="section-header">
          <Title heading={6}>跨项目待处理</Title>
          <Button type="text" size="mini">打开全局 Inbox</Button>
        </div>
        {inbox.slice(0, 4).map((item) => (
          <div key={item.title} className="data-row">
            <span className="row-title"><IconEmail /> {item.title}</span>
            <span>{item.meta}</span>
            <Tag>{item.tag}</Tag>
            <span>{item.owner}</span>
            <time>{item.time}</time>
          </div>
        ))}
      </Card>
    </div>
  )
}
