import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

import Image from 'next/image';
import Link from 'next/link';
import { Modal } from '~/components/ui/modal';
import { getAuth } from '~/libs/auth';
import dynamic from 'next/dynamic';

const PagePopupInformation = () => {
  const router = useRouter();
  const isHomePage = router.pathname === '/';
  // Updated to match your URL structure with /shop/product/
  const isProductDetail = router.pathname.includes('/shop/product/');
  const auth = getAuth();
  const [active, setActive] = useState<boolean>(false);
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [hasClosedPopup, setHasClosedPopup] = useState<boolean>(false);

  useEffect(() => {
    // Check if user has closed the popup in this session
    const popupClosed = sessionStorage.getItem('popupClosed');
    if (popupClosed) {
      setHasClosedPopup(true);
    }
  }, []);

  useEffect(() => {
    const getData = async () => {
      const res = await fetch(`/api/hero-banner?type=popup-banner`);
      const { data } = await res.json();
      if (data) {
        setData(data);
      }
      setLoading(false);
    };

    // Show popup if user is on homepage OR product detail page AND not authenticated AND hasn't closed popup
    if ((isHomePage || isProductDetail) && !auth && !hasClosedPopup) {
      setActive(true);
      getData();
    }
  }, [isHomePage, isProductDetail, auth, hasClosedPopup]);

  const handleClose = () => {
    setActive(false);
    // Set session storage to remember user closed the popup
    sessionStorage.setItem('popupClosed', 'true');
  };

  return (
    <div className='group'>
      {data && !loading && (
        <Modal
          active={active}
          className='!w-fit !bg-transparent !border-none overflow-hidden'
          close={handleClose}
          mode='desktop'
        >
          <div className='w-[350px] md:w-[530px]' onClick={handleClose}>
            <Link
              href={data[0].url === false ? '/' : data[0].url}
              aria-label='popup'
            >
              <Image
                src={data[0]?.image}
                alt={data[0]?.name}
                width={1152}
                height={768}
                loading='eager'
                sizes='(max-width: 768px) 100vw, 50vw'
                priority={true}
              />
            </Link>
          </div>
        </Modal>
      )}
    </div>
  );
};

export default PagePopupInformation;