import { X, ChevronRight, ChevronLeft } from "lucide-react";
import React, { useState, useEffect } from "react";

const styles: any = {
  navLeft: {
    position: "absolute",
    left: 12,
    top: "50%",
    transform: "translateY(-50%)",
    width: 40,
    height: 40,
    borderRadius: 12,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: 28,
    color: "#fff",
    background: "rgba(0,0,0,0.4)",
    border: "1px solid rgba(255,255,255,0.15)",
    cursor: "pointer",
    backdropFilter: "blur(8px)",
    transition: "all 0.2s ease",
  },

  navRight: {
    position: "absolute",
    right: 12,
    top: "50%",
    transform: "translateY(-50%)",
    width: 40,
    height: 40,
    borderRadius: 12,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: 28,
    color: "#fff",
    background: "rgba(0,0,0,0.4)",
    border: "1px solid rgba(255,255,255,0.15)",
    cursor: "pointer",
    backdropFilter: "blur(8px)",
    transition: "all 0.2s ease",
  },
  
  // Optional: Add hover effects for better UX
  navHover: {
    background: "rgba(255,255,255,0.2)",
    transform: "translateY(-50%) scale(1.05)",
  },
};

function ImagePreviewModal({ images, activeIndex, setActiveIndex, onClose }: any) {
  const [isHoveringLeft, setIsHoveringLeft] = useState(false);
  const [isHoveringRight, setIsHoveringRight] = useState(false);
  
  const current = images?.[activeIndex];
  console.log('^^^^^^^', images, activeIndex, current)
  const prev = () => {
    setActiveIndex((i: number) =>
      i === 0 ? images.length - 1 : i - 1
    );
  };

  const next = () => {
    setActiveIndex((i: number) =>
      i === images.length - 1 ? 0 : i + 1
    );
  };

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
      if (e.key === "Escape") onClose();
    };

    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [images]);

  if (!current) return null;

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/85 p-3 overflow-auto" onClick={onClose}>
      <div className="relative max-w-[100%] sm:max-w-[380px] sm:min-w-[380px] m-auto p-1 rounded-2xl dark:bg-[rgba(20,20,20,0.50)] bg-[rgba(255,255,255,1)] shadow-[0_25px_80px_rgba(0,0,0,0.8)] backdrop-blur-[12px] border border-white/10 flex items-center justify-center" onClick={(e) => e.stopPropagation()}>

        {/* Title */}
        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 text-white text-sm font-medium bg-black/40 px-3 py-1.5 rounded-[10px] backdrop-blur-[8px]">
          {current.name || "Untitled"}          
        </div>

        <X 
          onClick={onClose} 
          style={{
            position: "absolute",
            top: 12,
            right: 12,
            color: "#fff",
            cursor: "pointer",
            background: "rgba(0,0,0,0.4)",
            borderRadius: 8,
            padding: 4,
            width: 28,
            height: 28,
          }} 
        />

        {/* Image with fixed height */}
        <img
          src={current.src || "/placeholder.png"}
          alt={current.name || "Product image"}
          className="max-w-full rounded-[10px] object-contain"
        />

        {/* Navigation Buttons */}
        <button 
          style={{
            ...styles.navLeft,
            ...(isHoveringLeft && styles.navHover)
          }}
          onClick={prev}
          onMouseEnter={() => setIsHoveringLeft(true)}
          onMouseLeave={() => setIsHoveringLeft(false)}
        >
          <ChevronLeft />
        </button>
        
        <button 
          style={{
            ...styles.navRight,
            ...(isHoveringRight && styles.navHover)
          }}
          onClick={next}
          onMouseEnter={() => setIsHoveringRight(true)}
          onMouseLeave={() => setIsHoveringRight(false)}
        >
          <ChevronRight />
        </button>

        {/* Optional: Image counter */}
        <div className="absolute top-4 left-4 text-white text-xs bg-black/50 px-2 py-1 rounded-md">
          {activeIndex + 1} / {images.length}
        </div>
      </div>
    </div>
  );
}

export default ImagePreviewModal;