'use client';

import * as React from 'react';

import { ChevronDownIcon, ChevronUpIcon } from '@/icons';
import { cn } from '@/lib/utils';
import { disabledField } from '@/lib/cva-presets';
import { useControllableState } from '@/hooks/use-controllable-state';

export interface InputNumberProps
  extends Omit<React.ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'step'> {
  value?: number | null;
  defaultValue?: number | null;
  /** Fires with the parsed value, or `null` once the field is cleared. */
  onChange?: (value: number | null) => void;
  min?: number;
  max?: number;
  step?: number;
  /** Decimal places to round to on commit. Defaults to whatever `step` implies. */
  precision?: number;
  /** Renders the value for display — currency symbols, units, thousands separators. */
  formatter?: (value: number | null) => string;
  /** Turns a typed string back into a number. Required whenever `formatter` is set. */
  parser?: (displayValue: string) => number;
  /** Show the stepper column. */
  controls?: boolean;
  /** Let ArrowUp/ArrowDown step the value. */
  keyboard?: boolean;
  classNames?: { input?: string; controls?: string };
}

/** Decimal places a number is written with — used to keep stepping exact. */
const decimalsOf = (value: number) => {
  const text = String(value);
  const point = text.indexOf('.');
  return point === -1 ? 0 : text.length - point - 1;
};

/**
 * Round to `decimals` places the way the decimal number reads, not the way its
 * binary approximation does.
 *
 * `(1.005).toFixed(2)` is `"1.00"`, because 1.005 is stored as 1.00499…. Moving
 * the point with exponent notation instead re-parses from the decimal string,
 * so 1.005 → 100.5 → 101 → 1.01, which is what someone typing it expects.
 */
const roundTo = (value: number, decimals: number) => {
  const [mantissa, exponent = '0'] = `${value}e`.split('e');
  const shifted = Math.round(Number(`${mantissa}e${Number(exponent) + decimals}`));
  const [rounded, roundedExponent = '0'] = `${shifted}e`.split('e');
  return Number(`${rounded}e${Number(roundedExponent) - decimals}`);
};

/**
 * Numeric input with stepper controls.
 *
 * A plain `<input type="number">` has no formatting hook, silently accepts `e`
 * and `+`, and steps inconsistently across browsers. This is a text input
 * carrying `role="spinbutton"`, so the value is announced with its bounds while
 * `formatter`/`parser` stay free to show currency or units.
 *
 * The value is only clamped on commit — blur or a step — never mid-keystroke,
 * because clamping while someone types "50" into a field with `min={10}` would
 * fight them at "5".
 *
 * ```tsx
 * <InputNumber min={0} max={100} step={5} defaultValue={20} />
 *
 * <InputNumber
 *   formatter={(v) => `$ ${v ?? ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
 *   parser={(v) => Number(v.replace(/\$\s?|,/g, ''))}
 * />
 * ```
 */
function InputNumber({
  value,
  defaultValue,
  onChange,
  min = -Infinity,
  max = Infinity,
  step = 1,
  precision,
  formatter,
  parser,
  controls = true,
  keyboard = true,
  disabled,
  readOnly,
  className,
  classNames,
  onKeyDown,
  onBlur,
  onFocus,
  ...props
}: InputNumberProps) {
  /* No `onChange` on the hook: this one fires only when the number actually
     moved, which is the check in `emit` below. */
  const [current, setCurrent] = useControllableState<number | null>({
    value,
    defaultValue: defaultValue ?? null,
  });

  const toDisplay = (next: number | null) => {
    if (formatter) return formatter(next);
    if (next === null || Number.isNaN(next)) return '';
    return precision === undefined ? String(next) : next.toFixed(precision);
  };

  /**
   * Text the user is part-way through typing, or `null` when there is none.
   *
   * The displayed text is *derived* from the value rather than mirrored into
   * state, so there is nothing to keep in sync: a controlled parent that
   * declines a change simply re-renders its own value, and the field follows.
   * Only a live edit — where "1." and "-" are legal keystrokes but not numbers —
   * needs text of its own.
   */
  const [draft, setDraft] = React.useState<string | null>(null);
  const display = draft ?? toDisplay(current);

  const clamp = (next: number) => Math.min(Math.max(next, min), max);

  /**
   * `precision` is an instruction to round; without it the only job is to strip
   * the noise arithmetic introduces. Taking the wider of the step's and the
   * value's own decimals is what keeps `1.5` steppable by `1` — rounding to the
   * step's zero decimals would quietly turn 2.5 into 3.
   */
  const round = (next: number, base: number) =>
    roundTo(next, precision ?? Math.max(decimalsOf(step), decimalsOf(base)));

  const emit = (next: number | null) => {
    setCurrent(next);
    if (next !== current) onChange?.(next);
  };

  const parse = (text: string) => (parser ? parser(text) : Number(text));

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const text = event.target.value;
    setDraft(text);

    if (text.trim() === '') {
      emit(null);
      return;
    }

    const parsed = parse(text);
    /* A half-typed "-" or "1." parses to NaN. Keep the text, emit nothing —
       the value stays whatever it last was until the entry makes sense. */
    if (!Number.isNaN(parsed)) emit(parsed);
  };

  const stepBy = (direction: 1 | -1) => {
    if (disabled || readOnly) return;

    const base = current ?? 0;
    const next = clamp(round(base + direction * step, base));

    emit(next);
    /* Hand the display back to the value. In controlled mode that means a
       parent which ignores the change leaves the field showing what it still
       holds, rather than the number we proposed. */
    setDraft(null);
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    onKeyDown?.(event);
    if (!keyboard || event.defaultPrevented) return;

    if (event.key === 'ArrowUp') {
      event.preventDefault();
      stepBy(1);
    } else if (event.key === 'ArrowDown') {
      event.preventDefault();
      stepBy(-1);
    }
  };

  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
    const text = display.trim();

    if (text === '') {
      emit(null);
    } else {
      const parsed = parse(text);
      /* An unparseable entry is discarded rather than committed as NaN; the
         field falls back to whatever the value still is. */
      if (!Number.isNaN(parsed)) emit(clamp(round(parsed, parsed)));
    }

    /* Editing is over — the display goes back to being derived. */
    setDraft(null);
    onBlur?.(event);
  };

  const atMax = current !== null && current >= max;
  const atMin = current !== null && current <= min;

  return (
    <div
      data-slot="input-number"
      data-disabled={disabled ? '' : undefined}
      className={cn(
        'flex h-9 w-full min-w-0 items-stretch overflow-hidden rounded-md border border-input bg-transparent text-base shadow-xs md:text-sm dark:bg-input/30',
        'transition-[color,box-shadow] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
        'focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50',
        'has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
        disabled && 'cursor-not-allowed opacity-50',
        className
      )}
    >
      <input
        type="text"
        inputMode="decimal"
        autoComplete="off"
        role="spinbutton"
        aria-valuenow={current ?? undefined}
        aria-valuemin={min === -Infinity ? undefined : min}
        aria-valuemax={max === Infinity ? undefined : max}
        /* Without this a formatted field is announced as the raw number, losing
           the currency symbol or unit the sighted user can see. */
        aria-valuetext={formatter && current !== null ? display : undefined}
        data-slot="input-number-input"
        className={cn(
          'w-full min-w-0 bg-transparent px-3 py-1 outline-none',
          'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',
          disabledField,
          classNames?.input
        )}
        disabled={disabled}
        readOnly={readOnly}
        value={display}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
        onFocus={onFocus}
        {...props}
      />

      {controls ? (
        <div
          data-slot="input-number-controls"
          className={cn(
            'flex flex-none flex-col border-s border-input',
            classNames?.controls
          )}
        >
          {(
            [
              ['increment', 'Increase', 1, atMax, ChevronUpIcon],
              ['decrement', 'Decrease', -1, atMin, ChevronDownIcon],
            ] as const
          ).map(([slot, label, direction, atBound, StepIcon]) => (
            <button
              key={slot}
              type="button"
              /* The spinbutton itself handles the keyboard, so these stay out of
                 the tab order — but they keep names, since a screen-reader user
                 browsing by element should still find them. */
              tabIndex={-1}
              aria-label={label}
              data-slot={`input-number-${slot}`}
              disabled={disabled || readOnly || atBound}
              onClick={() => stepBy(direction)}
              className={cn(
                'flex flex-1 items-center justify-center px-1.5 text-muted-foreground',
                'transition-colors duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
                'hover:bg-accent hover:text-accent-foreground',
                'disabled:pointer-events-none disabled:opacity-40',
                slot === 'decrement' && 'border-t border-input'
              )}
            >
              <StepIcon className="size-3" />
            </button>
          ))}
        </div>
      ) : null}
    </div>
  );
}

export { InputNumber };