import { Ionicons } from '@expo/vector-icons';
import { StyleSheet, Text, View } from 'react-native';
import { colors, spacing } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { RadioRow } from '../ui/RadioRow';
import { Tag, TagGroup } from '../ui/Tag';
import { PrimaryButton } from '../ui/PrimaryButton';

const LEVELS = ['初中及以下', '中专中技', '高中', '大专', '本科', '硕士', '博士'];

export function P18Education() {
  const { data, setData, navigate, back } = useOnboarding();
  // 「类型」同为本页采集项，选了学历却没选全日制/非全日制同样算半截记录
  const canNext = data.education !== null && data.eduType !== null;

  return (
    <ScreenShell title="最高学历" showBack onBack={back}>
      <View style={styles.iconWrap}>
        <Ionicons name="document" size={34} color={colors.primary} />
      </View>

      <View style={styles.list}>
        {LEVELS.map((l) => (
          <RadioRow key={l} label={l} selected={data.education === l} onPress={() => setData({ education: l })} />
        ))}
      </View>

      <Text style={styles.subTitle}>类型</Text>
      <TagGroup>
        <Tag label="全日制" selected={data.eduType === '全日制'} onPress={() => setData({ eduType: '全日制' })} />
        <Tag label="非全日制" selected={data.eduType === '非全日制'} onPress={() => setData({ eduType: '非全日制' })} />
      </TagGroup>

      <View style={styles.footer}>
        <PrimaryButton label="下一步" active={canNext} onPress={() => navigate('P20')} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  iconWrap: {
    width: 64,
    height: 64,
    borderRadius: 18,
    backgroundColor: colors.primaryLight,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    marginBottom: spacing.block,
  },
  list: { gap: 8 },
  subTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, marginTop: spacing.section, marginBottom: spacing.block },
  footer: { marginTop: 28 },
});