"use client";

import styles from "./insufficient-credits-dialog.module.css";

export interface InsufficientCreditsDialogProps {
  open: boolean;
  creditBalance: number;
  requiredCredits: number;
  shortfallCredits: number;
  onClose: () => void;
  onConfirm: () => void;
}

export function InsufficientCreditsDialog({
  open,
  creditBalance,
  requiredCredits,
  shortfallCredits,
  onClose,
  onConfirm,
}: InsufficientCreditsDialogProps) {
  if (!open) return null;

  const showCreditDetail = requiredCredits > 0 || shortfallCredits > 0;

  return (
    <div
      className={styles.overlay}
      role="dialog"
      aria-modal="true"
      aria-labelledby="insufficient-credits-title"
    >
      <div className={styles.dialog}>
        <h2 id="insufficient-credits-title" className={styles.title}>
          Not enough credits
        </h2>
        <p className={styles.content}>
          Top up your credits to unlock this message and keep the moment going.
        </p>

        {showCreditDetail ? (
          <dl className={styles.creditList}>
            <div className={styles.creditItem}>
              <dt>Balance</dt>
              <dd>{creditBalance}</dd>
            </div>
            <div className={styles.creditItem}>
              <dt>Required</dt>
              <dd>{requiredCredits}</dd>
            </div>
            <div className={styles.creditItem}>
              <dt>Still needed</dt>
              <dd>{shortfallCredits}</dd>
            </div>
          </dl>
        ) : null}

        <div className={styles.actions}>
          <button
            type="button"
            className={`${styles.button} ${styles.secondary}`}
            onClick={onClose}
          >
            Later
          </button>
          <button
            type="button"
            className={`${styles.button} ${styles.primary}`}
            onClick={onConfirm}
          >
            Top up now
          </button>
        </div>
      </div>
    </div>
  );
}
