import React from 'react';
import './Rate.css';

/* 评分（移动端）— 规格 §36
   点第 N 颗星取 N 分；allowHalf=true 时点某颗星的左半取 N-0.5 分（规则见规格 §36.5）。
   触屏上没有鼠标悬停预览，所以「已选中的部分」靠填充比例表达（半星 = 左半填充），
   不能只靠颜色深浅；星形本体视觉 24px，热区撑到 44px 高。
   readonly=true 时是纯展示（用 role="img" + aria-label 播报「N 分（满分 M 分）」），
   此时不渲染任何可聚焦控件 —— 列表里一行一个评分不该抢走键盘序列。 */

export default function Rate({
  value = 0,
  max = 5,
  allowHalf = false,
  size = 'default',
  readonly = false,
  disabled = false,
  label = '评分',
  onChange,
  children = null,
}) {
  const cls =
    'kole-m-rate' +
    (allowHalf ? ' kole-m-rate--half' : '') +
    (size === 'small' ? ' kole-m-rate--small' : '') +
    (readonly ? ' kole-m-rate--readonly' : '') +
    (disabled ? ' is-disabled' : '');

  const stars = [];
  for (let i = 0; i < max; i++) stars.push(i);

  function pick(index, isLeftHalf) {
    if (readonly || disabled) return;
    const next = isLeftHalf ? index - 0.5 : index;
    if (onChange) onChange(next);
  }

  const ratioOf = (i) => Math.max(0, Math.min(1, value - i));

  /* 只读形态：整组是一个 role="img"，名称由 aria-label 播报（不留下可聚焦的星） */
  if (readonly) {
    return (
      <div className={cls} role="img" aria-label={`${label} ${value} 分（满分 ${max} 分）`}>
        <span className="kole-m-rate__stars" aria-hidden="true">
          {stars.map((i) => (
            <span className="kole-m-rate__star" key={i}>
              <span className="kole-m-rate__glyph">
                <span className="kole-m-rate__base">★</span>
                <span className="kole-m-rate__fill" style={{ width: ratioOf(i) * 100 + '%' }}>
                  ★
                </span>
              </span>
            </span>
          ))}
        </span>
        {children || <span className="kole-m-rate__text">{value} 分</span>}
      </div>
    );
  }

  return (
    <div className={cls} role="radiogroup" aria-label={label} aria-disabled={disabled ? 'true' : undefined}>
      <span className="kole-m-rate__stars">
        {stars.map((i) => {
          const index = i + 1;
          const full = ratioOf(i) >= 1;
          return (
            <button
              className="kole-m-rate__star"
              key={index}
              type="button"
              role="radio"
              aria-checked={full ? 'true' : 'false'}
              aria-label={`${index} 星`}
              disabled={disabled}
              onClick={(e) => {
                /* 半星判定：点在左半区取 N-0.5，右半区取 N（整星模式下位置不影响取值） */
                const isLeftHalf =
                  allowHalf && e.target && e.target.getAttribute && e.target.getAttribute('data-half') === 'left';
                pick(index, isLeftHalf);
              }}
            >
              <span className="kole-m-rate__glyph" aria-hidden="true">
                <span className="kole-m-rate__base">★</span>
                <span className="kole-m-rate__fill" style={{ width: ratioOf(i) * 100 + '%' }}>
                  ★
                </span>
              </span>
              {allowHalf ? (
                <>
                  <span className="kole-m-rate__half kole-m-rate__half--left" data-half="left" />
                  <span className="kole-m-rate__half kole-m-rate__half--right" data-half="right" />
                </>
              ) : null}
            </button>
          );
        })}
      </span>
      {children || <span className="kole-m-rate__text">{value} 分</span>}
    </div>
  );
}