jiang13-bbs/frontend/components/CommentSection.tsx

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Trash2, MessagesSquare } from "lucide-react";
import { apiCreateComment, apiDeleteComment, apiMe, type Comment, type User } from "@/lib/api";
import { toast } from "@/lib/toast";
import Avatar from "./Avatar";

interface CommentSectionProps {
  postId: string;
  comments: Comment[];
}

export default function CommentSection({ postId, comments }: CommentSectionProps) {
  const router = useRouter();
  const [content, setContent] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [user, setUser] = useState<User | null>(null);
  const [deletingId, setDeletingId] = useState<number | null>(null);

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!content.trim()) return;
    setSubmitting(true);
    try {
      const res = await apiCreateComment(postId, content);
      if (res.comment) {
        setContent("");
        router.refresh();
      } else if (res.error === "未登录") {
        router.push(`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`);
      } else {
        toast(res.error || "评论失败");
      }
    } catch {
      toast("网络错误，评论失败");
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async (commentId: number) => {
    if (!confirm("确定要删除这条评论吗？")) return;
    setDeletingId(commentId);
    try {
      const res = await apiDeleteComment(postId, commentId);
      if (res.message) {
        router.refresh();
      } else {
        toast(res.error || "删除失败");
      }
    } catch {
      toast("网络错误，删除失败");
    } finally {
      setDeletingId(null);
    }
  };

  const canDelete = (comment: Comment) =>
    user && (user.id === comment.user.id || user.role === "admin");

  return (
    <section className="panel p-6 sm:p-8 mt-6">
      <div className="flex items-center gap-2.5 mb-6">
        <h2 className="text-lg font-extrabold" style={{ color: "var(--ink)" }}>
          评论
        </h2>
        <span
          className="text-[12px] font-bold px-2 py-0.5 rounded-full"
          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
        >
          {comments.length}
        </span>
      </div>

      {user ? (
        <form onSubmit={handleSubmit} className="mb-8">
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            onKeyDown={(e) => {
              if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
                e.preventDefault();
                e.currentTarget.form?.requestSubmit();
              }
            }}
            placeholder="友善发言，说说你的看法..."
            rows={3}
            className="field"
          />
          <div className="flex items-center justify-between gap-3 mt-2.5">
            <span className="meta text-[11.5px]">支持 Markdown · Ctrl + Enter 发送</span>
            <button type="submit" disabled={submitting || !content.trim()} className="btn btn-primary">
              {submitting ? "发送中..." : "发表评论"}
            </button>
          </div>
        </form>
      ) : (
        <div
          className="mb-8 px-5 py-4 rounded-2xl flex items-center justify-between gap-4 flex-wrap"
          style={{ background: "var(--panel-2)" }}
        >
          <span className="text-sm" style={{ color: "var(--ink-2)" }}>
            登录后参与讨论
          </span>
          <Link href="/login" className="btn btn-line btn-sm">
            去登录
          </Link>
        </div>
      )}

      <div>
        {comments.map((comment) => (
          <div
            key={comment.id}
            className="flex gap-3.5 py-5 border-t first:border-t-0"
            style={{ borderColor: "var(--line)" }}
          >
            <Link href={`/u/${comment.user.id}`} className="shrink-0 mt-0.5" aria-label={comment.user.nickname}>
              <Avatar name={comment.user.nickname || comment.user.username} size={38} />
            </Link>
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between gap-3 mb-1.5">
                <div className="flex items-center gap-2.5 min-w-0 flex-wrap">
                  <Link href={`/u/${comment.user.id}`} className="group">
                    <span
                      className="text-sm font-semibold truncate group-hover:text-[var(--accent)] transition-colors"
                      style={{ color: "var(--ink)" }}
                    >
                      {comment.user.nickname}
                    </span>
                  </Link>
                  <span className="meta text-xs">{new Date(comment.created_at).toLocaleString("zh-CN")}</span>
                </div>
                {canDelete(comment) && (
                  <button
                    onClick={() => handleDelete(comment.id)}
                    disabled={deletingId === comment.id}
                    className="meta hover:text-[var(--danger)] transition-colors disabled:opacity-50 p-1"
                    aria-label="删除评论"
                  >
                    <Trash2 size={14} />
                  </button>
                )}
              </div>
              <p className="text-[15px] leading-relaxed" style={{ color: "var(--ink)" }}>
                {comment.content}
              </p>
            </div>
          </div>
        ))}
        {comments.length === 0 && (
          <div className="text-center py-14">
            <MessagesSquare size={28} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
            <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>
              暂无评论
            </p>
            <p className="meta text-[12.5px] mt-1">来说两句，抢占沙发</p>
          </div>
        )}
      </div>
    </section>
  );
}