'use client'

import { useTranslations } from 'next-intl'

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

// 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
// Los PV cuestan este factor por el coste en PD (igual que VP_PRICE_FACTOR en
// lib/pay-with-dpoints). Mantener sincronizados.
const VP_PRICE_FACTOR = 2

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

/** Coste en PV de un precio en euros (más caro que en PD). */
export function vpCostOf(priceEur: number): number {
  return pdCostOf(priceEur) * VP_PRICE_FACTOR
}

/**
 * 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,
  vpBalance,
}: {
  value: PayMethod
  onChange: (m: PayMethod) => void
  priceEur: number
  pdBalance: number
  vpBalance?: number // si se pasa, muestra la opción de pagar con PV (solo /send-gift)
}) {
  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,
    },
  ]

  // Opción PV: solo cuando el formulario la habilita pasando el saldo VP.
  if (vpBalance !== undefined) {
    const vCost = vpCostOf(priceEur)
    const canVp = vpBalance >= vCost && vCost > 0
    options.push({
      id: 'vp',
      label: t('vp'),
      sub: canVp ? t('vpCost', { cost: vCost }) : t('insufficientVp', { cost: vCost }),
      disabled: !canVp,
    })
  }

  options.push(
    { 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 })}
        {vpBalance !== undefined ? ` · ${t('balanceVp', { balance: vpBalance })}` : ''}
      </p>
    </div>
  )
}