import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ProfileImage } from '../../assets/images';
import { FaUserCircle, FaBuilding } from 'react-icons/fa';

const Profile = () => {
  const [show, setShow] = useState(false);
  const [modalPosition, setModalPosition] = useState({});
  const [isMobile, setIsMobile] = useState(false);
  const navigate = useNavigate();

  const handleClose = () => setShow(false);

  const handleShow = (event) => {
    if (!isMobile) {
      const rect = event.currentTarget.getBoundingClientRect();
      setModalPosition({
        top: rect.bottom + window.scrollY - 31,
        left: rect.left + rect.width / 2 + 274,
      });
    } else {
      setModalPosition({
        top: window.scrollY + window.innerHeight / 2 - 150,
        left: window.innerWidth / 2 - 2,
      });
    }
    setShow(true);
  };

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const handleNavigation = (path) => {
    setShow(false);
    navigate(path);
  };

  return (
    <>
      <div
        className="profile-section"
        style={styles.container}
        onClick={handleShow}
      >
        <img
          src={ProfileImage}
          alt="Profile"
          className="profile-image"
          style={styles.image}
        />
        <span className="profile-name" style={styles.name}>
          Alexander Pierce
        </span>
      </div>

      {show && (
        <div
          style={{
            ...styles.modalContainer,
            ...modalPosition,
          }}
        >
          <div style={styles.modal}>
            <button
              style={styles.closeButton}
              onClick={handleClose}
            >
              ×
            </button>
            <div style={styles.modalContent}>
              <img
                src={ProfileImage}
                alt="Profile"
                style={styles.modalImage}
              />
              <h5>Murtadi Mujaidi</h5>
              <p>Mujaidi@gmail.com</p>
              <hr />
              <div
                style={styles.navItem}
                onClick={() => handleNavigation('/my-account')}
              >
                <FaUserCircle style={styles.icon} />
                <p style={styles.navText}>My Account</p>
              </div>
              <div
                style={styles.navItem}
                onClick={() => handleNavigation('/company-access')}
              >
                <FaBuilding style={styles.icon} />
                <p style={styles.navText}>Company Access</p>
              </div>
              <div style={styles.accessButtons}>
                <button
                  style={styles.productionButton}
                  onClick={() => handleNavigation('/production')}
                >
                  PRODUCTION
                </button>
                <button
                  style={styles.trialButton}
                  onClick={() => handleNavigation('/trial')}
                >
                  TRIAL
                </button>
              </div>
            </div>
            <button
              style={styles.logoutButton}
              onClick={handleClose}
            >
              Log Out
            </button>
          </div>
        </div>
      )}
    </>
  );
};

export default Profile;

const styles = {
  container: {
    padding: '10px',
    display: 'flex',
    alignItems: 'center',
    marginTop: '2vh',
    cursor: 'pointer',
  },
  image: {
    width: '40px',
    height: '40px',
    borderRadius: '50%',
    marginRight: '10px',
  },
  name: {
    fontWeight: 'bold',
  },
  modalContainer: {
    position: 'absolute',
    zIndex: 1050,
    transform: 'translateX(-50%)',
    width: '300px',
  },
  modal: {
    backgroundColor: '#fff',
    borderRadius: '8px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    padding: '20px',
    textAlign: 'center',
  },
  closeButton: {
    position: 'absolute',
    top: '10px',
    right: '10px',
    background: 'transparent',
    border: 'none',
    fontSize: '18px',
    cursor: 'pointer',
  },
  modalContent: {
    textAlign: 'center',
  },
  modalImage: {
    width: '80px',
    height: '80px',
    borderRadius: '50%',
    marginBottom: '15px',
  },
  navItem: {
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    borderBottom: '1px solid #ddd',
  },
  icon: {
    marginRight: '10px',
    fontSize: '20px',
    color: '#4F75FF',    
  },
  navText: {
    fontSize: '16px',
    color: '#333',
    marginTop: '0.8rem'
  },
  accessButtons: {
    display: 'flex',
    justifyContent: 'center',
    gap: '10px',
    marginTop: '20px',
  },
  productionButton: {
    backgroundColor: '#8BE8AB',
    color: '#000',
    border: 'none',
    borderRadius: '4px',
    padding: '8px 20px',
    fontWeight: 'bold',
    cursor: 'pointer',
  },
  trialButton: {
    backgroundColor: '#ddd',
    color: '#333',
    border: 'none',
    borderRadius: '4px',
    padding: '8px 20px',
    fontWeight: 'bold',
    cursor: 'pointer',
  },
  logoutButton: {
    marginTop: '20px',
    width: '100%',
    backgroundColor: '#0542cc',
    color: '#fff',
    border: 'none',
    borderRadius: '4px',
    padding: '10px 0',
    fontWeight: 'bold',
    cursor: 'pointer',
  },
};
