import type { ReactNode } from "react"
import type { SessionSummary } from "@qjclaw/shared-types"
import { Sidebar } from "./Sidebar"
import { ExpertTree, type ExpertCategoryId, type ExpertVisualKey, type SidebarExpertEntry } from "./ExpertTree"
import { SessionList } from "./SessionList"

type ViewMode = "chat" | "experts" | "plugins" | "settings" | "knowledge"
type SendPhase = "idle" | "preparing" | "streaming" | "finalizing"

interface AppSidebarProps {
  viewMode: ViewMode
  prompt: string
  activeProjectId?: string
  ui: {
    knowledge: string
    plugins: string
    settings: string
    closeSession: string
  }
  showBindEntry: boolean
  projectActionPending: boolean
  sessions: SessionSummary[]
  activeSessionId: string
  sidebarSessionTitles: Record<string, string>
  sendPhase: SendPhase
  activeStreamSessionId?: string
  sidebarSessionLabel: string
  formatSessionTitle(title: string, index: number): string
  navIcon(kind: ViewMode): ReactNode
  onNavSelection(mode: ViewMode): void
  sidebarNewSessionAction: ReactNode
  sidebarExpertEntries: SidebarExpertEntry[]
  expandedCategories: Record<string, boolean>
  onToggleCategory(categoryId: string): void
  onExpertSelect(entry: SidebarExpertEntry): void
  renderCategoryIcon(categoryId: ExpertCategoryId): ReactNode
  renderExpertIcon(expertKey: ExpertVisualKey): ReactNode
  onOpenSession(sessionId: string): void
  onCloseSession(sessionId: string): void
}

export function AppSidebar({
  viewMode,
  prompt,
  activeProjectId,
  ui,
  showBindEntry,
  projectActionPending,
  sessions,
  activeSessionId,
  sidebarSessionTitles,
  sendPhase,
  activeStreamSessionId,
  sidebarSessionLabel,
  formatSessionTitle,
  navIcon,
  onNavSelection,
  sidebarNewSessionAction,
  sidebarExpertEntries,
  expandedCategories,
  onToggleCategory,
  onExpertSelect,
  renderCategoryIcon,
  renderExpertIcon,
  onOpenSession,
  onCloseSession
}: AppSidebarProps) {
  const topContent = (
    <>
      <nav className="nav-list">
        {[
          { id: "chat" as const, label: "对话" },
          { id: "knowledge" as const, label: ui.knowledge },
          { id: "plugins" as const, label: ui.plugins },
          { id: "settings" as const, label: ui.settings }
        ].map((item) => (
          <button key={item.id} type="button" className={"nav-item app-no-drag" + (viewMode === item.id ? " active" : "")} onClick={() => onNavSelection(item.id)}>
            <span className="nav-item-icon" aria-hidden="true">
              {navIcon(item.id)}
            </span>
            <span className="nav-item-label">{item.label}</span>
          </button>
        ))}
      </nav>
      {!showBindEntry ? sidebarNewSessionAction : null}
    </>
  )

  const bottomContent = (
    <>
      <ExpertTree
        entries={sidebarExpertEntries}
        expandedCategories={expandedCategories}
        viewMode={viewMode}
        prompt={prompt}
        activeProjectId={activeProjectId}
        onToggleCategory={onToggleCategory}
        onExpertSelect={onExpertSelect}
        renderCategoryIcon={renderCategoryIcon}
        renderExpertIcon={renderExpertIcon}
      />
      <SessionList
        visible={!showBindEntry}
        label={sidebarSessionLabel}
        sessions={sessions}
        activeSessionId={activeSessionId}
        sessionTitles={sidebarSessionTitles}
        projectActionPending={projectActionPending}
        sendPhase={sendPhase}
        activeStreamSessionId={activeStreamSessionId}
        closeLabel={ui.closeSession}
        formatSessionTitle={formatSessionTitle}
        onOpenSession={onOpenSession}
        onCloseSession={onCloseSession}
      />
    </>
  )

  return <Sidebar topContent={topContent} bottomContent={bottomContent} />
}
