import { useMemo } from 'react'
import { Button, Card, Grid, Space, Tag, Typography } from '@arco-design/web-react'
import { IconCalendar, IconCheckCircleFill, IconClockCircle, IconEmail, IconFile, IconMore, IconRobot } from '@arco-design/web-react/icon'
import { aiSessions, inbox, notes, tasks } from './project-data'

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

export function ProjectOverview({ onSelectItem }: { onSelectItem: (title: string) => void }) {
  const metrics = useMemo(() => [
    { title: 'Inbox 待处理', value: 36, delta: '较昨日 -8', icon: <IconEmail />, color: 'arcoblue' },
    { title: '进行中的任务', value: 12, delta: '较昨日 -2', icon: <IconCheckCircleFill />, color: 'green' },
    { title: 'AI 会话活跃', value: 4, delta: '较昨日 +1', icon: <IconRobot />, color: 'purple' },
    { title: '笔记资料总数', value: 343, delta: '较昨日 +5', icon: <IconFile />, color: 'cyan' },
    { title: '计划任务', value: 45, delta: '较昨日 +0', icon: <IconClockCircle />, color: 'orange' },
  ], [])

  return (
    <div className="overview-page">
      <div className="overview-head">
        <div>
          <Text type="secondary">项目整体快照，帮助你快速了解项目动态</Text>
          <Title heading={4}>概况</Title>
        </div>
        <Space>
          <Button icon={<IconCalendar />}>2026-07-20</Button>
          <Button icon={<IconMore />} />
        </Space>
      </div>

      <Row gutter={12} className="metric-row">
        {metrics.map((metric) => (
          <Col span={24 / metrics.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>

      <QueueSection title="Inbox 待处理（36）" items={inbox} onSelectItem={onSelectItem} />
      <TaskSection onSelectItem={onSelectItem} />
      <AISessionSection onSelectItem={onSelectItem} />
      <NoteSection onSelectItem={onSelectItem} />
    </div>
  )
}

function QueueSection({ title, items, onSelectItem }: { title: string; items: typeof inbox; onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
        <Title heading={6}>{title}</Title>
        <Button type="text" size="mini">查看全部</Button>
      </div>
      {items.map((item) => (
        <button key={item.title} className="data-row" onClick={() => onSelectItem(item.title)}>
          <span className="row-title"><IconFile /> {item.title}</span>
          <span>{item.meta}</span>
          <Tag>{item.tag}</Tag>
          <span>{item.owner}</span>
          <time>{item.time}</time>
        </button>
      ))}
    </Card>
  )
}

function TaskSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
        <Title heading={6}>进行中的任务（12）</Title>
        <Button type="text" size="mini">查看全部</Button>
      </div>
      {tasks.map((task) => (
        <button key={task.title} className="data-row task-row" onClick={() => onSelectItem(task.title)}>
          <span className="row-title"><IconCheckCircleFill /> {task.title}</span>
          <Tag color="arcoblue">{task.tag}</Tag>
          <span>进度 {task.progress}</span>
          <span>负责人 {task.owner}</span>
          <time>截止 {task.due}</time>
        </button>
      ))}
    </Card>
  )
}

function AISessionSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
        <Title heading={6}>AI 会话（4）</Title>
        <Button type="text" size="mini">查看全部</Button>
      </div>
      {aiSessions.map((session) => (
        <button key={session.title} className="data-row ai-row" onClick={() => onSelectItem(session.title)}>
          <span className="row-title"><IconRobot /> {session.title}</span>
          <span>{session.summary}</span>
          <span>{session.owner}</span>
          <time>{session.time}</time>
        </button>
      ))}
    </Card>
  )
}

function NoteSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
        <Title heading={6}>最近笔记资料（5）</Title>
        <Button type="text" size="mini">查看全部</Button>
      </div>
      {notes.map((note) => (
        <button key={note.title} className="data-row note-row" onClick={() => onSelectItem(note.title)}>
          <span className="row-title"><IconFile /> {note.title}</span>
          <Tag>{note.type}</Tag>
          <span>更新于 {note.updated}</span>
          <span>{note.owner}</span>
        </button>
      ))}
    </Card>
  )
}
