import { useEffect, useRef, useState } from "react"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"

export function ScrollingBookCard({
  title,
  number,
  coverImage,
  description,
  comingSoon = false,
  isLast = false,
}: {
  title: string
  number: number
  coverImage?: string
  description?: string
  comingSoon?: boolean
  isLast?: boolean
}) {
  const cardRef = useRef<HTMLDivElement>(null)
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const handleScroll = () => {
      if (!cardRef.current) return
      const rect = cardRef.current.getBoundingClientRect()
      const windowHeight = window.innerHeight
      const cardCenter = rect.top + rect.height / 2
      const viewportCenter = windowHeight / 2
      const distance = cardCenter - viewportCenter
      const maxDistance = windowHeight
      const prog = 1 - Math.min(Math.abs(distance) / maxDistance, 1)
      setProgress(prog)
    }

    window.addEventListener("scroll", handleScroll, { passive: true })
    handleScroll()
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    <div
      ref={cardRef}
      className="w-full max-w-md transition-all duration-300"
      style={{
        opacity: 0.3 + progress * 0.7,
        transform: `scale(${0.9 + progress * 0.1}) translateY(${(1 - progress) * 20}px)`,
      }}
    >
      <div className="flex items-center gap-4 mb-8">
        <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-amber-900/40 border border-amber-700/30 text-amber-300/80 font-serif text-lg">
          {number}
        </span>
        <div className="flex-1 h-px bg-gradient-to-r from-amber-700/30 to-transparent" />
      </div>

      <div className="group relative mb-8">
        <div className="absolute -inset-4 bg-amber-600/10 blur-2xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700" />

        <div className="relative">
          <div className="absolute -bottom-4 left-1/2 -translate-x-1/2 w-3/4 h-8 bg-black/40 blur-xl rounded-full transition-all duration-500 group-hover:w-full" />

          <div
            className={cn(
              "relative w-full aspect-[2/3] max-w-xs mx-auto",
              "transition-all duration-700 ease-out",
              "group-hover:-translate-y-3 group-hover:rotate-1",
            )}
          >
            <div className="absolute top-2 -right-2 bottom-2 w-3 bg-gradient-to-r from-stone-300 to-stone-200 rounded-r-sm" />
            <div className="absolute top-2 -right-1 bottom-2 w-1 bg-stone-400/30" />

            <div
              className={cn(
                "relative w-full h-full overflow-hidden rounded-sm",
                "shadow-[8px_8px_30px_rgba(0,0,0,0.4)]",
                "transition-shadow duration-700",
                "group-hover:shadow-[12px_16px_40px_rgba(0,0,0,0.5)]",
                comingSoon ? "bg-stone-900" : "bg-stone-200",
              )}
            >
              <div className="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-black/30 via-black/10 to-transparent z-10" />

              {coverImage && !comingSoon ? (
                <img
                  src={coverImage || "/placeholder.svg"}
                  alt={title}
                  className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                />
              ) : (
                <div className="flex flex-col items-center justify-center h-full p-6 text-center">
                  <span className="text-amber-100/80 font-serif text-lg mb-4 leading-tight">{title}</span>
                  <div className="w-12 h-px bg-amber-100/30 mb-3" />
                  <span className="text-amber-100/40 text-xs tracking-[0.2em] uppercase">
                    {comingSoon ? "Coming Soon" : "TBA"}
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="text-center">
        <h3 className="font-serif text-2xl md:text-3xl text-amber-100/90 tracking-[0.05em]">{title}</h3>
        {description && <p className="mt-4 text-amber-200/50 leading-relaxed">{description}</p>}
        {!comingSoon && (
          <a
            href="#"
            className="inline-flex items-center gap-2 mt-6 text-amber-400/70 hover:text-amber-300 text-sm tracking-wide transition-colors group/link"
          >
            <span>Read more</span>
            <span className="transition-transform group-hover/link:translate-x-1">→</span>
          </a>
        )}
      </div>

      {!isLast && (
        <div className="flex justify-center mt-12">
          <ChevronDown className="w-5 h-5 text-amber-500/30 animate-bounce" />
        </div>
      )}
    </div>
  )
}
