import { ConfigProvider, Layout, Menu } from 'antd';
import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
import zhCN from 'antd/locale/zh_CN';
import {
  DashboardOutlined,
  LineChartOutlined,
  ThunderboltOutlined,
} from '@ant-design/icons';
import Dashboard from './pages/Dashboard';
import TrendPage from './pages/TrendPage';
import ConsecutivePage from './pages/ConsecutivePage';

const { Header, Content } = Layout;

const menuItems = [
  { key: '/', icon: <DashboardOutlined />, label: '市场概览' },
  { key: '/consecutive', icon: <ThunderboltOutlined />, label: '连板高度' },
  { key: '/trend', icon: <LineChartOutlined />, label: '每日趋势' },
];

function AppLayout() {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ display: 'flex', alignItems: 'center', padding: '0 24px' }}>
        <div style={{ color: '#fff', fontSize: 18, fontWeight: 'bold', marginRight: 40 }}>
          AShareView
        </div>
        <Menu
          theme="dark"
          mode="horizontal"
          selectedKeys={[location.pathname]}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
          style={{ flex: 1 }}
        />
      </Header>
      <Content style={{ padding: 24, background: '#f5f5f5' }}>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/consecutive" element={<ConsecutivePage />} />
          <Route path="/trend" element={<TrendPage />} />
        </Routes>
      </Content>
    </Layout>
  );
}

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <BrowserRouter>
        <AppLayout />
      </BrowserRouter>
    </ConfigProvider>
  );
}

export default App;
