import React, {
  useRef,
  useEffect,
  type SetStateAction,
  type Dispatch,
  useState,
  type KeyboardEvent,
} from 'react';
import { TextField, Stack } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';

interface DigitInputProps {
  error: boolean;
  success: boolean;
  onChange: Dispatch<SetStateAction<string>>;
}

const DigitInput: React.FC<DigitInputProps> = ({
  onChange,
  error,
  success,
}) => {
  const [code, setCode] = useState<string[]>(['', '', '', '']);
  const { i18n } = useTranslation();
  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);

  useEffect(() => {
    inputRefs.current[0]?.focus();
  }, []);

  const handleDigitInputValueChange = (value: string[]) => {
    const formatted = value.filter((char) => char !== '').join('');
    onChange(formatted);
  };

  const handleChange = (value: string, index: number) => {
    value = replacePersianWithRealNumbers(value);

    if (!/^\d$/.test(value) && value !== '') return;

    const newCode = [...code];
    newCode[index] = value;
    setCode(newCode);
    handleDigitInputValueChange(newCode);

    if (value && index < 4 - 1) {
      inputRefs.current[index + 1]?.focus();
    }
  };

  const handleBackspace = (
    event: KeyboardEvent<HTMLDivElement>,
    index: number,
  ) => {
    event.preventDefault();
    if (index >= 0) {
      handleChange('', index);
      inputRefs.current[index - 1]?.focus();
    }
  };

  const handlePaste = (event: React.ClipboardEvent) => {
    event.preventDefault();
    const pastedData = event.clipboardData.getData('text').replace(/\D/g, ''); // Remove non-digit characters
    const newCode = [...code];

    pastedData.split('').forEach((digit, i) => {
      if (i < code.length) {
        newCode[i] = digit;
      }
    });

    setCode(newCode);
    handleDigitInputValueChange(newCode);

    // Focus the next empty input after the last pasted character
    const lastIndex = Math.min(pastedData.length, code.length) - 1;
    if (lastIndex >= 0 && inputRefs.current[lastIndex]) {
      inputRefs.current[lastIndex]?.focus();
    }
  };

  return (
    <Stack
      direction={i18n.dir() == 'ltr' ? 'row' : 'row-reverse'}
      alignItems="center"
      sx={{ gap: 2, width: '100%', my: 4 }}
      justifyContent="center"
    >
      {code.map((digit, index) => (
        <TextField
          error={error}
          color={success ? 'success' : 'primary'}
          key={index}
          inputRef={(el) => (inputRefs.current[index] = el)}
          autoFocus={index === 0}
          value={digit}
          onChange={(e) => handleChange(e.target.value, index)}
          onKeyDown={(e) => e.key === 'Backspace' && handleBackspace(e, index)}
          onPaste={(e) => handlePaste(e)}
          slotProps={{
            htmlInput: {
              maxLength: 1,
              sx: {
                height: '72px',
                color: error
                  ? 'error.main'
                  : success
                    ? 'success.main'
                    : 'text.primary',
              },
              style: {
                textAlign: 'center',
                fontSize: '48px',
              },
            },
          }}
          variant="standard"
          size="medium"
          sx={{
            width: { md: '83px', xs: '20%' },
          }}
        />
      ))}
    </Stack>
  );
};

export default DigitInput;