import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  KeyboardAvoidingView,
  ScrollView,
  Platform,
  Alert,
  Image,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
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 LoginScreen = ({ navigation }) => {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  const { login, isLoading } = useAuth();

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

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

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

    if (!/^6[1-9]\d{6}$|^7[0-1]\d{6}$/.test(phone.trim())) {
      newErrors.phone = 'Telefon belgisi 61000000-71999999 aralygynda bolmaly';
    }

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

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

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

  const navigateToRegister = () => {
    navigation.navigate('Register');
  };

  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"
        >
          <View style={styles.logoContainer}>
            <Logo width={100} height={100} />
            <Text style={styles.appName}>TBBANK ONLINE</Text>
            <Text style={styles.welcomeText}>Hoş geldiňiz</Text>
          </View>

          <View style={styles.formContainer}>
            <Text style={styles.formTitle}>Giriş</Text>
            <Text style={styles.formSubtitle}>
              Hasabyňyza girmek üçin maglumatyňyzy giriziň
            </Text>

            <Input
              label="Telefon belgi"
              value={phone}
              onChangeText={setPhone}
              placeholder="61909090"
              keyboardType="numeric"
              leftIcon="call"
              error={errors.phone}
              maxLength={8}
            />

            <Input
              label="Parol"
              value={password}
              onChangeText={setPassword}
              placeholder="Parolyňyzy giriziň"
              secureTextEntry
              leftIcon="lock-closed"
              error={errors.password}
            />

            <Button
              title="Gir"
              onPress={handleLogin}
              loading={isLoading}
              style={styles.loginButton}
            />

            <View style={styles.registerContainer}>
              <Text style={styles.registerText}>Hasabyňyz ýokmy? </Text>
              <Button
                title="Agza bol"
                onPress={navigateToRegister}
                variant="outline"
                style={styles.registerButton}
              />
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

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

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

export default LoginScreen;