// 知习 ZhiXi — 22页高保真设计展示画廊
import IPhoneFrame from '../components/IPhoneFrame';
import SplashPage from './SplashPage';
import WelcomePage from './WelcomePage';
import LoginPage from './LoginPage';
import OnboardingPage from './OnboardingPage';
import GoalSetupPage from './GoalSetupPage';
import AIHomePage from './AIHomePage';
import LibraryHomePage from './LibraryHomePage';
import StudyHomePage from './StudyHomePage';
import AnalysisHomePage from './AnalysisHomePage';
import ProfilePage from './ProfilePage';
import AIChatPage from './AIChatPage';
import DailyThinkingPage from './DailyThinkingPage';
import RecallTestPage from './RecallTestPage';
import WeakPointsPage from './WeakPointsPage';
import AIFeedbackPage from './AIFeedbackPage';
import SaveActionSheet from './SaveActionSheet';
import CreateLibraryPage from './CreateLibraryPage';
import LibraryDetailPage from './LibraryDetailPage';
import AddKnowledgePage from './AddKnowledgePage';
import ImportPage from './ImportPage';
import KnowledgeDetailPage from './KnowledgeDetailPage';
import EditKnowledgePage from './EditKnowledgePage';

const pages = [
  { label: `启动页`, component: <SplashPage /> },
  { label: `欢迎页`, component: <WelcomePage /> },
  { label: `登录页`, component: <LoginPage /> },
  { label: `引导页`, component: <OnboardingPage /> },
  { label: `目标设置`, component: <GoalSetupPage /> },
  { label: `AI 首页`, component: <AIHomePage /> },
  { label: `知识库首页`, component: <LibraryHomePage /> },
  { label: `学习工作台`, component: <StudyHomePage /> },
  { label: `学习分析`, component: <AnalysisHomePage /> },
  { label: `我的`, component: <ProfilePage /> },
  { label: `AI 对话`, component: <AIChatPage /> },
  { label: `今日思考`, component: <DailyThinkingPage /> },
  { label: `回忆测试`, component: <RecallTestPage /> },
  { label: `薄弱点分析`, component: <WeakPointsPage /> },
  { label: `AI 反馈`, component: <AIFeedbackPage /> },
  { label: `保存操作弹窗`, component: <SaveActionSheet /> },
  { label: `创建知识库`, component: <CreateLibraryPage /> },
  { label: `知识库详情`, component: <LibraryDetailPage /> },
  { label: `添加知识点`, component: <AddKnowledgePage /> },
  { label: `导入资料`, component: <ImportPage /> },
  { label: `知识点详情`, component: <KnowledgeDetailPage /> },
  { label: `编辑知识点`, component: <EditKnowledgePage /> },
];

const Index = () => {
  return (
    <div
      data-cmp="Index"
      style={{
        minHeight: '100vh',
        background: '#07071A',
        width: '1440px',
        margin: '0 auto',
      }}
    >
      {/* Header */}
      <div
        style={{
          padding: '48px 0 40px',
          textAlign: 'center',
          borderBottom: '1px solid rgba(255,255,255,0.06)',
          marginBottom: '60px',
        }}
      >
        <div className="flex items-center justify-center gap-3 mb-4">
          <div
            style={{
              width: '48px', height: '48px', borderRadius: '15px',
              background: 'linear-gradient(135deg, #7C6EFA, #9B8BFF)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: '24px',
              boxShadow: '0 8px 24px rgba(124,110,250,0.4)',
            }}
          >
            🧠
          </div>
          <div style={{ textAlign: 'left' }}>
            <h1
              style={{
                fontSize: '32px', fontWeight: '900', letterSpacing: '-0.5px',
                background: 'linear-gradient(135deg, #F0F0FF 0%, #A78BFA 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                lineHeight: 1.2,
              }}
            >
              知习 ZhiXi
            </h1>
            <p style={{ fontSize: '14px', color: 'rgba(240,240,255,0.4)', marginTop: '2px' }}>
              AI-first 系统化学习 App · 22 页高保真设计
            </p>
          </div>
        </div>

        {/* Flow tags */}
        <div className="flex items-center justify-center gap-2 flex-wrap" style={{ padding: '0 40px' }}>
          {[`输入知识`, `→`, `主动输出`, `→`, `AI 分析`, `→`, `薄弱点`, `→`, `间隔复习`, `→`, `掌握`].map((tag, i) => (
            <span
              key={i}
              style={{
                padding: tag === '→' ? '0' : '4px 12px',
                background: tag === '→' ? 'transparent' : 'rgba(124,110,250,0.1)',
                border: tag === '→' ? 'none' : '1px solid rgba(124,110,250,0.2)',
                borderRadius: '20px',
                fontSize: '12px',
                color: tag === '→' ? 'rgba(240,240,255,0.2)' : '#A78BFA',
                fontWeight: '600',
              }}
            >
              {tag}
            </span>
          ))}
        </div>
      </div>

      {/* Pages grid */}
      <div
        style={{
          padding: '0 60px 80px',
          display: 'flex',
          flexWrap: 'wrap',
          gap: '48px 40px',
          justifyContent: 'flex-start',
        }}
      >
        {pages.map((page, index) => (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <IPhoneFrame label={page.label} index={index + 1}>
              {page.component}
            </IPhoneFrame>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div
        style={{
          textAlign: 'center',
          padding: '32px',
          borderTop: '1px solid rgba(255,255,255,0.05)',
          color: 'rgba(240,240,255,0.2)',
          fontSize: '12px',
        }}
      >
        知习 ZhiXi · 22 Pages · React + TypeScript + TailwindCSS
      </div>
    </div>
  );
};

export default Index;