export interface CflSliderProps {
  value: number;
  onChange: (v: number) => void;
  /** Largest stable step, when known, to show the resulting dt */
  dtMax?: number;
  min?: number;
  max?: number;
  disabled?: boolean;
}

/**
 * The time step as a fraction of the stability limit. Past 1 the explicit
 * scheme amplifies its shortest waves every step, and the run blows up within
 * a few dozen steps; the slider colours that region so it is not a surprise.
 */
export function CflSlider({
  value,
  onChange,
  dtMax,
  min = 0.5,
  max = 1.2,
  disabled,
}: CflSliderProps) {
  const unstable = value > 1;
  const pct = ((1 - min) / (max - min)) * 100;
  return (
    <div className={disabled ? "pl-disabled" : undefined}>
      <div className="pl-slider">
        <input
          type="range"
          min={min}
          max={max}
          step={0.01}
          value={value}
          disabled={disabled}
          onChange={(e) => onChange(Number(e.target.value))}
          style={{
            background: `linear-gradient(to right, #cfe0f5 0%, #cfe0f5 ${pct}%, #f5c6c6 ${pct}%, #f5c6c6 100%)`,
          }}
          aria-label="time step as a fraction of the stability limit"
        />
        <span className="pl-mono" style={{ color: unstable ? "var(--pl-error)" : undefined }}>
          {value.toFixed(2)} dt<sub>max</sub>
        </span>
      </div>
      <div className="pl-small pl-muted">
        {dtMax !== undefined ? (
          <>
            dt = {(value * dtMax * 1e6).toPrecision(3)} µs (limit {(dtMax * 1e6).toPrecision(3)}{" "}
            µs).{" "}
          </>
        ) : null}
        {unstable ? (
          <span style={{ color: "var(--pl-error)" }}>Above the limit: the run will diverge.</span>
        ) : (
          "Stable below 1."
        )}
      </div>
    </div>
  );
}