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

// 选项放常量：简历「求职意向」的积极/不积极判定读的是同一份，不能各写一份
const OPTIONS = JOB_STATUS_OPTIONS;

export function P9JobStatus() {
  const { data, setData, navigate, back } = useOnboarding();

  return (
    <ScreenShell title="求职状态" showBack onBack={back}>
      <View style={styles.iconWrap}>
        <Ionicons name="person" size={34} color={colors.primary} />
      </View>

      <View style={styles.list}>
        {OPTIONS.map((o) => (
          <RadioRow
            key={o}
            label={o}
            selected={data.jobStatus === o}
            onPress={() => setData({ jobStatus: o })}
          />
        ))}
      </View>

      <Text style={styles.note}>求职状态会影响到被推荐的频率及 Boss 的决策</Text>

      <View style={styles.agree}>
        <AgreementCheckbox
          checked={data.disabledJobseeker}
          onToggle={() => setData({ disabledJobseeker: !data.disabledJobseeker })}
          text={<Text style={styles.agreeText}>残障人士求职（享受专项推荐与保护）</Text>}
        />
      </View>

      <View style={styles.footer}>
        <PrimaryButton label="下一步" active={data.jobStatus !== null} onPress={() => navigate('P10')} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  iconWrap: {
    width: 64,
    height: 64,
    borderRadius: 18,
    backgroundColor: colors.primaryLight,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    marginBottom: 18,
  },
  list: { gap: 8 },
  note: { fontSize: 12, color: colors.textHint, marginTop: 14, textAlign: 'center' },
  agree: { marginTop: 18 },
  agreeText: { fontSize: 13, color: colors.textSecondary },
  footer: { marginTop: 28 },
});