/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

/**
 * @backward-compat { version 153 }
 * The entire logo-variation feature can be removed after Firefox 153 hits
 * Release, when the 2026 World Cup is over. Delete this file, the
 * `logo-variation-small`/`spin-ball-small` SCSS blocks plus their
 * `@keyframes`, the `logo.variation` pref entry in
 * `ActivityStream.sys.mjs`, and the logo-variation selection logic in
 * `Logo.jsx` (Logo reverts to its original default-only rendering).
 */

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

/**
 * The "spin ball, small" logo variation. Renders the supplied animated
 * Firefox SVG (inline JSX) into the newtab logo slot. The SVG is purely
 * decorative — it's `aria-hidden`, has no interactive ARIA role, and is not
 * keyboard-focusable. Mouse users discover the click affordance via
 * `cursor: pointer` (defined in `_Logo.scss`).
 *
 * All animations declared on the SVG's children load `paused` (per the
 * `animation-play-state: paused` rule in `_Logo.scss`). They begin running
 * on the first click and re-run on each subsequent click (see the click
 * handler below).
 *
 * @returns {React.ReactElement} The animated SVG element.
 */
function SpinBallSmall() {
  const svgRef = useRef(null);
  const [isAnimating, setIsAnimating] = useState(false);

  // Track whether any of the SVG's CSS animations are in flight. The SVG
  // contains four parallel animations (spin, blur, classic-fade, nova-fade);
  // count starts and ends so we only clear `isAnimating` once they're all
  // done. CSS `animationstart`/`animationend` events bubble from the
  // animated children up to the SVG ref.
  useEffect(() => {
    const svg = svgRef.current;
    if (!svg) {
      return undefined;
    }
    let inflight = 0;
    const onStart = () => {
      inflight += 1;
      setIsAnimating(true);
    };
    const onEnd = () => {
      inflight = Math.max(0, inflight - 1);
      if (inflight === 0) {
        setIsAnimating(false);
      }
    };
    svg.addEventListener("animationstart", onStart);
    svg.addEventListener("animationend", onEnd);
    return () => {
      svg.removeEventListener("animationstart", onStart);
      svg.removeEventListener("animationend", onEnd);
    };
  }, []);

  /**
   * Plays every CSS animation declared on the SVG (and its descendants),
   * resetting them to t=0 first so the cross-fade between the classic and
   * "nova" Firefox icons stays synchronised across replays.
   *
   * Two guards:
   *  - `prefers-reduced-motion: reduce` short-circuits without invoking
   *    `play()`. The SVG remains visible at its frame-0 keyframe state
   *    (effectively the static Firefox logo), preserving the click
   *    affordance for users who have reduced motion enabled while
   *    honouring their preference.
   *  - `playState !== "running"` makes the variation one-shot per click.
   *    Clicking again while the animation is in flight does nothing;
   *    clicking after it finishes restarts cleanly thanks to the
   *    explicit `currentTime = 0` reset.
   */
  const handleClick = () => {
    const svg = svgRef.current;
    if (!svg) {
      return;
    }
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      return;
    }
    const animations = svg.getAnimations({ subtree: true });
    if (animations.length && animations[0].playState !== "running") {
      animations.forEach(a => {
        a.currentTime = 0;
        a.play();
      });
    }
  };

  return (
    <svg
      ref={svgRef}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1000 1000"
      className={`logo-variation-small spin-ball-small${isAnimating ? " is-animating" : ""}`}
      aria-hidden="true"
      onClick={handleClick}
    >
      <defs>
        <linearGradient
          id="spin-ball-small-gradient-0"
          x1="309.4"
          y1="12.5"
          x2="368.1"
          y2="337.9"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stopColor="#fff44f" />
          <stop offset=".3" stopColor="#ffd94d" />
          <stop offset=".7" stopColor="#ffb04b" />
          <stop offset="1" stopColor="#ff980e" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-1"
          x1=".4"
          y1="397.2"
          x2="55.6"
          y2="397.2"
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(1 0 0 -1 0 523.6)"
        >
          <stop offset=".2" stopColor="#af16c0" />
          <stop offset=".9" stopColor="#00053d" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-2"
          x1="283.1"
          y1="397.1"
          x2="338.1"
          y2="397.1"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".2" stopColor="#af16c0" />
          <stop offset=".9" stopColor="#00053d" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-3"
          x1="112.2"
          y1="498.8"
          x2="226.6"
          y2="498.8"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".2" stopColor="#af16c0" />
          <stop offset=".9" stopColor="#00053d" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-4"
          x1="39.6"
          y1="236.6"
          x2="134.2"
          y2="236.6"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".2" stopColor="#af16c0" />
          <stop offset=".9" stopColor="#00053d" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-5"
          x1="204.5"
          y1="236.8"
          x2="299.2"
          y2="236.8"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".2" stopColor="#af16c0" />
          <stop offset=".9" stopColor="#00053d" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-6"
          x1="112.6"
          y1="359.2"
          x2="226.1"
          y2="359.2"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".2" stopColor="#af16c0" />
          <stop offset=".9" stopColor="#00053d" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-7"
          x1="-137.6"
          y1="457.7"
          x2="-0.8"
          y2="320.9"
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(.7 .7 .7 -0.7 -226.3 307.5)"
        >
          <stop offset="0" stopColor="#929497" />
          <stop offset="1" stopColor="#929497" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-8"
          x1="-49.2"
          y1="116.8"
          x2="47"
          y2="-111.8"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".3" stopColor="#3a8ee6" />
          <stop offset=".7" stopColor="#9059ff" />
          <stop offset="1" stopColor="#c139e6" />
        </linearGradient>
        <radialGradient
          id="spin-ball-small-gradient-9"
          cx="1.8"
          cy="-36.9"
          r="137.5"
          fx="1.8"
          fy="-36.9"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".2" stopColor="#9059ff" stopOpacity="0" />
          <stop offset="1" stopColor="#6e008b" stopOpacity=".6" />
        </radialGradient>
        <radialGradient
          id="spin-ball-small-gradient-10"
          cx="-1767.7"
          cy="2465"
          r="2.9"
          fx="-1767.7"
          fy="2465"
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(58.5 0 0 -58.7 103677 144814)"
        >
          <stop offset=".1" stopColor="#ffe226" />
          <stop offset=".8" stopColor="#ff7139" />
        </radialGradient>
        <radialGradient
          id="spin-ball-small-gradient-11"
          cx="-1788.7"
          cy="2446.5"
          r="3.1"
          fx="-1788.7"
          fy="2446.5"
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(178.6 0 0 -159.8 319794 391016)"
        >
          <stop offset=".1" stopColor="#fff44f" />
          <stop offset=".6" stopColor="#ff980e" />
        </radialGradient>
        <linearGradient
          id="spin-ball-small-gradient-12"
          x1="420.4"
          y1="80.8"
          x2="71.7"
          y2="389"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".1" stopColor="#fff44f" />
          <stop offset=".6" stopColor="#ff980e" />
          <stop offset=".9" stopColor="#ff3647" />
        </linearGradient>
        <linearGradient
          id="spin-ball-small-gradient-13"
          x1="475.9"
          y1="184.4"
          x2="50.9"
          y2="413.4"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stopColor="#ffe743" />
          <stop offset=".3" stopColor="#ff980e" />
          <stop offset=".5" stopColor="#ff3750" />
          <stop offset=".8" stopColor="#eb0878" />
          <stop offset="1" stopColor="#e50080" />
        </linearGradient>
        <radialGradient
          id="spin-ball-small-gradient-14"
          cx="291.4"
          cy="184"
          r="311.4"
          fx="291.4"
          fy="184"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".1" stopColor="#fff44f" />
          <stop offset=".6" stopColor="#ff980e" />
          <stop offset=".8" stopColor="#ff3647" />
        </radialGradient>
      </defs>
      <g className="spin-ball-small__spin">
        <path
          d="M438.4 180.4c-27.2-67.7-73.2-95-110.9-154.5c-1.9-3-3.8-6-5.6-9.2c-1-1.6-1.9-3.3-2.7-4.9c-1.5-3.1-2.8-6.3-3.6-9.6c0-0.3-0.2-0.6-0.5-0.6c-0.2 0-0.3 0-0.4 0c.2-0.1 .4-0.3 .6-0.4c0 0 .1-0.1 .1-0.1c-60.4 35.4-80.9 100.8-82.7 133.5c2.8-0.2 5.5-0.4 8.4-0.4c30.7 0 58.7 11.5 80 30.4c1.2 1.2 2.3 2.4 3.5 3.6c8.8 8.6 16.3 18.4 22.3 29.1c1.3 1 2.6 2 3.6 2.9c54.5 50.2 26 121.2 23.8 126.3c44.3-36.5 72.6-90.4 64.1-146.1Z"
          fill="url(#spin-ball-small-gradient-0)"
        />
        <g
          className="spin-ball-small__classic"
          transform="translate(241.1,255.7) scale(.739424,.739424) translate(-169.3,-169.3)"
        >
          <g data-name="Layer 1">
            <path
              d="M55.6 132.2l-0.2-60c0 0-9.6 1.5-15.6 3.1c-5.4 1.4-14.1 4.3-14.1 4.3c-14.2 22.8-23.2 49.2-25.3 77.5c0 0 5.4 7.6 8.3 11.1c4 4.9 11.5 12.4 11.5 12.4l35.4-48.4Z"
              fill="url(#spin-ball-small-gradient-1)"
            />
            <path
              d="M283.1 132.1l35.4 48.5c0 0 7.2-7.7 11.4-13.3c4.4-5.9 8.2-12.2 8.2-12.2c-2.3-27.4-11.1-53-24.9-75.2c0 0-6.5-2.4-14.6-4.6c-7.5-2-15.3-3.1-15.3-3.1l-0.2 59.9Z"
              fill="url(#spin-ball-small-gradient-2)"
            />
            <path
              d="M169.3 49.5l57.3-18.6c0 0-4.5-8.7-8.5-14.6c-4.6-6.9-8.5-11.5-8.5-11.5c-12.9-3.1-26.4-4.8-40.3-4.8c-13.9 0-27.8 1.7-40.9 5c0 0-5.5 7.5-8.4 11.9c-3.3 5.3-7.8 14-7.8 14l57.1 18.6Z"
              fill="url(#spin-ball-small-gradient-3)"
            />
            <path
              d="M99 265.9l-57.1-18.5c0 0-1.5 10-1.9 15.2c-0.4 5.6-0.4 15.5-0.4 15.5c17.8 21.3 40.7 38.1 66.9 48.5c0 0 7.9-2.5 13.9-5.1c7-3.1 13.8-6.9 13.8-6.9l-35.2-48.7Z"
              fill="url(#spin-ball-small-gradient-4)"
            />
            <path
              d="M239.7 265.9l-35.2 48.7c0 0 7.8 4 13.8 6.5c7.3 2.9 14.8 5.1 14.8 5.1c25.8-10.5 48.4-27.1 66.1-48.1c-0.1 0 .2-8.1-0.3-14.6c-0.6-7.3-2.1-16.1-2.1-16.1l-57.1 18.6Z"
              fill="url(#spin-ball-small-gradient-5)"
            />
            <path
              d="M204.5 314.6c0-0.1 11.4-10.5 20.2-22.8c9.5-13.3 15-25.9 15-25.9l-35.3-48.5h-70.1l-35.3 48.5c0 0 6.3 14.3 14.9 25.9c9.1 12.4 20.3 22.8 20.3 22.8c0 0 15.2 4.3 35.2 4.3c18.5 0 35.1-4.4 35.1-4.4Z"
              fill="#dcdddd"
            />
            <path
              d="M318.5 180.6c0 0-6.1-13.6-15.9-27c-8.6-11.8-19.5-21.5-19.5-21.5l-57 18.6l-21.7 66.7l35.3 48.5c0 0 15.5-1.7 29.6-6.3c15.1-5 27.5-12.2 27.5-12.2c0 0 9-13.9 14.9-31.9c5.9-18 6.8-34.9 6.8-34.9Z"
              fill="#d4d5d5"
            />
            <path
              d="M20.2 180.6c0 0 5.9-13.6 15.2-26.2c9.2-12.5 20.1-22.2 20.1-22.2l57 18.5l21.7 66.7l-35.2 48.5c0 0-14.6-1.5-29.9-6.3c-14.9-4.7-27.3-12.2-27.3-12.2c0 0-9.1-12.9-14.9-31.7c-6.1-19.6-6.7-35.1-6.7-35.1Z"
              fill="#eeefef"
            />
            <path
              d="M55.4 72.2c0 0-3 14.5-3 28.3c0 16.9 3.2 31.7 3.2 31.7l57 18.5l56.7-41.3v-59.9c0 0-12.7-7.4-28.8-12.6c-15-4.9-28.3-6-28.3-6c0 0-14 5-30.5 16.9c-16.2 11.6-26.3 24.4-26.3 24.4Z"
              fill="#f9f9f9"
            />
            <path
              d="M169.3 109.4v-59.9c0 0 13.4-7.7 28.2-12.5c15.4-4.9 29.1-6.2 29.1-6.2c0 0 13.3 5 30.2 16.9c15.5 11 26.5 24.5 26.5 24.5c0 0 3 12.6 3 29.6c0 17-3.2 30.3-3.2 30.3l-57 18.6l-56.8-41.3Z"
              fill="#ececec"
            />
            <path
              d="M134.2 217.4c.1 0-9.8-24.1-13-34c-3.3-10-8.6-32.7-8.6-32.7c0 0 17.7-15.2 27.3-22.3c9.3-6.8 29.4-19 29.4-19c0 0 20.6 12.8 30 19.6c8.7 6.2 26.8 21.7 26.8 21.7c0 0-5.5 22.4-9 33.4c-3.4 11-12.7 33.3-12.7 33.3c0 0-23.3 1.9-35.8 1.9c-11.7 0-34.3-1.9-34.3-1.9Z"
              fill="url(#spin-ball-small-gradient-6)"
            />
            <path
              d="M204.5 314.6v-0.1l-0.1 .1c0-0.1-16.5 4.3-35.1 4.3c-19.9 0-35-4.3-35.1-4.3c0 0-6.8 3.8-13.8 6.9c-6 2.6-13.9 5.1-13.9 5.1c-1.6-0.6 26.4 12.1 62.8 12.1c22.6 0 44.1-4.5 63.8-12.5c0 0-7.6-2.2-14.8-5.1c-6.1-2.4-13.8-6.5-13.8-6.5h-0.1Z"
              fill="#cacbcb"
            />
            <path
              d="M318.5 180.6c0 0-0.9 16.9-6.8 34.9c-5.9 18-14.9 31.9-14.9 31.9c0 0 1.6 8.8 2.1 16.1c.5 6.4 .3 14.5 .3 14.6c24.6-29.5 39.5-67.4 39.5-108.8c0-4.8-0.2-9.5-0.6-14.2c-0.1 .1-3.9 6.4-8.2 12.2c-4.2 5.6-11.4 13.3-11.4 13.3Z"
              fill="#cacbcb"
            />
            <path
              d="M39.6 278.1c0 0 0-9.9 .4-15.5c.3-5.1 1.8-15.1 1.8-15.2c0 0-9.1-12.9-14.9-31.8c-6.1-19.6-6.7-35-6.7-35c0 0-7.5-7.6-11.5-12.4c-2.7-3.3-7.5-10.1-8.3-11.1c-0.2 4.1-0.4 8.1-0.4 12.2c0 62 33.3 116.2 82.9 145.7c-16.4-9.8-31.1-22.3-43.3-36.9Z"
              fill="#f3f4f4"
            />
            <path
              d="M55.4 72.2c0 0 10.1-12.8 26.3-24.4c16.5-11.9 30.5-16.9 30.5-16.9c0 0 4.4-8.8 7.8-14c2.9-4.4 8.4-11.9 8.4-11.9c1.6-0.4 3.3-0.8 4.9-1.2c-45.3 9.8-83.8 37.8-107.6 75.8c1.4-0.4 9.2-3.1 14.1-4.3c5.9-1.6 15.5-3.1 15.6-3.1Z"
              fill="#f6f6f6"
            />
            <path
              d="M226.6 30.9c0 0 13.3 4.9 30.2 16.9c15.5 10.9 26.5 24.4 26.5 24.4c0 0 7.8 1.1 15.3 3.1c8.1 2.2 14.5 4.6 14.6 4.6c-23.1-37-60-64.4-103.6-75.1c.1 .1 3.9 4.6 8.5 11.5c4 5.9 8.4 14.6 8.4 14.6Z"
              fill="#f1f1f1"
            />
            <ellipse
              rx="123.4"
              ry="115.8"
              fill="url(#spin-ball-small-gradient-7)"
              transform="translate(-57.4,146.1) rotate(-45) translate(147.7,142.3)"
              style={{ isolation: "isolate", mixBlendMode: "hard-light" }}
            />
            <path
              d="M338.7 169.3c0 93.5-75.9 169.4-169.4 169.4c-64.5-0.1-120.6-36.2-149.2-89.3c28.8 24.7 66.3 39.7 107.3 39.7c90.8 0 164.4-73.2 164.4-163.4c-0.1-38.6-13.5-74-35.9-101.9c49.5 29.5 82.7 83.7 82.7 145.5h.1Z"
              opacity=".6"
              fill="#696969"
              style={{ isolation: "isolate", mixBlendMode: "hard-light" }}
            />
          </g>
        </g>
        <g className="spin-ball-small__nova">
          <ellipse
            rx="130"
            ry="130"
            fill="url(#spin-ball-small-gradient-8)"
            transform="translate(240,263.6)"
          />
          <ellipse
            rx="130"
            ry="130"
            fill="url(#spin-ball-small-gradient-9)"
            transform="translate(240,263.6)"
          />
        </g>
        <path
          d="M153.6 151.7c1.7 1.1 3.3 2.2 5 3.3c-5.5-19.1-5.7-39.4-0.7-58.7c-24.7 11.2-43.9 29-57.9 44.7c1.2 0 36.1-0.7 53.6 10.7Z"
          fill="url(#spin-ball-small-gradient-10)"
        />
        <path
          d="M132.7 278.5c0 0 11.1-41.4 79.4-41.4c7.4 0 28.5-20.6 28.9-26.6c.4-5.9-43.7 18.4-90.2-3.5c-50.3-23.6-88.4 3.5-88.4 3.5c0 0 14.5 35.9 56.9 35.9c-4.4 39.2 16.4 85 66.6 109.1c1.2 .5 2.2 1.1 3.4 1.6c-29.4-15.2-53.6-43.8-56.6-78.6Z"
          fill="url(#spin-ball-small-gradient-11)"
        />
        <path
          d="M2.2 262.7c18.5 109.6 117.8 193.2 230.6 196.4c104.4 3 171-57.6 198.6-116.7c17.8-38.2 30.1-100.7 7.5-162.2c0 0-0.1-0.2-0.1-0.2c0-0.2 0-0.3 0-0.3c0 .1 0 .2 0 .4c8.6 55.7-19.8 109.6-64 146.1l-0.1 .3c-86.3 70.2-168.8 42.4-185.5 31c-1.2-0.6-2.4-1.2-3.5-1.8c-50.3-24-71.1-69.8-66.6-109.1c-42.5 0-57-35.8-57-35.8c0 0 38.2-27.2 88.4-3.6c46.5 21.9 90.2 3.6 90.2 3.6c-0.1-2-41.9-18.6-58.2-34.7c-8.7-8.6-12.8-12.7-16.5-15.8c-2-1.7-4.1-3.3-6.2-4.7c-1.7-1.1-3.3-2.2-5-3.3c-17.5-11.4-52.4-10.8-53.5-10.7h-0.2c-9.5-12.1-8.8-51.9-8.3-60.2c-0.1-0.5-7.1 3.6-8 4.2c-8.4 6-16.3 12.8-23.5 20.1c-8.2 8.4-15.7 17.4-22.4 27c0 0 0 0 0 0c0 0 0 0 0 0c-15.5 21.9-26.4 46.6-32.3 72.8c-0.1 .5-8.6 37.8-4.4 57.2Z"
          fill="url(#spin-ball-small-gradient-12)"
        />
        <path
          d="M462.7 166.4c-10.4-25.2-31.6-52.3-48.2-60.9c13.5 26.5 21.4 53.1 24.3 73c0-0.1 0 0 .1 .2c0 .1 0 .2 0 .3c22.7 61.4 10.3 123.9-7.5 162.1c-27.5 59.1-94.2 119.7-198.6 116.8c-112.7-3.2-212-86.9-230.6-196.5c-3.4-17.3 0-26 1.7-40.1c-2.1 10.9-2.8 14-3.9 33.2c0 .4 0 .8 0 1.2c0 132.7 107.6 240.3 240.3 240.3c118.9 0 217.6-86.3 236.9-199.6c.4-3.1 .7-6.2 1.1-9.3c4.8-41.2-0.5-84.5-15.6-120.7Z"
          fill="url(#spin-ball-small-gradient-13)"
        />
        <path
          d="M350 200.4c-1-1-2.3-2-3.6-2.9c-0.5-0.4-0.9-0.8-1.5-1.1c-12.8-9.1-35.8-18-57.9-14.1c86.4 43.2 63.2 192-56.6 186.4c-10.6-0.5-21.2-2.5-31.2-6c-2.4-0.9-4.8-1.9-7.1-2.9c-1.4-0.7-2.7-1.3-4-2c0 .1 .1 .1 .1 .1c16.7 11.4 99.3 39.3 185.5-30.9l.1-0.3c2.2-5.1 30.7-76.1-23.8-126.3Z"
          fill="url(#spin-ball-small-gradient-14)"
        />
        <path
          d="M438 180.2c-27.2-67.7-73.3-95-110.9-154.5c-1.9-3-3.8-6-5.7-9.2c-0.9-1.6-1.8-3.3-2.6-5c-1.6-3-2.8-6.2-3.6-9.5c0-0.3-0.2-0.6-0.5-0.6c-0.2-0.1-0.3-0.1-0.5 0c0 0-0.1 0-0.1 0c-0.1 .1-0.1 .1-0.2 .1c-9.3 4.5-64.4 91.7 10.3 166.4c8.8 8.6 16.3 18.4 22.3 29.1c1.3 1 2.6 2 3.6 3c54.5 50.2 26 121.2 23.8 126.2c44.3-36.4 72.6-90.3 64.1-146Z"
          opacity=".05"
          fill="#060605"
        />
      </g>
    </svg>
  );
}

export { SpinBallSmall };