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 apiService from '../../services/apiService';
import { useAuth } from '../../contexts/AuthContext';
import { useBaseEnums } from '../../contexts/BaseEnumsContext';
import { StatusBar } from 'expo-status-bar';

const CreateLoanOrderScreen = () => {
  const navigation = useNavigation();
  const { user } = useAuth();
  const { getOptions } = useBaseEnums();

  const [loanType, setLoanType] = useState('');
  const [loanAmount, setLoanAmount] = useState('');
  const [region, setRegion] = useState('');
  const [branchId, setBranchId] = useState('');
  const [customerName, setCustomerName] = useState('');
  const [customerSurname, setCustomerSurname] = useState('');
  const [customerPatro, setCustomerPatro] = useState('');
  const [passportSerie, setPassportSerie] = useState('');
  const [passportId, setPassportId] = useState('');
  const [bornAt, setBornAt] = useState('');
  const [phone, setPhone] = useState('');
  const [loading, setLoading] = useState(false);

  const [loanTypeOptions, setLoanTypeOptions] = useState([]);
  const [regionOptions, setRegionOptions] = useState([]);
  const [passportSeriesOptions, setPassportSeriesOptions] = useState([]);
  const [educationOptions, setEducationOptions] = useState([]);
  const [marriageOptions, setMarriageOptions] = useState([]);
  const [education, setEducation] = useState('');
  const [marriageStatus, setMarriageStatus] = useState('');
  const [passportAddress, setPassportAddress] = useState('');
  const [realAddress, setRealAddress] = useState('');
  const [passportGivenAt, setPassportGivenAt] = useState('');
  const [passportGivenBy, setPassportGivenBy] = useState('');
  const [bornPlace, setBornPlace] = useState('');
  const [email, setEmail] = useState('');
  const [phoneAdditional, setPhoneAdditional] = useState('');
  const [phoneHome, setPhoneHome] = useState('');
  const [workCompany, setWorkCompany] = useState('');
  const [workCompanyAccNum, setWorkCompanyAccNum] = useState('');
  const [workRegion, setWorkRegion] = useState('');
  const [workProvinceId, setWorkProvinceId] = useState('');
  const [workPosition, setWorkPosition] = useState('');
  const [workSalary, setWorkSalary] = useState('');
  const [workStartedAt, setWorkStartedAt] = useState('');
  const [branchesByRegion, setBranchesByRegion] = useState({});

  useEffect(() => {
    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);
      if (user.name) {
        const parts = user.name.split(' ');
        setCustomerName(parts[0]);
        setCustomerSurname(parts[1] || '');
      }
    }

    const baseRegions = getOptions('regions');
    const pSeries = getOptions('passport_series');
    const loanTypes = getOptions('loan_types');
    const educ = getOptions('educations');
    const marriages = getOptions('marriage_statuses');

    setRegionOptions(baseRegions);
    setPassportSeriesOptions(pSeries);
    setLoanTypeOptions(loanTypes);
    setEducationOptions(educ);
    setMarriageOptions(marriages);

    const fetchBranches = async () => {
      try {
        const res = await fetch(`${API_CONFIG.BASE_URL}/branches?groupBy=region`);
        const json = await res.json();
        setBranchesByRegion(json);
      } catch {}
    };

    fetchBranches();
  }, []);

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

  const handleSubmit = async () => {
    if (!loanType || !loanAmount || !region || !branchId || !customerName || !customerSurname || !passportSerie || !passportId || !bornAt || !phone || !education || !marriageStatus || !passportAddress || !realAddress) {
      Alert.alert('Error', 'Fill all required fields');
      return;
    }

    const payload = {
      loan_type: parseInt(loanType),
      loan_amount: parseInt(loanAmount),
      region,
      branch_id: parseInt(branchId),
      customer_name: customerName,
      customer_surname: customerSurname,
      customer_patronic_name: customerPatro || null,
      education,
      marriage_status: marriageStatus,
      passport_address: passportAddress,
      real_address: realAddress,
      passport_serie: passportSerie,
      passport_id: passportId.trim(),
      passport_given_at: passportGivenAt,
      passport_given_by: passportGivenBy,
      born_place: bornPlace,
      born_at: bornAt,
      phone: parseInt(phone),
      email: email || null,
      phone_additional: phoneAdditional ? parseInt(phoneAdditional) : null,
      phone_home: phoneHome || null,
      work_company: workCompany || null,
      work_company_accountant_number: workCompanyAccNum || null,
      work_region: workRegion || null,
      work_province_id: workProvinceId ? parseInt(workProvinceId) : null,
      work_position: workPosition || null,
      work_salary: workSalary ? parseInt(workSalary) : null,
      work_started_at: workStartedAt || null,
    };

    setLoading(true);
    const res = await apiService.createLoanOrder(payload);
    setLoading(false);
    if (res.success) {
      Alert.alert('Success', res.message || 'Order created', [{ text: 'OK', onPress: () => navigation.goBack() }]);
    } else {
      Alert.alert('Error', res.error || 'Could not create');
    }
  };

  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 karz sargyt</Text>

        <SelectInput label="Karzyň görnüşi" value={loanType} options={loanTypeOptions} onValueChange={setLoanType} placeholder="Saýla" />
        <Input label="Karz mukdary" placeholder="20000" value={loanAmount} onChangeText={setLoanAmount} keyboardType="numeric" />

        <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={setBranchId} placeholder="Saýla" disabled={branchOptions.length === 0} />

        <Input label="Ady" placeholder="Mahmyt" value={customerName} onChangeText={setCustomerName} />
        <Input label="Familiýasy" placeholder="Allaberdiyev" value={customerSurname} onChangeText={setCustomerSurname} />
        <Input label="Atasynyň ady" placeholder="" value={customerPatro} onChangeText={setCustomerPatro} />

        <SelectInput label="Bilimi" value={education} options={educationOptions} onValueChange={setEducation} placeholder="Saýla" />
        <SelectInput label="Maşgala ýagdaýy" value={marriageStatus} options={marriageOptions} onValueChange={setMarriageStatus} placeholder="Saýla" />

        <Input label="Ýazgy edilen salgyňyz" placeholder="Kemine 100/190" value={passportAddress} onChangeText={setPassportAddress} />
        <Input label="Häzirki ýaşaýyş ýeri" placeholder="Kemine 100/200" value={realAddress} onChangeText={setRealAddress} />

        <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" />
        <DateInput label="Passport berlen senesi" value={passportGivenAt} onChange={setPassportGivenAt} />
        <Input label="Kim tarapyndan berildi" placeholder="Ashgabat polisiýasy tarapyndan" value={passportGivenBy} onChangeText={setPassportGivenBy} />
        <Input label="Doglan ýeri (passport)" placeholder="Ashgabat" value={bornPlace} onChangeText={setBornPlace} />
        <Input label="E-poçta" placeholder="example@mail.com" value={email} onChangeText={setEmail} keyboardType="email-address" />

        <DateInput label="Doglan senesi" value={bornAt} onChange={setBornAt} />
        <Input label="Telefon (+9936...)" value={phone} onChangeText={setPhone} keyboardType="numeric" />
        <Input label="Telefon goşmaça" value={phoneAdditional} onChangeText={setPhoneAdditional} keyboardType="numeric" />
        <Input label="Öý telefony" value={phoneHome} onChangeText={setPhoneHome} />

        <Input label="Işleýän edaranyň/kärhananyň ady" value={workCompany} onChangeText={setWorkCompany} />
        <Input label="Işgärler bölüminiň iş belgisi" value={workCompanyAccNum} onChangeText={setWorkCompanyAccNum} />
        <SelectInput label="Işleýän welaýatyňyz" value={workRegion} options={regionOptions} onValueChange={(val)=>{setWorkRegion(val); setWorkProvinceId('');}} placeholder="Saýla" />
        <SelectInput label="Işleýän etrabyňyz" value={workProvinceId} options={workRegion && branchesByRegion[workRegion] ? branchesByRegion[workRegion].map(b=>({label:b.name,value:b.id})) : []} onValueChange={setWorkProvinceId} placeholder="Saýla" disabled={!workRegion} />
        <Input label="Wezipe" value={workPosition} onChangeText={setWorkPosition} />
        <Input label="Zähmet haky" value={workSalary} onChangeText={setWorkSalary} keyboardType="numeric" />
        <DateInput label="Işe başlan wagtyňyz" value={workStartedAt} onChange={setWorkStartedAt} />

        <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 CreateLoanOrderScreen;