import React, { useState } from "react";
import {
  View,
  ScrollView,
  Pressable,
  TextInput,
  StyleSheet,
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
  Image,
} from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { router } from "expo-router";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import {
  Mail,
  Lock,
  ArrowRight,
  Eye,
  EyeOff,
  Chrome,
  User,
  Globe,
  Phone,
} from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { useAuthStore } from "@/lib/auth-store";
import { usePinStore } from "@/lib/pin-store";
import * as Linking from "expo-linking";
import { api, BASE_URL, rbacApi } from "@/lib/api";
import { useColorScheme } from "nativewind";
import { toast } from "@/lib/toast-store";
import { useLanguageStore, AppLanguage } from "@/lib/language-store";
import { getPlaceholderColor } from "@/lib/colors";
import { LanguageModal } from "@/components/LanguageModal";
// Lazy-load Google Sign-In to prevent crash when native module is missing (e.g. Expo Go)
let GoogleSignin: any = null;
let statusCodes: any = {};
let googleAvailable = false;

try {
  const gsi = require("@react-native-google-signin/google-signin");
  GoogleSignin = gsi.GoogleSignin;
  statusCodes = gsi.statusCodes;

  if (Platform.OS === "android") {
    googleAvailable = true;
    GoogleSignin.configure({
      webClientId:
        "377689842258-42ofqmfhf61p03jamlr5nfi18ovqehvf.apps.googleusercontent.com",
      offlineAccess: true,
    });
  } else {
    googleAvailable = false;
  }
} catch (e) {
  console.warn(
    "[Login] Google Sign-In native module not available:",
    (e as any).message,
  );
}

export default function LoginScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const setAuth = useAuthStore((state) => state.setAuth);
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const { language, setLanguage } = useLanguageStore();
  const [languageModalVisible, setLanguageModalVisible] = useState(false);

  const [identifier, setIdentifier] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [loginMode, setLoginMode] = useState<"email" | "phone">("email");

  const handleLogin = async () => {
    if (loginMode === "phone") {
      if (!identifier) {
        toast.error("Required Field", "Please enter your phone number");
        return;
      }
      setLoading(true);
      const fullPhone = `+251${identifier}`;
      try {
        const response = await api.auth.sendOtp({ body: { phone: fullPhone } });
        toast.success("Success", response.message || "OTP sent successfully");
        // Navigate to OTP screen
        router.push({
          pathname: "/otp",
          params: {
            phone: fullPhone,
            verificationId: response.verificationId,
            expiresInSeconds: response.expiresInSeconds,
          },
        });
      } catch (err: any) {
        if (
          err.message?.includes(
            "Unable to send a verification code to this number",
          ) ||
          err.status === 401
        ) {
          toast.info("Account Not Found", "Let's create one for you.");
          router.push({
            pathname: "/register",
            params: { phone: identifier },
          });
        } else {
          toast.error("Error", err.message || "Failed to send OTP");
        }
      } finally {
        setLoading(false);
      }
      return;
    }

    if (!identifier || !password) {
      toast.error(
        "Required Fields",
        "Please enter both identifier and password",
      );
      return;
    }

    setLoading(true);

    const isEmail = identifier.includes("@");
    const payload = isEmail
      ? { email: identifier, password }
      : { phone: `+251${identifier}`, password };

    try {
      // Using the new api.auth.login which is powered by simple-api
      const response = await api.auth.login({ body: payload });
      const permissions: string[] = [];
      setAuth(
        response.user,
        response.accessToken,
        response.refreshToken,
        permissions,
      );
      toast.success("Welcome Back!", "You have successfully logged in.");
      if (response.is_pin_set !== false) usePinStore.getState().unlock();
      nav.go(response.is_pin_set === false ? "set-pin" : "(tabs)");
    } catch (err: any) {
      toast.error("Login Failed", err.message || "Invalid credentials");
    } finally {
      setLoading(false);
    }
  };

  const handleGoogleLogin = async () => {
    if (!googleAvailable || !GoogleSignin) {
      toast.error(
        "Unavailable",
        "Google Sign-In requires a native build. Please use email/phone login.",
      );
      return;
    }
    try {
      setLoading(true);
      await GoogleSignin.hasPlayServices();
      // Sign out first to always show the account picker instead of auto-signing in
      try {
        await GoogleSignin.signOut();
      } catch (_) {}
      const userInfo = await GoogleSignin.signIn();

      // In newer versions of the library, the response is in data
      // If using idToken, ensure you configured webClientId
      const idToken = userInfo.data?.idToken || (userInfo as any).idToken;

      if (!idToken) {
        throw new Error("Failed to obtain Google ID Token");
      }

      // Send idToken to our new consolidated endpoint
      const response = await api.auth.googleMobile({ body: { idToken } });

      // Fetch roles to get permissions
      // const rolesResponse = await rbacApi.roles();
      // const userRole = response.user.role;
      // const roleData = rolesResponse.find((r: any) => r.role === userRole);
      // const permissions = roleData ? roleData.permissions : [];
      const permissions: string[] = [];

      setAuth(
        response.user,
        response.accessToken,
        response.refreshToken,
        permissions,
      );
      toast.success("Welcome!", "Signed in with Google.");
      if (response.is_pin_set !== false) usePinStore.getState().unlock();
      nav.go(response.is_pin_set === false ? "set-pin" : "(tabs)");
    } catch (error: any) {
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // User cancelled the login flow
      } else if (error.code === statusCodes.IN_PROGRESS) {
        toast.error("Login in progress", "Please wait...");
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        toast.error("Play Services", "Google Play Services not available");
      } else {
        console.error("[Login] Google Error:", error);
        toast.error(
          "Google Login Failed",
          error.message || "An error occurred",
        );
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScreenWrapper>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        className="flex-1"
      >
        <ScrollView
          className="flex-1"
          contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 16 }}
          keyboardShouldPersistTaps="handled"
        >
          <View className="flex-row justify-end mb-4">
            <Pressable
              onPress={() => setLanguageModalVisible(true)}
              className="p-2 rounded-full bg-card border border-border"
            >
              <Globe color={isDark ? "#f1f5f9" : "#0f172a"} size={20} />
            </Pressable>
          </View>

          {/* Logo / Branding */}
          <View className="items-center mb-8">
            <Text variant="h2" className="mt-6 font-sans-bold text-foreground">
              Login
            </Text>
            <Text variant="muted" className="mt-2 text-center">
              Sign in to manage your tickets & invoices
            </Text>
          </View>

          {/* Login Type Toggle */}
          <View className="flex-row bg-card border border-border rounded-xl p-1 mb-6">
            <Pressable
              onPress={() => {
                setLoginMode("email");
                setIdentifier("");
              }}
              className={`flex-1 py-2 rounded-lg items-center ${loginMode === "email" ? "bg-primary" : ""}`}
            >
              <Text
                className={`font-sans-bold text-sm ${loginMode === "email" ? "text-white" : "text-muted-foreground"}`}
              >
                Email Login
              </Text>
            </Pressable>
            <Pressable
              onPress={() => {
                setLoginMode("phone");
                setIdentifier("");
              }}
              className={`flex-1 py-2 rounded-lg items-center ${loginMode === "phone" ? "bg-primary" : ""}`}
            >
              <Text
                className={`font-sans-bold text-sm ${loginMode === "phone" ? "text-white" : "text-muted-foreground"}`}
              >
                Phone Number
              </Text>
            </Pressable>
          </View>

          {/* Form */}
          <View className="gap-5">
            <View>
              <Text variant="small" className="font-sans-semibold mb-2 ml-1">
                {loginMode === "email" ? "Email Address" : "Phone Number"}
              </Text>
              <View className="flex-row items-center rounded-xl px-4 border border-border h-12">
                {loginMode === "email" ? (
                  <Mail size={18} color={isDark ? "#94a3b8" : "#64748b"} />
                ) : (
                  <View className="flex-row items-center">
                    <Phone size={18} color={isDark ? "#94a3b8" : "#64748b"} />
                    <Text className="ml-2 text-foreground font-sans-bold">
                      +251
                    </Text>
                  </View>
                )}
                <TextInput
                  className="flex-1 ml-3 text-foreground py-0"
                  placeholder={
                    loginMode === "email" ? "john@example.com" : "912345678"
                  }
                  placeholderTextColor={getPlaceholderColor(isDark)}
                  value={identifier}
                  onChangeText={setIdentifier}
                  autoCapitalize="none"
                  keyboardType={
                    loginMode === "email" ? "email-address" : "phone-pad"
                  }
                  maxLength={loginMode === "phone" ? 9 : undefined}
                  style={{ textAlignVertical: "center" }}
                />
              </View>
            </View>

            {loginMode === "email" && (
              <View>
                <Text variant="small" className="font-sans-semibold mb-2 ml-1">
                  Password
                </Text>
                <View className="flex-row items-center  rounded-xl px-4 border border-border h-12">
                  <Lock size={18} color={isDark ? "#94a3b8" : "#64748b"} />
                  <TextInput
                    className="flex-1 ml-3 text-foreground py-0"
                    placeholder="••••••••"
                    placeholderTextColor={getPlaceholderColor(isDark)}
                    value={password}
                    onChangeText={setPassword}
                    secureTextEntry={!showPassword}
                    style={{ textAlignVertical: "center" }}
                  />
                  <Pressable onPress={() => setShowPassword(!showPassword)}>
                    {showPassword ? (
                      <EyeOff
                        size={18}
                        color={isDark ? "#94a3b8" : "#64748b"}
                      />
                    ) : (
                      <Eye size={18} color={isDark ? "#94a3b8" : "#64748b"} />
                    )}
                  </Pressable>
                </View>
              </View>
            )}

            <Button
              className="h-10 bg-primary rounded-[6px] shadow-lg shadow-primary/30 mt-2"
              onPress={handleLogin}
              disabled={loading}
            >
              {loading ? (
                <ActivityIndicator color="white" />
              ) : (
                <>
                  <Text className="text-white font-sans-bold text-base mr-2">
                    {loginMode === "email"
                      ? "Sign In"
                      : "Send Verification Code"}
                  </Text>
                  <ArrowRight color="white" size={18} strokeWidth={2.5} />
                </>
              )}
            </Button>
          </View>

          {/* Social / Other */}
          {Platform.OS === "android" && (
            <View className="mt-12">
              <View className="flex-row items-center mb-8">
                <View className="flex-1 h-[1px] bg-border" />
                <Text
                  variant="small"
                  className="mx-4 text-muted-foreground uppercase font-sans-bold tracking-widest text-[10px]"
                >
                  or
                </Text>
                <View className="flex-1 h-[1px] bg-border" />
              </View>

              <View className="flex-row gap-4">
                <Pressable
                  onPress={handleGoogleLogin}
                  disabled={loading}
                  className="flex-1 h-10 border border-border rounded-[6px] items-center justify-center flex-row bg-card"
                >
                  {loading ? (
                    <ActivityIndicator color={isDark ? "white" : "black"} />
                  ) : (
                    <>
                      <Image
                        source={require("@/assets/google-logo.png")}
                        style={{ width: 22, height: 22 }}
                        resizeMode="contain"
                      />
                      <Text className="ml-3 font-sans-bold text-foreground text-base">
                        Continue with Google
                      </Text>
                    </>
                  )}
                </Pressable>
              </View>
            </View>
          )}

          <Pressable
            className="mt-10 items-center justify-center py-2"
            onPress={() => nav.go("register")}
          >
            <Text className="text-muted-foreground">
              Don't have an account?{" "}
              <Text className="text-primary">Create one</Text>
            </Text>
          </Pressable>
        </ScrollView>
      </KeyboardAvoidingView>

      <LanguageModal
        visible={languageModalVisible}
        current={language}
        onSelect={(lang) => setLanguage(lang)}
        onClose={() => setLanguageModalVisible(false)}
      />
    </ScreenWrapper>
  );
}
