import { useEffect } from "react"
import { Navigate, Outlet, useLocation } from "react-router-dom"
import { useMe } from "@/features/auth/hooks/useMe"
import { useAuthStore } from "@/features/auth/store/authStore"
import { PATHS } from "@/config/routes"
import { CenterSpinner } from "@/shared/components/CenterSpinner"

/**
 * 저장된 user를 서버에서 확인한 뒤 보호 화면을 연다.
 * 인증이 없으면 `/login?from=<원래 경로>` 로 redirect.
 * `from`은 LoginForm에서 검증 후 사용 (외부 도메인·protocol-relative 차단).
 */
export default function ProtectedRoute() {
  const user = useAuthStore((s) => s.user)
  const clearUser = useAuthStore((s) => s.clearUser)
  const me = useMe(user !== null)
  const location = useLocation()

  useEffect(() => {
    if (me.isError) clearUser()
  }, [clearUser, me.isError])

  if (!user || me.isError) {
    const from = `${location.pathname}${location.search}${location.hash}`
    const query = from && from !== "/" ? `?from=${encodeURIComponent(from)}` : ""
    return <Navigate to={`${PATHS.LOGIN}${query}`} replace />
  }
  if (me.isLoading) {
    return <CenterSpinner label="로그인 확인 중" />
  }
  return <Outlet />
}