import React, { useState } from "react";
import {
  StyleSheet,
  View,
  Text,
  Alert,
  ActivityIndicator,
  TouchableOpacity,
} from "react-native";
import { useNavigation, useRoute } from "@react-navigation/native";
import { CustomButton, CustomInput } from "../../components/common/Custom";
import colors from "../../components/colors";
import AppView from "../../components/AppView";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import { UPDATE_BANK_URL } from "../../utils/ApiUrls";
import { apiCall } from "../../utils/ApiHelper";

const EditBankDetails = () => {
  const navigation = useNavigation<any>();
  const route = useRoute();

  // Get initial data from route parameters passed from the Profile screen
  const {
    currentBankName,
    currentAccountNumber,
    currentBranchCode
  } = route.params as {
    currentBankName?: string;
    currentAccountNumber?: string;
    currentBranchCode?: string;
  };

  // Initialize state with the passed-in details
  const [bankName, setBankName] = useState(currentBankName || "");
  const [bankAccountNumber, setBankAccountNumber] = useState(currentAccountNumber || "");
  const [branchCode, setBranchCode] = useState(currentBranchCode || "");
  const [loading, setLoading] = useState(false);

  // The update function remains the same, using the local state
  const handleUpdateBankDetails = async () => {
    if (!bankName || !bankAccountNumber || !branchCode) {
      Alert.alert("Validation Error", "Please fill in all bank details.");
      return;
    }

    try {
      setLoading(true);
      const response = await apiCall(UPDATE_BANK_URL, 'PUT', {
        bankName,
        bankAccountNumber,
        branchCode,
      }) as { status: string; message?: string };
      console.log("Update Bank Response:", response);
      if (response.status === "success") {
        Alert.alert("Success", response.message || "Bank details updated successfully!");
        navigation.goBack();
      } else {
        Alert.alert("Update Failed", response.message || "Could not update bank details.");
      }
    } catch (error: any) {
      console.error("Error updating bank details:", error);
      Alert.alert("Error", error.message || "An unexpected error occurred. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppView>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
          <Ionicons name="arrow-back" size={24} color={colors.Profile} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Edit Bank Details</Text>
      </View>

      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Update Your Bank Information</Text>

        <CustomInput
          label="Bank Name"
          placeholder="Enter your bank's name"
          value={bankName}
          onChangeText={setBankName}
          icon="business"
          error=""
        />

        <CustomInput
          label="Bank Account Number"
          placeholder="Enter your account number"
          value={bankAccountNumber}
          onChangeText={setBankAccountNumber}
          icon="card"
          keyboardType="numeric"
          error=""
        />

        <CustomInput
          label="Branch Code"
          placeholder="Enter the branch code (IFSC)"
          value={branchCode}
          onChangeText={setBranchCode}
          icon="barcode"
          error=""
        />

        <View style={styles.buttonContainer}>
          <CustomButton
            title={loading ? "Saving..." : "Save Changes"}
            onPress={handleUpdateBankDetails}
            icon={loading ? undefined : "save"}
    
            buttonBackground={colors.pastelBlue}
          />
          <CustomButton
            title="Cancel"
            onPress={() => navigation.goBack()}
            style={styles.cancelButton}
             buttonBackground={colors.pastelBlue}
          />
        </View>
      </View>
    </AppView>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: "row",
    alignItems: "center",
    padding: 16,
  },
  backButton: {
    marginRight: 16,
  },
  headerTitle: {
    fontSize: 22,
    fontWeight: "600",
    color: colors.Profile,
  },
  container: {
    flex: 1,
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "700",
    color: "#1e293b",
    marginBottom: 20,
  },
  buttonContainer: {
    marginTop: 24,
  },
  cancelButton: {
    marginTop: 12,
    borderWidth: 1,
    borderColor: "#cbd5e1",
  },
});

export default EditBankDetails;