import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { getStyles } from './otpScreen.styles';
import { PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { useOtpScreen } from './hooks/useOtpScreen';

export const OtpScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const {
    mobileNumber,
    otp,
    activeIndex,
    timer,
    isLoading,
    otpLength,
    isOtpComplete,
    handleKeyPress,
    handleVerify,
    handleResend,
  } = useOtpScreen();

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <View style={styles.content}>
        <Text style={styles.title}>Verify OTP</Text>
        <Text style={styles.subtitle}>Code sent to {mobileNumber}</Text>

        <View style={styles.otpContainer}>
          {otp.map(
            (
              digit:
                | string
                | number
                | bigint
                | boolean
                | React.ReactElement<
                    unknown,
                    string | React.JSXElementConstructor<any>
                  >
                | Iterable<React.ReactNode>
                | React.ReactPortal
                | Promise<
                    | string
                    | number
                    | bigint
                    | boolean
                    | React.ReactPortal
                    | React.ReactElement<
                        unknown,
                        string | React.JSXElementConstructor<any>
                      >
                    | Iterable<React.ReactNode>
                    | null
                    | undefined
                  >
                | null
                | undefined,
              index: React.Key | null | undefined,
            ) => (
              <View
                key={index}
                style={[
                  styles.otpCell,
                  index === activeIndex && styles.otpCellActive,
                  digit ? styles.otpCellFilled : null,
                ]}
              >
                <Text style={styles.otpCellText}>{digit}</Text>
              </View>
            ),
          )}
        </View>

        <View style={styles.keypad}>
          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(num => (
            <TouchableOpacity
              key={num}
              style={styles.key}
              onPress={() => handleKeyPress(String(num))}
              activeOpacity={0.6}
            >
              <Text style={styles.keyText}>{num}</Text>
            </TouchableOpacity>
          ))}
          <TouchableOpacity
            style={styles.key}
            onPress={() => handleKeyPress('backspace')}
            activeOpacity={0.6}
          >
            <Text style={styles.keyText}>⌫</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.key}
            onPress={() => handleKeyPress('0')}
            activeOpacity={0.6}
          >
            <Text style={styles.keyText}>0</Text>
          </TouchableOpacity>
          <View style={styles.key} />
        </View>

        {timer > 0 ? (
          <Text style={styles.timerText}>Resend code in {timer}s</Text>
        ) : (
          <TouchableOpacity onPress={handleResend} activeOpacity={0.7}>
            <Text style={styles.resendText}>Resend OTP</Text>
          </TouchableOpacity>
        )}

        <PrimaryButton
          title="Verify"
          onPress={handleVerify}
          isLoading={isLoading}
          disabled={!isOtpComplete}
          style={{ marginTop: 24 }}
        />
      </View>
    </KeyboardAvoidingView>
  );
};