import { useCallback, useRef, useState } from "react";
import { useGame } from "../../context/GameContext.js";
import { calculateClickPower } from "../../engine/tick.js";

interface FloatText {
  id: number;
  x: number;
  y: number;
  text: string;
}

export const ClickArea = (): React.JSX.Element => {
  const { state, handleClick, formatNumber } = useGame();
  const [floats, setFloats] = useState<FloatText[]>([]);
  const nextIdRef = useRef(0);

  const handleClickWithFloat = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      if (!state) return;
      const rect = e.currentTarget.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const id = nextIdRef.current++;
      const clickPower = calculateClickPower(state);

      setFloats((prev) => [...prev, { id, x, y, text: `+${formatNumber(clickPower)}` }]);
      handleClick();

      setTimeout(() => {
        setFloats((prev) => prev.filter((f) => f.id !== id));
      }, 900);
    },
    [state, handleClick],
  );

  if (!state) return <div className="click-area-placeholder" />;

  const clickPower = calculateClickPower(state);

  return (
    <section className="click-area">
      <h2>Guild Hall</h2>
      <div className="click-button-wrapper">
        <button
          className="click-button"
          onClick={handleClickWithFloat}
          type="button"
          aria-label={`Click to earn ${formatNumber(clickPower)} gold`}
        >
          ⚔️
        </button>
        {floats.map((float) => (
          <span
            key={float.id}
            className="click-float"
            style={{ left: float.x, top: float.y }}
          >
            {float.text}
          </span>
        ))}
      </div>
      <p className="click-power">+{formatNumber(clickPower)} gold/click</p>
    </section>
  );
};