import { Button, Input, Layout, Space, Typography } from '@arco-design/web-react'
import { IconApps, IconMenuUnfold, IconMoon, IconSearch, IconSun } from '@arco-design/web-react/icon'
import type { Theme } from './project-types'

const { Header } = Layout
const { Text } = Typography

export function ProjectTopbar({
  theme,
  onToggleTheme,
  showChannels,
  onOpenProjects,
  onOpenChannels,
}: {
  theme: Theme
  onToggleTheme: () => void
  showChannels: boolean
  onOpenProjects: () => void
  onOpenChannels: () => void
}) {
  const desktop = isDesktopRuntime()

  return (
    <Header className="topbar">
      <div className="brand-lockup">
        <img className="brand-icon" src="/senlinai-icon.svg" alt="" />
        <Text className="brand-name">森林AI</Text>
      </div>
      <div className="global-search" role="search">
        <Input size="large" prefix={<IconSearch />} placeholder="搜索项目、频道、文档、任务、联系人..." />
        <Button size="large" type="primary">搜索</Button>
      </div>
      <Space className="topbar-actions">
        <Button className="mobile-nav-button" aria-label="打开项目导航" icon={<IconApps />} onClick={onOpenProjects} />
        {showChannels && (
          <Button className="mobile-nav-button" aria-label="打开频道导航" icon={<IconMenuUnfold />} onClick={onOpenChannels} />
        )}
        <Button aria-label={theme === 'dark' ? '切换浅色模式' : '切换深色模式'} icon={theme === 'dark' ? <IconSun /> : <IconMoon />} onClick={onToggleTheme} />
        {desktop && (
          <>
            <Button aria-label="停靠左边" icon={<DockIcon side="left" />} />
            <Button aria-label="停靠右边" icon={<DockIcon side="right" />} />
          </>
        )}
        <Button icon={<IconApps />} />
      </Space>
    </Header>
  )
}

function isDesktopRuntime() {
  return typeof window !== 'undefined' && '__TAURI__' in window
}

function DockIcon({ side }: { side: 'left' | 'right' }) {
  return (
    <span className={`dock-icon dock-icon-${side}`} aria-hidden="true">
      <span />
    </span>
  )
}
