"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Ban } from "lucide-react";
import { onForceLogout } from "@/lib/userEvents";

/**
 * 账号安全守卫：监听全局强制下线事件，被封禁时弹出不可误关的告知模态。
 *
 * 登录态清理（cookie/Header 游客化/router.refresh）由 Header 复用统一
 * 登出链路完成；本组件只负责"告知"这一职责，故不处理任何凭据逻辑。
 * 挂载于 root layout，覆盖任意页面（含后台）。
 */
export default function AccountGuard() {
  const router = useRouter();
  const [banned, setBanned] = useState(false);

  useEffect(
    () =>
      onForceLogout((reason) => {
        if (reason === "banned") setBanned(true);
      }),
    []
  );

  if (!banned) return null;

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
      style={{ background: "color-mix(in srgb, var(--ink) 60%, transparent)" }}
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="banned-dialog-title"
      aria-describedby="banned-dialog-desc"
    >
      <div
        className="j13-toast-in panel w-full max-w-[400px] rounded-2xl p-6 text-center"
        style={{ boxShadow: "var(--shadow-lg)" }}
      >
        <span
          className="mx-auto w-14 h-14 rounded-full flex items-center justify-center"
          style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
        >
          <Ban size={26} />
        </span>
        <h2
          id="banned-dialog-title"
          className="mt-4 text-[18px] font-extrabold tracking-tight"
          style={{ color: "var(--ink)" }}
        >
          账号已被封禁
        </h2>
        <p id="banned-dialog-desc" className="meta mt-2 text-[13px] leading-relaxed">
          你的账号因违反社区规则已被管理员封禁，当前登录状态已失效，无法继续发布内容与互动。
          如对处理结果有异议，请联系管理员核实。
        </p>
        <button
          type="button"
          onClick={() => {
            setBanned(false);
            // 回到首页展示游客视图（若当前停留在受保护页面）
            router.push("/");
          }}
          className="btn btn-primary w-full mt-5"
          autoFocus
        >
          我知道了
        </button>
      </div>
    </div>
  );
}