import { getLocale, getTranslations, setRequestLocale } from "next-intl/server";
import { PayoutForm } from "@/components/payout-form";
import { StatCard } from "@/components/stat-card";
import { getSetting } from "@/lib/earnings";
import { prisma } from "@/lib/prisma";
import { formatMoney } from "@/lib/money";
import { requireUser } from "@/lib/session";

export default async function WalletPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const session = await requireUser();
  const t = await getTranslations("wallet");
  const loc = await getLocale();
  const [user, payouts, minUsd] = await Promise.all([
    prisma.user.findUniqueOrThrow({ where: { id: session.user.id } }),
    prisma.payoutRequest.findMany({
      where: { userId: session.user.id },
      orderBy: { createdAt: "desc" },
    }),
    getSetting("minPayoutUsd", "5"),
  ]);
  const pending = payouts
    .filter((p) => p.status === "PENDING")
    .reduce((s, p) => s + p.amountMicro, 0);
  const paid = payouts
    .filter((p) => p.status === "APPROVED")
    .reduce((s, p) => s + p.amountMicro, 0);

  return (
    <div className="space-y-6">
      <h1 className="page-title">{t("title")}</h1>
      <p className="text-sm text-muted">
        {t("min")}: ${minUsd}
      </p>
      <div className="grid gap-4 sm:grid-cols-3">
        <StatCard label={t("available")} value={formatMoney(user.balanceMicro, loc)} />
        <StatCard label={t("pending")} value={formatMoney(pending, loc)} />
        <StatCard label={t("paidOut")} value={formatMoney(paid, loc)} />
      </div>
      <PayoutForm />
      <div className="card overflow-x-auto">
        <h2 className="p-4 font-semibold">{t("history")}</h2>
        <table className="w-full min-w-[600px] text-sm">
          <thead className="text-muted">
            <tr>
              <th className="p-3 text-start">{t("amount")}</th>
              <th className="p-3 text-start">{t("method")}</th>
              <th className="p-3 text-start">{t("status")}</th>
            </tr>
          </thead>
          <tbody>
            {payouts.map((row) => (
              <tr key={row.id} className="border-t border-line">
                <td className="p-3">{formatMoney(row.amountMicro, loc)}</td>
                <td className="p-3">{row.method}</td>
                <td className="p-3">{t(row.status)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}