import { Card, Empty, Grid, Space, Tag, Typography } from '@arco-design/web-react'
import {
  IconCalendar,
  IconCheckCircleFill,
  IconDashboard,
  IconFile,
  IconRobot,
} from '@arco-design/web-react/icon'
import type { Project, ProjectWorkspace } from './projects/project-types'

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

export function WorkspacePage({ workspaces, onOpenTask }: { workspaces: ProjectWorkspace[]; onOpenTask: (project: Project, taskID: string) => void }) {
  const projects = workspaces.map((workspace) => workspace.project)
  const unfinishedTasks = workspaces.flatMap((workspace) =>
    workspace.tasks
      .filter((task) => !task.completed)
      .map((task) => ({
        ...task,
        project: workspace.project,
      })),
  )
  const aiSessions = workspaces.flatMap((workspace) => workspace.aiSessions)
  const notes = workspaces.flatMap((workspace) => workspace.notes)
  const urgentProjects = projects.filter((project) => project.urgent).length
  const workspaceMetrics = [
    { title: '项目总数', value: projects.length, delta: `${urgentProjects} 个高优先级`, icon: <IconDashboard />, color: 'arcoblue' },
    { title: '未完成任务', value: unfinishedTasks.length, delta: '跨项目聚合', icon: <IconCheckCircleFill />, color: 'green' },
    { title: 'AI 会话', value: aiSessions.length, delta: '项目内上下文', icon: <IconRobot />, color: 'purple' },
    { title: '知识资料', value: notes.length, delta: '笔记与资料合计', icon: <IconFile />, color: 'cyan' },
  ]

  return (
    <div className="workspace-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>工作台</Title>
          <Text type="secondary">所有项目的统一工作台，汇总项目任务、AI 会话和知识资产。</Text>
        </div>
      </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>
          <Tag color="arcoblue">{unfinishedTasks.length}</Tag>
        </div>
        {unfinishedTasks.length ? (
          <div className="workspace-task-list">
            {unfinishedTasks.map((task) => (
              <button key={`${task.project.id}-${task.id}`} className="workspace-task-card" onClick={() => onOpenTask(task.project, task.id)}>
                <div className="workspace-task-main">
                  <span className="workspace-task-title">
                    <IconCheckCircleFill />
                    {task.title}
                  </span>
                  <Paragraph ellipsis={{ rows: 2 }} type="secondary">
                    {task.summary || '暂无任务说明'}
                  </Paragraph>
                </div>
                <div className="workspace-task-meta">
                  <Tag color={task.project.urgent ? 'red' : 'arcoblue'}>{task.project.name}</Tag>
                  <span><IconCalendar /> {task.createdAt}</span>
                  <Tag color="green">{task.tag}</Tag>
                </div>
              </button>
            ))}
          </div>
        ) : (
          <Empty description="暂无未完成任务" />
        )}
      </Card>
    </div>
  )
}