import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { createTheme, ThemeProvider, CssBaseline, useMediaQuery } from '@mui/material';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import SettingsPage from './pages/SettingsPage';
import SplashScreen from './components/SplashScreen';
import './App.css';

function App() {
  const [loading, setLoading] = useState(true);
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const isMobile = useMediaQuery('(max-width:600px)');

  // 创建自定义主题
  const theme = createTheme({
    palette: {
      mode: prefersDarkMode ? 'dark' : 'light',
      primary: {
        main: '#24c8db',
      },
      secondary: {
        main: '#646cff',
      },
      background: {
        default: prefersDarkMode ? '#1e1e1e' : '#f5f5f5',
        paper: prefersDarkMode ? '#2d2d2d' : '#ffffff',
      },
    },
    typography: {
      fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
      // 移动端字体大小调整
      h4: {
        fontSize: isMobile ? '1.75rem' : '2.125rem',
      },
      h6: {
        fontSize: isMobile ? '1.1rem' : '1.25rem',
      },
      body1: {
        fontSize: isMobile ? '0.95rem' : '1rem',
      },
      body2: {
        fontSize: isMobile ? '0.85rem' : '0.875rem',
      },
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            borderRadius: 8,
            textTransform: 'none',
            fontWeight: 500,
          },
        },
      },
      MuiPaper: {
        styleOverrides: {
          root: {
            borderRadius: 12,
          },
        },
      },
      MuiCssBaseline: {
        styleOverrides: {
          body: {
            WebkitTapHighlightColor: 'transparent', // 禁用移动端点击高亮
            WebkitOverflowScrolling: 'touch', // 使滚动更流畅
            overscrollBehavior: 'none', // 防止滚动穿透
          },
          '*::-webkit-scrollbar': {
            width: '8px',
            height: '8px',
          },
          '*::-webkit-scrollbar-thumb': {
            backgroundColor: prefersDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',
            borderRadius: '4px',
          },
          '*::-webkit-scrollbar-track': {
            backgroundColor: 'transparent',
          },
        }
      },
    },
  });

  // 模拟应用启动加载
  useEffect(() => {
    // 模拟启动过程，实际项目中可根据资源加载情况决定
    const timer = setTimeout(() => {
      setLoading(false);
    }, 2000);
    
    return () => clearTimeout(timer);
  }, []);

  if (loading) {
    return <SplashScreen onFinish={() => setLoading(false)} />;
  }

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <MainLayout>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/about" element={<AboutPage />} />
            <Route path="/settings" element={<SettingsPage />} />
          </Routes>
        </MainLayout>
      </Router>
    </ThemeProvider>
  );
}

export default App;