import { formatMoney } from '../../utils/money';

/** What the latest Check again found for a purchase not yet confirmed. */
export type SettlementCheck = 'none' | 'checking' | 'pending' | 'unreadable' | 'refused';
/** Whether the receipts read inside the latest Check again answered. */
export type ReceiptsNote = 'none' | 'reading' | 'unreadable' | 'refused';

export type CheckoutOutcomeState =
  | { phase: 'confirming' }
  | { phase: 'slow' }
  | { phase: 'confirmed'; added: string[]; changeCents: number; totalCents: number };

const perMonth = (cents: number) => `${formatMoney(Math.abs(cents)).replace(/\.00$/, '')}/month`;

// Nothing here promises the change will arrive by itself: once the automatic reads stop, only Check again reads again.
export const slowSettlementMessage = (check: SettlementCheck): string => {
  if (check === 'refused') return 'Payment received. Your account is not allowed to read this practice\'s billing, so it cannot confirm the change. An administrator of this practice can confirm it; nothing more will be charged.';
  if (check === 'unreadable') return 'Payment received. We could not read your billing just now, so we cannot confirm the change yet. Check again in a moment; nothing more will be charged.';
  if (check === 'pending') return 'Payment received. Your change is still not confirmed. Check again shortly; nothing more will be charged.';
  return 'Payment received. Your change is taking longer than usual to confirm. Check again to look now; nothing more will be charged.';
};

export const receiptsNoteMessage = (note: ReceiptsNote): string | null => {
  if (note === 'unreadable') return 'We could not load your receipts just now.';
  if (note === 'refused') return 'Your account is not allowed to read this practice\'s receipts.';
  return null;
};

export const CheckAgainButton = ({ check, onCheckAgain, className = 'btn btn-blue' }: {
  check: SettlementCheck; onCheckAgain: () => void; className?: string;
}) => (check === 'refused' ? null : (
  <button
    type="button"
    className={check === 'checking' ? className + ' btn-busy' : className}
    onClick={onCheckAgain}
    disabled={check === 'checking'}
    aria-busy={check === 'checking'}
  >
    {check === 'checking' ? 'Checking\u2026' : 'Check again'}
  </button>
));

// What replaces the payment form. Success is said only once our own state agrees; before that it is pending.
export const CheckoutOutcome = ({ outcome, onClose, check = 'none', onCheckAgain, receipts = 'none' }: {
  outcome: CheckoutOutcomeState;
  onClose: () => void;
  check?: SettlementCheck;
  onCheckAgain?: () => void;
  receipts?: ReceiptsNote;
}) => {
  if (outcome.phase === 'confirming') {
    return <p className="text-sm" role="status">Payment received. Confirming your change…</p>;
  }
  if (outcome.phase === 'slow') {
    return (
      <div className="space-y-3">
        <p className="text-sm" role="status">{slowSettlementMessage(check)}</p>
        {receiptsNoteMessage(receipts) && <p className="text-sm text-muted-foreground">{receiptsNoteMessage(receipts)}</p>}
        <div className="flex items-center justify-end gap-2">
          <button type="button" className="btn btn-blue-ghost" onClick={onClose}>Close</button>
          {onCheckAgain && <CheckAgainButton check={check} onCheckAgain={onCheckAgain} />}
        </div>
      </div>
    );
  }
  return (
    <div className="space-y-3">
      <div role="status" className="space-y-1">
        <p className="font-semibold">{outcome.added.length ? `${outcome.added.join(', ')} added` : 'Subscription updated'}</p>
        {outcome.changeCents !== 0 && (
          <p className="text-sm">
            {outcome.changeCents > 0 ? 'Added to your monthly bill: ' : 'Taken off your monthly bill: '}
            <strong>{perMonth(outcome.changeCents)}</strong>
          </p>
        )}
        <p className="text-sm">New monthly total: <strong>{perMonth(outcome.totalCents)}</strong></p>
      </div>
      {receiptsNoteMessage(receipts) && <p className="text-sm text-muted-foreground">{receiptsNoteMessage(receipts)}</p>}
      <button type="button" className="btn btn-blue" onClick={onClose}>Close</button>
    </div>
  );
};