'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { RegisterForm } from '@/components/auth';
import { useAuth } from '@/lib/contexts/AuthContext';

export default function RegisterPage() {
  const router = useRouter();
  const { isAuthenticated, isLoading } = useAuth();

  useEffect(() => {
    if (!isLoading && isAuthenticated) {
      router.push('/');
    }
  }, [isAuthenticated, isLoading, router]);

  if (isLoading) {
    return (
      <div className="min-h-screen bg-base flex items-center justify-center">
        <div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-base flex flex-col">
      <header className="p-4">
        <Link href="/" className="inline-flex items-center gap-2 text-lg font-semibold text-primary">
          <div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
            <span className="text-accent font-bold">G</span>
          </div>
          GooSeek
        </Link>
      </header>

      <main className="flex-1 flex items-center justify-center px-4 py-8">
        <div className="w-full max-w-md">
          <div className="bg-elevated border border-border rounded-2xl p-8 shadow-xl">
            <RegisterForm
              showTitle
              onSuccess={() => router.push('/')}
              onSwitchToLogin={() => router.push('/login')}
            />
          </div>

          <p className="text-center text-sm text-muted mt-6">
            Уже есть аккаунт?{' '}
            <Link href="/login" className="text-accent hover:text-accent-hover font-medium">
              Войти
            </Link>
          </p>
        </div>
      </main>
    </div>
  );
}