PizzaV2

import React, { useRef, useState } from 'react';
import {
  View, TextInput, Text, KeyboardAvoidingView,
  Platform, ScrollView, TouchableOpacity,
} from 'react-native';
import { useRoute, RouteProp } from '@react-navigation/native';
import AppButton from '../components/AppButton';
import { useAuth } from '../context/AuthContext';
import { AuthStackParamList } from '../navigation/AuthNavigator';

type Route = RouteProp<AuthStackParamList, 'OtpVerification'>;
const OTP_LENGTH = 4;

const OtpVerificationScreen = () => {
  const [otp, setOtp] = useState<string[]>(Array(OTP_LENGTH).fill(''));
  const inputs = useRef<(TextInput | null)[]>([]);
  const { login } = useAuth();
  const route = useRoute<Route>();
  const phone = route.params?.phone ?? '+1 555 123 4567';

  const handleChange = (text: string, index: number) => {
    if (text.length > 1) return;
    const newOtp = [...otp];
    newOtp[index] = text;
    setOtp(newOtp);
    if (text && index < OTP_LENGTH - 1) {
      inputs.current[index + 1]?.focus();
    }
  };

  const handleKeyPress = (e: any, index: number) => {
    if (e.nativeEvent.key === 'Backspace' && !otp[index] && index > 0) {
      inputs.current[index - 1]?.focus();
    }
  };

  const isComplete = otp.every(d => d !== '');

  return (
    <KeyboardAvoidingView
      style={{ flex: 1, backgroundColor: '#0F0F0F' }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1, alignItems: 'center',
          paddingHorizontal: 20, paddingVertical: 40,
        }}
        keyboardShouldPersistTaps="handled"
      >
        <Text style={{ color: 'white', fontSize: 40, fontWeight: 'bold', marginTop: 20 }}>
          SMS Code
        </Text>
        <Text style={{ color: '#9EA1AB', fontSize: 18, marginTop: 10, textAlign: 'center' }}>
          We sent a 4-digit code to {'\n'}
          <Text style={{ color: 'white' }}>{phone}</Text>
        </Text>

        <View style={{ flexDirection: 'row', gap: 12, marginTop: 40, marginBottom: 20 }}>
          {otp.map((digit, index) => (
            <TextInput
              key={index}
              ref={ref => (inputs.current[index] = ref)}
              style={{
                width: 75, height: 75, backgroundColor: '#121212',
                borderRadius: 15, borderWidth: 2,
                borderColor: digit ? '#FF6B00' : '#262626',
                fontSize: 26, fontWeight: 'bold', color: 'white',
                textAlign: 'center',
              }}
              value={digit}
              onChangeText={text => handleChange(text, index)}
              onKeyPress={e => handleKeyPress(e, index)}
              keyboardType="numeric"
              maxLength={1}
              selectionColor="#FF6B00"
              caretHidden
            />
          ))}
        </View>

        <View style={{ flex: 1, minHeight: 40 }} />

        <AppButton
          onPress={login}
          title="Verify"
          containerColor={isComplete ? '#FF6B00' : '#3A3A3A'}
          contentColor="white"
        />
      </ScrollView>
    </KeyboardAvoidingView>
  );
};