'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useAuthStore } from '@/store/auth-store'

interface AuthGuardProps {
  children: React.ReactNode
}

/**
 * 인증 가드 컴포넌트
 * 로그인하지 않은 사용자가 보호된 페이지에 접근하면 로그인 페이지로 리다이렉트
 */
export function AuthGuard({ children }: AuthGuardProps) {
  const router = useRouter()
  const { isAuthenticated, user } = useAuthStore()
  const [isChecking, setIsChecking] = useState(true)

  useEffect(() => {
    // Zustand hydration 후 체크
    const timer = setTimeout(() => {
      if (!isAuthenticated || !user) {
        router.replace('/login')
      } else {
        setIsChecking(false)
      }
    }, 50)
    return () => clearTimeout(timer)
  }, [isAuthenticated, user, router])

  if (isChecking) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-8 w-8 border-2 border-blue-500 border-t-transparent" />
      </div>
    )
  }

  return <>{children}</>
}
