import React, {

  forwardRef,

  useImperativeHandle,

  useRef,

  useState,

} from 'react';

import { StyleSheet, TextInput, View } from 'react-native';

import { Text } from '@/components/ui/Text';

import { useThemeColor } from '@/hooks/use-theme-color';

import { BorderRadius, Spacing } from '@/constants/theme';

export interface CodeInputHandle {

  focus: () => void;

}

interface CodeInputProps {

  value: string;

  onChange: (value: string) => void;

  length?: number;

  error?: string;

  editable?: boolean;

  testIdPrefix?: string;

  accessibilityLabel?: string;

  onComplete?: (value: string) => void;

}

// A single hidden TextInput backs the six boxes: it keeps paste and the

// platform one-time-code autofill working, and exposes the code as one

// accessible control instead of six unrelated fields.

export const CodeInput = forwardRef<CodeInputHandle, CodeInputProps>(

  (

    {

      value,

      onChange,

      length = 6,

      error,

      editable = true,

      testIdPrefix = 'code-input',

      accessibilityLabel,

      onComplete,

    },

    ref,

  ) => {

    const inputRef = useRef<TextInput>(null);

    const [focused, setFocused] = useState(false);

    const [caret, setCaret] = useState(0);

    const textColor = useThemeColor({}, 'text');

    const backgroundColor = useThemeColor({}, 'inputBackgroundColor');

    const borderColor = useThemeColor({}, 'inputBorderColor');

    const focusBorderColor = useThemeColor({}, 'inputFocusBorderColor');

    const errorColor = useThemeColor({}, 'danger');

    useImperativeHandle(ref, () => ({

      focus: () => inputRef.current?.focus(),

    }));

    const digits = Array.from({ length }, (_, index) => value[index] ?? '');

    const cursor = Math.min(caret, value.length);

    const activeIndex = focused && cursor < length ? cursor : -1;

    const handleChangeText = (text: string) => {

      const sanitized = text.replace(/\D/g, '').slice(0, length);

      if (sanitized === value) return;

      onChange(sanitized);

      setCaret(sanitized.length);

      if (sanitized.length === length) {

        onComplete?.(sanitized);

      }

    };

    return (

      <View style={styles.container}>

        <View style={styles.boxes}>

          {digits.map((digit, index) => {

            const isActive = index === activeIndex;

            const boxBorderColor = error

              ? errorColor

              : isActive

                ? focusBorderColor

                : borderColor;

            return (

              <View

                key={index}

                accessible={false}

                testID={`${testIdPrefix}-box-${index}`}

                style={[

                  styles.box,

                  {

                    backgroundColor,

                    borderColor: boxBorderColor,

                    borderWidth: isActive || error ? 2 : 1,

                  },

                ]}

              >

                <Text style={[styles.digit, { color: textColor }]}>{digit}</Text>

              </View>

            );

          })}

          <TextInput

            ref={inputRef}

            testID={`${testIdPrefix}-input`}

            value={value}

            onChangeText={handleChangeText}

            onFocus={() => setFocused(true)}

            onBlur={() => setFocused(false)}

            onSelectionChange={(event) =>

              setCaret(event.nativeEvent.selection.end)

            }

            keyboardType="number-pad"

            inputMode="numeric"

            textContentType="oneTimeCode"

            autoComplete="one-time-code"

            editable={editable}

            caretHidden

            accessibilityLabel={accessibilityLabel}

            style={styles.hiddenInput}

          />

        </View>

        {error ? (

          <Text

            accessibilityLiveRegion="polite"

            style={[styles.errorText, { color: errorColor }]}

          >

            {error}

          </Text>

        ) : null}

      </View>

    );

  },

);

CodeInput.displayName = 'CodeInput';

const styles = StyleSheet.create({

  container: {

    marginBottom: 16,

  },

  boxes: {

    flexDirection: 'row',

    gap: Spacing.inlineGapSm,

    height: 48,

  },

  box: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

    borderRadius: BorderRadius.md,

  },

  digit: {

    fontSize: 24,

    fontWeight: '600',

  },

  hiddenInput: {

    position: 'absolute',

    top: 0,

    left: 0,

    right: 0,

    bottom: 0,

    opacity: 0.01,

    color: 'transparent',

  },

  errorText: {

    fontSize: 12,

    marginTop: 6,

  },

});