import { getTranslations, setRequestLocale } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { EscrowCreateForm } from "@/components/escrow-form";
import { getEscrowSettings, listUserDeals, type EscrowStatus } from "@/lib/escrow";
import { requireUser } from "@/lib/session";

function statusKey(status: EscrowStatus) {
  return `status_${status}` as const;
}

export default async function EscrowPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const { locale } = await params;
  const query = await searchParams;
  setRequestLocale(locale);
  const session = await requireUser();
  const t = await getTranslations("escrow");
  const [settings, deals] = await Promise.all([getEscrowSettings(), listUserDeals(session.user.id)]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="page-title">{t("title")}</h1>
        <p className="mt-2 max-w-3xl text-muted">{t("intro")}</p>
      </div>
      <div className="grid gap-4 md:grid-cols-3">
        <article className="card p-4 text-sm">
          <h2 className="font-semibold">{t("step1")}</h2>
          <p className="mt-1 text-muted">{t("step1Text")}</p>
        </article>
        <article className="card p-4 text-sm">
          <h2 className="font-semibold">{t("step2")}</h2>
          <p className="mt-1 text-muted">{t("step2Text")}</p>
        </article>
        <article className="card p-4 text-sm">
          <h2 className="font-semibold">{t("step3")}</h2>
          <p className="mt-1 text-muted">{t("step3Text")}</p>
        </article>
      </div>
      <EscrowCreateForm feePercent={settings.feePercent} error={query.error} />
      <section className="card overflow-x-auto">
        <h2 className="p-4 font-semibold">{t("myDeals")}</h2>
        {deals.length === 0 ? <p className="px-4 pb-4 text-sm text-muted">{t("empty")}</p> : null}
        <table className="w-full min-w-[640px] text-sm">
          <thead className="text-muted">
            <tr>
              <th className="p-3 text-start">{t("code")}</th>
              <th className="p-3 text-start">{t("titleField")}</th>
              <th className="p-3 text-start">{t("amount")}</th>
              <th className="p-3 text-start">{t("status")}</th>
              <th className="p-3 text-start" />
            </tr>
          </thead>
          <tbody>
            {deals.map((deal) => (
              <tr key={deal.id} className="border-t border-line">
                <td className="p-3" dir="ltr">
                  {deal.code}
                </td>
                <td className="p-3">{deal.title}</td>
                <td className="p-3" dir="ltr">
                  {deal.amountUsdt} USDT
                </td>
                <td className="p-3">{t(statusKey(deal.status))}</td>
                <td className="p-3">
                  <Link href={`/dashboard/escrow/${deal.id}`} className="text-brand">
                    {t("open")}
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}