import { getLocale, getTranslations, setRequestLocale } from "next-intl/server";
import { notFound } from "next/navigation";
import { Link } from "@/i18n/navigation";
import { ChatRoom } from "@/components/chat-room";
import { getAdminChat, localeName } from "@/lib/chat";
import { formatMoney, formatNumber } from "@/lib/money";
import { requireAdmin } from "@/lib/session";

export default async function AdminChatUserPage({
  params,
}: {
  params: Promise<{ locale: string; userId: string }>;
}) {
  const { locale, userId } = await params;
  setRequestLocale(locale);
  await requireAdmin();
  const data = await getAdminChat(userId);
  if (!data) notFound();
  const t = await getTranslations("chat");
  const loc = await getLocale();
  const account = data.account;

  return (
    <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
      <div className="space-y-4">
        <div>
          <h1 className="page-title">{account.name}</h1>
          <p className="text-muted">{t("withMember")}</p>
        </div>
        <div className="card overflow-hidden">
          <ChatRoom endpoint={`/api/chat/${userId}`} pollEndpoint={`/api/chat/${userId}`} viewer="admin" />
        </div>
      </div>
      <aside className="card h-fit space-y-3 p-5 text-sm">
        <h2 className="text-lg font-semibold">{t("account")}</h2>
        <p>
          <span className="text-muted">{t("name")}: </span>
          {account.name}
        </p>
        <p>
          <span className="text-muted">{t("email")}: </span>
          {account.email}
        </p>
        <p dir="ltr">
          <span className="text-muted">{t("userId")}: </span>
          {account.id}
        </p>
        <p>
          <span className="text-muted">{t("role")}: </span>
          {account.role}
        </p>
        <p>
          <span className="text-muted">{t("balance")}: </span>
          {formatMoney(account.balanceMicro, loc)}
        </p>
        <p>
          <span className="text-muted">{t("links")}: </span>
          {formatNumber(account.links, loc)}
        </p>
        <p>
          <span className="text-muted">{t("files")}: </span>
          {formatNumber(account.files, loc)}
        </p>
        <p>
          <span className="text-muted">{t("referral")}: </span>
          {account.referralCode ?? t("none")}
        </p>
        <p>
          <span className="text-muted">{t("payoutMethod")}: </span>
          {account.payoutMethod ?? t("none")}
        </p>
        <p className="break-words">
          <span className="text-muted">{t("payoutDetails")}: </span>
          {account.payoutDetails ?? t("none")}
        </p>
        <p>
          <span className="text-muted">{t("memberLanguage")}: </span>
          {localeName(account.locale)}
        </p>
        <p>
          <span className="text-muted">{t("joined")}: </span>
          {new Date(account.createdAt).toLocaleString(loc)}
        </p>
        <Link href="/admin/chat" className="inline-block text-brand">
          {t("back")}
        </Link>
      </aside>
    </div>
  );
}