import { Avatar, Button, Divider, Input, Layout, Message, Space, Tabs, Typography } from '@arco-design/web-react'
import { IconLink, IconMessage, IconMore } from '@arco-design/web-react/icon'
import { channels, discussions } from './project-data'
import type { ChannelKey, Project, WorkbenchView } from './project-types'

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

export function ProjectInspector({
  activeView,
  activeProject,
  activeChannel,
  selectedItem,
}: {
  activeView: WorkbenchView
  activeProject: Project
  activeChannel: ChannelKey
  selectedItem: string
}) {
  const workspaceMode = activeView === 'workspace'

  return (
    <Sider className="inspector" width={360}>
      <Tabs defaultActiveTab="discussion">
        <Tabs.TabPane key="discussion" title="讨论">
          <InspectorDiscussion selectedItem={selectedItem} />
        </Tabs.TabPane>
        <Tabs.TabPane key="props" title="属性">
          <div className="property-list">
            <Property label="所属项目" value={workspaceMode ? '全部项目' : activeProject.name} />
            <Property label="频道" value={workspaceMode ? '工作台总览' : channels.find((channel) => channel.key === activeChannel)?.label ?? '概况'} />
            <Property label="创建人" value="张伟" />
            <Property label="更新时间" value="2026-07-20 10:30" />
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane key="more" title="更多">
          <Space direction="vertical" className="more-actions">
            <Button long>复制链接</Button>
            <Button long>标记已处理</Button>
            <Button long status="danger">归档对象</Button>
          </Space>
        </Tabs.TabPane>
      </Tabs>
    </Sider>
  )
}

function InspectorDiscussion({ selectedItem }: { selectedItem: string }) {
  return (
    <div className="discussion-panel">
      <div className="inspector-title">
        <Title heading={5}>关于「{selectedItem}」</Title>
        <Button size="mini" icon={<IconMore />} />
      </div>
      <Text type="secondary">注：同一对象的讨论与协作记录</Text>
      <Divider />
      <Space direction="vertical" size={18} className="discussion-list">
        {discussions.map((item) => (
          <div className="discussion-item" key={`${item.name}-${item.time}`}>
            <Avatar size={30}>{item.name.slice(0, 1)}</Avatar>
            <div>
              <Space>
                <Text className="discussion-name">{item.name}</Text>
                <Text type="secondary">{item.time}</Text>
              </Space>
              <Paragraph>{item.text}</Paragraph>
              <Button type="text" size="mini">回复</Button>
            </div>
          </div>
        ))}
      </Space>
      <div className="comment-box">
        <Input.TextArea placeholder="写下你的评论，Enter 发送，⌘ + Enter 换行" autoSize={{ minRows: 3, maxRows: 4 }} />
        <div className="comment-actions">
          <Space>
            <Button type="text" icon={<IconAttachmentFallback />} />
            <Button type="text" icon={<IconMessage />} />
          </Space>
          <Button type="primary" onClick={() => Message.success('评论已发送（原型）')}>发送</Button>
        </div>
      </div>
    </div>
  )
}

function IconAttachmentFallback() {
  return <IconLink />
}

function Property({ label, value }: { label: string; value: string }) {
  return (
    <div className="property-row">
      <Text type="secondary">{label}</Text>
      <Text>{value}</Text>
    </div>
  )
}
