import React from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { Layout, Menu, App as AntApp, 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 { SkillManagement } from './pages/SkillManagement'
import { AgentManagement } from './pages/AgentManagement'
import { ExecutionMonitor } from './pages/ExecutionMonitor'

const { Header, Content } = Layout

function AppRoot() {
  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 (
    <AntApp>
      <BrowserRouter
        future={{
          v7_startTransition: true,
          v7_relativeSplatPath: true
        }}
      >
        <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/execute" element={<ExecutionMonitor />} />
              {/* 项目详情页（包含所有功能：设置、全局设定、剧集创作、记忆系统、审核系统） */}
              <Route path="/projects/:id" element={<ProjectDetail />} />
              {/* 全局管理页面 */}
              <Route path="/skills" element={<SkillManagement />} />
              <Route path="/agents" element={<AgentManagement />} />
            </Routes>
          </Content>
        </Layout>
      </BrowserRouter>
    </AntApp>
  )
}

export default AppRoot