'use client';

import { useEffect, useState } from 'react';
import { useAuthBootstrap } from '@/hooks/use-auth-bootstrap';
import { useAuthStore } from '@/stores/auth-store';

const Placeholder = () => (
  <div className="flex h-screen items-center justify-center text-sm text-muted-foreground">
    正在初始化召回工作台…
  </div>
);

export function AuthGate({ children }: { children: React.ReactNode }) {
  const { status } = useAuthBootstrap();
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated());

  // SSR + first client render 必须同形态(否则 hydration mismatch)。
  // Zustand persist 反水合 / bootstrap useEffect 都在 mount 后才跑,
  // 强制 first render 输出 Placeholder,mount 完再真正分流。
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return <Placeholder />;

  // mount 后真正分流:
  // - store 已 authenticated → 放行(覆盖 bootstrap 边界 case,如 back 重挂)
  // - 还在 bootstrap → 占位
  // - 都不是 → 引导回宿主
  if (isAuthenticated) return <>{children}</>;
  if (status === 'authenticating' || status === 'idle') return <Placeholder />;

  return (
    <div className="flex h-screen flex-col items-center justify-center gap-2 p-8 text-center">
      <p className="text-lg font-medium">无法加载工作台</p>
      <p className="max-w-md text-sm text-muted-foreground">
        缺少有效的访问凭证。请回到宿主系统重新打开召回模块（确保 URL 携带一次性 code 参数）。
      </p>
    </div>
  );
}
