import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { Illustration } from '../ui/Illustration';

export function P3Identity() {
  const { setData, navigate, back, reset, meta } = useOnboarding();

  const chooseCandidate = () => {
    setData({ identity: 'candidate' });
    navigate('P4');
  };
  const chooseRecruiter = () => {
    setData({ identity: 'recruiter' });
    navigate('B3');
  };

  return (
    <ScreenShell time={meta.time} battery={meta.battery} showBack onBack={back}>
      <Text style={styles.heading}>选择你的身份</Text>

      <Pressable style={styles.card} onPress={chooseCandidate}>
        <View style={styles.cardTop}>
          <Illustration name="illustCandidate" size={120} radius={16} />
        </View>
        <View style={styles.cardBtn}>
          <Text style={styles.cardBtnText}>我要找工作</Text>
        </View>
      </Pressable>

      <Text style={styles.or}>或者</Text>

      <Pressable style={styles.card} onPress={chooseRecruiter}>
        <View style={styles.cardTop}>
          <Illustration name="illustRecruiter" size={120} radius={16} />
        </View>
        <View style={[styles.cardBtn, styles.cardBtnOutline]}>
          <Text style={[styles.cardBtnText, { color: colors.primary }]}>我要招人</Text>
        </View>
      </Pressable>

      <Pressable style={styles.logout} onPress={reset}>
        <Text style={styles.logoutText}>退出登录</Text>
      </Pressable>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  heading: { fontSize: 22, fontWeight: '800', color: colors.textPrimary, textAlign: 'center', marginVertical: 16 },
  card: { backgroundColor: colors.white, borderRadius: 18, padding: 18, alignItems: 'center', borderWidth: 1, borderColor: colors.border },
  cardTop: { marginBottom: 16 },
  cardBtn: {
    width: '100%',
    height: 48,
    borderRadius: 24,
    backgroundColor: colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardBtnOutline: { backgroundColor: colors.white, borderWidth: 1, borderColor: colors.primary },
  cardBtnText: { fontSize: 16, fontWeight: '700', color: colors.textInverse },
  or: { textAlign: 'center', color: colors.textHint, marginVertical: 14, fontSize: 13 },
  logout: { marginTop: 22, alignItems: 'center' },
  logoutText: { fontSize: 13, color: colors.textHint },
});