import { useEffect, useRef, useState } from "react";

/**
 * Spuncin animated entrance logo (A1 · Comet Trail Classic).
 *
 * Plays once on mount: two rings "draw themselves" comet-style
 * (a leading dot trails a growing arc) rotating in opposite
 * directions, then the center dot pops in. Ends in a static state
 * matching the official static logo — does not loop.
 *
 * Usage:
 *   <SpuncinLogoAnimated size={120} />
 *   <SpuncinLogoAnimated size={48} onDark />         // for dark backgrounds
 *   <SpuncinLogoAnimated size={120} replayKey={x} /> // change replayKey to replay
 *
 * Props:
 *   size       number   — width/height in px (default 120)
 *   onDark     boolean  — use the light-on-dark palette (default false)
 *   duration   number   — animation duration in seconds (default 1.4)
 *   replayKey  any      — change this value to force the animation to replay
 *   className  string   — passed through to the wrapping <svg>
 */
export default function SpuncinLogoAnimated({
  size = 120,
  onDark = false,
  duration = 1.4,
  replayKey,
  className = "",
}) {
  const [id] = useState(
    () => `spuncin-logo-${Math.random().toString(36).slice(2, 9)}`
  );
  const svgRef = useRef(null);

  // Colors
  const outerColor = onDark ? "#D1FAE5" : "#064E3B";
  const innerColor = "#10B981";
  const coreColor = onDark ? "#D1FAE5" : "#064E3B";

  // Restart the CSS animation whenever replayKey changes, by toggling
  // the animation off and back on (forces reflow).
  useEffect(() => {
    const el = svgRef.current;
    if (!el) return;
    const animated = el.querySelectorAll(
      ".spuncin-outer-group, .spuncin-outer-path, .spuncin-inner-group, .spuncin-inner-path, .spuncin-core, .spuncin-outer-dot, .spuncin-inner-dot"
    );
    animated.forEach((node) => {
      node.style.animation = "none";
      // force reflow
      // eslint-disable-next-line no-unused-expressions
      node.offsetHeight;
      node.style.animation = "";
    });
  }, [replayKey]);

  const ease = "cubic-bezier(0.25, 0.1, 0.25, 1)";
  const bounceEase = "cubic-bezier(0.34, 1.56, 0.64, 1)";
  const coreDelay = duration - 0.3;

  return (
    <svg
      ref={svgRef}
      width={size}
      height={size}
      viewBox="0 0 120 120"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <style>{`
        #${id} .spuncin-outer-group {
          animation: ${id}_outer_rot ${duration}s ${ease} forwards;
          transform-origin: 60px 60px;
        }
        #${id} .spuncin-outer-path {
          animation: ${id}_outer_dash ${duration}s ${ease} forwards;
          stroke-dasharray: 0 314;
        }
        #${id} .spuncin-inner-group {
          animation: ${id}_inner_rot ${duration}s ${ease} forwards;
          transform-origin: 60px 60px;
        }
        #${id} .spuncin-inner-path {
          animation: ${id}_inner_dash ${duration}s ${ease} forwards;
          stroke-dasharray: 0 201;
        }
        #${id} .spuncin-core {
          animation: ${id}_core 0.4s ${bounceEase} ${coreDelay}s forwards;
          transform-origin: 60px 60px;
          transform: scale(0);
        }
        #${id} .spuncin-outer-dot {
          animation: ${id}_outer_dot_fade ${duration}s ${ease} forwards;
          opacity: 1;
        }
        #${id} .spuncin-inner-dot {
          animation: ${id}_inner_dot_fade ${duration}s ${ease} forwards;
          opacity: 1;
        }
        @keyframes ${id}_outer_rot {
          from { transform: rotate(270deg); }
          to   { transform: rotate(-90deg); }
        }
        @keyframes ${id}_outer_dash {
          from { stroke-dasharray: 0 314; }
          to   { stroke-dasharray: 232 80; }
        }
        @keyframes ${id}_inner_rot {
          from { transform: rotate(450deg); }
          to   { transform: rotate(90deg); }
        }
        @keyframes ${id}_inner_dash {
          from { stroke-dasharray: 0 201; }
          to   { stroke-dasharray: 151 49; }
        }
        @keyframes ${id}_core {
          from { transform: scale(0); }
          to   { transform: scale(1); }
        }
        @keyframes ${id}_outer_dot_fade {
          0%, 90% { opacity: 1; }
          100%    { opacity: 0; }
        }
        @keyframes ${id}_inner_dot_fade {
          0%, 90% { opacity: 1; }
          100%    { opacity: 0; }
        }
      `}</style>

      <g className="spuncin-outer-group" id={id}>
        <circle
          className="spuncin-outer-path"
          cx="60"
          cy="60"
          r="50"
          fill="none"
          stroke={outerColor}
          strokeWidth="9"
          strokeDasharray="0 314"
          strokeLinecap="round"
        />
        <circle
          className="spuncin-outer-dot"
          cx="110"
          cy="60"
          r="5"
          fill={outerColor}
        />
      </g>

      <g className="spuncin-inner-group">
        <circle
          className="spuncin-inner-path"
          cx="60"
          cy="60"
          r="32"
          fill="none"
          stroke={innerColor}
          strokeWidth="9"
          strokeDasharray="0 201"
          strokeLinecap="round"
        />
        <circle
          className="spuncin-inner-dot"
          cx="92"
          cy="60"
          r="5"
          fill={innerColor}
        />
      </g>

      <circle className="spuncin-core" cx="60" cy="60" r="11" fill={coreColor} />
    </svg>
  );
}