jiang13-bbs/frontend/components/markdown/MdHideBlock.tsx

"use client";

import type { ReactNode } from "react";
import { Lock } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { apiUnlockPost } from "@/lib/api";
import { toast } from "@/lib/toast";
import { hideKindLabel, type HideKind } from "@/lib/hideBlocks";

type MdHideBlockProps = {
  kind: HideKind;
  points?: number;
  locked?: boolean;
  postId?: number;
  loggedIn?: boolean;
  children?: ReactNode;
};

/** 正文内嵌隐藏块：已解锁显示徽章容器；locked 显示就地门禁 */
export default function MdHideBlock({
  kind,
  points = 0,
  locked = false,
  postId,
  loggedIn = false,
  children,
}: MdHideBlockProps) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);
  const label = hideKindLabel(kind);

  if (locked) {
    const unlock = async () => {
      if (!postId) return;
      setBusy(true);
      try {
        const res = await apiUnlockPost(String(postId));
        if (res.post) {
          toast("已解锁隐藏内容", "ok");
          router.refresh();
        } else {
          toast(res.error || "解锁失败", "error");
        }
      } catch {
        toast("解锁失败", "error");
      } finally {
        setBusy(false);
      }
    };

    return (
      <aside
        className="j13-hide-gate"
        role="note"
        aria-label={`${label}（未解锁）`}
      >
        <Lock size={22} className="j13-hide-gate-icon" aria-hidden />
        <p className="j13-hide-gate-title">此段内容{label}</p>
        <p className="j13-hide-gate-desc meta">
          {kind === "points"
            ? `支付 ${points || 0} 积分后可阅读此段`
            : kind === "reply"
              ? "发表一条回复后即可阅读此段"
              : "登录后即可阅读此段"}
        </p>
        <div className="j13-hide-gate-actions">
          {kind === "login" && !loggedIn && postId && (
            <Link
              href={`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`}
              className="btn btn-primary"
            >
              去登录
            </Link>
          )}
          {kind === "points" && loggedIn && postId && (
            <button
              type="button"
              className="btn btn-primary"
              disabled={busy}
              onClick={() => void unlock()}
            >
              {busy ? "解锁中…" : `支付 ${points || 0} 积分解锁`}
            </button>
          )}
          {kind === "points" && !loggedIn && postId && (
            <Link
              href={`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`}
              className="btn btn-primary"
            >
              登录后解锁
            </Link>
          )}
          {kind === "reply" && (
            <a href="#comments" className="btn btn-primary">
              去回复
            </a>
          )}
        </div>
      </aside>
    );
  }

  return (
    <div className="j13-hide-block" data-hide-kind={kind}>
      <div className="j13-hide-block-bar">
        <span className="j13-hide-badge">{label}</span>
        {kind === "points" && points > 0 && (
          <span className="meta text-[12px]">{points} 积分</span>
        )}
      </div>
      <div className="j13-hide-block-body">{children}</div>
    </div>
  );
}