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

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

  const canNext = data.resumeName.trim().length > 0;

  return (
    <ScreenShell time={meta.time} battery={meta.battery} title="创建在线简历" showBack onBack={back}>
      <View style={styles.iconWrap}>
        <Ionicons name="document-text" size={34} color={colors.primary} />
      </View>

      <Text style={styles.label}>姓名</Text>
      <TextInput
        style={styles.input}
        value={data.resumeName}
        onChangeText={(t) => setData({ resumeName: t })}
        placeholder="请输入姓名"
        placeholderTextColor={colors.textHint}
      />

      <Text style={styles.label}>性别</Text>
      <TagGroup>
        <Tag label="女" selected={data.gender === '女'} onPress={() => setData({ gender: '女' })} />
        <Tag label="男" selected={data.gender === '男'} onPress={() => setData({ gender: '男' })} />
      </TagGroup>

      <Text style={styles.label}>出生年月</Text>
      <YearMonthWheel
        year={data.birthYear}
        month={data.birthMonth}
        onYearChange={(v) => setData({ birthYear: v })}
        onMonthChange={(v) => setData({ birthMonth: v })}
      />

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

const styles = StyleSheet.create({
  iconWrap: {
    width: 64,
    height: 64,
    borderRadius: 18,
    backgroundColor: colors.primaryLight,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    marginBottom: 18,
  },
  label: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, marginTop: 18, marginBottom: 10 },
  input: {
    height: 50,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.white,
    paddingHorizontal: 14,
    fontSize: 16,
    color: colors.textPrimary,
  },
  footer: { marginTop: 26 },
});