import { useState } from 'react'
import { Button, Space, Tooltip } from 'antd'
import {
  BookOutlined,
  UnorderedListOutlined
} from '@ant-design/icons'

import { EpisodeSidebar } from './EpisodeSidebar'
import { ContextPanel } from './ContextPanel'

type SidebarTab = 'episodes' | 'context'

interface LeftSidebarProps {
  projectId: string
  project: any
  loading: boolean
  activeStates?: any[]
  memoryItems?: any[]
  width?: number
  currentEpisodeId?: string
  onEpisodeSelect?: (episode: any) => void
  onSendMessage?: (msg: string) => void
  onNavigateToSettings?: () => void
}

export const LeftSidebar: React.FC<LeftSidebarProps> = ({
  projectId,
  project,
  loading,
  activeStates = [],
  memoryItems = [],
  width = 600,
  currentEpisodeId,
  onEpisodeSelect,
  onSendMessage,
  onNavigateToSettings
}) => {
  const [activeTab, setActiveTab] = useState<SidebarTab>('episodes')

  return (
    <div
      style={{
        width: `${width}px`,
        minWidth: '280px',
        maxWidth: '600px',
        height: '100%',
        background: '#fafbfc',
        border: '1px solid #e0e4e7',
        borderRight: '2px solid #d1d5db',
        display: 'flex',
        flexDirection: 'column',
        flexShrink: 0,
        borderRadius: '8px 0 0 8px',
        overflow: 'hidden',
        boxShadow: 'inset -1px 0 0 #e5e7eb'
      }}
    >
      {/* Tab 头部 */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '12px 16px',
          borderBottom: '2px solid #e0e4e7',
          background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
          gap: '8px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
        }}
      >
        <Button
          type={activeTab === 'episodes' ? 'primary' : 'default'}
          icon={<UnorderedListOutlined />}
          onClick={() => setActiveTab('episodes')}
          size="small"
          style={{ flex: 1, fontSize: '12px' }}
        >
          剧集管理
        </Button>
        <Button
          type={activeTab === 'context' ? 'primary' : 'default'}
          icon={<BookOutlined />}
          onClick={() => setActiveTab('context')}
          size="small"
          style={{ flex: 1, fontSize: '12px' }}
        >
          故事上下文
        </Button>
      </div>

      {/* Tab 内容 */}
      {activeTab === 'episodes' ? (
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <EpisodeSidebar
            projectId={projectId}
            onEpisodeSelect={onEpisodeSelect}
            currentEpisodeId={currentEpisodeId}
            onSendMessage={onSendMessage}
          />
        </div>
      ) : (
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <ContextPanel
            project={project}
            loading={loading}
            activeStates={activeStates}
            memoryItems={memoryItems}
            width={width}
            onNavigateToSettings={onNavigateToSettings}
          />
        </div>
      )}
    </div>
  )
}
