import { Box, Button, Divider, Typography } from '@mui/material';
import logo from '../../../assets/images/logo/BSmart_Logo.svg';
import approveIcon from '../../../assets/images/icon/Approve.svg';
import expiredIcon from '../../../assets/images/icon/Expired.svg';
import { useStyles } from '../userStyles';
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import {
  approveAdminTransferAccess,
  logout,
} from '../../../services/users.services';
import Loader from '../../../components/Loader';

function AdminTransferRequestApprove() {
  const classes = useStyles();
  const location = useLocation();
  const navigate = useNavigate();
  const [approveUI, setApproveUI] = useState(false);
  const [loading, setLoading] = useState(false);

  const iconSrc = approveUI ? approveIcon : expiredIcon;
  const message = approveUI
    ? 'Your confirmation for Master Admin account transfer has been successfully accepted. The transfer ownership will be completed once, its approved by the other party as well.'
    : 'Link has expired. Please reinitiate the Master Admin account transfer process.';
  const statusText = approveUI ? 'Verification successful' : 'Link Expired';

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const urlParams = new URLSearchParams(location.search);
      const id = parseInt(urlParams.get('id'));
      const token = urlParams.get('token');
      if (id && token) {
        try {
          const response = await approveAdminTransferAccess(id, token);
          if (response.status === 200) {
            setApproveUI(true);
            await logout();
          } else {
            setApproveUI(false);
          }
        } catch (error) {
          // eslint-disable-next-line no-console
          console.error('Error:', error);
        } finally {
          setLoading(false);
        }
      }
    };

    fetchData();
  }, []);

  return (
    <Box>
      <Box className={classes.adminTransferRequestApproveImageDiv}>
        <img src={logo} alt="BSmart Logo" />
      </Box>
      <Divider />
      {loading ? (
        <Loader />
      ) : (
        <Box className={classes.adminTransferRequestApproveBody}>
          <Box className={classes.adminTransferRequestApproveIconGroup}>
            <img
              className={classes.adminTransferRequestApproveIcon}
              src={iconSrc}
              alt={statusText}
            />
            <Box
              className={
                classes.adminTransferRequestApproveVerificationSuccessfulText
              }
            >
              <Typography
                variant="Inter-SemiBold"
                className={classes.adminTransferRequestApproveText}
              >
                {statusText}
              </Typography>
            </Box>
          </Box>
          <Box className={classes.adminTransferRequestApproveContent}>
            {message}
          </Box>
          <Box>
            <Button
              variant="contained"
              className={classes.loginButton}
              onClick={() => navigate('/auth/login')}
            >
              Login to BSmart Jobs
            </Button>
          </Box>
        </Box>
      )}
    </Box>
  );
}

export default AdminTransferRequestApprove;
