import React, { useRef, useEffect, useCallback } from "react";

interface SparkCanvasProps {
  width: number;
  height: number;
  className?: string;
}

const SparkCanvas: React.FC<SparkCanvasProps> = ({
  width,
  height,
  className = "",
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // Create all path points from the SVG
  const createAllPaths = useCallback(() => {
    const scaleX = width / 1094;
    const scaleY = height / 1155;

    return [
      // Main outer path
      [
        { x: 1093.78 * scaleX, y: 446.109 * scaleY },
        { x: 945.168 * scaleX, y: 93.6632 * scaleY },
        { x: 674.899 * scaleX, y: 128.965 * scaleY },
        { x: 236.498 * scaleX, y: 0.0453104 * scaleY },
        { x: 0.962414 * scaleX, y: 393.898 * scaleY },
        { x: 230.666 * scaleX, y: 566.721 * scaleY },
        { x: 196.724 * scaleX, y: 805.862 * scaleY },
        { x: 8.36227 * scaleX, y: 726.936 * scaleY },
        { x: 146.962 * scaleX, y: 1152.7 * scaleY },
        { x: 1017.71 * scaleX, y: 1153.53 * scaleY },
        { x: 1093.93 * scaleX, y: 821.783 * scaleY },
        { x: 877.886 * scaleX, y: 610.412 * scaleY },
        { x: 1093.31 * scaleX, y: 447.859 * scaleY },
      ],
      // Inner detail path 1
      [
        { x: 720.827 * scaleX, y: 725.561 * scaleY },
        { x: 918.491 * scaleX, y: 778.2 * scaleY },
        { x: 1016.06 * scaleX, y: 1147.28 * scaleY },
        { x: 630.245 * scaleX, y: 763.908 * scaleY },
        { x: 812.883 * scaleX, y: 409.018 * scaleY },
      ],
      // Inner detail path 2
      [
        { x: 626.626 * scaleX, y: 764.482 * scaleY },
        { x: 591.798 * scaleX, y: 832.135 * scaleY },
        { x: 363.824 * scaleX, y: 662.249 * scaleY },
        { x: 260.574 * scaleX, y: 400.71 * scaleY },
      ],
      // Inner detail path 3
      [
        { x: 260.923 * scaleX, y: 397.531 * scaleY },
        { x: 815.792 * scaleX, y: 397.531 * scaleY },
        { x: 628.047 * scaleX, y: 762.372 * scaleY },
      ],
      // Inner detail path 4
      [
        { x: 590.431 * scaleX, y: 834.806 * scaleY },
        { x: 532.841 * scaleX, y: 946.709 * scaleY },
        { x: 464.861 * scaleX, y: 918.219 * scaleY },
        { x: 365.888 * scaleX, y: 667.485 * scaleY },
      ],
      // Inner detail path 5
      [
        { x: 531.487 * scaleX, y: 949.341 * scaleY },
        { x: 500.734 * scaleX, y: 1009.09 * scaleY },
        { x: 466.376 * scaleX, y: 922.053 * scaleY },
      ],
      // Inner detail path 6
      [
        { x: 628.824 * scaleX, y: 766.686 * scaleY },
        { x: 1003.04 * scaleX, y: 1138.58 * scaleY },
        { x: 594.211 * scaleX, y: 833.938 * scaleY },
      ],
      // Inner detail path 7
      [
        { x: 592.844 * scaleX, y: 836.609 * scaleY },
        { x: 1007.5 * scaleX, y: 1145.61 * scaleY },
        { x: 535.589 * scaleX, y: 947.858 * scaleY },
      ],
      // Inner detail path 8
      [
        { x: 258.282 * scaleX, y: 393.524 * scaleY },
        { x: 205.035 * scaleX, y: 202.668 * scaleY },
        { x: 806.716 * scaleX, y: 393.524 * scaleY },
      ],
      // Inner detail path 9
      [
        { x: 200.852 * scaleX, y: 197.205 * scaleY },
        { x: 81.704 * scaleX, y: 314.799 * scaleY },
        { x: 0.426192 * scaleX, y: 394.726 * scaleY },
        { x: 233.254 * scaleX, y: 9.11459 * scaleY },
      ],
      // Inner detail path 10
      [
        { x: 200.678 * scaleX, y: 202.828 * scaleY },
        { x: 253.871 * scaleX, y: 393.524 * scaleY },
        { x: 0.426192 * scaleX, y: 394.726 * scaleY },
      ],
      // Inner detail path 11
      [
        { x: 257.276 * scaleX, y: 400.416 * scaleY },
        { x: 359.306 * scaleX, y: 658.87 * scaleY },
        { x: 233.857 * scaleX, y: 565.386 * scaleY },
      ],
      // Inner detail path 12
      [
        { x: 497.182 * scaleX, y: 1008.18 * scaleY },
        { x: 195.624 * scaleX, y: 834.672 * scaleY },
        { x: 199.11 * scaleX, y: 810.069 * scaleY },
        { x: 462.555 * scaleX, y: 920.45 * scaleY },
      ],
      // Inner detail path 13
      [
        { x: 495.466 * scaleX, y: 1012.32 * scaleY },
        { x: 151.037 * scaleX, y: 1148.81 * scaleY },
        { x: 194.954 * scaleX, y: 839.414 * scaleY },
      ],
      // Inner detail path 14
      [
        { x: 148.705 * scaleX, y: 1144.04 * scaleY },
        { x: 6.27101 * scaleX, y: 730.863 * scaleY },
        { x: 192.179 * scaleX, y: 837.825 * scaleY },
      ],
      // Inner detail path 15
      [
        { x: 502.719 * scaleX, y: 1011.73 * scaleY },
        { x: 534.235 * scaleX, y: 950.489 * scaleY },
        { x: 999.635 * scaleX, y: 1145.5 * scaleY },
      ],
      // Inner detail path 16
      [
        { x: 725.599 * scaleX, y: 725.307 * scaleY },
        { x: 817.132 * scaleX, y: 656.239 * scaleY },
        { x: 874.736 * scaleX, y: 612.776 * scaleY },
        { x: 917.607 * scaleX, y: 774.968 * scaleY },
      ],
      // Inner detail path 17
      [
        { x: 724.929 * scaleX, y: 722.101 * scaleY },
        { x: 818.553 * scaleX, y: 400.202 * scaleY },
        { x: 873.931 * scaleX, y: 609.677 * scaleY },
      ],
      // Inner detail path 18
      [
        { x: 817.119 * scaleX, y: 393.524 * scaleY },
        { x: 816.515 * scaleX, y: 393.524 * scaleY },
        { x: 210.277 * scaleX, y: 200.678 * scaleY },
        { x: 939.605 * scaleX, y: 96.2678 * scaleY },
      ],
      // Inner detail path 19
      [
        { x: 203.976 * scaleX, y: 196.551 * scaleY },
        { x: 237.262 * scaleX, y: 3.3578 * scaleY },
        { x: 667.848 * scaleX, y: 129.967 * scaleY },
      ],
      // Inner detail path 20
      [
        { x: 0.426192 * scaleX, y: 394.726 * scaleY },
        { x: 254.877 * scaleX, y: 396.195 * scaleY },
        { x: 231.136 * scaleX, y: 563.436 * scaleY },
      ],
      // Inner detail path 21
      [
        { x: 233.374 * scaleX, y: 568.738 * scaleY },
        { x: 361.357 * scaleX, y: 664.106 * scaleY },
        { x: 461.027 * scaleX, y: 916.603 * scaleY },
        { x: 199.539 * scaleX, y: 807.037 * scaleY },
      ],
      // Inner detail path 22
      [
        { x: 196.281 * scaleX, y: 808.894 * scaleY },
        { x: 192.849 * scaleX, y: 833.083 * scaleY },
        { x: 28.8996 * scaleX, y: 738.744 * scaleY },
      ],
      // Inner detail path 23
      [
        { x: 158.839 * scaleX, y: 1150.85 * scaleY },
        { x: 501.378 * scaleX, y: 1014.92 * scaleY },
        { x: 1006.73 * scaleX, y: 1150.84 * scaleY },
      ],
      // Inner detail path 24
      [
        { x: 1018.74 * scaleX, y: 1145.91 * scaleY },
        { x: 921.776 * scaleX, y: 779.095 * scaleY },
        { x: 1089.76 * scaleX, y: 822.544 * scaleY },
      ],
      // Inner detail path 25
      [
        { x: 985.64 * scaleX, y: 792.558 * scaleY },
        { x: 920.904 * scaleX, y: 775.822 * scaleY },
        { x: 878.422 * scaleX, y: 615.086 * scaleY },
        { x: 1086.52 * scaleX, y: 818.644 * scaleY },
      ],
      // Inner detail path 26
      [
        { x: 876.478 * scaleX, y: 607.754 * scaleY },
        { x: 820.47 * scaleX, y: 395.848 * scaleY },
        { x: 943.573 * scaleX, y: 97.5233 * scaleY },
        { x: 1090.59 * scaleX, y: 446.203 * scaleY },
      ],
    ];
  }, [width, height]);

  // Draw all paths as single lines
  const drawPaths = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // Clear canvas
    ctx.clearRect(0, 0, width, height);

    // Get all paths
    const allPaths = createAllPaths();

    // Draw each path as a single line
    allPaths.forEach((pathPoints, pathIndex) => {
      // Set line style
      ctx.strokeStyle = `rgba(255, 255, 255, ${pathIndex === 0 ? 0.08 : 0.05})`;
      ctx.lineWidth = pathIndex === 0 ? 2 : 1;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";

      // Draw the path
      ctx.beginPath();
      ctx.moveTo(pathPoints[0].x, pathPoints[0].y);

      for (let i = 1; i < pathPoints.length; i++) {
        ctx.lineTo(pathPoints[i].x, pathPoints[i].y);
      }

      ctx.stroke();
    });
  }, [width, height, createAllPaths]);

  useEffect(() => {
    drawPaths();
  }, [drawPaths]);

  return (
    <canvas
      ref={canvasRef}
      width={width}
      height={height}
      className={className}
      style={{ display: "block" }}
    />
  );
};

export default SparkCanvas;