import { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { RED_BAR_RECORDS_RANGE_NUMBER_STYLE } from './tablaRedBarStyles.js';
import { clampRegistrosPorPagina } from './tablaRegistrosAndTimeUtils.js';

/**
 * Número subrayado: **registros por página** en “Registros: N de total”; solo dígitos.
 * @param {number} totalRegistrosLabel — total de registros (ver `clampRegistrosPorPagina`).
 */
export function RegistrosHastaInput({ registrosPorPagina, totalRegistrosLabel = 0, onCommit, disabled }) {
  const { t } = useTranslation();
  const [draft, setDraft] = useState(() => String(registrosPorPagina));
  const [focused, setFocused] = useState(false);

  useEffect(() => {
    if (!focused) setDraft(String(registrosPorPagina));
  }, [registrosPorPagina, focused]);

  const commit = useCallback(() => {
    const digits = draft.replace(/\D/g, '');
    if (digits === '') {
      setDraft(String(registrosPorPagina));
      return;
    }
    const n = parseInt(digits, 10);
    if (!Number.isFinite(n)) return;
    const clamped = clampRegistrosPorPagina(n, totalRegistrosLabel);
    setDraft(String(clamped));
    onCommit?.(clamped);
  }, [draft, registrosPorPagina, onCommit, totalRegistrosLabel]);

  const handleBlur = useCallback(() => {
    setFocused(false);
    commit();
  }, [commit]);

  return (
    <input
      type="text"
      inputMode="numeric"
      pattern="[0-9]*"
      autoComplete="off"
      aria-label={t('table.recordsPorPaginaInputAria', {
        defaultValue: 'Cuántos registros mostrar por página (número)',
      })}
      disabled={disabled}
      value={draft}
      onChange={(e) => setDraft(e.target.value.replace(/\D/g, ''))}
      onFocus={() => setFocused(true)}
      onBlur={handleBlur}
      onKeyDown={(e) => {
        if (e.key === 'Enter') {
          e.preventDefault();
          e.currentTarget.blur();
        }
        if (e.key === 'Escape') {
          e.preventDefault();
          setDraft(String(registrosPorPagina));
          e.currentTarget.blur();
        }
      }}
      style={{
        ...RED_BAR_RECORDS_RANGE_NUMBER_STYLE,
        display: 'inline-block',
        margin: 0,
        padding: 0,
        border: 'none',
        borderRadius: 0,
        background: 'transparent',
        outline: 'none',
        boxSizing: 'border-box',
        /* Mismo ancho que el texto: una `ch` por dígito (como el <span> inline). */
        width: `${Math.max(1, String(draft).length)}ch`,
        minWidth: 0,
        maxWidth: 'none',
        verticalAlign: 'middle',
        /* Evita ancho mínimo por defecto del control nativo (hueco a la derecha). */
        WebkitAppearance: 'none',
        appearance: 'none',
        fieldSizing: 'content',
      }}
    />
  );
}
