import type { CSSProperties } from 'react'
import { Badge, Button, Layout, Space } from '@arco-design/web-react'
import { IconCompass, IconDashboard, IconPlus } from '@arco-design/web-react/icon'
import type { Project, WorkbenchView } from './project-types'

const { Sider } = Layout

export function ProjectRail({
  activeProject,
  projects,
  activeView,
  open,
  onClose,
  onSelectWorkspace,
  onSelectWorkspaceExplore,
  onSelectProject,
  onCreateProject,
}: {
  activeProject: Project
  projects: Project[]
  activeView: WorkbenchView
  open: boolean
  onClose: () => void
  onSelectWorkspace: () => void
  onSelectWorkspaceExplore: () => void
  onSelectProject: (project: Project) => void
  onCreateProject: () => void
}) {
  const selectAndClose = (action: () => void) => {
    action()
    onClose()
  }

  return (
    <Sider className={open ? 'project-rail open' : 'project-rail'} width={96}>
      <button className="rail-brand" aria-label="森林AI 工作台" title="森林AI 工作台" onClick={() => selectAndClose(onSelectWorkspace)}>
        <img className="brand-icon" src="/senlinai-icon.svg" alt="" />
      </button>
      <Button
        className={activeView === 'workspace' ? 'dashboard-button active' : 'dashboard-button'}
        icon={<IconDashboard />}
        onClick={() => selectAndClose(onSelectWorkspace)}
        aria-label="工作台"
        title="工作台"
      />
      <Button
        className={activeView === 'workspace-explore' ? 'dashboard-button active' : 'dashboard-button'}
        icon={<IconCompass />}
        onClick={() => selectAndClose(onSelectWorkspaceExplore)}
        aria-label="探索"
        title="探索"
      />
      <div className="project-stack-scroll">
        <Space className="project-stack" direction="vertical" size={12}>
          {projects.map((project) => (
            <Badge key={project.id} count={project.badge} dot={false} className={project.urgent ? 'project-badge urgent' : 'project-badge'}>
              <button
                className={activeView === 'project' && activeProject.id === project.id ? 'project-button active' : 'project-button'}
                onClick={() => selectAndClose(() => onSelectProject(project))}
                style={{ '--project-color': project.color } as CSSProperties}
                title={project.name}
              >
                {project.short}
              </button>
            </Badge>
          ))}
        </Space>
      </div>
      <Button className="create-project" aria-label="新建项目" icon={<IconPlus />} title="新建项目" onClick={() => selectAndClose(onCreateProject)} />
    </Sider>
  )
}