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

const CreateLoanPaidOffLetterOrderScreen = () => {
  const navigation = useNavigation();

  // Form states (required fields only)
  const [region, setRegion] = useState('');
  const [branchId, setBranchId] = useState('');
  const [customerName, setCustomerName] = useState('');
  const [customerSurname, setCustomerSurname] = useState('');
  const [passportSerie, setPassportSerie] = useState('');
  const [passportId, setPassportId] = useState('');
  const [bornAt, setBornAt] = useState('');
  const [phone, setPhone] = useState('');
  const [contractNumber, setContractNumber] = useState('');
  const [contractDate, setContractDate] = useState('');
  const [loanAmount, setLoanAmount] = useState('');
  const [loanReason, setLoanReason] = useState('');
  const [loading, setLoading] = useState(false);

  // Options
  const [regionOptions, setRegionOptions] = useState([]);
  const [passportSeriesOptions, setPassportSeriesOptions] = useState([]);
  const [branchesByRegion, setBranchesByRegion] = useState({});

  const { user } = useAuth();

  useEffect(() => {
    // Prefill user passport if available
    if (user) {
      if (user.passport_serie) setPassportSerie(user.passport_serie);
      if (user.passport_id) setPassportId(String(user.passport_id));
      if (user.phone) setPhone(String(user.phone).slice(-8));
      if (user.region) setRegion(user.region);
    }

    const fetchEnums = async () => {
      try {
        const res = await fetch(`${API_CONFIG.BASE_URL}/base-app-enums`);
        const enums = await res.json();

        // Regions
        const regions = Object.entries(enums.regions || {}).map(([value, label]) => ({ value, label }));
        setRegionOptions(regions);

        // Passport series
        const pSeries = Object.keys(enums.passport_series || {}).map((key) => ({ value: key, label: key }));
        setPassportSeriesOptions(pSeries);
      } catch (e) {
        console.warn('Failed loading enums', e.message);
      }
    };

    const fetchBranches = async () => {
      try {
        const res = await fetch(`${API_CONFIG.BASE_URL}/branches?groupBy=region`);
        const json = await res.json();
        setBranchesByRegion(json);
      } catch (e) {
        console.warn('Failed loading branches', e.message);
      }
    };

    fetchEnums();
    fetchBranches();
  }, []);

  const branchOptions = region && branchesByRegion[region]
    ? branchesByRegion[region].map((b) => ({ label: b.name, value: b.id }))
    : [];

  const handleSubmit = async () => {
    // Basic validation – ensure all required fields are filled
    if (
      !region ||
      !branchId ||
      !customerName ||
      !customerSurname ||
      !passportSerie ||
      !passportId ||
      !bornAt ||
      !phone ||
      !contractNumber ||
      !contractDate ||
      !loanAmount ||
      !loanReason
    ) {
      Alert.alert('Error', 'Please fill in all required fields');
      return;
    }

    const payload = {
      region,
      branch_id: parseInt(branchId),
      customer_name: customerName,
      customer_surname: customerSurname,
      passport_serie: passportSerie,
      passport_id: passportId.trim(),
      born_at: bornAt,
      phone: parseInt(phone),
      loan_contract_number: contractNumber,
      loan_contract_date: contractDate,
      loan_amount: loanAmount,
      loan_reason: loanReason,
    };

    try {
      setLoading(true);
      const res = await apiService.createLoanPaidOffLetterOrder(payload);
      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');
      }
    } catch (error) {
      setLoading(false);
      Alert.alert('Error', error.message || 'Could not create order');
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" />
      <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
        <Ionicons name="arrow-back" size={24} color={COLORS.textPrimary} />
      </TouchableOpacity>

      <ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }} showsVerticalScrollIndicator={false}>
        <Text style={styles.title}>Täze güwanama sargyt et</Text>

        {/* Region & Branch */}
        <SelectInput
          label="Welaýat"
          value={region}
          options={regionOptions}
          onValueChange={(val) => {
            setRegion(val);
            setBranchId('');
          }}
          placeholder="Saýla"
        />
        <SelectInput
          label="Şahamça"
          value={branchId}
          options={branchOptions}
          onValueChange={(val) => setBranchId(val)}
          placeholder="Saýla"
          disabled={branchOptions.length === 0}
        />

        {/* Customer */}
        <Input
          label="Ady"
          placeholder="Mahmyt"
          value={customerName}
          onChangeText={setCustomerName}
        />
        <Input
          label="Familiýasy"
          placeholder="Allaberdiyev"
          value={customerSurname}
          onChangeText={setCustomerSurname}
        />

        {/* Passport */}
        <SelectInput
          label="Passport seriýasy"
          value={passportSerie}
          options={passportSeriesOptions}
          onValueChange={setPassportSerie}
          placeholder="Saýla"
        />
        <Input
          label="Passport nomeri"
          placeholder="100999"
          value={passportId}
          onChangeText={setPassportId}
          keyboardType="numeric"
        />

        {/* Other personal */}
        <DateInput
          label="Doglan senesi"
          value={bornAt}
          onChange={setBornAt}
        />
        <Input
          label="Telefon belgi (+9936...)"
          placeholder="65999990"
          value={phone}
          onChangeText={setPhone}
          keyboardType="numeric"
        />

        {/* Loan contract */}
        <Input
          label="Karz şertnama nomeri"
          placeholder="3242358989234"
          value={contractNumber}
          onChangeText={setContractNumber}
        />
        <DateInput
          label="Karz şertnama senesi"
          value={contractDate}
          onChange={setContractDate}
        />
        <Input
          label="Karz mukdary"
          placeholder="20000"
          value={loanAmount}
          onChangeText={setLoanAmount}
          keyboardType="numeric"
        />
        <Input
          label="Karz maksady"
          placeholder="Puldan pul gazanmak üçin"
          value={loanReason}
          onChangeText={setLoanReason}
        />

        <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,
    paddingTop: 40,
  },
  backBtn: {
    marginBottom: 24,
    marginLeft: 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 CreateLoanPaidOffLetterOrderScreen;