'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';
import { SessionExpired } from '@/components/session-expired';
import { isEmbedded } from '@/lib/embed';
import { env } from '@/lib/env';

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), []);

  /**
   * 探测后端是否开启 mock 快速登录(禁用时 GET /auth/mock-users 返空)。
   *
   * 🔴 **只在真的要弹这个框时才探**(2026-08-10 产品在宿主 SSO 流程里发现的)。
   *   原来是个空依赖的 useEffect,**每次挂载无条件发** —— 于是带 `?code=` 走
   *   宿主授权登录、`code-ok` 已经拿到票之后,照样多打一发 `/auth/mock-users`。
   *
   * ⚠️ 它不只是"多一个请求":`mock-users` 是 `@Public()` 的,
   *   返回的是**全部客服的真实姓名 + 所属诊所**(测试机实测 116 人)。
   *   把它挂在每次加载上,等于每开一次页面就把花名册取一遍 —— 嵌在宿主 iframe 里也照发。
   *
   * ⇒ 条件收紧到"**下面那条分流真的会用到它**":
   *   已登录 / 还在 bootstrap / 嵌入态 —— 三种都不需要,一次都不发。
   * ⚠️ hooks 不能条件调用,所以是**在 effect 里判**、把条件放进依赖,⛔ 别把 useEffect 包进 if。
   */
  const needMockProbe =
    mounted &&
    !isAuthenticated &&
    status !== 'authenticating' &&
    status !== 'idle' &&
    !isEmbedded();

  const [mockEnabled, setMockEnabled] = useState<boolean | null>(null);
  useEffect(() => {
    if (!needMockProbe) return;
    let cancelled = false;
    fetch(new URL('/pac/v1/auth/mock-users', env.apiBaseUrl).toString(), { credentials: 'omit' })
      .then((r) => r.json())
      .then((j) => {
        if (!cancelled) setMockEnabled((j?.data?.users?.length ?? 0) > 0);
      })
      .catch(() => {
        if (!cancelled) setMockEnabled(false);
      });
    return () => {
      cancelled = true;
    };
  }, [needMockProbe]);

  if (!mounted) return <Placeholder />;

  // mount 后真正分流:
  // - store 已 authenticated → 放行(覆盖 bootstrap 边界 case,如 back 重挂)
  // - 还在 bootstrap → 占位
  // - 都不是 → 弹"快速登录"对话框(开发 / 试部署用,后端 env 门控)
  if (isAuthenticated) return <>{children}</>;
  if (status === 'authenticating' || status === 'idle') return <Placeholder />;

  // 嵌入态(宿主 iframe):不弹 dev 快速登录 —— 会话失效只能回宿主重进,给友好引导 + 重试。
  if (isEmbedded()) return <SessionExpired />;

  // 非嵌入 + 未鉴权:
  //   - mock 禁用(真生产)→ 不弹 dev 快速登录,给"请从宿主进入"引导(复用 SessionExpired 文案)。
  //   - 探测中 → 占位。
  //   - mock 启用(dev / 试部署)→ 下方透明占位 + MockLoginDialog。
  if (mockEnabled === false) return <SessionExpired />;
  if (mockEnabled === null) 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 text-slate-700">召回工作台</p>
        <p className="max-w-md text-sm text-muted-foreground">
          请在弹窗中选择身份进入。生产环境会自动通过宿主 SSO 登录,无需手动选择。
        </p>
      </div>
      <MockLoginDialog open />
    </>
  );
}
