import { StyleSheet, ScrollView } from 'react-native';
import { Stack, useRouter } from 'expo-router';
import { ThemedText, ThemedView } from '@/components';

/**
 * 测试页面
 * 
 * 这是一个独立的业务页面示例，不包含底部 tabs
 * 
 * 特点：
 * - 带有返回按钮的 header
 * - 不包含底部导航栏
 * - 可以作为业务页面的模板
 */
export default function TestPage() {
  const router = useRouter();

  return (
    <>
      {/* 配置页面 header */}
      <Stack.Screen
        options={{
          title: '测试页面',
          headerShown: true,
          headerBackTitle: '返回',
        }}
      />

      <ThemedView style={styles.container}>
        <ScrollView style={styles.scrollView}>
          <ThemedView style={styles.content}>
            <ThemedText type="title" style={styles.title}>
              测试页面
            </ThemedText>

            <ThemedText style={styles.description}>
              这是一个独立的业务页面示例，展示了如何创建不包含底部 tabs 的页面。
            </ThemedText>

            <ThemedView style={styles.section}>
              <ThemedText type="subtitle">页面特点</ThemedText>
              <ThemedText style={styles.item}>✅ 带有返回按钮的 header</ThemedText>
              <ThemedText style={styles.item}>✅ 不包含底部导航栏</ThemedText>
              <ThemedText style={styles.item}>✅ 支持主题切换</ThemedText>
              <ThemedText style={styles.item}>✅ 可以作为业务页面模板</ThemedText>
            </ThemedView>

            <ThemedView style={styles.section}>
              <ThemedText type="subtitle">使用场景</ThemedText>
              <ThemedText style={styles.item}>• 详情页面</ThemedText>
              <ThemedText style={styles.item}>• 表单页面</ThemedText>
              <ThemedText style={styles.item}>• 设置页面</ThemedText>
              <ThemedText style={styles.item}>• 其他业务页面</ThemedText>
            </ThemedView>

            <ThemedView style={styles.section}>
              <ThemedText type="subtitle">路由说明</ThemedText>
              <ThemedText style={styles.item}>
                文件路径: app/test-page.tsx
              </ThemedText>
              <ThemedText style={styles.item}>
                访问路径: /test-page
              </ThemedText>
              <ThemedText style={styles.item}>
                跳转方式: router.push('/test-page')
              </ThemedText>
            </ThemedView>

            <ThemedView style={styles.infoBox}>
              <ThemedText type="defaultSemiBold">💡 提示</ThemedText>
              <ThemedText style={styles.infoText}>
                对于复杂的业务页面，建议在 screens/ 目录下创建独立的组件，
                然后在 app/ 目录下的路由文件中引用。
              </ThemedText>
            </ThemedView>
          </ThemedView>
        </ScrollView>
      </ThemedView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  content: {
    padding: 20,
  },
  title: {
    marginBottom: 16,
  },
  description: {
    marginBottom: 24,
    lineHeight: 24,
  },
  section: {
    marginBottom: 24,
  },
  item: {
    marginTop: 8,
    marginLeft: 8,
    lineHeight: 24,
  },
  infoBox: {
    padding: 16,
    borderRadius: 8,
    backgroundColor: 'rgba(0, 122, 255, 0.1)',
    marginTop: 8,
  },
  infoText: {
    marginTop: 8,
    lineHeight: 22,
  },
});