import { useState } from 'react'
import { Layout } from '@arco-design/web-react'
import { WorkspacePage, type WorkspaceTaskUpdate } from './workspace-body'
import { WorkspaceExplorePage } from './workspace-explore'
import { ProjectChannelPage } from './projects/project-channel-page'
import type { ProjectTaskUpdate } from './projects/project-task-edit-modal'
import { ProjectRail } from './projects/project-rail'
import { ProjectSidebar, type ProjectSettingsUpdate } from './projects/project-sidebar'
import { ProjectStatusbar } from './projects/project-statusbar'
import { ProjectTopbar } from './projects/project-topbar'
import type { SearchResultDTO } from '../api/search'
import type { InboxSuggestionDTO } from '../api/inbox'
import type { AISessionDTO, CreateAISessionInput } from '../api/ai'
import type { ChannelKey, InboxConfirmationOutcome, Project, ProjectWorkspace, Theme, WorkbenchView } from './projects/project-types'

const { Content } = Layout

export function ProjectPage({
  activeView,
  activeWorkspace,
  workspaces,
  activeChannel,
  activeTaskID,
  theme,
  onSelectProject,
  onSelectWorkspace,
  onSelectWorkspaceExplore,
  onSelectChannel,
  onSelectItem,
  onOpenTask,
  onCloseTask,
  onToggleTheme,
  onCreateProject,
  onCreateTask,
  onUploadSource,
  onCreateCronPlan,
  onUpdateWorkspaceTask,
  onUpdateProject,
  onCreateProjectTag,
  searchQuery,
  searchLoading,
  searchSearched,
  searchResults,
  onSearchQueryChange,
  onSearch,
  onSelectSearchResult,
  onAnalyzeInbox,
  onConfirmInbox,
  onListAISessions,
  onCreateAISession,
}: {
  activeView: WorkbenchView
  activeWorkspace: ProjectWorkspace
  workspaces: ProjectWorkspace[]
  activeChannel: ChannelKey
  activeTaskID: string | null
  theme: Theme
  onSelectProject: (project: Project) => void
  onSelectWorkspace: () => void
  onSelectWorkspaceExplore: () => void
  onSelectChannel: (key: ChannelKey) => void
  onSelectItem: (title: string) => void
  onOpenTask: (project: Project, taskID: string) => void
  onCloseTask: () => void
  onToggleTheme: () => void
  onCreateProject: () => void
  onCreateTask: () => void
  onUploadSource: () => void
  onCreateCronPlan: () => void
  onUpdateWorkspaceTask: (update: WorkspaceTaskUpdate) => void
  onUpdateProject: (update: ProjectSettingsUpdate) => Promise<void>
  onCreateProjectTag: (name: string) => void
  searchQuery: string
  searchLoading: boolean
  searchSearched: boolean
  searchResults: SearchResultDTO[]
  onSearchQueryChange: (value: string) => void
  onSearch: () => void
  onSelectSearchResult: (result: SearchResultDTO) => void
  onAnalyzeInbox: (inboxId: string) => Promise<InboxSuggestionDTO[]>
  onConfirmInbox: (inboxId: string, suggestionIds: string[]) => Promise<InboxConfirmationOutcome>
  onListAISessions: (projectId: string) => Promise<AISessionDTO[]>
  onCreateAISession: (projectId: string, input: CreateAISessionInput) => Promise<AISessionDTO>
}) {
  const isProject = activeView === 'project'
  const [navOpen, setNavOpen] = useState<'projects' | 'channels' | null>(null)
  const projects = workspaces.map((workspace) => workspace.project)
  const updateActiveProjectTask = (update: ProjectTaskUpdate) => {
    onUpdateWorkspaceTask({
      originalProjectId: activeWorkspace.project.id,
      nextProjectId: activeWorkspace.project.id,
      taskId: update.taskId,
      title: update.title,
      summary: update.summary,
      tag: update.tag,
      completed: update.completed,
    })
  }

  return (
    <Layout className="workbench-shell">
      <ProjectTopbar
        theme={theme}
        onToggleTheme={onToggleTheme}
        showChannels={isProject}
        onOpenProjects={() => setNavOpen('projects')}
        onOpenChannels={() => setNavOpen('channels')}
        query={searchQuery}
        loading={searchLoading}
        searched={searchSearched}
        results={searchResults}
        onQueryChange={onSearchQueryChange}
        onSearch={onSearch}
        onSelectSearchResult={onSelectSearchResult}
      />

      <Layout className="workbench-main" hasSider>
        <ProjectRail
          activeProject={activeWorkspace.project}
          projects={projects}
          activeView={activeView}
          open={navOpen === 'projects'}
          onClose={() => setNavOpen(null)}
          onSelectWorkspace={onSelectWorkspace}
          onSelectWorkspaceExplore={onSelectWorkspaceExplore}
          onSelectProject={onSelectProject}
          onCreateProject={onCreateProject}
        />

        {isProject && (
          <ProjectSidebar
            activeView={activeView}
            activeWorkspace={activeWorkspace}
            activeChannel={activeChannel}
            open={navOpen === 'channels'}
            onClose={() => setNavOpen(null)}
            onSelectChannel={onSelectChannel}
            onSelectItem={onSelectItem}
            onUpdateProject={onUpdateProject}
          />
        )}

        {navOpen && (
          <button className="nav-backdrop" type="button" aria-label="关闭导航" onClick={() => setNavOpen(null)} />
        )}

        <Content className="stage">
          {activeView === 'workspace' ? (
            <WorkspacePage workspaces={workspaces} onOpenTask={onOpenTask} onUpdateTask={onUpdateWorkspaceTask} />
          ) : activeView === 'workspace-explore' ? (
            <WorkspaceExplorePage />
          ) : (
            <ProjectChannelPage
              activeChannel={activeChannel}
              activeWorkspace={activeWorkspace}
              activeTaskID={activeTaskID}
              onSelectItem={onSelectItem}
              onOpenTask={(taskID) => onOpenTask(activeWorkspace.project, taskID)}
              onCloseTask={onCloseTask}
              onCreateTask={onCreateTask}
              onUploadSource={onUploadSource}
              onCreateCronPlan={onCreateCronPlan}
              onCreateProjectTag={onCreateProjectTag}
              onUpdateTask={updateActiveProjectTask}
              onAnalyzeInbox={onAnalyzeInbox}
              onConfirmInbox={onConfirmInbox}
              onListAISessions={onListAISessions}
              onCreateAISession={onCreateAISession}
            />
          )}
        </Content>

      </Layout>

      <ProjectStatusbar />
    </Layout>
  )
}