import { define } from "../../../../utils.ts";
import { page } from "fresh";

export const handler = define.handlers({
  async GET(ctx) {
    const url = new URL(ctx.req.url);
    const success = url.searchParams.get("success") === "true";
    const amount = url.searchParams.get("amount") ?? "";
    return page({ success, amount });
  },
});

export default define.page(function RentConfirmation({ data }) {
  const { success, amount } = data as { success: boolean; amount?: string };
  return (
    <div class="min-h-screen bg-gray-50 flex items-center justify-center px-4">
      <div class="max-w-lg w-full bg-white shadow rounded-lg p-8 text-center">
        {success
          ? (
            <>
              <h1 class="text-2xl font-bold text-green-700 mb-2">
                Payment Successful
              </h1>
              {amount && <p class="text-gray-700 mb-4">Amount: ${amount}</p>}
              <p class="text-gray-600 mb-6">
                A receipt is available from your payment history.
              </p>
              <a
                href="/tenant/payments"
                class="inline-flex items-center px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700"
              >
                View Payments
              </a>
            </>
          )
          : (
            <>
              <h1 class="text-2xl font-bold text-red-700 mb-2">
                Payment Failed
              </h1>
              <p class="text-gray-600 mb-6">
                Please try again or contact support.
              </p>
              <a
                href="/tenant/rent/pay"
                class="inline-flex items-center px-4 py-2 rounded-md bg-gray-700 text-white hover:bg-gray-800"
              >
                Back to Rent Payment
              </a>
            </>
          )}
      </div>
    </div>
  );
});