import { useOAuth } from "@/hooks";
import { OAuthProvider } from "@/types";
import Constants from "expo-constants";
import * as WebBrowser from "expo-web-browser";
import React, { useCallback, useEffect } from "react";
import { ActivityIndicator, Alert, Image, Modal, Platform, Text, View } from "react-native";
import { ExternalLink } from "../ExternalLink";
import LoginButton from "../ui/LoginButton";
import { styles } from "./styles";
import { SignInModalProps } from "./types";

const WEB_URL = Constants.expoConfig?.extra?.clientUrl; // 웹 URL을 환경 변수에서 가져옴

export default function SignInModal({
    visible,
    onSuccess,
    onError,
    onClose,
}: SignInModalProps) {
    const { isLoading, startGoogleLogin, startAppleLogin } = useOAuth({ onSuccess, onError });

    const handleClose = useCallback(() => {
        if (isLoading) return; // 로딩 중에는 닫기 방지

        onClose?.();
    }, [onClose, isLoading]);

    useEffect(() => {
        WebBrowser.maybeCompleteAuthSession();
    }, []);

    return (
        <Modal
            visible={visible}
            transparent={true}
            animationType="fade"
            statusBarTranslucent={true}
            onRequestClose={handleClose}
        >
            <View style={styles.container}>
                <View style={styles.modalContent}>
                    {/* 로딩 오버레이 */}
                    {isLoading && (
                        <View style={styles.loadingOverlay}>
                            <ActivityIndicator size="large" />
                            <Text style={styles.loadingText}>Signing in...</Text>
                        </View>
                    )}

                    <Text style={styles.title}>Welcome to Ramble!</Text>

                    {/* 앱 로고 */}
                    <Image
                        source={require("../../assets/images/react-logo.png")} // TODO: 추후 로고 변경
                        style={styles.logo}
                    />

                    {/* 로그인 버튼 */}
                    <LoginButton
                        provider={OAuthProvider.GOOGLE}
                        onPress={startGoogleLogin}
                        isDisabled={isLoading}
                    />
                    <LoginButton
                        provider={OAuthProvider.APPLE}
                        onPress={() => {
                            if (Platform.OS === "web") {
                                window.alert("Apple Sign in will be available soon");
                            } else {
                                Alert.alert("Apple Sign in will be available soon");
                            }
                        }} // TODO: 추후 startAppleLogin으로 변경
                        isDisabled={isLoading}
                    />

                    {/* 약관 동의 */}
                    <Text style={styles.termsText}>
                        I confirm that I am at least 18 years old.
                        {"\n"}
                        I accept{" "}
                        <ExternalLink href={`${WEB_URL}/terms` as any} style={styles.link}>
                            <Text>User Agreement</Text>
                        </ExternalLink>
                    </Text>
                </View>
            </View>
        </Modal>
    );
}