import { useRouter } from 'next/router';
import { useEffect, useState, useRef } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { getAuth } from '~/libs/auth';
import { X } from 'lucide-react';

const PagePopupInformation = () => {
  const router = useRouter();
  const isHomePage = router.pathname === '/';
  const auth = getAuth();

  const [active, setActive] = useState(false);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  const popupRef = useRef(null);
  const [position, setPosition] = useState({ x: 20, y: window.innerHeight - 170 });
  const dragStartPos = useRef({ x: 0, y: 0 });
  const isDragging = useRef(false);
  const isTouching = useRef(false);

  const [isSnapping, setIsSnapping] = useState(false); // 🔥 Penanda kapan transisi diaktifkan

  const [containerLeft, setContainerLeft] = useState(0);

  const updateContainerLeft = () => {
    const container = document.querySelector('.container');
    if (container) {
      const left = container.getBoundingClientRect().left;
      setContainerLeft(left);
    }
  };

  useEffect(() => {
    updateContainerLeft();

    window.addEventListener('resize', updateContainerLeft);
    window.addEventListener('scroll', updateContainerLeft);

    return () => {
      window.removeEventListener('resize', updateContainerLeft);
      window.removeEventListener('scroll', updateContainerLeft);
    };
  }, []);

  useEffect(() => {
    const getData = async () => {
      try {
        const res = await fetch(`/api/hero-banner?type=dragable-banner`);
        const { data } = await res.json();
        if (Array.isArray(data) && data.length > 0 && data[0]?.image) {
          setData(data);
        } else {
          setActive(false);
        }
      } catch (error) {
        console.error('Failed to fetch popup banner:', error);
      }
      setLoading(false);
    };

    if (isHomePage && !auth) {
      setActive(true);
      getData();
    }
  }, [isHomePage, auth]);

  useEffect(() => {
    const handleGlobalTouchMove = (e) => {
      if (isTouching.current) {
        e.preventDefault();
        isDragging.current = true;
        setIsSnapping(false); // 🔥 Matikan transisi saat drag

        let newX = e.touches[0].clientX - dragStartPos.current.x;
        let newY = e.touches[0].clientY - dragStartPos.current.y;

        const popupWidth = popupRef.current?.offsetWidth || 0;
        const popupHeight = popupRef.current?.offsetHeight || 0;
        const maxX = window.innerWidth - popupWidth - 20;
        const maxY = window.innerHeight - popupHeight - 20;

        newX = Math.max(0, Math.min(newX, maxX));
        newY = Math.max(0, Math.min(newY, maxY));

        setPosition({ x: newX, y: newY });
      }
    };

    const handleGlobalTouchEnd = () => {
      if (isDragging.current) {
        const popupWidth = popupRef.current?.offsetWidth || 0;
        const screenMiddle = window.innerWidth / 2;

        setIsSnapping(true); // 🔥 Aktifkan transisi saat snap

        if (position.x + popupWidth / 2 < screenMiddle) {
          // Snap ke kiri
          setPosition({ x: 20, y: position.y });
        } else {
          // Snap ke kanan
          setPosition({ x: window.innerWidth - popupWidth - 20, y: position.y });
        }
      }

      isTouching.current = false;
      isDragging.current = false;
    };

    window.addEventListener('touchmove', handleGlobalTouchMove, { passive: false });
    window.addEventListener('touchend', handleGlobalTouchEnd);

    return () => {
      window.removeEventListener('touchmove', handleGlobalTouchMove);
      window.removeEventListener('touchend', handleGlobalTouchEnd);
    };
  }, [position]);

  const handleMouseDown = (e) => {
    e.preventDefault();
    dragStartPos.current = { x: e.clientX - position.x, y: e.clientY - position.y };
    isDragging.current = false;
    setIsSnapping(false); // 🔥 Matikan transisi saat drag

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e) => {
    isDragging.current = true;

    let newX = e.clientX - dragStartPos.current.x;
    let newY = e.clientY - dragStartPos.current.y;

    const popupWidth = popupRef.current?.offsetWidth || 0;
    const popupHeight = popupRef.current?.offsetHeight || 0;
    const maxX = window.innerWidth - popupWidth - 20;
    const maxY = window.innerHeight - popupHeight - 20;

    newX = Math.max(0, Math.min(newX, maxX));
    newY = Math.max(0, Math.min(newY, maxY));

    setPosition({ x: newX, y: newY });
  };

  const handleMouseUp = () => {
    if (isDragging.current) {
      const popupWidth = popupRef.current?.offsetWidth || 0;
      const screenMiddle = window.innerWidth / 2;

      setIsSnapping(true); // 🔥 Aktifkan transisi saat snap

      if (position.x + popupWidth / 2 < screenMiddle) {
        // Snap ke kiri
        setPosition({ x: 20, y: position.y });
      } else {
        // Snap ke kanan
        setPosition({ x: window.innerWidth - popupWidth - 20, y: position.y });
      }
    }

    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);

    isDragging.current = false;
  };

  const handleTouchStart = (e) => {
    if (e.touches.length === 1) {
      dragStartPos.current = { x: e.touches[0].clientX - position.x, y: e.touches[0].clientY - position.y };
      isDragging.current = false;
      isTouching.current = true;
      setIsSnapping(false); // 🔥 Matikan transisi saat drag
    }
  };

  if (!active || !data || loading || !Array.isArray(data) || !data[0]?.image) return null;

  const banner = data[0];

  return (
    <div className="fixed top-[50px] left-[120px] z-[9999] pointer-events-none"
        style={{
        top: '50px',
        left: `${containerLeft - 125}px`,
      }}>
      <div
        ref={popupRef}
        className={`absolute pointer-events-auto ${isSnapping ? 'transition-transform duration-300 ease-out' : ''}`}
        style={{
          transform: `translate(${position.x}px, ${position.y}px)`,
          cursor: 'grab',
          width: '85px',
        }}
      >
        <div className="relative w-full h-auto">
          <div
            onMouseDown={handleMouseDown}
            onTouchStart={handleTouchStart}
            className="cursor-grab active:cursor-grabbing"
          >
            <Link
              href={typeof banner.url === 'boolean' && banner.url === false ? '/' : banner.url}
              onClick={(e) => {
                if (isDragging.current) {
                  e.preventDefault();
                  isDragging.current = false;
                } else {
                  setActive(false);
                }
              }}
              draggable="false"
            >
              <Image
                src={banner.image}
                alt={banner.name || 'popup'}
                width={85}
                height={85}
                className="w-full h-auto select-none"
                draggable="false"
              />
            </Link>
          </div>

          <button
            onClick={() => setActive(false)}
            className="absolute -top-2 -right-2 z-10 p-1 bg-gray-500 rounded-full hover:bg-gray-600 transition-colors"
            aria-label="Close popup"
          >
            <X className="w-3 h-3 text-white" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default PagePopupInformation;