import { useState, useEffect } from 'react';

export default function GlowEffect({ children, id }: { children: React.ReactNode; id?: string }) {
  const [isPropertyRegistered, setIsPropertyRegistered] = useState(false);

  // Register CSS property in component body (before render)
  if (typeof window !== 'undefined' && 'CSS' in window && 'registerProperty' in CSS) {
    try {
      CSS.registerProperty({
        name: '--form-angle',
        syntax: '<angle>',
        initialValue: '0deg',
        inherits: false,
      });
    } catch (e) {
      // Property may already be registered
    }
  }

  useEffect(() => {
    // Trigger second render to add style tag
    setIsPropertyRegistered(true);
  }, []);

  return (
    <>
      {isPropertyRegistered && (
        <style>{`
        @keyframes form-glow-rotate {
          to {
            --form-angle: 360deg;
          }
        }

        .email-form-wrapper {
          background: linear-gradient(#0a0612, #0a0612) padding-box,
                      conic-gradient(from var(--form-angle, 0deg),
                          rgba(99, 102, 241, 0.5),
                          rgba(139, 92, 246, 1),
                          rgba(99, 102, 241, 0.5),
                          rgba(236, 72, 153, 0.8),
                          rgba(99, 102, 241, 0.5),
                          rgba(34, 211, 238, 1),
                          rgba(99, 102, 241, 0.5)
                      ) border-box;
          animation: form-glow-rotate 12s linear infinite;
        }

        .email-form-wrapper::before {
          content: '';
          position: absolute;
          inset: -3px;
          border-radius: 15px;
          background: conic-gradient(from var(--form-angle, 0deg),
                          rgba(99, 102, 241, 0.2),
                          rgba(139, 92, 246, 0.7),
                          rgba(99, 102, 241, 0.2),
                          rgba(236, 72, 153, 0.5),
                          rgba(99, 102, 241, 0.2),
                          rgba(34, 211, 238, 0.7),
                          rgba(99, 102, 241, 0.2)
                      );
          filter: blur(18px);
          opacity: 0.75;
          z-index: -1;
          animation: form-glow-rotate 12s linear infinite;
        }
      `}</style>
      )}

      <div id={id} className="flex items-center justify-center p-4 scroll-mt-50">
        <div className="email-form-wrapper relative isolate max-w-lg w-full mx-auto p-[2px] rounded-xl">
          {children}
        </div>
      </div>
    </>
  );
}