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

/* 进度条（移动端）— 规格 §26
   根节点 role="progressbar" + aria-valuemin/max/now；文案节点 aria-hidden（避免与 aria-valuenow 重复播报）。
   线形与环形共用 --kole-m-progress-percent：环形用 conic-gradient 画，环心挖空与所在容器同底
   （--kole-m-progress-hole-bg 可覆盖）。进度条本身不可交互（规格 §26.5）。 */
export default function Progress({
  percentage = 0,
  type = 'line',
  status = 'normal',
  labelPlacement = 'right',
  label = '',
  paused = false,
  children = null,
}) {
  const value = Math.max(0, Math.min(100, Number(percentage) || 0));
  const percentStyle = { '--kole-m-progress-percent': String(value) };

  const cls =
    'kole-m-progress' +
    ` kole-m-progress--${type}` +
    (type === 'line' ? ` kole-m-progress--${labelPlacement}` : '') +
    (status === 'success' ? ' kole-m-progress--success' : '') +
    (status === 'error' ? ' kole-m-progress--error' : '') +
    (paused ? ' is-paused' : '');

  const text = label || value + '%';

  /* 文案在条内的线形：标签落在**条体内部**（品牌底 + 反色字才达标），
     与 H5 演示页同一结构（规格 §26.3 labelPlacement=inside） */
  const inlineLabel = (
    <span className="kole-m-progress__label" aria-hidden="true">
      {text}
    </span>
  );

  const ring = (
    <span className="kole-m-progress__ring">
      <span className="kole-m-progress__hole" aria-hidden="true">
        {text}
      </span>
    </span>
  );

  return (
    <div
      className={cls}
      style={percentStyle}
      role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow={value}
      aria-valuetext={status === 'error' ? '失败 ' + value + '%' : undefined}
    >
      {type === 'circle' ? (
        ring
      ) : (
        <>
          <span className="kole-m-progress__track">
            <span className="kole-m-progress__bar" style={{ width: value + '%' }}>
              {labelPlacement === 'inside' ? inlineLabel : null}
            </span>
          </span>
          {labelPlacement !== 'inside' ? (
            <span className="kole-m-progress__label" aria-hidden="true">
              {text}
            </span>
          ) : null}
        </>
      )}
      {status === 'success' ? (
        <span className="kole-m-progress__status" aria-hidden="true">
          ✓
        </span>
      ) : null}
      {status === 'error' ? (
        <span className="kole-m-progress__status" aria-hidden="true">
          !
        </span>
      ) : null}
      {children}
    </div>
  );
}