import { getLocale, getTranslations, setRequestLocale } from "next-intl/server";
import { CopyButton } from "@/components/copy-button";
import { StatCard } from "@/components/stat-card";
import { ensurePublisherKeys } from "@/lib/links";
import { prisma } from "@/lib/prisma";
import { formatMoney, formatNumber } from "@/lib/money";
import { publicAppUrl, requireUser } from "@/lib/session";

type ReferredRow = {
  email: string;
  name: string;
  createdAt: Date | string;
};

export default async function ReferralsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const session = await requireUser();
  const user = await ensurePublisherKeys(session.user.id);
  const fresh = user ?? (await prisma.user.findUniqueOrThrow({ where: { id: session.user.id } }));
  const t = await getTranslations();
  const loc = await getLocale();
  const [referrals, incomeRows] = await Promise.all([
    prisma.$queryRaw<ReferredRow[]>`
      SELECT email, name, createdAt
      FROM User
      WHERE referredById = ${session.user.id}
      ORDER BY createdAt DESC
    `,
    prisma.$queryRaw<Array<{ total: number | bigint | null }>>`
      SELECT COALESCE(SUM(amountMicro), 0) as total
      FROM ReferralEarning
      WHERE referrerId = ${session.user.id}
    `,
  ]);
  const incomeMicro = Number(incomeRows[0]?.total ?? 0);
  const origin = await publicAppUrl();
  const link = `${origin}/${locale}/register?ref=${fresh?.referralCode ?? ""}`;
  return (
    <div className="space-y-6">
      <h1 className="page-title">{t("referrals.title")}</h1>
      <p className="text-muted">{t("referrals.help")}</p>
      <div className="grid gap-4 sm:grid-cols-2">
        <StatCard label={t("referrals.count")} value={formatNumber(referrals.length, loc)} />
        <StatCard label={t("referrals.income")} value={formatMoney(incomeMicro, loc)} />
      </div>
      <div className="card flex items-center justify-between gap-3 p-5 text-sm">
        <span className="truncate" dir="ltr">
          {link}
        </span>
        <CopyButton value={link} />
      </div>
      <div className="card overflow-x-auto">
        <table className="w-full min-w-[500px] text-sm">
          <thead className="text-muted">
            <tr>
              <th className="p-3 text-start">{t("auth.name")}</th>
              <th className="p-3 text-start">{t("auth.email")}</th>
              <th className="p-3 text-start">{t("dashboard.date")}</th>
            </tr>
          </thead>
          <tbody>
            {referrals.length === 0 ? (
              <tr>
                <td className="p-4 text-muted" colSpan={3}>
                  {t("dashboard.noItems")}
                </td>
              </tr>
            ) : (
              referrals.map((row) => (
                <tr key={row.email} className="border-t border-line">
                  <td className="p-3">{row.name}</td>
                  <td className="p-3">{row.email}</td>
                  <td className="p-3">{new Date(row.createdAt).toLocaleString(loc)}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}