"use client";

import { useEffect, useRef, useState } from "react";
import { DotCut, DEFAULTS } from "./dotcut/engine";
import { type Scene } from "./dotcut/scenes";

const FIVE_SCENES: Scene[] = [
  { kind: "checker", transition: "scatter", palette: 3, style: "swell" },
  { kind: "spiral", transition: "wipe", palette: 0, style: "drift" },
  { kind: "hex", transition: "ripple", palette: 1, style: "streak" },
  { kind: "diamond", transition: "collapse", palette: 5, style: "drift" },
  { kind: "crosshatch", transition: "wipe", palette: 2, style: "grain" },
];

export interface AnimatePatternProps {
  className?: string;
  size?: number;
  paused?: boolean;
  onReady?: () => void;
}

export default function AnimatePattern({
  className = "",
  size = 480,
  paused = false,
  onReady,
}: AnimatePatternProps) {
  const hostRef = useRef<HTMLDivElement>(null);
  const engineRef = useRef<DotCut | null>(null);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    const host = hostRef.current;
    if (!host) return;

    const engine = new DotCut(host, undefined, FIVE_SCENES);
    engineRef.current = engine;

    if (!engine.ok) return;

    if (onReady) onReady();

    if (!paused) engine.start();

    return () => {
      engine.destroy();
      engineRef.current = null;
    };
  }, [paused, onReady]);

  useEffect(() => {
    const engine = engineRef.current;
    if (!engine) return;

    if (paused) {
      engine.stop();
    } else {
      engine.start();
    }
  }, [paused]);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const engine = engineRef.current;
    if (!engine) return;
    const rect = hostRef.current?.getBoundingClientRect();
    if (!rect) return;
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const cell = engine.toCell(x, y);
    engine.setPointer(cell);
  };

  const handleMouseLeave = () => {
    const engine = engineRef.current;
    if (engine) engine.setPointer(null);
  };

  if (!mounted) {
    return (
      <div
        ref={hostRef}
        className={className}
        style={{
          width: size,
          height: size,
          borderRadius: "24px",
          overflow: "hidden",
          background: "#171717",
        }}
      />
    );
  }

  return (
    <div
      ref={hostRef}
      className={className}
      style={{
        width: size,
        height: size,
        borderRadius: "24px",
        overflow: "hidden",
        position: "relative",
      }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    />
  );
}
animate pattern
