MathApp_frontend/src/diagram/numberline.tsx

import type { NumberLineSpec } from './types';
import { Arrowheads, COLORS, INK, Label, SERIES, SOFT, StackedFraction, arrowId, color, fa, gcd, mathText, niceStep, ticksBetween } from './svg';
import { toFa } from '@/lib/format';

const W = 330;
const PAD = 26;

/**
 * محورِ اعداد: نقطه (توپُر یا توخالی)، پرش (فلشِ خمیده)، و بازه (پاره‌خطِ رنگی با
 * سرِ باز/بسته، یا تا بی‌نهایت). با `fractions` تیک‌ها کسرِ دوطبقه‌اند (۱/۴، ۲/۴)،
 * چون در کتابِ دبستان «/» ممیز است.
 */
export function NumberLine({ spec }: { spec: NumberLineSpec }) {
  const { min, max } = spec;
  const intervals = spec.intervals ?? [];
  const lanes = intervals.length;
  const jumpH = spec.jumps.length ? 52 : 0;
  const LANE = intervals.some((iv) => iv.label) ? 24 : 14;
  const base = 22 + jumpH + lanes * LANE + 10;
  const H = base + (spec.fractions ? 58 : 44);
  const X = (v: number) => PAD + ((v - min) / (max - min)) * (W - 2 * PAD);
  // محورِ عددهای صحیح گامِ صحیحِ «گرد» می‌گیرد (۱، ۲، ۵، ۱۰، …)، نه ۲٫۵
  const intStep = (span: number) => [1, 2, 5, 10, 20, 25, 50, 100, 200, 500, 1000].find((c) => span / c <= 12) ?? niceStep(span, 12);
  const integers = Number.isInteger(min) && Number.isInteger(max);
  const step = spec.step && spec.step > 0 && (max - min) / spec.step <= 40 ? spec.step : integers ? intStep(max - min) : niceStep(max - min, 12);
  const ticks = ticksBetween(min, max, step);
  const labelled = new Set(spec.points.map((p) => p.at));
  // بیش از ۱۴ تیک: فقط بعضی عدد می‌گیرند (صفر، مضرب‌های ۵ یا ۱۰، نقطه‌های خواسته‌شده)،
  // وگرنه عددها روی هم می‌افتند.
  const every = ticks.length > 14 ? Math.ceil(ticks.length / 10) : 1;
  const showLabel = (t: number, i: number) => every === 1 || labelled.has(t) || Math.abs(t) < 1e-9 || i % every === 0;
  const arrows = new Set<string>([INK, COLORS.red]);

  const tickLabel = (t: number) => {
    if (spec.fractions && step < 1) {
      const den = Math.round(1 / step);
      const num = Math.round(t * den);
      if (num % den === 0) return null; // عددِ صحیح با رقمِ معمولی
      const g = gcd(num, den);
      return { num: toFa(Math.abs(num / g)), den: toFa(den / g), neg: num < 0 };
    }
    return null;
  };

  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="mx-auto block w-full max-w-[360px]" role="img" aria-label={spec.title || 'محورِ اعداد'}>
      <Arrowheads ids={[...arrows, ...intervals.map((iv, i) => color(iv.color, COLORS[SERIES[i % SERIES.length]]))]} />
      <line x1={PAD - 16} y1={base} x2={W - PAD + 16} y2={base} stroke={INK} strokeWidth={2}
        markerEnd={`url(#${arrowId(INK)})`} markerStart={`url(#${arrowId(INK)})`} />
      {ticks.map((t, ti) => {
        const fr = showLabel(t, ti) ? tickLabel(t) : null;
        const hideNumber = !showLabel(t, ti);
        const on = labelled.has(t);
        const whole = Math.abs(t - Math.round(t)) < 1e-9;
        return (
          <g key={t}>
            <line x1={X(t)} x2={X(t)} y1={base - (whole ? 6 : 4)} y2={base + (whole ? 6 : 4)} stroke={INK} strokeWidth={Math.abs(t) < 1e-9 ? 2.2 : 1.3} />
            {fr ? (
              <StackedFraction x={X(t)} y={base + 16} num={`${fr.neg ? '−' : ''}${fr.num}`} den={fr.den} color={on ? INK : SOFT} size={9} />
            ) : hideNumber ? null : (
              <text x={X(t)} y={base + 20} fontSize={on ? 11.5 : 10} fontWeight={on ? 800 : 500} fill={on ? INK : SOFT} textAnchor="middle">{fa(t)}</text>
            )}
          </g>
        );
      })}

      {intervals.map((iv, i) => {
        const col = color(iv.color, COLORS[SERIES[i % SERIES.length]]);
        const y = base - 10 - i * LANE;
        const a = iv.from === null ? PAD - 12 : X(iv.from), b = iv.to === null ? W - PAD + 12 : X(iv.to);
        return (
          <g key={`iv${i}`}>
            <line x1={a} x2={b} y1={y} y2={y} stroke={col} strokeWidth={4} strokeLinecap="round"
              markerStart={iv.from === null ? `url(#${arrowId(col)})` : undefined} markerEnd={iv.to === null ? `url(#${arrowId(col)})` : undefined} />
            {iv.from !== null && <circle cx={a} cy={y} r={4.6} fill={iv.closedFrom ? col : '#fff'} stroke={col} strokeWidth={2.2} />}
            {iv.to !== null && <circle cx={b} cy={y} r={4.6} fill={iv.closedTo ? col : '#fff'} stroke={col} strokeWidth={2.2} />}
            {iv.label && <Label x={(Math.max(a, PAD) + Math.min(b, W - PAD)) / 2} y={y - 7} color={col} size={10.5}>{mathText(iv.label)}</Label>}
          </g>
        );
      })}

      {spec.jumps.map((j, i) => {
        const a = X(j.from), b = X(j.to);
        const lift = Math.min(42, Math.abs(b - a) * 0.45 + 12);
        const y = base - 6 - lanes * LANE;
        return (
          <g key={`j${i}`}>
            <path d={`M${a},${y} Q${(a + b) / 2},${y - lift * 1.5} ${b},${y}`} fill="none" stroke={COLORS.red} strokeWidth={2.3} markerEnd={`url(#${arrowId(COLORS.red)})`} />
            {j.label && <Label x={(a + b) / 2} y={y - lift * 0.8 - 4} color={COLORS.red} size={10.5}>{mathText(j.label)}</Label>}
          </g>
        );
      })}

      {spec.points.map((p, i) => {
        const col = color(p.color, i === spec.points.length - 1 && spec.points.length > 1 ? COLORS.red : COLORS.blue);
        const numeric = /^[-−+]?[\d۰-۹.,٫/]+$/.test(p.label.trim());
        return (
          <g key={`p${i}`}>
            <circle cx={X(p.at)} cy={base} r={5.6} fill={p.open ? '#fff' : col} stroke={p.open ? col : '#fff'} strokeWidth={p.open ? 2.4 : 1.6} />
            {p.label && !numeric && <Label x={X(p.at)} y={base + (spec.fractions ? 50 : 36)} color={col} size={10.5}>{p.label}</Label>}
          </g>
        );
      })}
    </svg>
  );
}