jiang13-bbs/frontend/components/home/CommunityPanels.tsx

import Link from "next/link";
import {
  Flame,
  Users,
  MessageCircle,
  Heart,
  MessageSquareText,
  UserPlus,
  Link2,
} from "lucide-react";
import type {
  PostListItem,
  ActiveUser,
  OverviewStats,
  LatestComment,
  NewUser,
  CheckinStatus,
} from "@/lib/api";
import Avatar from "@/components/Avatar";
import CheckinCard from "./CheckinCard";
import { FRIEND_LINKS } from "@/lib/friendLinks";
import { formatRelative } from "@/lib/format";

/* ---------- 品牌卡 ---------- */

function BrandCard({ stats }: { stats: OverviewStats }) {
  const items: { num: number; label: string }[] = [
    { num: stats.posts, label: "帖子" },
    { num: stats.comments, label: "回复" },
    { num: stats.users, label: "用户" },
  ];
  return (
    <section className="j13-module text-center" aria-label="姜十三论坛">
      <p className="text-[16.5px] font-extrabold tracking-wide" style={{ color: "var(--accent)" }}>
        姜十三论坛
      </p>
      <p className="meta mt-1 text-[12px]">分享技术、讨论问题、交流心得</p>
      <div
        className="mt-3.5 pt-3.5 grid grid-cols-3"
        style={{ borderTop: "1px solid var(--line)" }}
      >
        {items.map((it) => (
          <div key={it.label}>
            <p
              className="text-[19px] font-extrabold tabular-nums leading-none"
              style={{ color: "var(--accent)" }}
            >
              {it.num}
            </p>
            <p className="meta mt-1.5 text-[11.5px]">{it.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- 最新评论 ---------- */

function LatestComments({ comments }: { comments: LatestComment[] }) {
  if (comments.length === 0) return null;
  return (
    <section className="j13-module" aria-label="最新评论">
      <p className="j13-module-title mb-1">
        <MessageSquareText size={15} style={{ color: "var(--accent)" }} /> 最新评论
      </p>
      <ul>
        {comments.map((c) => {
          const name = c.user.nickname || c.user.username;
          return (
            <li key={c.id}>
              <Link href={`/post/${c.post.id}`} className="j13-raillink items-start">
                <Avatar name={name} src={c.user.avatar} size={28} className="mt-px" />
                <span className="min-w-0 flex-1">
                  <span className="flex items-baseline gap-1.5">
                    <span
                      className="shrink-0 max-w-[84px] truncate text-[12.5px] font-semibold"
                      style={{ color: "var(--ink-2)" }}
                    >
                      {name}
                    </span>
                    <span
                      className="min-w-0 flex-1 truncate text-[13px]"
                      style={{ color: "var(--ink-2)" }}
                    >
                      {c.content}
                    </span>
                  </span>
                  <span className="meta mt-0.5 block truncate text-[11.5px]">
                    {c.post.title}
                  </span>
                </span>
                <span className="meta mt-px shrink-0 text-[11px]">
                  {formatRelative(c.created_at)}
                </span>
              </Link>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

/* ---------- 热门榜 ---------- */

function HotRanking({ posts }: { posts: PostListItem[] }) {
  return (
    <section className="j13-module" aria-label="热门讨论">
      <p className="j13-module-title mb-1.5">
        <Flame size={15} style={{ color: "var(--clay)" }} /> 热门讨论
      </p>
      {posts.length === 0 ? (
        <p className="meta px-1.5 py-3">还没有热门讨论</p>
      ) : (
        <ol className="j13-ranklist">
          {posts.map((p, i) => (
            <li key={p.id}>
              <Link href={`/post/${p.id}`} className="j13-rank" title={p.title}>
                <span className="j13-rank-no">{i + 1}</span>
                <span className="min-w-0 flex-1">
                  <span
                    className="block text-[13.5px] font-semibold leading-snug line-clamp-2"
                    style={{ color: "var(--ink)" }}
                  >
                    {p.title}
                  </span>
                  <span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">
                    <span className="inline-flex items-center gap-1">
                      <MessageCircle size={11.5} /> {p.comment_count}
                    </span>
                    <span className="inline-flex items-center gap-1">
                      <Heart size={11.5} /> {p.like_count}
                    </span>
                    <span className="truncate">{p.board.name}</span>
                  </span>
                </span>
              </Link>
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}

/* ---------- 最新注册 ---------- */

function NewUsers({ users }: { users: NewUser[] }) {
  if (users.length === 0) return null;
  return (
    <section className="j13-module" aria-label="最新注册">
      <p className="j13-module-title mb-3">
        <UserPlus size={15} style={{ color: "var(--accent)" }} /> 最新注册
      </p>
      <ul className="grid grid-cols-4 gap-y-3">
        {users.map((u) => {
          const name = u.nickname || u.username;
          return (
            <li key={u.id}>
              <Link
                href={`/u/${u.id}`}
                className="flex flex-col items-center gap-1.5 rounded-lg px-1 py-1 transition-colors hover:bg-[var(--panel-2)]"
              >
                <Avatar name={name} src={u.avatar} size={38} />
                <span
                  className="w-full truncate text-center text-[11px]"
                  style={{ color: "var(--ink-2)" }}
                  title={name}
                >
                  {name}
                </span>
              </Link>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

/* ---------- 活跃用户 ---------- */

function ActiveUsers({ users }: { users: ActiveUser[] }) {
  return (
    <section className="j13-module" aria-label="活跃成员">
      <p className="j13-module-title mb-3">
        <Users size={15} style={{ color: "var(--accent)" }} /> 活跃成员
      </p>
      {users.length === 0 ? (
        <p className="meta px-1.5 py-2">近 14 天还没有人互动</p>
      ) : (
        <ul className="space-y-1">
          {users.map((u) => (
            <li key={u.id}>
              <Link href={`/u/${u.id}`} className="j13-raillink">
                <Avatar name={u.nickname || u.username} src={u.avatar} size={28} />
                <span className="flex-1 truncate text-[13.5px]">{u.nickname || u.username}</span>
                <span className="meta text-[11.5px]">{u.activity_count} 次</span>
              </Link>
            </li>
          ))}
        </ul>
      )}
      <p className="meta mt-3 px-1 text-[11px]">按近 14 天发帖与评论计数</p>
    </section>
  );
}

/* ---------- 友情链接 ---------- */

function FriendLinks() {
  return (
    <section className="j13-module" aria-label="友情链接">
      <p className="j13-module-title mb-3">
        <Link2 size={15} style={{ color: "var(--accent)" }} /> 友情链接
        <Link
          href="/compose"
          className="meta ml-auto text-[12px] font-normal transition-colors hover:text-[var(--accent)]"
        >
          申请
        </Link>
      </p>
      <div className="flex flex-wrap gap-2">
        {FRIEND_LINKS.map((l) =>
          l.href.startsWith("http") ? (
            <a
              key={l.name}
              href={l.href}
              target="_blank"
              rel="noopener noreferrer"
              className="j13-chip"
            >
              {l.name}
            </a>
          ) : (
            <span key={l.name} className="j13-chip" title="友链待配置">
              {l.name}
            </span>
          )
        )}
      </div>
    </section>
  );
}

/* ---------- 桌面 / 移动两种装配 ---------- */

type PanelsProps = {
  stats: OverviewStats;
  hot: PostListItem[];
  activeUsers: ActiveUser[];
  latestComments: LatestComment[];
  newUsers: NewUser[];
  checkin?: CheckinStatus | null;
};

export function CommunityPanels({
  stats,
  hot,
  activeUsers,
  latestComments,
  newUsers,
  checkin,
}: PanelsProps) {
  return (
    <aside className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]" aria-label="社区面板">
      <div className="sticky top-24 space-y-4">
        <BrandCard stats={stats} />
        <CheckinCard initial={checkin} />
        <LatestComments comments={latestComments} />
        <HotRanking posts={hot} />
        <NewUsers users={newUsers} />
        <ActiveUsers users={activeUsers} />
        <FriendLinks />
      </div>
    </aside>
  );
}

export function CommunityPanelsMobile({
  hot,
  activeUsers,
  latestComments,
  newUsers,
  checkin,
}: Omit<PanelsProps, "stats">) {
  return (
    <div className="space-y-4 lg:hidden" aria-label="社区面板">
      <CheckinCard initial={checkin} />
      <LatestComments comments={latestComments} />
      <HotRanking posts={hot} />
      <NewUsers users={newUsers} />
      <ActiveUsers users={activeUsers} />
      <FriendLinks />
    </div>
  );
}