import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Alert,
  ActivityIndicator,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  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 [idName, setIdName] = useState("");
  const [idNumber, setIdNumber] = useState("");
  const [issueDate, setIssueDate] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!idName || !idNumber || !issueDate) {
      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. Please log in to continue.");
        setLoading(false);
        // Optionally navigate to login screen
        // navigation.navigate("Login");
        return;
      }
      const token = credentials.password;

      const response = await fetch(
        "https://exotic-humpback-mistakenly.ngrok-free.app/api/organizer/registration/apply",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({
            idName,
            idNumber,
            issueDate,
          }),
        }
      );

      const result = await response.json();

      if (response.ok && result.status === "success") {
        Alert.alert("Success", "Organizer registration application submitted successfully!");
        setIdName("");
        setIdNumber("");
        setIssueDate("");
        navigation.navigate("Home" as never);
      } else {
        Alert.alert("Error", result.message || "Failed to submit application");
      }
    } catch (error) {
      console.error("❌ Registration error:", error);
      Alert.alert("Error", "An unexpected error occurred. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppView barStyle="dark-content">
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
          <Ionicons name="arrow-back" size={24} color={'#000'} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Become an Organizer</Text>
        <View style={styles.placeholder} />
      </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}>Submit Your ID for Verification</Text>
          <Text style={styles.subtitle}>
            Please provide your official identification details to become a verified organizer.
          </Text>

          <CustomInput
            placeholder="ID Name (e.g., Aadhaar, PAN Card)"
            value={idName}
            onChangeText={setIdName}
            icon="person-outline"
            error={""}
          />

          <CustomInput
            placeholder="ID Number"
            value={idNumber}
            onChangeText={setIdNumber}
            icon="card-outline"
            error=""
          />

          <CustomInput
            placeholder="Issue Date (YYYY-MM-DD)"
            value={issueDate}
            onChangeText={setIssueDate}
            icon="calendar-outline"
            error=""
          />

          <CustomButton
            title={loading ? "Submitting..." : "Request Organizer Role"}
            onPress={handleSubmit}

            icon="send-outline"
            buttonBackground={colors.pastelBlue}
            style={{ opacity: loading ? 0.6 : 1, marginTop: 20 }}
          />

          {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: 24,
    fontWeight: "700",
    marginBottom: 10,
    textAlign: "center",
    color: colors.textDark,
  },
  subtitle: {
    fontSize: 16,
    textAlign: "center",
    color: colors.textDark,
    marginBottom: 30,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#FFF',
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  backButton: {
    padding: 5,
  },
  headerTitle: {
    flex: 1,
    fontSize: 20,
    fontWeight: "600",
    color: "#000",
    textAlign: "center",
  },
  placeholder: {
    width: 24, // to balance the back button
  },
});