msgapp/src/app/my-page/page.tsx

import { headers } from "next/headers";
import { redirect } from "next/navigation";
import prisma from "@/lib/prisma";
import Link from "next/link";
import { UserAvatar } from "@/app/components/UserAvatar";
import { GradeIcon, getGradeName } from "@/app/components/GradeIcon";
import { HeroBanner } from "@/app/components/HeroBanner";
import { PostList } from "@/app/components/PostList";
import ProfileLabelIcon from "@/app/svgs/profilelableicon";
import { ProfileEditTrigger } from "@/app/components/ProfileEditTrigger";
import { SendMessageForm } from "@/app/components/SendMessageForm";
export default async function MyPage({ searchParams }: { searchParams: Promise<{ tab?: string; page?: string; sort?: string; q?: string; to?: string }> }) {
  const sp = await searchParams;
  const activeTab = sp?.tab || "posts";
  const page = parseInt(sp?.page || "1", 10);
  const sort = sp?.sort || "recent";
  const q = sp?.q || "";
  const toUserId = sp?.to || "";

  // 현재 로그인한 사용자 정보 가져오기
  let currentUser: {
    userId: string;
    nickname: string;
    profileImage: string | null;
    points: number;
    level: number;
    grade: number;
  } | null = null;

  try {
    const h = await headers();
    const cookieHeader = h.get("cookie") || "";
    let isAdmin = false;
    const uid = cookieHeader
      .split(";")
      .map((s) => s.trim())
      .find((pair) => pair.startsWith("uid="))
      ?.split("=")[1];
    const isAdminVal = cookieHeader
      .split(";")
      .map((s) => s.trim())
      .find((pair) => pair.startsWith("isAdmin="))
      ?.split("=")[1];
    isAdmin = isAdminVal === "1";

    if (!uid) {
      redirect(`/login?next=/my-page`);
    }
    if (uid) {
      const user = await prisma.user.findUnique({
        where: { userId: decodeURIComponent(uid) },
        select: { userId: true, nickname: true, profileImage: true, points: true, level: true, grade: true },
      });
      if (user) {
        currentUser = { ...user, isAdmin } as any;
      } else {
        redirect(`/login?next=/my-page`);
      }
    }
  } catch (e) {
    // 에러 무시
  }

  if (!currentUser) redirect(`/login?next=/my-page`);

  // 통계 정보 가져오기
  const [postsCount, commentsCount, receivedMessagesCount, sentMessagesCount] = await Promise.all([
    prisma.post.count({ where: { authorId: currentUser.userId } }),
    prisma.comment.count({ where: { authorId: currentUser.userId } }),
    prisma.message.count({ where: { receiverId: currentUser.userId } }),
    prisma.message.count({ where: { senderId: currentUser.userId } }),
  ]);

  // 등급 업그레이드에 필요한 포인트 계산 (예시: 다음 등급까지)
  const nextGradePoints = (() => {
    // 등급별 포인트 기준을 여기에 설정 (임시로 2M)
    const gradeThresholds = [0, 200000, 400000, 800000, 1600000, 3200000, 6400000, 10000000];
    const currentGradeIndex = Math.min(7, Math.max(0, currentUser.grade));
    return gradeThresholds[currentGradeIndex + 1] || 2000000;
  })();

  const tabs = [
    { key: "posts", label: "내가 쓴 게시글", count: postsCount },
    { key: "comments", label: "내가 쓴 댓글", count: commentsCount },
    { key: "points", label: "포인트 히스토리", count: await prisma.pointTransaction.count({ where: { userId: currentUser.userId } }) },
    { key: "messages-received", label: "받은 쪽지함", count: receivedMessagesCount },
    { key: "messages-sent", label: "보낸 쪽지함", count: sentMessagesCount },
  ];

  return (
    <div className="space-y-6">
      {/* 히어로 배너 */}
      <section>
        <HeroBanner
          subItems={[
            { id: "my-page", name: "마이페이지", href: "/my-page" },
          ]}
          activeSubId="my-page"
        />
      </section>

      {/* 프로필 섹션 (모바일 대응) */}
      <section className="bg-white rounded-[16px] px-4 py-4 md:rounded-[24px] md:px-[108px] md:py-[23px]">
        <div className="flex flex-col md:flex-row gap-4 md:gap-[64px] items-center justify-center">
          {/* 좌측: 프로필 이미지, 닉네임, 레벨/등급/포인트 */}
          <div className="flex flex-col gap-[16px] items-center">
            <div className="flex flex-col gap-[16px] items-center">
              {/* 프로필 이미지 */}
              <div className="relative w-[112px] h-[112px] md:w-[161px] md:h-[162px]">
                <div className="absolute inset-0 flex items-center justify-center">
                  <svg className="w-full h-full" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="80" cy="80" r="79" stroke="#8c8c8c" strokeWidth="2" fill="none" />
                  </svg>
                </div>
                <div className="absolute inset-[8px] md:inset-[10px] flex items-center justify-center">
                  <UserAvatar
                    src={currentUser.profileImage || null}
                    alt={currentUser.nickname || "프로필"}
                    width={140}
                    height={140}
                    className="rounded-full w-full h-full object-cover"
                  />
                </div>
              </div>
              {/* 닉네임 */}
              <div className="flex items-center gap-[4px]">
                <span className="text-[20px] font-bold text-[#5c5c5c] truncate max-w-[200px]">{currentUser.nickname || "사용자"}</span>
                <ProfileEditTrigger initialProfileImageUrl={currentUser.profileImage || null} />
              </div>
              {/* 관리자 설정 버튼 */}
              {"isAdmin" in (currentUser as any) && (currentUser as any).isAdmin && (
                <div className="mt-1">
                  <Link
                    href="/admin"
                    className="inline-flex items-center h-9 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800"
                  >
                    관리자설정
                  </Link>
                </div>
              )}
            </div>
            {/* 프로필 수정은 연필 아이콘(모달)에서 처리 */}
            {/* 레벨/등급/포인트 정보 - 가로 배치 */}
            <div className="flex gap-3 md:gap-[16px] items-center justify-center">
              <div className="flex items-center gap-[4px] min-w-0">
                <ProfileLabelIcon width={14} height={14} className="shrink-0" />
                <span className="text-[11px] text-[#8c8c8c] font-[700] shrink-0">레벨</span>
                <span className="text-[13px] md:text-[14px] text-[#5c5c5c] font-[700] min-w-0 truncate">Lv.{currentUser.level || 1}</span>
              </div>
              <div className="flex items-center gap-[4px] min-w-0">
                <ProfileLabelIcon width={14} height={14} className="shrink-0" />
                <span className="text-[11px] text-[#8c8c8c] font-[700] shrink-0">등급</span>
                <span className="text-[13px] md:text-[14px] text-[#5c5c5c] font-[700] min-w-0 truncate">{getGradeName(currentUser.grade)}</span>
              </div>
              <div className="flex items-center gap-[4px] min-w-0">
                <ProfileLabelIcon width={14} height={14} className="shrink-0" />
                <span className="text-[11px] text-[#8c8c8c] font-[700] shrink-0">포인트</span>
                <span className="text-[13px] md:text-[14px] text-[#5c5c5c] font-[700] min-w-0 truncate">{currentUser.points.toLocaleString()}</span>
              </div>
            </div>
          </div>
          
          {/* 구분선 (모바일 숨김) */}
          <div className="hidden md:block w-[8px] h-[162px] bg-[#d5d5d5] shrink-0"></div>

          {/* 우측: 등급 배지 및 포인트 진행 상황 */}
          <div className="flex flex-col items-center justify-center w-[120px] md:w-[161px] shrink-0">
            <div className="w-[96px] h-[96px] md:w-[125px] md:h-[125px] flex items-center justify-center mb-[16px]">
              <GradeIcon grade={currentUser.grade} width={125} height={125} />
            </div>
            <div className="flex flex-col gap-[16px] items-center">
              <div className="text-[16px] md:text-[20px] font-bold text-[#5c5c5c]">{getGradeName(currentUser.grade)}</div>
              <div className="flex items-start gap-[8px] text-[16px] md:text-[20px] font-bold">
                <span className="text-[#5c5c5c] truncate">{(currentUser.points / 1000000).toFixed(1)}M</span>
                <span className="text-[#8c8c8c] shrink-0">/ {(nextGradePoints / 1000000).toFixed(1)}M</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 탭 버튼 (모바일 가로 스크롤) */}
      <section className="mt-4">
        <div className="bg-white rounded-[16px] p-2 md:rounded-[24px] md:p-[10px] flex gap-2 md:gap-[10px] items-center overflow-x-auto scrollbar-thin-x">
          {tabs.map((tab) => (
            <Link
              key={tab.key}
              href={`/my-page?tab=${tab.key}`}
              className={`shrink-0 md:flex-1 h-10 md:h-[46px] rounded-[16px] flex items-center justify-center gap-[8px] px-3 ${
                activeTab === tab.key
                  ? "bg-[#5c5c5c] text-white"
                  : "bg-transparent text-[#5c5c5c]"
              }`}
            >
              <span className={`text-[14px] md:text-[16px] ${activeTab === tab.key ? "font-medium" : "font-normal"}`}>
                {tab.label}
              </span>
              <div
                className={`inline-flex items-center justify-center h-[20px] px-[8px] rounded-[14px] ${
                  activeTab === tab.key
                    ? "bg-white"
                    : "border border-[#707070]"
                }`}
              >
                <span
                  className={`text-[10px] leading-none font-semibold ${
                    activeTab === tab.key ? "text-[#707070]" : "text-[#707070]"
                  }`}
                >
                  {tab.count.toLocaleString()}
                </span>
              </div>
            </Link>
          ))}
        </div>
      </section>

      {/* 컨텐츠 영역 */}
      <section>
        {activeTab === "posts" && (
          <PostList
            authorId={currentUser.userId}
            sort={sort as "recent" | "popular"}
            q={q}
            variant="board"
          />
        )}
        {activeTab === "comments" && (async () => {
          const pageSize = 20;
          const comments = await prisma.comment.findMany({
            where: { authorId: currentUser.userId },
            orderBy: { createdAt: "desc" },
            take: pageSize,
            skip: (page - 1) * pageSize,
            select: { id: true, postId: true, content: true, createdAt: true },
          });
          return (
            <div className="bg-white rounded-[24px] p-4">
              <ul className="divide-y divide-neutral-200">
                {comments.map((c) => (
                  <li key={c.id} className="py-3 flex items-center justify-between gap-4">
                    <Link href={`/posts/${c.postId}`} className="text-sm text-neutral-800 hover:underline truncate max-w-[70%]">
                      {c.content.slice(0, 80)}{c.content.length > 80 ? "…" : ""}
                    </Link>
                    <span className="text-xs text-neutral-500 shrink-0">{new Date(c.createdAt).toLocaleString()}</span>
                  </li>
                ))}
              </ul>
            </div>
          );
        })()}
        {activeTab === "points" && (async () => {
          const pageSize = 20;
          const txns = await prisma.pointTransaction.findMany({
            where: { userId: currentUser.userId },
            orderBy: { createdAt: "desc" },
            take: pageSize,
            skip: (page - 1) * pageSize,
            select: { id: true, amount: true, reason: true, createdAt: true },
          });
          return (
            <div className="bg-white rounded-[24px] p-4">
              <ul className="divide-y divide-neutral-200">
                {txns.map((t) => (
                  <li key={t.id} className="py-3 flex items-center justify-between gap-4">
                    <div className="text-sm text-neutral-800 truncate max-w-[60%]">{t.reason}</div>
                    <div className={`text-sm font-semibold ${t.amount >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                      {t.amount >= 0 ? `+${t.amount}` : `${t.amount}`}
                    </div>
                    <span className="text-xs text-neutral-500 shrink-0">{new Date(t.createdAt).toLocaleString()}</span>
                  </li>
                ))}
              </ul>
            </div>
          );
        })()}
        {activeTab === "messages-received" && (async () => {
          const pageSize = 20;
          const messages = await prisma.message.findMany({
            where: { receiverId: currentUser.userId },
            orderBy: { createdAt: "desc" },
            take: pageSize,
            skip: (page - 1) * pageSize,
            select: { id: true, body: true, createdAt: true, sender: { select: { userId: true, nickname: true } } },
          });
          return (
            <div className="bg-white rounded-[24px] p-4">
              <ul className="divide-y divide-neutral-200">
                {messages.map((m) => (
                  <li key={m.id} className="py-3 flex items-start justify-between gap-4">
                    <div className="flex-1 min-w-0">
                      <div className="text-sm text-neutral-800">
                        <Link href={`/users/${m.sender.userId}`} className="font-semibold hover:underline">{m.sender.nickname || "알 수 없음"}</Link>
                        <span className="text-xs text-neutral-500 ml-2">{new Date(m.createdAt).toLocaleString()}</span>
                      </div>
                      <div className="text-sm text-neutral-700 mt-1 whitespace-pre-wrap break-words">{m.body}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          );
        })()}
        {activeTab === "messages-sent" && (async () => {
          const pageSize = 20;
          const receiver = toUserId ? await prisma.user.findUnique({ where: { userId: toUserId }, select: { userId: true, nickname: true } }) : null;
          const messages = await prisma.message.findMany({
            where: { senderId: currentUser.userId },
            orderBy: { createdAt: "desc" },
            take: pageSize,
            skip: (page - 1) * pageSize,
            select: { id: true, body: true, createdAt: true, receiver: { select: { userId: true, nickname: true } } },
          });
          return (
            <div className="bg-white rounded-[24px] p-4 space-y-6">
              {receiver ? (
                <div className="border border-neutral-200 rounded-md p-3">
                  <SendMessageForm receiverId={receiver.userId} receiverNickname={receiver.nickname} />
                </div>
              ) : (
                <div className="text-sm text-neutral-500">닉네임 메뉴에서 ‘쪽지쓰기’를 클릭하면 작성 폼이 나타납니다.</div>
              )}
              <div>
                <h3 className="text-sm font-semibold text-neutral-900 mb-2">보낸 쪽지</h3>
                <ul className="divide-y divide-neutral-200">
                  {messages.map((m) => (
                    <li key={m.id} className="py-3 flex items-start justify-between gap-4">
                      <div className="flex-1 min-w-0">
                        <div className="text-sm text-neutral-800">
                          <Link href={`/users/${m.receiver.userId}`} className="font-semibold hover:underline">{m.receiver.nickname || "알 수 없음"}</Link>
                          <span className="text-xs text-neutral-500 ml-2">{new Date(m.createdAt).toLocaleString()}</span>
                        </div>
                        <div className="text-sm text-neutral-700 mt-1 whitespace-pre-wrap break-words">{m.body}</div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })()}
      </section>
    </div>
  );
}