import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  Pressable,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
} from "react-native";
import axios from "axios";
import { ORGRAGISTRATION } from "../utils/ApiUrls";
import * as Keychain from "react-native-keychain";

const theme = {
  primary: "#111",
  accent: "#FF7A00",
  background: "#F9F9F9",
  text: "#1A1A1A",
  subText: "#6B6B6B",
  outline: "#E5E5E5",
};

export default function OrganizerRegisterScreen() {
  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", "All fields are required.");
    return;
  }

  try {
    setLoading(true);

    // 🔑 get token from Keychain
    const creds = await Keychain.getGenericPassword();
    const token = creds ? creds.password : null;

    if (!token) {
      Alert.alert("Error", "No token found. Please log in again.");
      setLoading(false);
      return;
    }

    const payload = {
      bankAccountNumber,
      bankName,
      branchCode,
    };

    const res = await axios.post(
      ORGRAGISTRATION, // your API endpoint
      payload,
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`, // 👈 token added here
        },
      }
    );

    console.log("✅ Organizer Registered:", res.data);
    Alert.alert("Success", "Organizer registered successfully!");
  } catch (err: any) {
    console.error("❌ Register Error:", err?.response?.data || err.message);
    // Alert.alert("Error", "Failed to register. Please try again.");
  } finally {
    setLoading(false);
  }
};


  return (
    <KeyboardAvoidingView
      style={{ flex: 1, backgroundColor: theme.background }}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={styles.title}>Organizer Registration 📝</Text>

        <TextInput
          placeholder="Bank Account Number"
          style={styles.input}
          value={bankAccountNumber}
          onChangeText={setBankAccountNumber}
          keyboardType="numeric"
        />

        <TextInput
          placeholder="Bank Name"
          style={styles.input}
          value={bankName}
          onChangeText={setBankName}
        />

        <TextInput
          placeholder="Branch Code"
          style={styles.input}
          value={branchCode}
          onChangeText={setBranchCode}
        />

        <Pressable style={styles.button} onPress={handleSubmit} disabled={loading}>
          <Text style={styles.buttonText}>{loading ? "Submitting..." : "Submit"}</Text>
        </Pressable>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: "center",
    padding: 20,
  },
  title: {
    fontSize: 22,
    fontWeight: "700",
    color: theme.text,
    marginBottom: 20,
    textAlign: "center",
  },
  input: {
    borderWidth: 1,
    borderColor: theme.outline,
    borderRadius: 12,
    padding: 14,
    marginBottom: 15,
    fontSize: 16,
    backgroundColor: "#fff",
  },
  button: {
    backgroundColor: theme.primary,
    paddingVertical: 16,
    borderRadius: 12,
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontWeight: "600",
    fontSize: 16,
  },
});