import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Header, Sidebar } from '../components/layout';
import TimelineView from '../views/TimelineView';
import ScriptView from '../views/ScriptView';
import PathView from '../views/PathView';
import ProfileModal from '../views/ProfileModal';

/**
 * DashboardPage 组件
 * 仪表盘主页面，包含侧边栏导航和内容区
 */
const DashboardPage = () => {
  // 当前激活的视图
  const [activeView, setActiveView] = useState('timeline');
  // 用户资料模态框状态
  const [isProfileOpen, setIsProfileOpen] = useState(false);

  /**
   * 处理视图切换
   */
  const handleViewChange = (view) => {
    setActiveView(view);
  };

  /**
   * 渲染当前视图内容
   */
  const renderView = () => {
    switch (activeView) {
      case 'timeline':
        return <TimelineView />;
      case 'script':
        return <ScriptView onOpenProfile={() => setIsProfileOpen(true)} />;
      case 'path':
        return <PathView onGoToScript={() => setActiveView('script')} />;
      default:
        return <TimelineView />;
    }
  };

  return (
    <div className="flex flex-col h-screen max-h-screen overflow-hidden">
      {/* 头部 - 固定高度 */}
      <Header
        showNav
        onProfileClick={() => setIsProfileOpen(true)}
      />

      {/* 主内容区 - 占据剩余高度 */}
      <div className="glass-card flex-1 overflow-hidden">
        <div className="grid grid-cols-1 md:grid-cols-12 h-full">
          {/* 侧边栏 - 固定不滚动 */}
          <Sidebar
            activeView={activeView}
            onViewChange={handleViewChange}
          />

          {/* 内容区 - 独立滚动 */}
          <section className="md:col-span-9 p-8 overflow-y-auto custom-scrollbar relative">
            <AnimatePresence mode="wait">
              <motion.div
                key={activeView}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.3, ease: 'easeOut' }}
              >
                {renderView()}
              </motion.div>
            </AnimatePresence>
          </section>
        </div>
      </div>

      {/* 用户资料模态框 */}
      <ProfileModal
        isOpen={isProfileOpen}
        onClose={() => setIsProfileOpen(false)}
      />
    </div>
  );
};

export default DashboardPage;
