import Link from "next/link";
import { Metadata } from "next";
import { ChevronRight, FileText, MessageCircle } from "lucide-react";
import { fetchUserProfile, type UserProfile } from "@/lib/api";
import UserProfileClient from "./UserProfileClient";
import Avatar from "@/components/Avatar";

interface UserPageProps {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ page?: string; tab?: string }>;
}

export async function generateMetadata({ params }: UserPageProps): Promise<Metadata> {
  const { id } = await params;
  try {
    const data = await fetchUserProfile(id, 1);
    return {
      title: data.user.nickname || data.user.username,
      description: `查看 ${data.user.nickname} 的资料、发帖与评论`,
    };
  } catch {
    return { title: "用户不存在" };
  }
}

export default async function UserPage({ params, searchParams }: UserPageProps) {
  const { id } = await params;
  const { page: pageStr } = await searchParams;
  const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);

  let data: UserProfile;
  try {
    data = await fetchUserProfile(id, page);
  } catch {
    return (
      <div className="max-w-md mx-auto text-center py-24">
        <p className="text-lg font-extrabold mb-1.5" style={{ color: "var(--ink)" }}>
          用户不存在
        </p>
        <p className="meta mb-5">该用户可能已注销或链接有误</p>
        <Link href="/" className="btn btn-line btn-sm">
          返回首页
        </Link>
      </div>
    );
  }

  const u = data.user;
  const stats = [
    { label: "发帖", value: data.stats.post_count, icon: <FileText size={15} /> },
    { label: "评论", value: data.stats.comment_count, icon: <MessageCircle size={15} /> },
  ];

  return (
    <div className="max-w-4xl mx-auto">
      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
        <ChevronRight size={13} />
        <span style={{ color: "var(--accent)" }}>{u.nickname || u.username}</span>
      </nav>

      {/* 用户信息卡片 */}
      <section className="panel relative overflow-hidden p-6 sm:p-8 mb-6">
        <span
          aria-hidden
          className="absolute -top-20 -right-16 w-60 h-60 rounded-full"
          style={{ background: "var(--accent-soft)" }}
        />
        <div className="relative flex items-start gap-5 sm:gap-6">
          <Avatar
            name={u.nickname || u.username}
            src={u.avatar || undefined}
            size={80}
            className="sm:!w-[88px] sm:!h-[88px]"
          />
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2.5 flex-wrap">
              <h1 className="text-[24px] sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
                {u.nickname || u.username}
              </h1>
              {u.role === "admin" && (
                <span
                  className="text-[11.5px] font-bold px-2.5 py-1 rounded-full"
                  style={{ background: "var(--gold-soft)", color: "var(--gold)" }}
                >
                  管理员
                </span>
              )}
            </div>
            <p className="meta mt-1.5 text-[13px]">
              @{u.username} · {new Date(u.created_at).toLocaleDateString("zh-CN")} 加入
            </p>
            <div className="flex gap-2.5 mt-4">
              {stats.map((s) => (
                <span
                  key={s.label}
                  className="inline-flex items-center gap-2 px-3.5 py-2 rounded-full text-[13px] font-semibold"
                  style={{ background: "var(--panel-2)", color: "var(--ink-2)" }}
                >
                  <span style={{ color: "var(--accent)" }}>{s.icon}</span>
                  {s.value} {s.label}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 发帖 / 评论 切换 */}
      <UserProfileClient userId={id} initialPosts={data} initialPage={page} />
    </div>
  );
}