import { useEffect, useState } from "react";
import "./ScrollCandle.css";

// Space taken by flame + wick + base + label + bottom offset + header (ticker 36 + AppBar 76) + safety gap
const NON_BODY_HEIGHT = 70 + 8 + 10 + 24 + 40 + 112 + 16;
const CANDLE_MIN_HEIGHT = 14; // px — almost fully melted

export function ScrollCandle() {
  const [maxHeight, setMaxHeight] = useState(
    () => Math.max(200, window.innerHeight - NON_BODY_HEIGHT)
  );
  const [candleHeight, setCandleHeight] = useState(
    () => Math.max(200, window.innerHeight - NON_BODY_HEIGHT)
  );
  const [scrollPct, setScrollPct] = useState(0);

  // Recalculate on resize
  useEffect(() => {
    const onResize = () => {
      const newMax = Math.max(200, window.innerHeight - NON_BODY_HEIGHT);
      setMaxHeight(newMax);
    };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const pct = docHeight > 0 ? Math.min(scrollTop / docHeight, 1) : 0;

      setScrollPct(pct);
      setCandleHeight(
        Math.max(CANDLE_MIN_HEIGHT, maxHeight - pct * (maxHeight - CANDLE_MIN_HEIGHT))
      );
    };

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

  // Flame shrinks slightly as candle melts
  const flameScale = 0.6 + (candleHeight / maxHeight) * 0.4;
  // Label changes as candle melts
  const label =
    scrollPct < 0.15 ? "just lit" :
    scrollPct < 0.45 ? "burning..." :
    scrollPct < 0.75 ? "melting..." :
    scrollPct < 0.92 ? "almost gone" :
    "★ keep scrolling";

  return (
    <div className="scroll-candle-wrap" aria-hidden="true">
      {/* ── Flame ── */}
      <div
        className="candle-flame-wrap"
        style={{ transform: `scale(${flameScale})`, transformOrigin: "bottom center" }}
      >
        {/* Smoke */}
        <div className="smoke-wrap">
          <div className="smoke-particle" />
          <div className="smoke-particle" />
          <div className="smoke-particle" />
        </div>

        {/* Glow halo */}
        <div className="flame-glow" />

        {/* Outer flame */}
        <div className="flame-outer">
          {/* Inner core */}
          <div className="flame-inner" />
        </div>
      </div>

      {/* ── Wick ── */}
      <div className="candle-wick" />

      {/* ── Candle Body (shrinks on scroll) ── */}
      <div className="candle-body" style={{ height: candleHeight }}>
        <div className="wax-drip wax-drip-1" />
        <div className="wax-drip wax-drip-2" />
        <div className="wax-drip wax-drip-3" />
      </div>

      {/* ── Base / Holder ── */}
      <div className="candle-base" />

      {/* ── Label ── */}
      <p
        className="candle-scroll-label"
        style={{ opacity: scrollPct > 0.02 ? 1 : 0 }}
      >
        {label}
      </p>
    </div>
  );
}
