import { useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { Background } from './components/layout';
import Loader from './components/Loader';
import LoginPage from './pages/LoginPage';
import OnboardingPage from './pages/OnboardingPage';
import DashboardPage from './pages/DashboardPage';
import useStore from './store/useStore';

/**
 * 路由守卫组件
 * 根据登录状态和注册完成状态进行路由重定向
 * - requireAuth: 需要登录才能访问
 * - requireOnboarding: 需要完成入站流程才能访问
 */
const ProtectedRoute = ({ children, requireAuth = false, requireOnboarding = false }) => {
  const { isLoggedIn, registrationData } = useStore();
  const navigate = useNavigate();
  
  // 检查是否完成入站流程（有昵称和未来愿景即视为已完成）
  const hasCompletedOnboarding = !!(registrationData.nickname && registrationData.future?.vision);

  useEffect(() => {
    if (requireAuth && !isLoggedIn) {
      navigate('/', { replace: true });
    } else if (requireOnboarding && !hasCompletedOnboarding) {
      navigate('/onboarding', { replace: true });
    }
  }, [isLoggedIn, hasCompletedOnboarding, requireAuth, requireOnboarding, navigate]);

  if (requireAuth && !isLoggedIn) {
    return <Loader text="正在验证身份..." />;
  }

  if (requireOnboarding && !hasCompletedOnboarding) {
    return <Loader text="正在加载..." />;
  }

  return children;
};

/**
 * 页面过渡动画包装器
 */
const PageTransition = ({ children }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ 
        duration: 0.4, 
        ease: [0.25, 0.46, 0.45, 0.94] 
      }}
      className="w-full h-full"
    >
      {children}
    </motion.div>
  );
};

/**
 * 动画路由组件
 */
const AnimatedRoutes = () => {
  const location = useLocation();
  const { isLoggedIn, registrationData } = useStore();
  
  // 检查是否完成入站流程（有昵称和未来愿景即视为已完成）
  const hasCompletedOnboarding = !!(registrationData.nickname && registrationData.future?.vision);

  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        {/* 登录页 */}
        <Route 
          path="/" 
          element={
            isLoggedIn ? (
              hasCompletedOnboarding ? (
                <Navigate to="/dashboard" replace />
              ) : (
                <Navigate to="/onboarding" replace />
              )
            ) : (
              <PageTransition>
                <LoginPage />
              </PageTransition>
            )
          } 
        />
        
        {/* 入站流程页 - 已完成入站的用户直接跳转到首页 */}
        <Route 
          path="/onboarding" 
          element={
            !isLoggedIn ? (
              <Navigate to="/" replace />
            ) : hasCompletedOnboarding ? (
              <Navigate to="/dashboard" replace />
            ) : (
              <PageTransition>
                <OnboardingPage />
              </PageTransition>
            )
          } 
        />
        
        {/* 仪表盘页 */}
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute requireAuth requireOnboarding>
              <PageTransition>
                <DashboardPage />
              </PageTransition>
            </ProtectedRoute>
          } 
        />
        
        {/* 404 重定向 */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </AnimatePresence>
  );
};

/**
 * App 主组件
 */
function App() {
  // 生产环境使用 /course-of-life 作为基础路径
  const basename = import.meta.env.PROD ? '/course-of-life' : '';
  
  return (
    <BrowserRouter basename={basename}>
      {/* 动态背景 */}
      <Background />
      
      {/* 主容器 */}
      <main className="relative z-10 h-screen flex flex-col items-center justify-center p-4 md:p-8 overflow-hidden">
        <AnimatedRoutes />
      </main>
    </BrowserRouter>
  );
}

export default App;