import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { showNotification } from '@mantine/notifications';
import FacebookLogin from '@greatsumini/react-facebook-login';
import { jwtDecode } from 'jwt-decode';
import Cookies from 'js-cookie';
import { Box } from '@mantine/core';
import { __ } from '@wordpress/i18n';

import { setUser } from '../../store/auth/userSlice';
import { facebookSignIn } from '../../services/AuthService';
import { onSignInSuccess, setLoggedInUser, setToken, setXWpNonce } from '../../store/auth/sessionSlice';
import appConfig from '../../configs/app.config';

const LoginWithFacebook = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const socialLoginConfiguration = useSelector((state) => state.settings.setting.socialLoginConfiguration);

    const appId = socialLoginConfiguration?.facebook?.app_id || '';

    const handleSuccess = async (response) => {
        const accessToken = response?.accessToken;
        if (!accessToken) {
            showNotification({
                title: __('Login Failed', 'lazytasks-project-task-management'),
                message: __('Facebook did not return an access token.', 'lazytasks-project-task-management'),
                color: 'red',
            });
            return;
        }

        const result = await facebookSignIn({ token: accessToken });

        if (!result || result.status !== 200 || result.code !== 'is_valid' || !result.token) {
            const errorMsg = result?.message || result?.error || __('Something went wrong', 'lazytasks-project-task-management');
            showNotification({
                title: __('Login Failed', 'lazytasks-project-task-management'),
                message: errorMsg,
                color: 'red',
            });
            return;
        }

        const { token, nonce } = result;
        if (token) {
            dispatch(onSignInSuccess(token));
            dispatch(setToken(token));
            dispatch(setXWpNonce(nonce));
            const decode_token = jwtDecode(token);
            if (decode_token.iss === appConfig.liveSiteUrl) {
                const userData = decode_token.data;

                const user = {
                    "authority": userData.roles,
                    "loggedUserId": userData.user_id,
                    "name": userData.name,
                    "email": userData.email,
                    "roles": userData.roles,
                    "llc_roles": userData.llc_roles,
                    "llc_permissions": userData.llc_permissions,
                    "avatar": userData.avatar,
                    "is_superadmin": userData.is_superadmin ?? false,
                    "project_roles": userData.project_roles || []
                };
                dispatch(setLoggedInUser(user || {}));
                Cookies.set('user_id', userData.user_id);
                dispatch(
                    setUser(
                        user || {
                            avatar: '',
                            loggedUserId: '',
                            name: '',
                            authority: [],
                            email: '',
                            roles: [],
                            llc_roles: [],
                            llc_permissions: [],
                        }
                    )
                );
                navigate(appConfig.authenticatedEntryPath);
                return result;
            }
        }
    };

    const handleFail = (error) => {
        console.error('Facebook login failed:', error);
        showNotification({
            title: __('Login Failed', 'lazytasks-project-task-management'),
            message: __('An error occurred during Facebook login. Please try again.', 'lazytasks-project-task-management'),
            color: 'red',
            autoClose: 2000,
        });
    };

    if (!appId) {
        return null;
    }

    return (
        <Box
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                width: '100%',
            }}
        >
            <FacebookLogin
                appId={appId}
                onSuccess={handleSuccess}
                onFail={handleFail}
                scope="email,public_profile"
                style={{
                    backgroundColor: '#1877F2',
                    color: '#fff',
                    fontSize: '14px',
                    fontWeight: 500,
                    padding: '10px 16px',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    width: '100%',
                }}
            >
                {__( 'Continue with Facebook', 'lazytasks-project-task-management' )}
            </FacebookLogin>
        </Box>
    );
};

export default LoginWithFacebook;