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 { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { Mail, Lock, ArrowRight, Eye, EyeOff, Chrome, User, Globe } 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";
import {
  GoogleSignin,
  statusCodes,
} from "@react-native-google-signin/google-signin";

GoogleSignin.configure({
  webClientId:
    "1028200585478-cnp6lpmp75mj4b79pnijiefv5rl1etqi.apps.googleusercontent.com",
  iosClientId:
    "1028200585478-cnp6lpmp75mj4b79pnijiefv5rl1etqi.apps.googleusercontent.com", // Placeholder: replace with your actual iOS Client ID from Google Cloud Console
  offlineAccess: true,
});

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 handleLogin = async () => {
    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: identifier, password };

    try {
      // Using the new api.auth.login which is powered by simple-api
      const response = await api.auth.login({ body: payload });

      // Store user, access token, refresh token, and permissions
      // // 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[] = [];

      // Store user, access token, refresh token, and permissions
      setAuth(response.user, response.accessToken, response.refreshToken, permissions);
      toast.success("Welcome Back!", "You have successfully logged in.");

      // Explicitly navigate to home
      nav.go("(tabs)");
    } catch (err: any) {
      toast.error("Login Failed", err.message || "Invalid credentials");
    } finally {
      setLoading(false);
    }
  };

  const handleGoogleLogin = async () => {
    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-10">
            <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>

          {/* Form */}
          <View className="gap-5">
            <View>
              <Text variant="small" className="font-semibold mb-2 ml-1">
                Email or Phone Number
              </Text>
              <View className="flex-row items-center rounded-xl px-4 border border-border h-12">
                <User size={18} color={isDark ? "#94a3b8" : "#64748b"} />
                <TextInput
                  className="flex-1 ml-3 text-foreground"
                  placeholder="john@example.com or +251..."
                  placeholderTextColor={getPlaceholderColor(isDark)}
                  value={identifier}
                  onChangeText={setIdentifier}
                  autoCapitalize="none"
                />
              </View>
            </View>

            <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">
                    Sign In
                  </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>
  );
}