jiang13-bbs/frontend/components/PostActions.tsx

"use client";

import { useState, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Pencil, Trash2, Pin, Star, SlidersHorizontal, ChevronDown, Check } from "lucide-react";
import { apiMe, apiDeletePost, apiTogglePin, apiToggleRecommend, type User } from "@/lib/api";
import { toast } from "@/lib/toast";

interface PostActionsProps {
  postId: string;
  authorId: number;
  pinned: number;
  recommended: boolean;
}

export default function PostActions({ postId, authorId, pinned, recommended }: PostActionsProps) {
  const router = useRouter();
  const [user, setUser] = useState<User | null>(null);
  const [open, setOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [isPinned, setIsPinned] = useState(pinned > 0);
  const [isRecommended, setIsRecommended] = useState(recommended);
  const [acting, setActing] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    apiMe()
      .then((res) => setUser(res.user || null))
      .catch(() => setUser(null));
  }, []);

  // 点击外部 / Esc 关闭菜单（与通知铃铛同一交互模式）
  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const canManage = user && (user.id === authorId || user.role === "admin");
  const isAdmin = user?.role === "admin";

  const handleDelete = async () => {
    setOpen(false);
    if (!confirm("确定要删除这篇帖子吗？此操作不可恢复。")) return;
    setDeleting(true);
    try {
      const res = await apiDeletePost(postId);
      if (res.message) {
        router.push("/");
        toast("帖子已删除", "ok");
      } else {
        toast(res.error || "删除失败");
      }
    } catch {
      toast("网络错误，删除失败");
    } finally {
      setDeleting(false);
    }
  };

  const handlePin = async () => {
    setActing(true);
    setOpen(false);
    try {
      const res = await apiTogglePin(postId);
      setIsPinned(res.pinned > 0);
      toast(res.pinned > 0 ? "已置顶" : "已取消置顶", "ok");
      router.refresh();
    } catch {
      toast("操作失败，请稍后重试");
    } finally {
      setActing(false);
    }
  };

  const handleRecommend = async () => {
    setActing(true);
    setOpen(false);
    try {
      const res = await apiToggleRecommend(postId);
      setIsRecommended(res.recommended);
      toast(res.recommended ? "已设为推荐" : "已取消推荐", "ok");
      router.refresh();
    } catch {
      toast("操作失败，请稍后重试");
    } finally {
      setActing(false);
    }
  };

  if (!canManage) return null;

  const itemCls =
    "w-full flex items-center gap-2.5 px-4 py-2.5 text-[13px] transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]";

  return (
    <div className="relative" ref={menuRef}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        disabled={acting || deleting}
        aria-haspopup="menu"
        aria-expanded={open}
        className="btn btn-line btn-sm"
        style={open ? { borderColor: "var(--accent)", color: "var(--accent)" } : undefined}
      >
        <SlidersHorizontal size={13} /> 管理
        <ChevronDown
          size={13}
          style={{ transition: "transform .15s", transform: open ? "rotate(180deg)" : "none" }}
        />
      </button>

      {open && (
        <div
          role="menu"
          className="absolute right-0 mt-2 w-44 overflow-hidden z-50 j13-toast-in"
          style={{
            background: "var(--panel)",
            border: "1px solid var(--line)",
            borderRadius: "var(--r)",
            boxShadow: "var(--shadow-lg)",
          }}
        >
          {isAdmin && (
            <>
              <button
                type="button"
                role="menuitem"
                onClick={handlePin}
                className={itemCls}
                style={isPinned ? { color: "var(--accent)" } : { color: "var(--ink)" }}
              >
                <Pin size={14} className="shrink-0" />
                <span className="flex-1 text-left">{isPinned ? "取消置顶" : "置顶"}</span>
                {isPinned && <Check size={14} className="shrink-0" />}
              </button>
              <button
                type="button"
                role="menuitem"
                onClick={handleRecommend}
                className={itemCls}
                style={isRecommended ? { color: "var(--gold)" } : { color: "var(--ink)" }}
              >
                <Star size={14} className="shrink-0" />
                <span className="flex-1 text-left">{isRecommended ? "取消推荐" : "推荐"}</span>
                {isRecommended && <Check size={14} className="shrink-0" />}
              </button>
              <div style={{ height: 1, background: "var(--line)" }} />
            </>
          )}
          <Link
            href={`/post/${postId}/edit`}
            role="menuitem"
            className={`${itemCls} items-center`}
            style={{ color: "var(--ink)" }}
          >
            <Pencil size={14} className="shrink-0" />
            <span className="flex-1 text-left">编辑帖子</span>
          </Link>
          <button
            type="button"
            role="menuitem"
            onClick={handleDelete}
            disabled={deleting}
            className={`${itemCls} items-center`}
            style={{ color: "var(--danger)" }}
          >
            <Trash2 size={14} className="shrink-0" />
            <span className="flex-1 text-left">{deleting ? "删除中..." : "删除帖子"}</span>
          </button>
        </div>
      )}
    </div>
  );
}