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 * 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;
  googleAvailable = true;

  GoogleSignin.configure({
    webClientId:
      "377689842258-42ofqmfhf61p03jamlr5nfi18ovqehvf.apps.googleusercontent.com",
    offlineAccess: true,
  });
} 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 },
        });
      } 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.");
      nav.go("(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();
      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.");
      nav.go("(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: 10 }}
          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-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-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-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-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-bold">+251</Text>
                  </View>
                )}
                <TextInput
                  className="flex-1 ml-3 text-foreground"
                  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}
                />
              </View>
            </View>

            {loginMode === "email" && (
              <View>
                <Text variant="small" className="font-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"
                    placeholder="••••••••"
                    placeholderTextColor={getPlaceholderColor(isDark)}
                    value={password}
                    onChangeText={setPassword}
                    secureTextEntry={!showPassword}
                  />
                  <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-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 */}
          <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-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-bold text-foreground text-base">
                      Continue with Google
                    </Text>
                  </>
                )}
              </Pressable>
            </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>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>

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