import { Badge, Button, Divider, Layout, Space, Tag, Typography } from '@arco-design/web-react'
import { IconApps, IconDashboard, IconMore, IconSettings } from '@arco-design/web-react/icon'
import { channels } from './project-data'
import type { ChannelKey, Project, WorkbenchView } from './project-types'

const { Sider } = Layout
const { Title, Text } = Typography

export function ProjectSidebar({
  activeView,
  activeProject,
  activeChannel,
  onSelectChannel,
  onSelectItem,
}: {
  activeView: WorkbenchView
  activeProject: Project
  activeChannel: ChannelKey
  onSelectChannel: (key: ChannelKey) => void
  onSelectItem: (title: string) => void
}) {
  const workspaceMode = activeView === 'workspace'

  return (
    <Sider className="channel-sidebar" width={248}>
      <div className="project-title">
        <Space>
          {workspaceMode ? <IconApps /> : <IconDashboard />}
          <Title heading={5}>{workspaceMode ? '工作台' : activeProject.name}</Title>
        </Space>
        <Button icon={<IconSettings />} size="mini" />
      </div>

      <div className="channel-list">
        {workspaceMode ? (
          <>
            <button className="channel-button active">
              <span className="channel-left"><IconDashboard /><Text>工作台总览</Text></span>
              <Badge count={4} />
            </button>
            <button className="channel-button">
              <span className="channel-left"><IconApps /><Text>全部项目</Text></span>
              <IconMore />
            </button>
          </>
        ) : (
          channels.map((channel) => (
            <button
              key={channel.key}
              className={activeChannel === channel.key ? 'channel-button active' : 'channel-button'}
              onClick={() => onSelectChannel(channel.key)}
            >
              <span className="channel-left">{channel.icon}<Text>{channel.label}</Text></span>
              {channel.count !== undefined ? <Badge count={channel.count} maxCount={999} /> : <IconMore />}
            </button>
          ))
        )}
      </div>

      <Divider />
      <section className="recent-sessions">
        <Text className="section-title">最近会话</Text>
        {['需求评审要点整理', '生成 Q3 营销策略初稿', 'npx 安装 skill 至 codex', '产品定价模型讨论'].map((title, index) => (
          <button key={title} onClick={() => onSelectItem(title)}>
            <Text>{title}</Text>
            <Text type="secondary">{index === 0 ? '09:15' : index === 1 ? '08:47' : '昨天'}</Text>
          </button>
        ))}
      </section>

      <Divider />
      <section className="tag-cloud">
        <Text className="section-title">标签</Text>
        <Space wrap>
          {['全部', '需求', '设计', '研发', '运营', 'AI'].map((tag) => (
            <Tag key={tag} color={tag === '全部' ? 'arcoblue' : 'gray'}>{tag}</Tag>
          ))}
        </Space>
      </section>
    </Sider>
  )
}
