import { Button, Card, Space, Switch, Tag, Typography } from '@arco-design/web-react'
import { IconClockCircle, IconPlus, IconThunderbolt } from '@arco-design/web-react/icon'
import type { ProjectWorkspace } from './project-types'

const { Title, Text } = Typography

export function ProjectCron({ activeWorkspace, onSelectItem, onCreateCronPlan }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void; onCreateCronPlan: () => void }) {
  const { cronJobs, project } = activeWorkspace
  const enabledCount = cronJobs.filter((job) => job.enabled).length
  const pausedCount = cronJobs.length - enabledCount

  return (
    <div className="project-channel-page project-cron-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>计划任务</Title>
          <Text type="secondary">{project.name} 的计划任务元数据与提醒安排；当前不会自主执行 AI 工作。</Text>
        </div>
        <Button type="primary" icon={<IconPlus />} onClick={onCreateCronPlan}>新建计划</Button>
      </div>

      <Card className="queue-section" bordered>
        <div className="section-header">
          <Title heading={6}>任务列表</Title>
          <Space>
            <Tag color="green">{enabledCount} 运行中</Tag>
            <Tag color="gray">{pausedCount} 暂停</Tag>
          </Space>
        </div>
        {cronJobs.map((job) => (
          <div
            className="data-row cron-row"
            key={job.name}
            role="button"
            tabIndex={0}
            onClick={() => onSelectItem(job.name)}
            onKeyDown={(event) => {
              if (event.key === 'Enter' || event.key === ' ') onSelectItem(job.name)
            }}
          >
            <span className="row-title"><IconClockCircle /> {job.name}</span>
            <Tag color={job.enabled ? 'green' : 'gray'}>{job.status}</Tag>
            <span>{job.expr}</span>
            <span>{job.lastRun}</span>
            <span>{job.nextRun}</span>
            <span>{job.owner}</span>
            <Switch size="small" checked={job.enabled} />
          </div>
        ))}
      </Card>

      <Card className="queue-section cron-summary" bordered>
        <Space>
          <Tag color="arcoblue"><IconThunderbolt /></Tag>
          <Text>最近一次自动任务完成于今天 12:00，资料索引刷新成功，无异常重试。</Text>
        </Space>
      </Card>
    </div>
  )
}
