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

const MIN = ['9K', '10K', '11K'];
const MAX = ['11K', '12K', '13K'];

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

  return (
    <ScreenShell time={meta.time} battery={meta.battery} title="期望月薪" showBack onBack={back}>
      <Text style={styles.tip}>1K 代表 1000 元</Text>

      <View style={styles.cols}>
        <View style={styles.col}>
          <Text style={styles.colTitle}>最低</Text>
          {MIN.map((v) => (
            <Pressable
              key={v}
              style={[styles.opt, data.expectedSalaryMin === v && styles.optActive]}
              onPress={() => setData({ expectedSalaryMin: v })}
            >
              <Text style={[styles.optText, data.expectedSalaryMin === v && styles.optTextActive]}>{v}</Text>
            </Pressable>
          ))}
        </View>

        <View style={styles.col}>
          <Text style={styles.colTitle}>最高</Text>
          {MAX.map((v) => (
            <Pressable
              key={v}
              style={[styles.opt, data.expectedSalaryMax === v && styles.optActive]}
              onPress={() => setData({ expectedSalaryMax: v })}
            >
              <Text style={[styles.optText, data.expectedSalaryMax === v && styles.optTextActive]}>{v}</Text>
            </Pressable>
          ))}
        </View>
      </View>

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

const styles = StyleSheet.create({
  tip: { fontSize: 13, color: colors.textHint, marginBottom: 20 },
  cols: { flexDirection: 'row', gap: 16 },
  col: { flex: 1, gap: 12 },
  colTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, textAlign: 'center', marginBottom: 4 },
  opt: {
    height: 50,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.white,
    alignItems: 'center',
    justifyContent: 'center',
  },
  optActive: { borderColor: colors.primary, backgroundColor: colors.primaryLight },
  optText: { fontSize: 16, color: colors.textSecondary },
  optTextActive: { color: colors.primaryText, fontWeight: '700' },
  footer: { marginTop: 32 },
});