'use client';

import { Suspense, useEffect, useRef } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { Register } from './Register';

function ScrollToRegisterLogic() {
  const registerRef = useRef<HTMLElement>(null);
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    const scrollToRegister = () => {
      const element = registerRef.current || document.getElementById('register');
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
        window.history.replaceState({}, '', '/');
        return true;
      }
      return false;
    };

    if (pathname === '/' && searchParams.get('scroll') === 'register') {
      // Intenta inmediatamente
      if (!scrollToRegister()) {
        // Si no está disponible, espera al próximo frame
        requestAnimationFrame(() => {
          if (!scrollToRegister()) {
            // Último recurso: esperar un poco más
            setTimeout(scrollToRegister, 100);
          }
        });
      }
    }
  }, [pathname, searchParams]);

  return <Register ref={registerRef} />;
}

export function ScrollToRegister() {
  return (
    <Suspense fallback={<Register />}>
      <ScrollToRegisterLogic />
    </Suspense>
  );
}