import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Alert,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useAppColors, type AppColors } from '../../theme';
import * as hrefs from '../../navigation/hrefs';

// 身份类型选项
const IDENTITY_OPTIONS = [
  {
    key: 'student',
    title: '在校学生',
    description: '需要提交学生证或校园卡照片',
    icon: 'school-outline',
  },
  {
    key: 'teacher',
    title: '教职工',
    description: '需要提交工作证或教师资格证',
    icon: 'account-tie',
  },
  {
    key: 'staff',
    title: '工作人员',
    description: '需要提交工作证或在职证明',
    icon: 'badge-account-outline',
  },
  {
    key: 'alumni',
    title: '校友',
    description: '需要提交毕业证或校友卡',
    icon: 'account-school-outline',
  },
];

export const VerificationGuideScreen: React.FC = () => {
  const colors = useAppColors();
  const styles = createStyles(colors);
  const router = useRouter();
  const [selectedIdentity, setSelectedIdentity] = useState<string | null>(null);

  const handleSkip = () => {
    Alert.alert(
      '跳过认证',
      '跳过后您将以普通用户身份使用，部分功能可能受限。您可以在设置中随时完成认证。',
      [
        { text: '继续认证', style: 'cancel' },
        {
          text: '跳过',
          style: 'default',
          onPress: () => {
            router.replace(hrefs.hrefHome());
          },
        },
      ]
    );
  };

  const handleContinue = () => {
    if (!selectedIdentity) {
      Alert.alert('提示', '请选择您的身份类型');
      return;
    }
    // 导航到认证表单页面
    router.push(hrefs.hrefVerificationForm(selectedIdentity));
  };

  const renderIdentityCard = (option: typeof IDENTITY_OPTIONS[0]) => {
    const isSelected = selectedIdentity === option.key;
    return (
      <TouchableOpacity
        key={option.key}
        style={[styles.identityCard, isSelected && styles.identityCardSelected]}
        onPress={() => setSelectedIdentity(option.key)}
        activeOpacity={0.8}
      >
        <View style={styles.identityIconContainer}>
          <MaterialCommunityIcons
            name={option.icon as any}
            size={32}
            color={isSelected ? colors.primary.main : colors.text?.secondary || '#666'}
          />
        </View>
        <View style={styles.identityContent}>
          <Text style={[styles.identityTitle, isSelected && styles.identityTitleSelected]}>
            {option.title}
          </Text>
          <Text style={styles.identityDescription}>{option.description}</Text>
        </View>
        <View style={styles.checkContainer}>
          {isSelected && (
            <MaterialCommunityIcons
              name="check-circle"
              size={24}
              color={colors.primary.main}
            />
          )}
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* 头部图标 */}
        <View style={styles.header}>
          <View style={styles.iconCircle}>
            <MaterialCommunityIcons
              name="shield-check-outline"
              size={48}
              color={colors.primary.main}
            />
          </View>
          <Text style={styles.title}>身份认证</Text>
          <Text style={styles.subtitle}>
            完成身份认证，解锁更多专属功能
          </Text>
        </View>

        {/* 认证优势 */}
        <View style={styles.benefitsContainer}>
          <View style={styles.benefitItem}>
            <MaterialCommunityIcons
              name="check-decagram"
              size={20}
              color={colors.primary.main}
            />
            <Text style={styles.benefitText}>获得认证标识</Text>
          </View>
          <View style={styles.benefitItem}>
            <MaterialCommunityIcons
              name="lock-open-outline"
              size={20}
              color={colors.primary.main}
            />
            <Text style={styles.benefitText}>解锁专属频道</Text>
          </View>
          <View style={styles.benefitItem}>
            <MaterialCommunityIcons
              name="account-group-outline"
              size={20}
              color={colors.primary.main}
            />
            <Text style={styles.benefitText}>加入社群圈子</Text>
          </View>
        </View>

        {/* 身份选择 */}
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>选择您的身份</Text>
          {IDENTITY_OPTIONS.map(renderIdentityCard)}
        </View>

        {/* 按钮区域 */}
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={[styles.continueButton, !selectedIdentity && styles.continueButtonDisabled]}
            onPress={handleContinue}
            activeOpacity={0.9}
          >
            <Text style={styles.continueButtonText}>继续认证</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.skipButton} onPress={handleSkip} activeOpacity={0.8}>
            <Text style={styles.skipButtonText}>暂不认证</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

function createStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background.paper,
    },
    scrollContent: {
      flexGrow: 1,
      paddingHorizontal: 24,
      paddingTop: 40,
      paddingBottom: 40,
    },
    header: {
      alignItems: 'center',
      marginBottom: 32,
    },
    iconCircle: {
      width: 100,
      height: 100,
      borderRadius: 50,
      backgroundColor: colors.primary.main + '15',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 20,
    },
    title: {
      fontSize: 28,
      fontWeight: '700',
      color: colors.text?.primary || '#333',
      marginBottom: 8,
    },
    subtitle: {
      fontSize: 15,
      color: colors.text?.secondary || '#666',
      textAlign: 'center',
    },
    benefitsContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
      gap: 16,
      marginBottom: 40,
    },
    benefitItem: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 6,
    },
    benefitText: {
      fontSize: 13,
      color: colors.text?.secondary || '#666',
    },
    sectionContainer: {
      marginBottom: 32,
    },
    sectionTitle: {
      fontSize: 16,
      fontWeight: '600',
      color: colors.text?.primary || '#333',
      marginBottom: 16,
    },
    identityCard: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: 16,
      backgroundColor: colors.background.default,
      borderRadius: 14,
      marginBottom: 12,
      borderWidth: 2,
      borderColor: 'transparent',
    },
    identityCardSelected: {
      backgroundColor: colors.primary.main + '15',
      borderColor: colors.primary.main,
    },
    identityIconContainer: {
      width: 48,
      height: 48,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 16,
    },
    identityContent: {
      flex: 1,
    },
    identityTitle: {
      fontSize: 16,
      fontWeight: '600',
      color: colors.text?.primary || '#333',
      marginBottom: 4,
    },
    identityTitleSelected: {
      color: colors.primary.main,
    },
    identityDescription: {
      fontSize: 13,
      color: colors.text?.secondary || '#666',
    },
    checkContainer: {
      width: 24,
      height: 24,
      justifyContent: 'center',
      alignItems: 'center',
    },
    buttonContainer: {
      gap: 12,
    },
    continueButton: {
      height: 56,
      borderRadius: 14,
      backgroundColor: colors.primary.main,
      justifyContent: 'center',
      alignItems: 'center',
    },
    continueButtonDisabled: {
      backgroundColor: colors.background.disabled,
    },
    continueButtonText: {
      fontSize: 17,
      fontWeight: '600',
      color: colors.text.inverse,
    },
    skipButton: {
      height: 56,
      borderRadius: 14,
      backgroundColor: 'transparent',
      justifyContent: 'center',
      alignItems: 'center',
      borderWidth: 1,
      borderColor: colors.divider || '#E0E0E0',
    },
    skipButtonText: {
      fontSize: 17,
      fontWeight: '500',
      color: colors.text?.secondary || '#666',
    },
  });
}

export default VerificationGuideScreen;
