import { Button, Card, Input, Select, Space, Tag, Typography } from '@arco-design/web-react'
import { IconApps, IconLink, IconPlus } from '@arco-design/web-react/icon'
import type { ProjectWorkspace } from './project-types'

const { Title, Text } = Typography
const { TextArea } = Input

export function ProjectNewChannel({ activeWorkspace }: { activeWorkspace: ProjectWorkspace }) {
  return (
    <div className="project-channel-page project-new-channel-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>新建频道</Title>
          <Text type="secondary">{activeWorkspace.project.name} 的频道入口配置，用于接入外部页面、资料集合或项目流程。</Text>
        </div>
        <Button type="primary" icon={<IconPlus />}>保存频道</Button>
      </div>

      <Card className="queue-section channel-editor-card" bordered>
        <Space direction="vertical" size={12} className="action-form">
          <label>
            <Text>频道名称</Text>
            <Input placeholder="例如：客户研究频道" />
          </label>
          <label>
            <Text>频道类型</Text>
            <Select defaultValue="link">
              <Select.Option value="link">外部链接</Select.Option>
              <Select.Option value="source">资料集合</Select.Option>
              <Select.Option value="workflow">项目流程</Select.Option>
            </Select>
          </label>
          <label>
            <Text>图标</Text>
            <Input placeholder="例如：link / user / file" prefix={<IconApps />} />
          </label>
          <label>
            <Text>链接地址</Text>
            <Input placeholder="https://example.com/channel" prefix={<IconLink />} />
          </label>
          <label>
            <Text>说明</Text>
            <TextArea rows={4} placeholder="频道用途、维护规则或采集说明" />
          </label>
        </Space>
      </Card>

      <Card className="queue-section" bordered>
        <div className="section-header">
          <Title heading={6}>创建后可接入的内容</Title>
          <Tag color="gray">配置预览</Tag>
        </div>
        <Space wrap>
          <Tag color="arcoblue">外部资料库</Tag>
          <Tag color="green">项目流程页</Tag>
          <Tag color="orange">RSS/探索结果</Tag>
          <Tag color="purple">AI 助手上下文</Tag>
        </Space>
      </Card>
    </div>
  )
}
