/**
 * ChrysanthemumFlower — Hoa cúc SVG component
 * Vietnamese golden chrysanthemum, pure SVG, no external assets needed.
 */
import { useMemo } from "react";

interface Props {
  size?: number;
  className?: string;
  /** 0–360 — initial rotation offset */
  rotate?: number;
  /** Slow spin animation */
  animate?: boolean;
  /** Primary petal color */
  color?: string;
}

let _idCounter = 0;

const ChrysanthemumFlower = ({
  size = 64,
  className = "",
  rotate = 0,
  animate = false,
  color = "#FFD700",
}: Props) => {
  // Unique IDs per instance to avoid SVG gradient conflicts
  const uid = useMemo(() => `cucu-${++_idCounter}`, []);

  const outerPetals = Array.from({ length: 16 });
  const innerPetals = Array.from({ length: 8 });

  return (
    <svg
      width={size}
      height={size}
      viewBox="-50 -50 100 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      style={{
        transform: `rotate(${rotate}deg)`,
        ...(animate ? { animation: `cucuSpin-${uid} 18s linear infinite` } : {}),
      }}
    >
      <defs>
        <radialGradient id={`${uid}-po`} cx="50%" cy="80%" r="60%">
          <stop offset="0%" stopColor={color} stopOpacity="1" />
          <stop offset="100%" stopColor="#FFA500" stopOpacity="0.75" />
        </radialGradient>
        <radialGradient id={`${uid}-pi`} cx="50%" cy="70%" r="60%">
          <stop offset="0%" stopColor="#FFF176" stopOpacity="1" />
          <stop offset="100%" stopColor={color} stopOpacity="0.9" />
        </radialGradient>
        <radialGradient id={`${uid}-c`} cx="50%" cy="40%" r="70%">
          <stop offset="0%" stopColor="#FFF9C4" />
          <stop offset="60%" stopColor="#FFD700" />
          <stop offset="100%" stopColor="#E65100" />
        </radialGradient>
        <filter id={`${uid}-glow`}>
          <feGaussianBlur stdDeviation="1.2" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        {animate && (
          <style>{`
            @keyframes cucuSpin-${uid} {
              from { transform: rotate(${rotate}deg); }
              to   { transform: rotate(${rotate + 360}deg); }
            }
          `}</style>
        )}
      </defs>

      {/* Outer petals — 16 */}
      {outerPetals.map((_, i) => (
        <g key={`op-${i}`} transform={`rotate(${(i * 360) / 16})`}>
          <ellipse
            cx="0"
            cy="-30"
            rx="6"
            ry="18"
            fill={`url(#${uid}-po)`}
            opacity="0.9"
            filter={`url(#${uid}-glow)`}
          />
        </g>
      ))}

      {/* Inner petals — 8 */}
      {innerPetals.map((_, i) => (
        <g key={`ip-${i}`} transform={`rotate(${(i * 360) / 8 + 22.5})`}>
          <ellipse
            cx="0"
            cy="-18"
            rx="5"
            ry="13"
            fill={`url(#${uid}-pi)`}
            opacity="0.95"
          />
        </g>
      ))}

      {/* Centre disc */}
      <circle r="10" fill={`url(#${uid}-c)`} />
      {/* Centre highlight */}
      <circle r="3.5" cx="-1" cy="-1" fill="#FFFDE7" opacity="0.7" />
    </svg>
  );
};

export default ChrysanthemumFlower;
