import { useState } from 'react'
import { ConfigProvider } from '@arco-design/web-react'
import '@arco-design/web-react/dist/css/arco.css'
import '../App.css'
import { LoginPage } from '../pages/login'
import { ProjectPage } from '../pages/project'
import { projects } from '../features/projects/project-data'
import type { ChannelKey, Screen, Theme } from '../features/projects/project-types'

function App() {
  const [screen, setScreen] = useState<Screen>('login')
  const [theme, setTheme] = useState<Theme>('light')
  const [activeProject, setActiveProject] = useState(projects[0])
  const [activeChannel, setActiveChannel] = useState<ChannelKey>('overview')
  const [selectedItem, setSelectedItem] = useState('Inbox 待处理（36）')

  const dark = theme === 'dark'

  return (
    <ConfigProvider>
      <main className={dark ? 'app theme-dark' : 'app'}>
        {screen === 'login' ? (
          <LoginPage onLogin={() => setScreen('workbench')} />
        ) : (
          <ProjectPage
            activeProject={activeProject}
            activeChannel={activeChannel}
            selectedItem={selectedItem}
            theme={theme}
            onSelectProject={setActiveProject}
            onSelectChannel={setActiveChannel}
            onSelectItem={setSelectedItem}
            onToggleTheme={() => setTheme(dark ? 'light' : 'dark')}
          />
        )}
      </main>
    </ConfigProvider>
  )
}

export default App