"use client"

import { useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { useAuthStore } from "@/store/auth"
import { useLoginDialogStore } from "@/store/login-dialog"

interface AuthGuardProps {
  children: React.ReactNode
}

export function AuthGuard({ children }: AuthGuardProps) {
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
  const openLoginDialog = useLoginDialogStore((s) => s.openLoginDialog)
  const hasTriggered = useRef(false)

  useEffect(() => {
    if (isAuthenticated) {
      hasTriggered.current = false
      return
    }
    if (!hasTriggered.current) {
      hasTriggered.current = true
      openLoginDialog()
    }
  }, [isAuthenticated, openLoginDialog])

  if (isAuthenticated) {
    return <>{children}</>
  }

  return (
    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 text-center">
      <p className="text-sm text-muted-foreground">请先登录后继续访问此页面</p>
      <Button onClick={() => openLoginDialog()}>登录</Button>
    </div>
  )
}