'use client'

import { useTranslations } from 'next-intl'

export type PayMethod = 'pd' | 'stripe' | 'sumup'

// 100 PD = 1 € (igual que PD_PER_UNIT en lib/dpoints, que no se importa aquí
// para no arrastrar el acceso a BD al bundle del cliente).
const PD_PER_UNIT = 100

/** Coste en PD (redondeado) de un precio en euros. */
export function pdCostOf(priceEur: number): number {
  return Math.round(priceEur * PD_PER_UNIT)
}

/**
 * Selector de forma de pago: saldo PD, tarjeta (Stripe) o tarjeta (SumUp).
 * Muestra el coste de cada método y desactiva PD si no hay saldo suficiente.
 */
export function PaymentMethodSelect({
  value,
  onChange,
  priceEur,
  pdBalance,
}: {
  value: PayMethod
  onChange: (m: PayMethod) => void
  priceEur: number
  pdBalance: number
}) {
  const t = useTranslations('Pay')
  const cost = pdCostOf(priceEur)
  const canPd = pdBalance >= cost && cost > 0

  const options: { id: PayMethod; label: string; sub: string; disabled?: boolean }[] = [
    {
      id: 'pd',
      label: t('pd'),
      sub: canPd ? t('pdCost', { cost }) : t('insufficient', { cost }),
      disabled: !canPd,
    },
    { id: 'stripe', label: t('stripe'), sub: t('eur', { price: priceEur }) },
    { id: 'sumup', label: t('sumup'), sub: t('eur', { price: priceEur }) },
  ]

  return (
    <div className="pay-method-select">
      <p className="second-brown">{t('method')}</p>
      <div className="pay-method-options">
        {options.map((o) => (
          <label
            key={o.id}
            className={`pay-method-option${value === o.id ? ' selected' : ''}${o.disabled ? ' disabled' : ''}`}
          >
            <input
              type="radio"
              name="pay-method"
              value={o.id}
              checked={value === o.id}
              disabled={o.disabled}
              onChange={() => onChange(o.id)}
            />
            <span className="pay-method-label">{o.label}</span>
            <span className={`pay-method-sub ${o.disabled ? 'red-form-response' : 'yellow-info'}`}>{o.sub}</span>
          </label>
        ))}
      </div>
      <p className="third-brown pay-method-balance">{t('balance', { balance: pdBalance })}</p>
    </div>
  )
}