import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  ScrollView,
  Platform,
  Alert,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { StatusBar } from 'expo-status-bar';
import { useAuth } from '../../contexts/AuthContext';
import Button from '../../components/Button';
import Input from '../../components/Input';
import Logo from '../../components/Logo';
import { COLORS } from '../../constants/colors';

const RegisterScreen = ({ navigation }) => {
  const [formData, setFormData] = useState({
    phone: '',
    name: '',
    password: '',
    confirmPassword: '',
  });
  const [errors, setErrors] = useState({});
  const { register, isLoading } = useAuth();
  const nameInputRef = useRef(null);
  const passwordInputRef = useRef(null);
  const confirmPasswordInputRef = useRef(null);

  const updateField = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    // Clear error when user starts typing
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const validateForm = () => {
    const newErrors = {};

    if (!formData.phone.trim()) {
      newErrors.phone = 'Telefon belgisi gerek';
    } else if (!/^\d{8}$/.test(formData.phone.trim())) {
      newErrors.phone = 'Telefon belgisi 8 sanly bolmaly (mysal: 61909090)';
    }

    if (!formData.name.trim()) {
      newErrors.name = 'Ady gerek';
    } else if (formData.name.trim().length < 2) {
      newErrors.name = 'Ady azyndan 2 harp bolmaly';
    }

    if (!formData.password.trim()) {
      newErrors.password = 'Parol gerek';
    } else if (formData.password.length < 6) {
      newErrors.password = 'Parol azyndan 6 harp bolmaly';
    }

    if (!formData.confirmPassword.trim()) {
      newErrors.confirmPassword = 'Paroly tassyklaň';
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = 'Parollar deň däl';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleRegister = async () => {
    if (!validateForm()) return;

    const result = await register(
      formData.phone.trim(),
      formData.name.trim(),
      formData.password
    );
    
    if (result.success) {
      // Navigation will be handled by AuthContext
    } else {
      Alert.alert('Ýalňyşlyk', result.error);
    }
  };

  const navigateToLogin = () => {
    navigation.replace('Login');
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.keyboardAvoid}
      >
        <ScrollView
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}
          keyboardShouldPersistTaps="handled"
        >
          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <View style={styles.content}>
              <View style={styles.logoContainer}>
                <Logo width={100} height={100} />
                <Text style={styles.appName}>TBBANK ONLINE</Text>
              </View>

              <View style={styles.formContainer}>
                <Text style={styles.formTitle}>Agza bol</Text>
                <Text style={styles.formSubtitle}>
                  Täze hasap döretmek üçin maglumatyňyzy giriziň
                </Text>

                <Input
                  label="Telefon belgi"
                  value={formData.phone}
                  onChangeText={(value) => updateField('phone', value)}
                  placeholder="61909090"
                  keyboardType="numeric"
                  leftIcon="call"
                  error={errors.phone}
                  maxLength={8}
                  returnKeyType="next"
                  onSubmitEditing={() => nameInputRef.current?.focus()}
                />

                <Input
                  ref={nameInputRef}
                  label="Ady"
                  value={formData.name}
                  onChangeText={(value) => updateField('name', value)}
                  placeholder="Doly adyňyzy giriziň"
                  leftIcon="person"
                  error={errors.name}
                  returnKeyType="next"
                  onSubmitEditing={() => passwordInputRef.current?.focus()}
                />

                <Input
                  ref={passwordInputRef}
                  label="Parol"
                  value={formData.password}
                  onChangeText={(value) => updateField('password', value)}
                  placeholder="Parolyňyzy giriziň"
                  secureTextEntry
                  leftIcon="lock-closed"
                  error={errors.password}
                  returnKeyType="next"
                  onSubmitEditing={() => confirmPasswordInputRef.current?.focus()}
                />

                <Input
                  ref={confirmPasswordInputRef}
                  label="Paroly tassyklaň"
                  value={formData.confirmPassword}
                  onChangeText={(value) => updateField('confirmPassword', value)}
                  placeholder="Paroly gaýtadan giriziň"
                  secureTextEntry
                  leftIcon="lock-closed"
                  error={errors.confirmPassword}
                  returnKeyType="done"
                  onSubmitEditing={handleRegister}
                />

                <Button
                  title="Agza bol"
                  onPress={handleRegister}
                  loading={isLoading}
                  style={styles.registerButton}
                />

                <View style={styles.loginContainer}>
                  <Text style={styles.loginText}>Eýýäm hasabyňyz barmy? </Text>
                  <Button
                    title="Gir"
                    onPress={navigateToLogin}
                    variant="outline"
                    style={styles.loginButton}
                  />
                </View>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  keyboardAvoid: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    paddingHorizontal: 24,
  },
  content: {
    flex: 1,
  },
  logoContainer: {
    alignItems: 'center',
    paddingTop: 60,
    paddingBottom: 40,
  },

  appName: {
    fontSize: 24,
    fontWeight: 'bold',
    color: COLORS.textPrimary,
    marginBottom: 8,
  },
  formContainer: {
    flex: 1,
  },
  formTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: COLORS.textPrimary,
    marginBottom: 8,
  },
  formSubtitle: {
    fontSize: 16,
    color: COLORS.textSecondary,
    marginBottom: 32,
    lineHeight: 22,
  },
  registerButton: {
    marginTop: 8,
    marginBottom: 32,
  },
  loginContainer: {
    alignItems: 'center',
  },
  loginText: {
    fontSize: 16,
    color: COLORS.textSecondary,
    marginBottom: 16,
  },
  loginButton: {
    width: '100%',
  },
});

export default RegisterScreen;