jiang13-bbs/frontend/app/u/[id]/UserProfileClient.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { fetchUserComments, type UserProfile, type UserCommentsResponse } from "@/lib/api";
import Pagination from "@/components/Pagination";

interface UserProfileClientProps {
  userId: string;
  initialPosts: UserProfile;
  initialPage: number;
}

type Tab = "posts" | "comments";

export default function UserProfileClient({ userId, initialPosts, initialPage }: UserProfileClientProps) {
  const [tab, setTab] = useState<Tab>("posts");
  const [commentData, setCommentData] = useState<UserCommentsResponse | null>(null);
  const [commentLoading, setCommentLoading] = useState(false);
  const [commentPage, setCommentPage] = useState(1);

  const loadComments = async (page: number) => {
    setCommentLoading(true);
    try {
      const data = await fetchUserComments(userId, page);
      setCommentData({ ...data, comments: data.comments || [] });
      setCommentPage(page);
    } catch {
      setCommentData({ comments: [], total: 0, page, size: 20 });
    }
    setCommentLoading(false);
  };

  const handleTabChange = (t: Tab) => {
    setTab(t);
    if (t === "comments" && commentData === null) {
      loadComments(1);
    }
  };

  const tabBtn = (t: Tab, label: string) => (
    <button
      onClick={() => handleTabChange(t)}
      className="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
      style={
        tab === t
          ? { background: "var(--primary)", color: "white" }
          : { background: "var(--bg-secondary)", color: "var(--text-secondary)" }
      }
    >
      {label}
    </button>
  );

  return (
    <div>
      <div className="flex gap-2 mb-5">
        {tabBtn("posts", `发帖 (${initialPosts.stats.post_count})`)}
        {tabBtn("comments", `评论 (${initialPosts.stats.comment_count})`)}
      </div>

      {tab === "posts" ? (
        <div className="space-y-3">
          {initialPosts.posts.map((post) => (
            <Link
              key={post.id}
              href={`/post/${post.id}`}
              className="block p-4 rounded-lg border hover:shadow-md transition-shadow"
              style={{ borderColor: "var(--border)", background: "var(--bg)" }}
            >
              <div className="flex items-center gap-2 mb-2">
                <span
                  className="text-xs px-2 py-0.5 rounded"
                  style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
                >
                  {post.board.name}
                </span>
                {post.pinned > 0 && (
                  <span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
                )}
                {post.recommended && (
                  <span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
                )}
              </div>
              <h2 className="font-semibold mb-1 hover:underline" style={{ color: "var(--text)" }}>
                {post.title}
              </h2>
              <div className="flex items-center gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
                <span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
                <span>💬 {post.comment_count}</span>
                <span>👁 {post.view_count}</span>
                <span>❤️ {post.like_count}</span>
              </div>
            </Link>
          ))}
          {initialPosts.posts.length === 0 && (
            <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
              暂无发帖
            </p>
          )}
          <Pagination
            total={initialPosts.posts_total}
            page={initialPage}
            size={20}
            basePath={`/u/${userId}`}
          />
        </div>
      ) : (
        <div className="space-y-3">
          {commentLoading ? (
            <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>加载中...</p>
          ) : commentData && commentData.comments.length > 0 ? (
            <>
              {commentData.comments.map((c) => (
                <Link
                  key={c.id}
                  href={`/post/${c.post_id}`}
                  className="block p-4 rounded-lg border hover:shadow-md transition-shadow"
                  style={{ borderColor: "var(--border)", background: "var(--bg)" }}
                >
                  <div className="text-sm mb-2" style={{ color: "var(--text-secondary)" }}>
                    评论于 <span className="hover:underline" style={{ color: "var(--primary)" }}>{c.post_title}</span>
                  </div>
                  <p className="line-clamp-2" style={{ color: "var(--text)" }}>{c.content}</p>
                  <div className="text-xs mt-2" style={{ color: "var(--text-secondary)" }}>
                    {new Date(c.created_at).toLocaleString("zh-CN")}
                  </div>
                </Link>
              ))}
              <Pagination
                total={commentData.total}
                page={commentPage}
                size={20}
                basePath={`/u/${userId}`}
                query={{ tab: "comments" }}
                onChange={loadComments}
              />
            </>
          ) : (
            <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
              暂无评论
            </p>
          )}
        </div>
      )}
    </div>
  );
}