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

const styles: any = {
  overlay: {
    position: "absolute",
    inset: 0,
    background: "rgba(0,0,0,0.85)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    zIndex: 9999,
  },

  modal: {
    position: "absolute",
    maxWidth: "92vw",
    maxHeight: "88vh",
    padding: "50px 16px 16px 16px",
    borderRadius: "16px",
    background: "rgba(20, 20, 20, 0.6)",
    boxShadow: "0 25px 80px rgba(0,0,0,0.8)",
    backdropFilter: "blur(12px)",
    border: "1px solid rgba(255,255,255,0.08)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },

  title: {
    position: "absolute",
    top: 12,
    left: "50%",
    transform: "translateX(-50%)",
    color: "#fff",
    fontSize: 14,
    fontWeight: 500,
    background: "rgba(0,0,0,0.4)",
    padding: "6px 12px",
    borderRadius: 10,
    backdropFilter: "blur(8px)",
  },

  image: {
    maxWidth: "100%",
    height: "500px", // Fixed height
    borderRadius: 10,
    objectFit: "contain", // Maintains aspect ratio within fixed height
  },

  navLeft: {
    position: "absolute",
    left: 12,
    top: "50%",
    transform: "translateY(-50%)",
    width: 44,
    height: 44,
    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: 44,
    height: 44,
    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];

  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 style={styles.overlay} onClick={onClose}>
      <div style={styles.modal} onClick={(e) => e.stopPropagation()}>

        {/* Title */}
        <div style={styles.title}>
          {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"}
          style={styles.image}
        />

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

        {/* Optional: Image counter */}
        <div style={{
          position: "absolute",
          bottom: 16,
          right: 16,
          color: "#fff",
          fontSize: 12,
          background: "rgba(0,0,0,0.5)",
          padding: "4px 8px",
          borderRadius: 6,
        }}>
          {activeIndex + 1} / {images.length}
        </div>
      </div>
    </div>
  );
}

export default ImagePreviewModal;