import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useAuth } from '@/contexts/AuthContext';

// 認証が必要なページを保護するHOC
export function withAuth(WrappedComponent: React.ComponentType, requireAdmin: boolean = false) {
  return function AuthComponent(props: any) {
    const { user, isLoading } = useAuth();
    const router = useRouter();

    useEffect(() => {
      if (!isLoading) {
        // ユーザーが未ログインの場合
        if (!user) {
          router.push('/login');
          return;
        }

        // 管理者権限が必要なページで一般ユーザーがアクセスした場合
        if (requireAdmin && user.role !== 'admin') {
          router.push('/projects');
          return;
        }
      }
    }, [user, isLoading, router]);

    // ローディング中はローディング表示
    if (isLoading) {
      return (
        <div className="min-h-screen flex items-center justify-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
        </div>
      );
    }

    // 認証チェックが完了し、アクセスが許可された場合のみコンポーネントを表示
    if ((!requireAdmin && user) || (requireAdmin && user?.role === 'admin')) {
      return <WrappedComponent {...props} />;
    }

    return null;
  };
}