'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from './AuthContext';

interface ClientAuthInterceptorProps {
  children: React.ReactNode;
}

export function ClientAuthInterceptor({ children }: ClientAuthInterceptorProps) {
  const { user, isAuthenticated, loading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    // 如果正在加载，等待加载完成
    if (loading) {
      return;
    }

    const currentPath = window.location.pathname;

    // 如果已经在认证页面（包括 /login 开头的所有路径），不需要重定向
    if (currentPath.startsWith('/login')) {
      console.log(`📄 已在认证页面，跳过拦截: ${currentPath}`);
      return;
    }

    // 如果未认证，重定向到登录页
    if (!isAuthenticated) {
      console.log(`🔒 客户端拦截：未认证用户访问 ${currentPath}，重定向到登录页`);

      // 保存当前路径，登录后可以跳转回来
      const loginUrl = `/login${currentPath !== '/' ? `?redirect=${encodeURIComponent(currentPath)}` : ''}`;
      router.push(loginUrl);
      return;
    }

    console.log(`✅ 客户端认证通过：用户 ${user?.username} 访问 ${window.location.pathname}`);
  }, [isAuthenticated, loading, user, router]);

  const currentPath = typeof window !== 'undefined' ? window.location.pathname : '';

  // 如果正在加载，显示加载状态
  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
          <p className="text-gray-600">验证用户身份中...</p>
        </div>
      </div>
    );
  }

  // 如果在认证页面（包括 /login 开头的所有路径），直接渲染子组件，不需要认证检查
  if (currentPath.startsWith('/login')) {
    return <>{children}</>;
  }

  // 如果未认证且不在认证页面，显示跳转状态
  if (!isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin mb-4"></div>
          <p className="text-gray-600">正在跳转到登录页...</p>
        </div>
      </div>
    );
  }

  // 认证通过，渲染子组件
  return <>{children}</>;
}