import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView, ScrollView } from 'react-native';
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 SelectInput from '../../components/SelectInput';
import { StatusBar } from 'expo-status-bar';
import { useAuth } from '../../contexts/AuthContext';

// Build options for months and years
const monthOptions = Array.from({ length: 12 }).map((_, i) => {
  const m = String(i + 1).padStart(2, '0');
  return { label: m, value: m };
});
const yearOptions = Array.from({ length: 60 }).map((_, i) => {
  const y = String(new Date().getFullYear() + i);
  return { label: y, value: y };
});

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'];

// Helper to format card number 9999 9999 9999 9999
const formatCardNumber = (value) => {
  const digits = value.replace(/[^0-9]/g, '').slice(0, 16);
  return (digits.match(/.{1,4}/g) || []).join(' ');
};

const CreateCardTransactionOrderScreen = () => {
  const navigation = useNavigation();
  const [cardNumber, setCardNumber] = useState('');
  const [cardMonth, setCardMonth] = useState('');
  const [cardYear, setCardYear] = useState('');
  const [loading, setLoading] = useState(false);
  const { user } = useAuth();
  const [passportSerie, setPassportSerie] = useState('');
  const [passportId, setPassportId] = useState('');

  useEffect(() => {
    if (user) {
      if (user.passport_serie) setPassportSerie(user.passport_serie);
      if (user.passport_id) setPassportId(String(user.passport_id));

      if (user.card_number) setCardNumber(formatCardNumber(String(user.card_number)));
      if (user.card_month) setCardMonth(String(user.card_month).padStart(2,'0'));
      if (user.card_year) setCardYear(String(user.card_year));
    }
  }, [user]);

  const handleCardNumberChange = (val) => {
    setCardNumber(formatCardNumber(val));
  };

  const handleSubmit = async () => {
    if (!cardNumber.trim() || !cardMonth || !cardYear || !passportSerie || !passportId.trim()) {
      Alert.alert('Error', 'All fields are required');
      return;
    }
    setLoading(true);
    const rawCard = cardNumber.replace(/\s+/g, '').trim();
    const res = await apiService.createCardTransactionOrder(rawCard, cardMonth, cardYear, 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" />
      <ScrollView contentContainerStyle={{ paddingHorizontal: 24, paddingTop: 40, paddingBottom: 40 }}>
        <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="*Kart belgisi"
          placeholder="9934..."
          value={cardNumber}
          onChangeText={handleCardNumberChange}
          keyboardType="numeric"
          autoCapitalize="none"
          autoCorrect={false}
          maxLength={19}
        />

        <SelectInput
          label="*Aý"
          value={cardMonth}
          onValueChange={setCardMonth}
          options={monthOptions}
          placeholder="Saýla"
        />

        <SelectInput
          label="*Ýyl"
          value={cardYear}
          onValueChange={setCardYear}
          options={yearOptions}
          placeholder="Saýla"
        />

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.backgroundSecondary,
  },
  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 CreateCardTransactionOrderScreen;