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

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

  // 「最高」档位随「最低」收窄（规则在 API 层），改最低时同步校正最高，
  // 避免存出「最低 30K / 最高 15K」这种自相矛盾的期望薪资
  const maxOptions = salaryMaxOptions(data.expectedSalaryMin);
  const canNext = data.expectedSalaryMin !== '' && data.expectedSalaryMax !== '';

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

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

        <View style={styles.col}>
          <Text style={styles.colTitle}>最高</Text>
          {maxOptions.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={canNext} 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 },
});