import { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { RegisterForm } from '@/features/auth/components/RegisterForm';
import { useAuth } from '@/features/auth/hooks/useAuth';
import { Card } from '@veza/design-system';

/**
 * Register Page with Kōdō Design System
 * MIGRATED: Now using Kōdō Spectre Astral theme
 */
export const RegisterPage = () => {
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (isAuthenticated) {
      navigate('/');
    }
  }, [isAuthenticated, navigate]);

  return (
    <div className="min-h-screen flex flex-col justify-center items-center bg-kodo-void px-4 py-8">
      {/* Background gradient effects */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-0 right-1/4 w-96 h-96 bg-kodo-magenta/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-0 left-1/4 w-96 h-96 bg-kodo-cyan/5 rounded-full blur-3xl"></div>
      </div>

      <div className="w-full max-w-md relative z-10">
        {/* Logo/Title */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-display font-bold text-white mb-2">
            Veza
          </h1>
          <p className="text-kodo-secondary">Rejoignez la communauté</p>
        </div>

        <Card variant="glass" className="backdrop-blur-xl">
          <RegisterForm />
        </Card>

        <div className="mt-6 text-center">
          <p className="text-sm text-kodo-secondary">
            Déjà un compte ?{' '}
            <Link
              to="/login"
              className="font-medium text-kodo-cyan hover:text-kodo-cyan/80 transition-colors"
            >
              Se connecter
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
};
