import { redirect } from "next/navigation";
import Link from "next/link";
import { cookies } from "next/headers";
import { ChevronRight } from "lucide-react";
import { authCookieHeader } from "@/lib/cookies";
import { getMeCached } from "@/lib/serverData";
import Avatar from "@/components/Avatar";
import ProfileForm from "./ProfileForm";
import PasswordForm from "./PasswordForm";

// SSR 直出账号信息：未登录直接跳登录页，登录后 F5 不再有"正在加载…"闪动
export default async function SettingsPage() {
  const cookie = authCookieHeader(await cookies());
  const me = await getMeCached(cookie || undefined);
  const user = me.user;
  if (!user) {
    redirect(`/login?redirect=${encodeURIComponent(`/settings`)}`);
  }

  return (
    <div className="max-w-md 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)" }}>账号设置</span>
      </nav>

      <div className="mb-7">
        <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
          账号设置
        </h1>
      </div>

      <div className="panel p-5 mb-7 flex items-center gap-4">
        <Avatar name={user.nickname || user.username} src={user.avatar || undefined} size={46} />
        <div className="min-w-0">
          <div className="font-bold truncate" style={{ color: "var(--ink)" }}>
            {user.nickname}
          </div>
          <div className="meta">@{user.username} · {user.role === "admin" ? "管理员" : "普通用户"}</div>
        </div>
      </div>

      <div className="space-y-7">
        <ProfileForm user={user} />
        <PasswordForm />
      </div>
    </div>
  );
}