import { Ionicons } from '@expo/vector-icons';
import { StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useRegisterFinish } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { Illustration } from '../ui/Illustration';
import { PrimaryButton } from '../ui/PrimaryButton';

export function P22Done() {
  const finish = useRegisterFinish();

  return (
    <ScreenShell>
      <View style={styles.center}>
        <View style={styles.glow}>
          <Ionicons name="checkmark-circle" size={72} color={colors.success} />
        </View>
        <Text style={styles.title}>资料完善，开启求职之旅</Text>
        <Illustration name="illustCelebrate" size={160} radius={20} />
      </View>

      <View style={styles.footer}>
        {/* 企业端走 P3 → B3 落地，不会经过本页，故身份固定为求职者 */}
        <PrimaryButton label="进入 APP" active onPress={() => void finish('candidate')} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 22, paddingBottom: 40 },
  glow: {
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: colors.successLight,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 20, fontWeight: '800', color: colors.textPrimary },
  footer: { marginTop: 20 },
});