// 純 SVG/DOM 的儀表元件：分數環、區間條（移植自原型 app.js）

export function ScoreRing({ score, size }: { score: number; size?: number }) {
  const r = 38;
  const c = 2 * Math.PI * r;
  const pct = Math.max(0, Math.min(100, score)) / 100;
  const color = score >= 66 ? "#6fcf97" : score >= 40 ? "#e7c66b" : "#e86a52";
  const boxStyle = size
    ? { width: size, height: size, flex: `0 0 ${size}px` as const }
    : undefined;
  return (
    <div className="score-ring" style={boxStyle}>
      <svg viewBox="0 0 92 92" className="score-ring-svg" aria-hidden>
        <circle cx="46" cy="46" r={r} fill="none" stroke="rgba(255,255,255,.1)" strokeWidth="6" />
        <circle
          cx="46"
          cy="46"
          r={r}
          fill="none"
          stroke={color}
          strokeWidth="6"
          strokeLinecap="round"
          strokeDasharray={`${c * pct} ${c}`}
          transform="rotate(-90 46 46)"
          style={{ filter: "drop-shadow(0 0 4px rgba(231,198,107,.35))" }}
        />
      </svg>
      <div className="num">{Math.round(score)}</div>
    </div>
  );
}

export function RangeBar({
  pct,
  lowLabel = "低",
  midLabel = "中位",
  highLabel = "高",
}: {
  pct: number | null;
  lowLabel?: string;
  midLabel?: string;
  highLabel?: string;
}) {
  const p = pct == null ? null : Math.max(0, Math.min(100, pct));
  return (
    <div className="rangebar">
      <div className="track">
        <div className="median" style={{ left: "50%" }} />
        {p != null && <div className="now" style={{ left: `${p}%` }} />}
      </div>
      <div className="labels">
        <span>{lowLabel}</span>
        <span>{midLabel}</span>
        <span>{highLabel}</span>
      </div>
    </div>
  );
}
