import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, BackHandler } from 'react-native';
import { modules, Module, TestCase } from './data/testCases';
import { ModuleList } from './pages/ModuleList';
import { TestCaseList } from './pages/TestCaseList';
import { TestCase_F01_001 } from './pages/TestCase_F01_001';
import { TestCase_F01_002 } from './pages/TestCase_F01_002';
import { TestCase_F01_003 } from './pages/TestCase_F01_003';
import { TestCase_F01_004 } from './pages/TestCase_F01_004';
import { TestCase_F02_001 } from './pages/TestCase_F02_001';
import { TestCase_F02_002 } from './pages/TestCase_F02_002';
import { TestCase_F02_003 } from './pages/TestCase_F02_003';
import { TestCase_F02_004 } from './pages/TestCase_F02_004';
import { TestCase_F03_001 } from './pages/TestCase_F03_001';
import { TestCase_F03_002 } from './pages/TestCase_F03_002';
import { TestCase_F03_003 } from './pages/TestCase_F03_003';
import { TestCase_F04_001 } from './pages/TestCase_F04_001';
import { TestCase_F04_002 } from './pages/TestCase_F04_002';
import { TestCase_F05_001 } from './pages/TestCase_F05_001';
import { TestCase_F05_002 } from './pages/TestCase_F05_002';
import { TestCase_F06_001 } from './pages/TestCase_F06_001';
import { TestCase_F06_002 } from './pages/TestCase_F06_002';
import { TestCase_F06_003 } from './pages/TestCase_F06_003';
import { TestCase_F07_001 } from './pages/TestCase_F07_001';
import { TestCase_F07_002 } from './pages/TestCase_F07_002';
import { TestCase_F08_001 } from './pages/TestCase_F08_001';
import { TestCase_F08_002 } from './pages/TestCase_F08_002';
import { TestCase_F08_003 } from './pages/TestCase_F08_003';
import { TestCase_F09_001 } from './pages/TestCase_F09_001';
import { TestCase_F09_002 } from './pages/TestCase_F09_002';
import { TestCase_F09_003 } from './pages/TestCase_F09_003';

// 用例 ID 到组件的映射（使用 Record 类型允许字符串索引）
const DetailPages: Record<string, React.ComponentType<{ onBack: () => void }>> = {
  'F01-001': TestCase_F01_001,
  'F01-002': TestCase_F01_002,
  'F01-003': TestCase_F01_003,
  'F01-004': TestCase_F01_004,
  'F02-001': TestCase_F02_001,
  'F02-002': TestCase_F02_002,
  'F02-003': TestCase_F02_003,
  'F02-004': TestCase_F02_004,
  'F03-001': TestCase_F03_001,
  'F03-002': TestCase_F03_002,
  'F03-003': TestCase_F03_003,
  'F04-001': TestCase_F04_001,
  'F04-002': TestCase_F04_002,
  'F05-001': TestCase_F05_001,
  'F05-002': TestCase_F05_002,
  'F06-001': TestCase_F06_001,
  'F06-002': TestCase_F06_002,
  'F06-003': TestCase_F06_003,
  'F07-001': TestCase_F07_001,
  'F07-002': TestCase_F07_002,
  'F08-001': TestCase_F08_001,
  'F08-002': TestCase_F08_002,
  'F08-003': TestCase_F08_003,
  'F09-001': TestCase_F09_001,
  'F09-002': TestCase_F09_002,
  'F09-003': TestCase_F09_003,
};

export default function App() {
  const [selectedModule, setSelectedModule] = useState<Module | null>(null);
  const [selectedTestCase, setSelectedTestCase] = useState<TestCase | null>(null);

  // 监听返回事件（支持鸿蒙侧滑返回和物理返回键）
  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (selectedTestCase) {
        setSelectedTestCase(null);
        return true;
      }
      if (selectedModule) {
        setSelectedModule(null);
        return true;
      }
      return false;
    });
    return () => backHandler.remove();
  }, [selectedModule, selectedTestCase]);

  // 渲染详情页
  if (selectedTestCase && selectedModule) {
    const DetailComponent = DetailPages[selectedTestCase.id];
    if (DetailComponent) {
      return (
        <SafeAreaView style={styles.container}>
          <DetailComponent onBack={() => setSelectedTestCase(null)} />
        </SafeAreaView>
      );
    }
  }

  // 渲染列表页
  if (selectedModule) {
    return (
      <SafeAreaView style={styles.container}>
        <TestCaseList
          moduleName={selectedModule.name}
          testCases={selectedModule.testCases}
          onSelectTestCase={setSelectedTestCase}
          onBack={() => setSelectedModule(null)}
        />
      </SafeAreaView>
    );
  }

  // 渲染模块页
  return (
    <SafeAreaView style={styles.container}>
      <ModuleList modules={modules} onSelectModule={setSelectedModule} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
});