"use client"

import { useEffect } 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)

  useEffect(() => {
    if (!isAuthenticated) {
      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>
  )
}