"use client";

import {motion, useAnimation} from "motion/react";
import React, {useEffect, useRef, useState} from "react";

import {cn} from "@/lib/utilities";
import styles from "./scratcher.module.css";

/** Props accepted by {@link Scratcher}. */
export interface ScratcherProps {
  /** Content revealed after the overlay is scratched away. @default undefined */
  children: React.ReactNode;
  /** Width of the scratch card surface in pixels. @default undefined */
  width: number;
  /** Height of the scratch card surface in pixels. @default undefined */
  height: number;
  /** Percentage of cleared pixels required before completion fires. @default 50 */
  minScratchPercentage?: number;
  /** Additional CSS classes merged with the scratch card container. @default undefined */
  className?: string;
  /** Callback invoked once the scratch completion threshold is reached. @default undefined */
  onComplete?: () => void;
  /** Three-stop gradient used for the scratchable overlay. @default ["#A97CF8", "#F38CB8", "#FDCC92"] */
  gradientColors?: [string, string, string];
}

const defaultGradientColors: [string, string, string] = ["#A97CF8", "#F38CB8", "#FDCC92"];
const ignoreAnimationError = (): null => null;

/**
 * Renders a scratch-card reveal surface with animated completion feedback.
 *
 * @remarks
 * - Animated component using the `motion` library
 * - Renders a `<div>` element containing a `<canvas>`
 * - Styling via CSS Modules with `--ac-*` custom properties
 * - Client-side only (`"use client"` directive)
 *
 * @example
 * ```tsx
 * <Scratcher width={320} height={180}>Prize unlocked</Scratcher>
 * ```
 *
 * @see {@link ScratcherProps} for available props
 */
export const Scratcher = React.forwardRef<HTMLDivElement, ScratcherProps>(
  ({width, height, minScratchPercentage = 50, onComplete, children, className, gradientColors = defaultGradientColors}, forwardedRef) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const [isScratching, setIsScratching] = useState(false);
    const [isComplete, setIsComplete] = useState(false);

    const controls = useAnimation();

    useEffect(() => {
      const canvas = canvasRef.current;
      const context = canvas?.getContext("2d");
      if (!canvas || !context) {
        return;
      }

      context.fillStyle = "#ccc";
      context.fillRect(0, 0, canvas.width, canvas.height);
      const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
      gradient.addColorStop(0, gradientColors[0]);
      gradient.addColorStop(0.5, gradientColors[1]);
      gradient.addColorStop(1, gradientColors[2]);
      context.fillStyle = gradient;
      context.fillRect(0, 0, canvas.width, canvas.height);
    }, [gradientColors]);

    const scratch = React.useCallback((clientX: number, clientY: number): void => {
      const canvas = canvasRef.current;
      const context = canvas?.getContext("2d");
      if (!canvas || !context) {
        return;
      }

      const rect = canvas.getBoundingClientRect();
      const x = clientX - rect.left + 16;
      const y = clientY - rect.top + 16;
      context.globalCompositeOperation = "destination-out";
      context.beginPath();
      context.arc(x, y, 30, 0, Math.PI * 2);
      context.fill();
    }, []);

    const startAnimation = React.useCallback(async (): Promise<void> => {
      await controls.start({
        scale: [1, 1.5, 1],
        rotate: [0, 10, -10, 10, -10, 0],
        transition: {duration: 0.5},
      });

      onComplete?.();
    }, [controls, onComplete]);

    const checkCompletion = React.useCallback((): void => {
      if (isComplete) {
        return;
      }

      const canvas = canvasRef.current;
      const context = canvas?.getContext("2d");
      if (!canvas || !context) {
        return;
      }

      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      const pixels = imageData.data;
      const totalPixels = pixels.length / 4;
      let clearPixels = 0;

      for (let index = 3; index < pixels.length; index += 4) {
        if (pixels[index] === 0) {
          clearPixels += 1;
        }
      }

      const percentage = (clearPixels / totalPixels) * 100;
      if (percentage >= minScratchPercentage) {
        setIsComplete(true);
        context.clearRect(0, 0, canvas.width, canvas.height);
        startAnimation().catch(ignoreAnimationError);
      }
    }, [isComplete, minScratchPercentage, startAnimation]);

    useEffect(() => {
      const handleDocumentMouseMove = (event: MouseEvent): void => {
        if (isScratching) {
          scratch(event.clientX, event.clientY);
        }
      };

      const handleDocumentTouchMove = (event: TouchEvent): void => {
        if (!isScratching) {
          return;
        }

        const [touch] = event.touches;
        if (!touch) {
          return;
        }

        scratch(touch.clientX, touch.clientY);
      };

      const handleDocumentPointerEnd = (): void => {
        setIsScratching(false);
        checkCompletion();
      };

      globalThis.document.addEventListener("mousemove", handleDocumentMouseMove);
      globalThis.document.addEventListener("touchmove", handleDocumentTouchMove);
      globalThis.document.addEventListener("mouseup", handleDocumentPointerEnd);
      globalThis.document.addEventListener("touchend", handleDocumentPointerEnd);
      globalThis.document.addEventListener("touchcancel", handleDocumentPointerEnd);

      return () => {
        globalThis.document.removeEventListener("mousemove", handleDocumentMouseMove);
        globalThis.document.removeEventListener("touchmove", handleDocumentTouchMove);
        globalThis.document.removeEventListener("mouseup", handleDocumentPointerEnd);
        globalThis.document.removeEventListener("touchend", handleDocumentPointerEnd);
        globalThis.document.removeEventListener("touchcancel", handleDocumentPointerEnd);
      };
    }, [checkCompletion, isScratching, scratch]);

    return (
      <motion.div
        ref={forwardedRef}
        className={cn(styles.root, className)}
        style={{
          width,
          height,
          cursor:
            "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto",
        }}
        animate={controls}>
        <canvas
          ref={canvasRef}
          width={width}
          height={height}
          className={styles.canvas}
          onMouseDown={() => setIsScratching(true)}
          onTouchStart={() => setIsScratching(true)}
        />
        {children}
      </motion.div>
    );
  },
);

Scratcher.displayName = "Scratcher";