import React from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { ConfigProvider, Layout, Menu, theme } from 'antd'
import { DashboardOutlined, BookOutlined, SettingOutlined } from '@ant-design/icons'

import { ProjectList } from './pages/ProjectList'
import { ProjectCreateEnhanced } from './pages/ProjectCreateEnhanced'
import { ProjectCreateProgressive } from './pages/ProjectCreateProgressive'
import { ProjectDetail } from './pages/ProjectDetail'
import { ProjectWorkspace } from './pages/ProjectWorkspace'
import { SkillManagement } from './pages/SkillManagement'
import { AgentManagement } from './pages/AgentManagement'
import { ExecutionMonitor } from './pages/ExecutionMonitor'
import MemorySystem from './pages/MemorySystem'
import ReviewConfig from './pages/ReviewConfig'
import ReviewResults from './pages/ReviewResults'

const { Header, Content } = Layout

function App() {
  const currentPath = window.location.pathname

  const menuItems = [
    { key: '/projects', icon: <DashboardOutlined />, label: '项目列表' },
    { key: '/skills', icon: <BookOutlined />, label: 'Skills 管理' },
    { key: '/agents', icon: <SettingOutlined />, label: 'Agents 管理' },
  ]

  return (
    <ConfigProvider
      theme={{
        algorithm: theme.defaultAlgorithm,
        token: {
          colorPrimary: '#0ea5e9',
        },
      }}
    >
      <BrowserRouter>
        <Layout style={{ minHeight: '100vh' }}>
          <Header style={{
            background: '#fff',
            padding: '0 24px',
            borderBottom: '1px solid #f0f0f0'
          }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              height: '64px'
            }}>
              <div style={{
                fontSize: '20px',
                fontWeight: 'bold',
                marginRight: '40px'
              }}>
                Creative Studio
              </div>
              <Menu
                mode="horizontal"
                selectedKeys={[currentPath]}
                items={menuItems}
                onClick={({ key }) => (window.location.href = key)}
                style={{ flex: 1, border: 'none' }}
              />
            </div>
          </Header>

          <Content style={{ padding: '24px' }}>
            <Routes>
              <Route path="/" element={<Navigate to="/projects" replace />} />
              <Route path="/projects" element={<ProjectList />} />
              <Route path="/projects/new" element={<ProjectCreateEnhanced />} />
              <Route path="/projects/progressive" element={<ProjectCreateProgressive />} />
              {/* 更具体的路由要放在前面 */}
              <Route path="/projects/:id/workspace" element={<ProjectWorkspace />} />
              <Route path="/projects/:id/execute" element={<ExecutionMonitor />} />
              <Route path="/projects/:id/memory" element={<MemorySystem />} />
              <Route path="/projects/:id/review/config" element={<ReviewConfig />} />
              <Route path="/projects/:id/review/results" element={<ReviewResults />} />
              <Route path="/projects/:id" element={<ProjectDetail />} />
              <Route path="/skills" element={<SkillManagement />} />
              <Route path="/agents" element={<AgentManagement />} />
            </Routes>
          </Content>
        </Layout>
      </BrowserRouter>
    </ConfigProvider>
  )
}

export default App
