'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

// 这个组件会检查 localStorage 中是否有认证令牌，如果没有则重定向到登录页面
export default function ClientRouteGuard({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 检查 localStorage 中是否有认证令牌
    const checkAuth = () => {
      // 查找 Supabase 认证令牌
      const hasAuthToken = !!localStorage.getItem('sb-mwwvqwevplndzvmqmrxa-auth-token') || 
                           !!localStorage.getItem('sb-auth-token');
      
      if (!hasAuthToken) {
        // 如果没有令牌，重定向到登录页面
        router.push('/login');
      } else {
        setIsAuthenticated(true);
      }
      setIsLoading(false);
    };

    checkAuth();
  }, [router]);

  // 显示加载状态
  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
          <p className="mt-4 text-lg text-gray-700 dark:text-gray-300">加载中...</p>
        </div>
      </div>
    );
  }

  // 只有当用户已认证时才显示子组件
  return isAuthenticated ? <>{children}</> : null;
}