/**
 * 星级打分 / 星级展示组件。
 *
 * 岗位评价（app/jobs/[id].tsx）与候选人反馈（app/application-detail.tsx）都要用，
 * 所以提到 components 层只留一份 —— 两处各写一份的话，改星色或改最大星数时必然漏改一处。
 *
 * 只读态用「实心 / 描边」区分而不只靠颜色：色觉障碍用户也要能读出分数（WCAG 1.4.1）。
 */
import { Ionicons } from '@expo/vector-icons';
import { Pressable, StyleSheet, View } from 'react-native';
import { colors } from '../src/theme';

/**
 * 星色。候选项详情、岗位评价页此前都用 compareOrange 画星，
 * 这里沿用同一语义色，不新造 token。
 */
export const STAR_COLOR = colors.compareOrange;

export function RatingStars({
  value,
  max = 5,
  size = 14,
  onChange,
}: {
  /** 当前分值，0 表示未评分 */
  value: number;
  /** 满星数，默认 5 */
  max?: number;
  size?: number;
  /** 传了就是可点打分（编辑器内用），不传即只读展示 */
  onChange?: (next: number) => void;
}) {
  const readonly = !onChange;
  return (
    <View style={styles.row}>
      {Array.from({ length: max }, (_, i) => {
        const starValue = i + 1;
        const filled = starValue <= value;
        const star = (
          <Ionicons
            name={filled ? 'star' : 'star-outline'}
            size={size}
            color={filled ? STAR_COLOR : colors.borderStrong}
          />
        );
        if (readonly) {
          return (
            <View key={starValue} style={styles.cell}>
              {star}
            </View>
          );
        }
        return (
          <Pressable
            key={starValue}
            style={styles.cell}
            hitSlop={6}
            onPress={() => onChange(starValue)}
            accessibilityRole="button"
            accessibilityLabel={`打 ${starValue} 分`}
          >
            {star}
          </Pressable>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  cell: {
    paddingHorizontal: 1,
  },
});