"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Notification } from "./ui";

type FakeOutcome = "succeed" | "fail" | "cancel";

export function FakePaymentControls({
  orderReference,
  paymentReference,
}: Readonly<{ orderReference: string; paymentReference: string }>) {
  const router = useRouter();
  const [pending, setPending] = useState<FakeOutcome | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  async function simulate(outcome: FakeOutcome) {
    setPending(outcome);
    setMessage(null);
    try {
      const response = await fetch(
        `/api/payments/${encodeURIComponent(paymentReference)}/simulate`,
        {
          body: JSON.stringify({ idempotencyKey: crypto.randomUUID(), outcome }),
          headers: { "content-type": "application/json" },
          method: "POST",
        },
      );
      const payload: unknown = await response.json();
      if (!response.ok) {
        setMessage(readApiMessage(payload));
        return;
      }
      router.push(`/order-confirmation?reference=${encodeURIComponent(orderReference)}`);
      router.refresh();
    } catch {
      setMessage("The fake provider event could not be processed.");
    } finally {
      setPending(null);
    }
  }

  return (
    <div className="form-stack">
      <button
        className="button"
        disabled={pending !== null}
        onClick={() => simulate("succeed")}
        type="button"
      >
        {pending === "succeed" ? "Verifying…" : "Simulate successful payment"}
      </button>
      <button
        className="button button--secondary"
        disabled={pending !== null}
        onClick={() => simulate("fail")}
        type="button"
      >
        {pending === "fail" ? "Verifying…" : "Simulate failed payment"}
      </button>
      <button
        className="button button--secondary"
        disabled={pending !== null}
        onClick={() => simulate("cancel")}
        type="button"
      >
        {pending === "cancel" ? "Verifying…" : "Simulate cancelled payment"}
      </button>
      {message === null ? null : (
        <Notification tone="error">
          <p>{message}</p>
        </Notification>
      )}
    </div>
  );
}

function readApiMessage(value: unknown): string {
  if (
    typeof value === "object" &&
    value !== null &&
    "error" in value &&
    typeof value.error === "object" &&
    value.error !== null &&
    "message" in value.error &&
    typeof value.error.message === "string"
  ) {
    return value.error.message;
  }
  return "The fake provider event could not be processed.";
}