import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import apiService from '../../services/apiService';
import { COLORS } from '../../constants/colors';
import Input from '../../components/Input';
import { StatusBar } from 'expo-status-bar';
import SelectInput from '../../components/SelectInput';
import { useAuth } from '../../contexts/AuthContext';

const CreateLoanRemainingOrderScreen = () => {
  const navigation = useNavigation();
  const [accountNumber, setAccountNumber] = useState('');
  const [passportSerie, setPassportSerie] = useState('');
  const [passportId, setPassportId] = useState('');
  const [loading, setLoading] = useState(false);
  const { user } = useAuth();

  useEffect(() => {
    if (user) {
      if (user.passport_serie) setPassportSerie(user.passport_serie);
      if (user.passport_id) setPassportId(String(user.passport_id));
    }
  }, [user]);

  const PASSPORT_SERIES = ['I-AS','I-MR','II-MR','I-AH','II-AH','I-LB','II-LB','I-BN','II-BN','I-DZ','II-DZ'];

  const handleSubmit = async () => {
    if (accountNumber.trim().length === 0 || !passportSerie || passportId.trim().length === 0) {
      Alert.alert('Error', 'All fields are required');
      return;
    }
    setLoading(true);
    const res = await apiService.createLoanRemainingOrder(accountNumber.trim(), passportSerie, passportId.trim());
    setLoading(false);
    if (res.success) {
      Alert.alert('Success', res.message || 'Order created successfully', [
        { text: 'OK', onPress: () => navigation.goBack() },
      ]);
    } else {
      Alert.alert('Error', res.error || 'Could not create order');
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" />

      <View style={styles.inner}>
        <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
          <Ionicons name="arrow-back" size={24} color={COLORS.textPrimary} />
        </TouchableOpacity>

        <Text style={styles.title}>Täze sargyt</Text>

        <SelectInput
          label="*Passport seriýasy"
          value={passportSerie}
          onValueChange={setPassportSerie}
          options={PASSPORT_SERIES.map((v) => ({ label: v, value: v }))}
          placeholder="Saýla"
        />

        <Input
          label="*Passport belgisi"
          placeholder="123456"
          value={passportId}
          onChangeText={setPassportId}
          keyboardType="numeric"
        />

        <Input
          label="Karz hasaby"
          placeholder="1420..."
          value={accountNumber}
          onChangeText={setAccountNumber}
          keyboardType="numeric"
          autoCapitalize="none"
          autoCorrect={false}
          returnKeyType="done"
        />

        <TouchableOpacity style={styles.submitBtn} onPress={handleSubmit} disabled={loading}>
          {loading ? (
            <ActivityIndicator color={COLORS.white} />
          ) : (
            <Text style={styles.submitText}>Ýatda sakla</Text>
          )}
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.backgroundSecondary,
    paddingTop: 40,
  },
  inner: {
    flex: 1,
    paddingHorizontal: 24,
  },
  backBtn: {
    marginBottom: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: COLORS.textPrimary,
    marginBottom: 24,
  },
  submitBtn: {
    marginTop: 32,
    backgroundColor: COLORS.primary,
    paddingVertical: 16,
    borderRadius: 8,
    alignItems: 'center',
  },
  submitText: {
    color: COLORS.white,
    fontSize: 16,
    fontWeight: '600',
  },
});

export default CreateLoanRemainingOrderScreen;