// src/components/TestSuccess.tsx
import React, { useState, useEffect } from 'react';

const TestSuccess = () => {
  const [particles, setParticles] = useState<any[]>([]);

  useEffect(() => {
    const items = [];
    for (let i = 0; i < 25; i++) {
      const r = 140;
      const rmax = 180 + Math.random() * (241 - 180);
      const angle = Math.random() * Math.PI * 2;
      const x1 = 240 + Math.cos(angle) * r;
      const y1 = 240 + Math.sin(angle) * r;
      const x2 = 240 + Math.cos(angle) * rmax;
      const y2 = 240 + Math.sin(angle) * rmax;

      items.push({
        id: i,
        x1, y1, x2, y2,
        dur: '2s',
        start: Math.floor(Math.random() * 10 * 100) / 100,
        delay: Math.floor((Math.random() * 10 + 0.5) * 100) / 100,
        scaleStart: Math.floor(Math.random() * 1.5 * 100) / 100,
        scaleEnd: Math.floor(Math.random() * 1.5 * 100) / 100
      });
    }
    setParticles(items);
  }, []);

  return (
    // Changed bg-gray-50 to bg-black to match original Stylus 'background-color #000'
    <div className="flex flex-col justify-center items-center w-full min-h-screen overflow-hidden bg-black">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="500"
        height="500"
        viewBox="0 0 500 500"
        className="max-h-[75vh]"
      >
        <defs>
          <linearGradient id="gradient-green" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#6ed355" />
            <stop offset="100%" stopColor="#42b970" />
          </linearGradient>
          <symbol id="star" width="20" height="20" viewBox="0 0 20 20">
            <path
              d="M 0 10 C 6 10 10 6 10 0 C 10 6 14 10 20 10 C 14 10 10 14 10 20 C 10 14 6 10 0 10"
              fill="#6ed355"
            />
          </symbol>
        </defs>

        <path
          d="M 125 250 A 1 1 0 0 0 375 250 A 1 1 0 0 0 125 250 M 207.75 253.75 L 236.36 282.36 L 298.86 219.86"
          fill="none"
          strokeWidth="10"
          stroke="url(#gradient-green)"
          strokeLinecap="round"
          strokeLinejoin="round"
        />

        {particles.map((p) => (
          <use
            key={p.id}
            href="#star"
            x={p.x1}
            y={p.y1}
            opacity="0"
            style={{ transformOrigin: `${p.x1}px ${p.y1}px` }}
          >
            <animate
              id={`aX-${p.id}`}
              attributeName="x"
              values={`${p.x1};${p.x2}`}
              dur={p.dur}
              fill="freeze"
              repeatCount="indefinite"
              begin={`${p.start}s;aX-${p.id}.end+${p.delay}s`}
            />
            <animate
              id={`aY-${p.id}`}
              attributeName="y"
              values={`${p.y1};${p.y2}`}
              dur={p.dur}
              fill="freeze"
              repeatCount="indefinite"
              begin={`${p.start}s;aY-${p.id}.end+${p.delay}s`}
            />
            <animate
              id={`aO-${p.id}`}
              attributeName="opacity"
              values="0;1;0"
              dur={p.dur}
              fill="freeze"
              repeatCount="indefinite"
              begin={`${p.start}s;aO-${p.id}.end+${p.delay}s`}
            />
            <animateTransform
              id={`aS-${p.id}`}
              attributeName="transform"
              attributeType="XML"
              type="scale"
              from={p.scaleStart}
              to={p.scaleEnd}
              dur={p.dur}
              additive="sum"
              calcMode="paced"
              fill="freeze"
              repeatCount="indefinite"
              begin={`${p.start}s;aS-${p.id}.end+${p.delay}s`}
            />
          </use>
        ))}
      </svg>
    </div>
  );
};

export default TestSuccess;