'use client';

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

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 → 占位
  // - 都不是 → 弹"快速登录"对话框(开发 / 试部署用,后端 env 门控)
  if (isAuthenticated) return <>{children}</>;
  if (status === 'authenticating' || status === 'idle') return <Placeholder />;

  // 未鉴权 fallback —— 透明占位 + 强制 MockLoginDialog
  // 真生产把后端 PAC_ENABLE_MOCK_LOGIN=false,mockLogin 返 10107,dialog 会 toast 错误
  // 后用户能看到底层占位文案了解需要走宿主 SSO
  return (
    <>
      <div className="flex h-screen flex-col items-center justify-center gap-2 p-8 text-center">
        <p className="text-lg font-medium text-slate-700">召回工作台</p>
        <p className="max-w-md text-sm text-muted-foreground">
          请在弹窗中选择身份进入。生产环境会自动通过宿主 SSO 登录,无需手动选择。
        </p>
      </div>
      <MockLoginDialog open />
    </>
  );
}
