import React, { useEffect, useState } from 'react';
import { TestCase_F_01_01 } from './pages/TestCase_F_01_01';
import { TestCase_F_01_02 } from './pages/TestCase_F_01_02';
import { TestCase_F_01_03 } from './pages/TestCase_F_01_03';
import { TestCase_F_02_01 } from './pages/TestCase_F_02_01';
import { TestCase_F_02_02 } from './pages/TestCase_F_02_02';
import { TestCase_F_02_03 } from './pages/TestCase_F_02_03';
import { TestCase_F_03_01 } from './pages/TestCase_F_03_01';
import { TestCase_F_03_02 } from './pages/TestCase_F_03_02';
import { TestCase_F_03_03 } from './pages/TestCase_F_03_03';
import { TestCase_F_03_04 } from './pages/TestCase_F_03_04';
import { TestCase_F_03_05 } from './pages/TestCase_F_03_05';
import { TestCase_F_04_01 } from './pages/TestCase_F_04_01';
import { TestCase_F_04_02 } from './pages/TestCase_F_04_02';
import { TestCase_F_04_03 } from './pages/TestCase_F_04_03';
import { TestCase_F_04_04 } from './pages/TestCase_F_04_04';
import { TestCase_F_05_01 } from './pages/TestCase_F_05_01';
import { TestCase_F_05_02 } from './pages/TestCase_F_05_02';
import { TestCase_F_05_03 } from './pages/TestCase_F_05_03';
import { TestCase_F_05_04 } from './pages/TestCase_F_05_04';
import { TestCase_F_06_01 } from './pages/TestCase_F_06_01';
import { TestCase_F_06_02 } from './pages/TestCase_F_06_02';
import { TestCase_F_07_01 } from './pages/TestCase_F_07_01';
import { TestCase_F_07_02 } from './pages/TestCase_F_07_02';
import { TestCase_F_08_01 } from './pages/TestCase_F_08_01';
import { TestCase_F_08_02 } from './pages/TestCase_F_08_02';
import { TestCase_F_08_03 } from './pages/TestCase_F_08_03';
import { TestCase_F_09_01 } from './pages/TestCase_F_09_01';
import { TestCase_F_09_02 } from './pages/TestCase_F_09_02';
import { TestCase_F_09_03 } from './pages/TestCase_F_09_03';
import { TestCase_F_10_01 } from './pages/TestCase_F_10_01';
import { TestCase_F_10_02 } from './pages/TestCase_F_10_02';
import { TestCase_F_10_03 } from './pages/TestCase_F_10_03';
import { TestCase_F_10_04 } from './pages/TestCase_F_10_04';
import { TestCase_F_11_01 } from './pages/TestCase_F_11_01';
import { TestCase_F_11_02 } from './pages/TestCase_F_11_02';
import { TestCase_F_11_03 } from './pages/TestCase_F_11_03';
import { TestCase_F_11_04 } from './pages/TestCase_F_11_04';
import { TestCase_F_12_01 } from './pages/TestCase_F_12_01';
import { TestCase_F_12_02 } from './pages/TestCase_F_12_02';
import { TestCase_F_12_03 } from './pages/TestCase_F_12_03';
import { TestCase_F_12_04 } from './pages/TestCase_F_12_04';
import { TestCase_F_13_01 } from './pages/TestCase_F_13_01';
import { TestCase_F_13_02 } from './pages/TestCase_F_13_02';
import { TestCase_F_13_03 } from './pages/TestCase_F_13_03';
import { TestCase_F_13_04 } from './pages/TestCase_F_13_04';
import { TestCase_F_13_05 } from './pages/TestCase_F_13_05';
import { TestCase_F_14_01 } from './pages/TestCase_F_14_01';
import { TestCase_F_14_02 } from './pages/TestCase_F_14_02';
import { TestCase_F_14_03 } from './pages/TestCase_F_14_03';
import { TestCase_F_15_01 } from './pages/TestCase_F_15_01';
import { TestCase_F_15_02 } from './pages/TestCase_F_15_02';
import { TestCase_F_15_03 } from './pages/TestCase_F_15_03';
import { BackHandler, SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { allCases, modules } from './data/testCases';
import type { TestCase } from './data/testCases';
import {CaseMetaPanel, SelectedCaseContext} from './components/CaseMetaPanel';
import {ManualEvidenceCase} from './components/ManualEvidenceCase';

// 用例 ID 到组件的映射（源：.ohos-adaptation/04-test-cases.json；入口页按模块分组，编号按钮直达用例页）
const DetailPages: Record<string, React.ComponentType<{ onBack: () => void }>> = {
  'F-01-01': TestCase_F_01_01,
  'F-01-02': TestCase_F_01_02,
  'F-01-03': TestCase_F_01_03,
  'F-02-01': TestCase_F_02_01,
  'F-02-02': TestCase_F_02_02,
  'F-02-03': TestCase_F_02_03,
  'F-03-01': TestCase_F_03_01,
  'F-03-02': TestCase_F_03_02,
  'F-03-03': TestCase_F_03_03,
  'F-03-04': TestCase_F_03_04,
  'F-03-05': TestCase_F_03_05,
  'F-04-01': TestCase_F_04_01,
  'F-04-02': TestCase_F_04_02,
  'F-04-03': TestCase_F_04_03,
  'F-04-04': TestCase_F_04_04,
  'F-05-01': TestCase_F_05_01,
  'F-05-02': TestCase_F_05_02,
  'F-05-03': TestCase_F_05_03,
  'F-05-04': TestCase_F_05_04,
  'F-06-01': TestCase_F_06_01,
  'F-06-02': TestCase_F_06_02,
  'F-07-01': TestCase_F_07_01,
  'F-07-02': TestCase_F_07_02,
  'F-08-01': TestCase_F_08_01,
  'F-08-02': TestCase_F_08_02,
  'F-08-03': TestCase_F_08_03,
  'F-09-01': TestCase_F_09_01,
  'F-09-02': TestCase_F_09_02,
  'F-09-03': TestCase_F_09_03,
  'F-10-01': TestCase_F_10_01,
  'F-10-02': TestCase_F_10_02,
  'F-10-03': TestCase_F_10_03,
  'F-10-04': TestCase_F_10_04,
  'F-11-01': TestCase_F_11_01,
  'F-11-02': TestCase_F_11_02,
  'F-11-03': TestCase_F_11_03,
  'F-11-04': TestCase_F_11_04,
  'F-12-01': TestCase_F_12_01,
  'F-12-02': TestCase_F_12_02,
  'F-12-03': TestCase_F_12_03,
  'F-12-04': TestCase_F_12_04,
  'F-13-01': TestCase_F_13_01,
  'F-13-02': TestCase_F_13_02,
  'F-13-03': TestCase_F_13_03,
  'F-13-04': TestCase_F_13_04,
  'F-13-05': TestCase_F_13_05,
  'F-14-01': TestCase_F_14_01,
  'F-14-02': TestCase_F_14_02,
  'F-14-03': TestCase_F_14_03,
  'F-15-01': TestCase_F_15_01,
  'F-15-02': TestCase_F_15_02,
  'F-15-03': TestCase_F_15_03,
};

export default function App() {
  const [selected, setSelected] = useState<TestCase | null>(null);

  // 硬件返回：软键盘弹出时由系统先收起键盘（不到达此处）；键盘收起态按返回回入口页
  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (selected) {
        setSelected(null);
        return true;
      }
      return false;
    });
    return () => backHandler.remove();
  }, [selected]);

  if (selected) {
    const detailKey = selected.id;
    const DetailComponent = DetailPages[detailKey];
    if (DetailComponent) {
    return (
      <SafeAreaView style={styles.container}>
        <SelectedCaseContext.Provider value={selected}>
          <CaseMetaPanel item={selected} onBack={() => setSelected(null)} />
          <DetailComponent onBack={() => setSelected(null)} />
        </SelectedCaseContext.Provider>
        </SafeAreaView>
      );
    }
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.topSpacer} />
      <View style={styles.header}>
        <Text allowFontScaling={false} style={styles.appName}>react-native-avoid-softinput</Text>
        <Text allowFontScaling={false} style={styles.suiteName}>{allCases.length} 个黑盒用例 · 点击编号进入</Text>
      </View>
      <ScrollView
        testID="case_index"
        style={styles.caseIndex}
        contentContainerStyle={styles.indexContent}
        keyboardShouldPersistTaps="handled"
      >
        {modules.map((module) => (
          <View key={module.code} style={styles.moduleSection}>
            <View style={styles.moduleHeader}>
              <Text allowFontScaling={false} style={styles.moduleCode}>{module.code}</Text>
              <Text allowFontScaling={false} style={styles.moduleName} numberOfLines={1}>{module.name}</Text>
              <Text allowFontScaling={false} style={styles.moduleCount}>{module.testCases.length} 例</Text>
            </View>
            <Text allowFontScaling={false} style={styles.moduleDescription}>{module.description}</Text>
            <View style={styles.caseGrid}>
              {module.testCases.map((item) => (
                <TouchableOpacity
                  key={item.id}
                  testID={`case_${item.id}`}
                  style={styles.caseButton}
                  onPress={() => setSelected(item)}
                  activeOpacity={0.82}
                >
                  <Text allowFontScaling={false} numberOfLines={1} adjustsFontSizeToFit style={styles.caseButtonId}>{item.id}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f5f5' },
  topSpacer: { height: 20, backgroundColor: '#f5f5f5' },
  header: { paddingHorizontal: 14, paddingTop: 6, paddingBottom: 8 },
  appName: { fontSize: 18, fontWeight: '700', color: '#111', letterSpacing: 0 },
  suiteName: { fontSize: 12, color: '#666', marginTop: 3, letterSpacing: 0 },
  caseIndex: { flex: 1 },
  indexContent: { paddingBottom: 16 },
  moduleSection: {
    paddingHorizontal: 14,
    paddingTop: 14,
    paddingBottom: 8,
    borderTopWidth: 1,
    borderTopColor: '#e4e7eb',
  },
  moduleHeader: { flexDirection: 'row', alignItems: 'center' },
  moduleCode: {
    minWidth: 52,
    fontSize: 14,
    fontWeight: '700',
    color: '#1565C0',
    letterSpacing: 0,
  },
  moduleName: { flex: 1, fontSize: 14, fontWeight: '700', color: '#111', letterSpacing: 0 },
  moduleCount: { fontSize: 11, color: '#607D8B', letterSpacing: 0 },
  moduleDescription: { fontSize: 12, lineHeight: 18, color: '#66727D', marginTop: 3 },
  caseGrid: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 10, marginRight: -8 },
  caseButton: {
    width: '14.5%',
    minHeight: 48,
    marginRight: '2%',
    marginBottom: 8,
    paddingHorizontal: 1,
    paddingVertical: 10,
    backgroundColor: '#0A59F7',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#0A59F7',
    alignItems: 'center',
    justifyContent: 'center',
  },
  caseButtonId: { fontSize: 11, fontWeight: '700', color: '#FFFFFF', letterSpacing: 0 },
});