import { Button, Card, Progress, Space, Tag, Typography } from '@arco-design/web-react'
import { IconCalendar, IconCheckCircle, IconPlus, IconUser } from '@arco-design/web-react/icon'
import { tasks } from './project-data'
import type { Project } from './project-types'

const { Title, Text } = Typography

const lanes = [
  { title: '待开始', color: 'gray', items: ['权限边界确认', '客户案例素材整理'] },
  { title: '进行中', color: 'arcoblue', items: tasks.map((task) => task.title) },
  { title: '已完成', color: 'green', items: ['项目模板初始化', '会议纪要归档'] },
]

export function ProjectTasks({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
  return (
    <div className="project-channel-page project-tasks-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>工作计划</Title>
          <Text type="secondary">{activeProject.name} 的 TODO 计划、负责人和截止时间。</Text>
        </div>
        <Button type="primary" icon={<IconPlus />}>新建任务</Button>
      </div>

      <Card className="queue-section" bordered>
        <div className="section-header">
          <Title heading={6}>任务清单</Title>
          <Tag color="arcoblue">{tasks.length} 个进行中</Tag>
        </div>
        {tasks.map((task) => (
          <button className="data-row task-row" key={task.title} onClick={() => onSelectItem(task.title)}>
            <span className="row-title"><IconCheckCircle /> {task.title}</span>
            <Tag color="arcoblue">{task.tag}</Tag>
            <span><IconUser /> {task.owner}</span>
            <span><IconCalendar /> {task.due}</span>
            <Progress percent={Number.parseInt(task.progress, 10)} size="small" />
          </button>
        ))}
      </Card>

      <div className="task-board">
        {lanes.map((lane) => (
          <Card className="task-lane" bordered key={lane.title}>
            <div className="section-header">
              <Title heading={6}>{lane.title}</Title>
              <Tag color={lane.color}>{lane.items.length}</Tag>
            </div>
            <Space direction="vertical" size={8}>
              {lane.items.map((title) => (
                <button className="task-card-button" key={title} onClick={() => onSelectItem(title)}>
                  <Text>{title}</Text>
                  <Text type="secondary">优先级 · 本周</Text>
                </button>
              ))}
            </Space>
          </Card>
        ))}
      </div>
    </div>
  )
}