import { useState } from 'react'
import { ConfigProvider, Message, Spin } from '@arco-design/web-react'
import '@arco-design/web-react/dist/css/arco.css'
import '../App.css'
import { login, setApiBaseUrl, type ApiSession } from '../api/client'
import { mapWorkspace } from '../api/mappers'
import { fetchProjectWorkspace, fetchProjects } from '../api/projects'
import { LoginPage } from '../pages/login'
import { ProjectPage } from '../pages/workspace-home'
import type { ChannelKey, Project, ProjectWorkspace, Screen, Theme, WorkbenchView } from '../pages/projects/project-types'

function App() {
  const [screen, setScreen] = useState<Screen>('login')
  const [theme, setTheme] = useState<Theme>('light')
  const [activeView, setActiveView] = useState<WorkbenchView>('workspace')
  const [session, setSession] = useState<ApiSession | null>(null)
  const [workspaces, setWorkspaces] = useState<ProjectWorkspace[]>([])
  const [activeProjectID, setActiveProjectID] = useState<string>('')
  const [activeChannel, setActiveChannel] = useState<ChannelKey>('overview')
  const [activeTaskID, setActiveTaskID] = useState<string | null>(null)
  const [, setSelectedItem] = useState('Inbox 待处理（36）')
  const [loading, setLoading] = useState(false)

  const dark = theme === 'dark'
  const activeWorkspace = workspaces.find((workspace) => workspace.project.id === activeProjectID) ?? workspaces[0]

  async function handleLogin(input: { server: string; email: string; password: string }) {
    setLoading(true)
    try {
      setApiBaseUrl(input.server)
      const nextSession = await login(input.email, input.password)
      const backendProjects = await fetchProjects(nextSession)
      const backendWorkspaces = await Promise.all(
        backendProjects.map((project, index) => fetchProjectWorkspace(nextSession, project.ID ?? project.id ?? '').then((workspace) => mapWorkspace(workspace, index))),
      )
      setSession(nextSession)
      setWorkspaces(backendWorkspaces)
      setActiveProjectID(backendWorkspaces[0]?.project.id ?? '')
      setActiveChannel('overview')
      setActiveView('workspace')
      setScreen('workbench')
    } catch (error) {
      Message.error(error instanceof Error ? error.message : '登录失败')
    } finally {
      setLoading(false)
    }
  }

  function openTask(project: Project, taskID: string) {
    setActiveProjectID(project.id)
    setActiveView('project')
    setActiveChannel('tasks')
    setActiveTaskID(taskID)
  }

  return (
    <ConfigProvider>
      <main className={dark ? 'app theme-dark' : 'app'}>
        {screen === 'login' ? (
          <Spin loading={loading} style={{ width: '100%' }}>
            <LoginPage onLogin={handleLogin} />
          </Spin>
        ) : activeWorkspace && session ? (
          <ProjectPage
            activeView={activeView}
            activeWorkspace={activeWorkspace}
            workspaces={workspaces}
            activeChannel={activeChannel}
            activeTaskID={activeTaskID}
            theme={theme}
            onSelectWorkspace={() => setActiveView('workspace')}
            onSelectWorkspaceInbox={() => setActiveView('workspace-inbox')}
            onSelectProject={(project) => {
              setActiveProjectID(project.id)
              setActiveView('project')
              setActiveChannel('overview')
              setActiveTaskID(null)
            }}
            onSelectChannel={(channel) => {
              setActiveChannel(channel)
              setActiveTaskID(null)
            }}
            onSelectItem={setSelectedItem}
            onOpenTask={openTask}
            onCloseTask={() => setActiveTaskID(null)}
            onToggleTheme={() => setTheme(dark ? 'light' : 'dark')}
          />
        ) : (
          <Spin loading />
        )}
      </main>
    </ConfigProvider>
  )
}

export default App