'use client'

import React, { useRef, useState } from 'react'
import { motion, useMotionTemplate, useMotionValue, useSpring, useTransform } from 'framer-motion'
import { cn } from '@/lib/utils'

interface HolographicCardProps {
  className?: string
  backgroundImage?: string
}

export function HolographicCard({ 
  className, 
  backgroundImage = "/43/3.jpg",
}: HolographicCardProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isHovered, setIsHovered] = useState(false)
  
  // Set initial mouse values to the center of a 400x600 coordinate space
  // This ensures the card starts perfectly straight
  const mouseX = useMotionValue(200)
  const mouseY = useMotionValue(300)

  const springConfig = { damping: 30, stiffness: 100, mass: 1 }
  const smoothX = useSpring(mouseX, springConfig)
  const smoothY = useSpring(mouseY, springConfig)

  // Tilt Logic (Straight at 200/300)
  const rotateX = useTransform(smoothY, [0, 600], [15, -15])
  const rotateY = useTransform(smoothX, [0, 400], [-15, 15])

  // Internal Parallax - Reduced range so the image doesn't crop
  const bgX = useTransform(smoothX, [0, 400], [10, -10])
  const bgY = useTransform(smoothY, [0, 600], [10, -10])
  
  const contentX = useTransform(smoothX, [0, 400], [-10, 10])
  const contentY = useTransform(smoothY, [0, 600], [-10, 10])

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return
    const rect = containerRef.current.getBoundingClientRect()
    mouseX.set(e.clientX - rect.left)
    mouseY.set(e.clientY - rect.top)
  }

  const handleMouseEnter = () => setIsHovered(true)
  
  const handleMouseLeave = () => {
    setIsHovered(false)
    mouseX.set(200) 
    mouseY.set(300)
  }

  return (
    <div className={cn("relative w-full h-[600px] flex items-center justify-center [perspective:1500px]", className)}>
      <motion.div
        ref={containerRef}
        onMouseMove={handleMouseMove}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        style={{
          rotateX,
          rotateY,
          transformStyle: "preserve-3d",
        }}
        // Smaller card width (max-w-[300px]) to prevent cropping and look more balanced
        className="group relative w-full max-w-[310px] aspect-[3/4.2] rounded-[2.2rem] bg-black border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] will-change-transform overflow-hidden [isolation:isolate]"
      >
        {/* --- LAYER 1: BACKGROUND IMAGE --- */}
        <motion.div
          className="absolute inset-[-5%] z-0 pointer-events-none"
          style={{
            x: bgX,
            y: bgY,
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            // Initially dimmer, becomes vibrant on hover
            filter: isHovered ? "brightness(1.1) saturate(1.2)" : "brightness(0.8) saturate(1)",
            transition: "filter 0.5s ease-out"
          }}
        >
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/20" />
        </motion.div>

        {/* --- LAYER 2: HOLOGRAPHIC SHIMMER --- */}
        <motion.div
          className="absolute inset-0 z-10 pointer-events-none mix-blend-color-dodge opacity-0 group-hover:opacity-100 transition-opacity duration-500"
          style={{
            background: useMotionTemplate`
              radial-gradient(
                600px circle at ${smoothX}px ${smoothY}px,
                rgba(255, 255, 255, 0.3) 0%,
                rgba(0, 240, 255, 0.1) 40%,
                transparent 80%
              )
            `,
          }}
        />

        {/* --- LAYER 3: CRYSTAL GLARE --- */}
        <motion.div
          className="absolute inset-0 z-20 pointer-events-none mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-700"
          style={{
            background: useMotionTemplate`
              linear-gradient(
                135deg,
                transparent 35%,
                rgba(255, 255, 255, 0.4) 50%,
                transparent 65%
              )
            `,
            backgroundSize: "200% 200%",
            backgroundPosition: useMotionTemplate`${useTransform(smoothX, [0, 400], [-100, 100])}% center`,
          }}
        />

        {/* --- LAYER 4: CONTENT --- */}
        <motion.div
          className="relative z-50 w-full h-full p-8 flex flex-col justify-end pointer-events-none"
          style={{ 
            x: contentX, 
            y: contentY, 
            translateZ: "60px",
            transformStyle: "preserve-3d" 
          }}
        >

          <div className="flex justify-between items-end pb-2">
            <div className="flex flex-col gap-1">
              <span className="text-[10px] uppercase tracking-widest text-white/70 font-medium">Card Tier</span>
              <span className="text-xl font-bold text-white tracking-tight drop-shadow-md">
                MYTHIC
              </span>
            </div>
            <div className="w-12 h-12 rounded-full border border-white/30 bg-black/20 backdrop-blur-xl flex items-center justify-center text-xl font-medium text-white shadow-xl">
              ✧
            </div>
          </div>
        </motion.div>

        {/* Final Outer Rim */}
        <div className="absolute inset-0 z-[60] rounded-[2.2rem] border-2 border-white/5 pointer-events-none group-hover:border-white/20 transition-colors duration-500" />
      </motion.div>
    </div>
  )
}