import { Button, Card, Empty, Grid, Space, Tag, Typography } from '@arco-design/web-react'
import { IconBook, IconCompass, IconLink, IconLoop, IconRefresh, IconStar } from '@arco-design/web-react/icon'
import type { ProjectWorkspace } from './projects/project-types'

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

const rssSources = [
  { name: '产品更新', url: 'https://example.com/product.xml', status: '运行中', count: 18, color: 'arcoblue' },
  { name: '行业情报', url: 'https://example.com/market.xml', status: '运行中', count: 24, color: 'green' },
  { name: '技术博客', url: 'https://example.com/engineering.xml', status: '待同步', count: 9, color: 'orange' },
]

export function WorkspaceExplorePage({ workspaces, onSelectItem }: { workspaces: ProjectWorkspace[]; onSelectItem: (title: string) => void }) {
  const articles = workspaces.flatMap((workspace) => workspace.inbox.map((item) => ({ ...item, project: workspace.project })))
  const selected = articles[0]
  const pendingCount = articles.filter((item) => item.status === 'open').length
  const sourceCount = rssSources.length

  return (
    <div className="workspace-explore-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>探索</Title>
          <Text type="secondary">集中管理多个 RSS 源，采集外部内容、沉淀线索，并分发到对应项目。</Text>
        </div>
        <Space>
          <Button icon={<IconRefresh />}>同步 RSS</Button>
          <Button type="primary" icon={<IconLink />}>添加源</Button>
        </Space>
      </div>

      <Row gutter={12}>
        <Col span={8}>
          <Card className="compact-card" bordered>
            <Space><Tag color="arcoblue">{sourceCount}</Tag><Text>RSS 源</Text></Space>
          </Card>
        </Col>
        <Col span={8}>
          <Card className="compact-card" bordered>
            <Space><Tag color="red">{pendingCount}</Tag><Text>待处理采集</Text></Space>
          </Card>
        </Col>
        <Col span={8}>
          <Card className="compact-card" bordered>
            <Space><Tag color="green">{articles.length}</Tag><Text>采集条目</Text></Space>
          </Card>
        </Col>
      </Row>

      <Card className="queue-section" bordered>
        <div className="section-header">
          <Title heading={6}>RSS 源</Title>
          <Button type="text" size="mini">按最近同步排序</Button>
        </div>
        {rssSources.map((source) => (
          <button className="data-row rss-source-row" key={source.url} onClick={() => onSelectItem(source.name)}>
            <span className="row-title"><IconLink /> {source.name}</span>
            <Tag color={source.color}>{source.status}</Tag>
            <span>{source.url}</span>
            <span>{source.count} 条</span>
          </button>
        ))}
      </Card>

      {articles.length ? (
        <div className="mail-layout">
          <Card className="mail-list queue-section" bordered>
            <div className="section-header">
              <Title heading={6}>采集队列</Title>
              <Button type="text" size="mini">全部标记已读</Button>
            </div>
            {articles.map((item, index) => (
              <button
                className={index === 0 ? 'mail-item active' : 'mail-item'}
                key={`${item.project.id}-${item.id}`}
                onClick={() => onSelectItem(item.title)}
              >
                <span><IconCompass /> {item.title}</span>
                <Text type="secondary">{item.meta}</Text>
                <div>
                  <Tag color={item.project.urgent ? 'red' : 'arcoblue'}>{item.project.name}</Tag>
                  <time>{item.time}</time>
                </div>
              </button>
            ))}
          </Card>

          <Card className="mail-detail queue-section" bordered>
            <div className="section-header">
              <Title heading={6}>{selected.title}</Title>
              <Space>
                <Button type="text" icon={<IconStar />} />
                <Button type="text" icon={<IconLoop />} />
              </Space>
            </div>
            <Text type="secondary">{selected.meta} · {selected.project.name}</Text>
            <Paragraph>{selected.summary || '暂无采集正文'}</Paragraph>
            <div className="reply-box">
              <Text type="secondary">归档到项目</Text>
              <Space>
                <Button icon={<IconBook />}>转为资料</Button>
                <Button>生成任务</Button>
                <Button type="primary">加入项目</Button>
              </Space>
            </div>
          </Card>
        </div>
      ) : (
        <Card className="queue-section" bordered>
          <Empty description="暂无 RSS 采集条目" />
        </Card>
      )}
    </div>
  )
}