import { Ionicons } from '@expo/vector-icons';
import { StyleSheet, Text, 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 { PrimaryButton } from '../ui/PrimaryButton';

const HOT = ['Java', '项目经理', '运维', '测试', '前端', '数据分析', '电子', '通信'];

export function P4Intent() {
  const { data, setData, navigate, back } = useOnboarding();
  const isStudent = data.isStudent;
  const city = data.city;
  const positions = data.expectedPositions;

  const togglePos = (p: string) =>
    setData({
      expectedPositions: positions.includes(p) ? positions.filter((x) => x !== p) : [...positions, p],
    });

  // 工作地点是本页采集项之一（点标签进 P5 选），没选城市就不放行 ——
  // 岗位推荐的偏好里城市是加分项，空城市会让推荐失去一半依据
  const canNext = isStudent !== null && positions.length > 0 && city !== '';

  return (
    <ScreenShell title="求职意向" showBack onBack={back}>
      <Text style={styles.section}>你是学生吗</Text>
      <TagGroup>
        <Tag label="是" selected={isStudent === true} onPress={() => setData({ isStudent: true })} />
        <Tag label="不是" selected={isStudent === false} onPress={() => setData({ isStudent: false })} />
      </TagGroup>

      <Text style={styles.section}>工作地点</Text>
      <View style={styles.cityRow}>
        <Ionicons name="location" size={18} color={colors.primary} />
        <Tag
          label={city || '请选择'}
          selected={city !== ''}
          onPress={() => navigate('P5')}
        />
        <Text style={styles.cityHint}>点击切换城市</Text>
      </View>

      <Text style={styles.section}>猜你想找</Text>
      <TagGroup>
        {HOT.map((p) => (
          <Tag key={p} label={p} selected={positions.includes(p)} onPress={() => togglePos(p)} />
        ))}
      </TagGroup>

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

const styles = StyleSheet.create({
  section: { fontSize: 16, fontWeight: '700', color: colors.textPrimary, marginTop: 22, marginBottom: 12 },
  cityRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  cityHint: { fontSize: 12, color: colors.textHint },
  footer: { marginTop: 32 },
});