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

export function P22Done() {
  const { data, meta } = useOnboarding();
  const finish = useRegisterFinish();
  const targetRole: AppRole = data.identity === 'recruiter' ? 'enterprise' : 'candidate';

  return (
    <ScreenShell time={meta.time} battery={meta.battery}>
      <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}>
        <PrimaryButton label="进入 APP" active onPress={() => finish(targetRole)} />
      </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 },
});