"use client";

import { useId, type ReactNode } from "react";

import type { PaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";

import { LazyStripePaymentDialog } from "./lazy-stripe-payment-dialog";
import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";

type PaymentLaunchDialogFlow = Pick<
  PaymentLaunchFlow,
  | "handleEzpayCancel"
  | "handleEzpayConfirm"
  | "handleStripeClose"
  | "handleStripeConfirmed"
  | "isConfirmingEzpay"
  | "shouldShowEzpayConfirmDialog"
  | "shouldShowStripeDialog"
  | "stripeClientSecret"
>;

export interface PaymentLaunchDialogsProps {
  currentOrderId: string | null;
  externalCheckoutAnalyticsKey: string;
  ezpayDescription: ReactNode;
  launch: PaymentLaunchDialogFlow;
  stripeReturnPath?: string;
}

export function PaymentLaunchDialogs({
  currentOrderId,
  externalCheckoutAnalyticsKey,
  ezpayDescription,
  launch,
  stripeReturnPath,
}: PaymentLaunchDialogsProps) {
  return (
    <>
      {launch.shouldShowEzpayConfirmDialog ? (
        <EzpayRedirectConfirmDialog
          orderId={currentOrderId ?? ""}
          description={ezpayDescription}
          externalCheckoutAnalyticsKey={externalCheckoutAnalyticsKey}
          isConfirming={launch.isConfirmingEzpay}
          onCancel={launch.handleEzpayCancel}
          onConfirm={launch.handleEzpayConfirm}
        />
      ) : null}
      {launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
        <LazyStripePaymentDialog
          clientSecret={launch.stripeClientSecret}
          returnPath={stripeReturnPath}
          onClose={launch.handleStripeClose}
          onConfirmed={launch.handleStripeConfirmed}
        />
      ) : null}
    </>
  );
}

interface EzpayRedirectConfirmDialogProps {
  description: ReactNode;
  externalCheckoutAnalyticsKey: string;
  isConfirming: boolean;
  onCancel: () => void;
  onConfirm: () => void;
  orderId: string;
}

function EzpayRedirectConfirmDialog({
  description,
  externalCheckoutAnalyticsKey,
  isConfirming,
  onCancel,
  onConfirm,
  orderId,
}: EzpayRedirectConfirmDialogProps) {
  const titleId = useId();

  return (
    <div
      className={styles.overlay}
      role="alertdialog"
      aria-modal="true"
      aria-labelledby={titleId}
    >
      <div className={styles.dialog}>
        <div className={styles.header}>
          <h2 id={titleId} className={styles.title}>
            Continue to GCash?
          </h2>
          <p className={styles.content}>{description}</p>
          <p className={styles.content}>Order No. {orderId}</p>
        </div>
        <div className={styles.actions}>
          <button
            type="button"
            className={`${styles.button} ${styles.secondary}`}
            disabled={isConfirming}
            onClick={onCancel}
          >
            Cancel
          </button>
          <button
            type="button"
            data-analytics-key={externalCheckoutAnalyticsKey}
            data-analytics-label="Continue to external checkout"
            className={`${styles.button} ${styles.primary}`}
            disabled={isConfirming}
            onClick={onConfirm}
          >
            {isConfirming ? "Opening..." : "Continue"}
          </button>
        </div>
      </div>
    </div>
  );
}