import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Alert,
  ActivityIndicator,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  SafeAreaView,
  TouchableOpacity,
} from "react-native";
import * as Keychain from "react-native-keychain";
import { CustomInput, CustomButton } from "../../components/common/Custom";
import colors from "../../components/colors";
import { useNavigation } from "@react-navigation/native";
import AppView from "../../components/AppView";
import Ionicons from "@react-native-vector-icons/ionicons";

const BecomeOrg = () => {
  const navigation = useNavigation<any>();
  const [bankAccountNumber, setBankAccountNumber] = useState("");
  const [bankName, setBankName] = useState("");
  const [branchCode, setBranchCode] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!bankAccountNumber || !bankName || !branchCode) {
      Alert.alert("Error", "Please fill all fields");
      return;
    }

    try {
      setLoading(true);
      const credentials = await Keychain.getGenericPassword();
      if (!credentials) {
        Alert.alert("Error", "You are not logged in");
        return;
      }
      const token = credentials.password;

      const response = await fetch(
        "https://api.godemo.in/FundCollect/api/organizer/registration/apply",
        {
          method: "POST",
          headers: {
            Accept: "*/*",
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({
            bankAccountNumber,
            bankName,
            branchCode,
          }),
        }
      );

      const result = await response.json();
      if (result.status === "success") {
        Alert.alert("Success", "Organizer registration applied successfully");
        setBankAccountNumber("");
        setBankName("");
        setBranchCode("");
        navigation.navigate("Home" as never);
      } else {
        Alert.alert("Error", result.message || "Failed to apply");
      }
    } catch (error) {
      console.error("❌ Registration error:", error);
      Alert.alert("Error", "Something went wrong");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppView barStyle="dark-content">
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.replace("Home" as never)} >
          <Ionicons name="arrow-back" size={24} color={'#000'} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>User Profile</Text>

      </View>
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === "ios" ? "padding" : undefined}
        keyboardVerticalOffset={Platform.OS === "ios" ? 60 : 0}
      >
        <ScrollView
          contentContainerStyle={styles.container}
          keyboardShouldPersistTaps="handled"
        >
          <Text style={styles.title}>Organizer Registration</Text>

          <CustomInput
            placeholder="Bank Account Number"
            keyboardType="numeric"
            value={bankAccountNumber}
            onChangeText={setBankAccountNumber}
            icon="card-outline"
          />

          <CustomInput
            placeholder="Bank Name"
            value={bankName}
            onChangeText={setBankName}
            icon="business-outline"
          />

          <CustomInput
            placeholder="Branch Code"
            value={branchCode}
            onChangeText={setBranchCode}
            icon="key-outline"
          />

          <CustomButton
            title={loading ? "Submitting..." : "Request Organizer Role"}
            onPress={handleSubmit}
            icon="send-outline"
            buttonBackground={colors.pastelBlue}
            style={{ opacity: loading ? 0.6 : 1 }}
          />

          {loading && (
            <ActivityIndicator
              style={{ marginTop: 15 }}
              size="large"
              color={colors.primary}
            />
          )}
        </ScrollView>
      </KeyboardAvoidingView>
    </AppView>
  );
};

export default BecomeOrg;

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    padding: 20,
    justifyContent: "center",
  },
  title: {
    fontSize: 22,
    fontWeight: "700",
    marginBottom: 20,
    textAlign: "center",
    color: colors.textDark,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
  headerTitle: {
    fontSize: 22,
    fontWeight: "700",
    color: "#000"
  },
});