"use client";

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

/**
 * 账号安全守卫：监听全局强制下线事件，被封禁时弹出不可误关的告知模态。
 *
 * 登录态清理（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);
      }),
    []
  );

  return (
    <Modal
      open={banned}
      title="账号已被封禁"
      onClose={() => {}}
      hideClose
      closeOnEscape={false}
      role="alertdialog"
      ariaLabel="账号已被封禁"
      maxWidthClass="max-w-[400px]"
      footer={
        <button
          type="button"
          onClick={() => {
            setBanned(false);
            router.push("/");
          }}
          className="btn btn-primary w-full"
          autoFocus
        >
          我知道了
        </button>
      }
      header={
        <div className="w-full text-center">
          <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>
        </div>
      }
    >
      <p
        id="banned-dialog-desc"
        className="meta text-[13px] leading-relaxed text-center"
      >
        你的账号因违反社区规则已被管理员封禁，当前登录状态已失效，无法继续发布内容与互动。
        如对处理结果有异议，请联系管理员核实。
      </p>
    </Modal>
  );
}