"use client"

import React, { useEffect, useRef, useState } from "react"

export default function LadderClimb() {
  const charRef = useRef<HTMLDivElement>(null)
  const ladderRef = useRef<HTMLDivElement>(null)

  const [animation, setAnimation] = useState<"idle" | "climbing">("idle")
  const [visible, setVisible] = useState(true)

  const ladderHeight = useRef(0)
  const scrollTimeout = useRef<any>(null)

  const updateDimensions = () => {
    if (ladderRef.current) {
      ladderHeight.current = ladderRef.current.clientHeight
    }
    if (charRef.current) {
      charRef.current.style.transform = `translateY(0px)`
    }
  }

  useEffect(() => {
    updateDimensions()
    setAnimation("idle")

    window.addEventListener("resize", updateDimensions)

    const handleScroll = () => {
      if (!charRef.current || !ladderRef.current) return

      // show ladder & climbing animation
      setVisible(true)
      setAnimation("climbing")

      const scrollTop = window.scrollY
      const docHeight = document.body.scrollHeight
      const viewportHeight = window.innerHeight

      let progress = scrollTop / (docHeight - viewportHeight)
      progress = Math.max(0, Math.min(1, progress))

      const topOffset = 174
      const bottomOffset = 30
      const maxClimb = ladderHeight.current - topOffset - bottomOffset

      const y = progress * maxClimb
      charRef.current.style.transform = `translateY(-${y}px)`

      // hide smoothly after scroll stops
      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
      scrollTimeout.current = setTimeout(() => {
        setAnimation("idle")
        setVisible(false)
      }, 500)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
      window.removeEventListener("resize", updateDimensions)
      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
    }
  }, [])

  return (
    <>
      {/* Ladder container */}
      <div
        ref={ladderRef}
        style={{
          position: "fixed",
          right: 0,
          top: 80,
          height: "100vh",
          width: "100px",
          display: "flex",
          justifyContent: "center",
          alignItems: "flex-end",
          zIndex: 999,

          // smooth hide / show
          opacity: visible ? 1 : 0,
          transform: visible ? "translateX(0)" : "translateX(40px)",
          pointerEvents: visible ? "auto" : "none",
          transition: "opacity 0.8s ease, transform 0.8s ease"
        }}
      >
        {/* Ladder background */}
        <div
          style={{
            height: "100%",
            width: "40px",
            background:
              "repeating-linear-gradient(to bottom, #666 0, #666 8px, transparent 8px, transparent 30px)",
            borderLeft: "8px solid #666",
            borderRight: "8px solid #666",
            zIndex: 1
          }}
        />

        {/* Character */}
        <div
          ref={charRef}
          style={{
            position: "absolute",
            bottom: 45,
            left: "50%",
            marginLeft: "-100px",
            width: "200px",
            zIndex: 10,
            willChange: "transform",
            transition: "transform 0.15s linear"
          }}
        >
          {/* CLIMBING */}
          {animation === "climbing" && (
            <img
              src="./climber21.png"
              alt="Climbing"
              style={{ width: "400px", height: "200px" }}
            />
          )}

          {/* IDLE */}
          {animation === "idle" && (
            <img
              src="./Idle3.png"
              alt="Idle"
              style={{
                marginLeft: "10px",
                width: "400px",
                height: "200px"
              }}
            />
          )}
        </div>
      </div>
    </>
  )
}