import type { PaymentMethod } from './PaymentMethodList'

export function PaymentInstructions({ method, title, steps }: { method?: PaymentMethod; title?: string; steps?: string[] }) {
  const computed = steps ?? (method ? getSteps(method) : [])
  const finalSteps = computed.length ? computed : ['Ikuti instruksi yang muncul pada layar pembayaran.']
  const finalTitle = title ?? 'Cara bayar'
  return (
    <div className="mt-2 rounded-lg border-2 border-gray-300 p-3 bg-white" role="region" aria-label={finalTitle}>
      <div className="text-sm font-medium mb-2">{finalTitle}</div>
      <ol className="list-decimal list-inside space-y-2 text-sm text-gray-800">
        {finalSteps.map((s, i) => (
          <li key={i}>{s}</li>
        ))}
      </ol>
    </div>
  )
}

function getSteps(method: PaymentMethod): string[] {
  switch (method) {
    case 'bank_transfer':
      return [
        'Pilih bank dan buat nomor VA.',
        'Masuk ke aplikasi/ATM bank dan pilih menu Virtual Account.',
        'Masukkan nomor VA lalu konfirmasi nominal.',
        'Selesaikan pembayaran sebelum waktu habis.'
      ]
    case 'credit_card':
      return [
        'Isi nomor kartu, masa berlaku, dan CVV.',
        'Klik Bayar dan lengkapi verifikasi 3D Secure/OTP.',
        'Transaksi akan diproses, tunggu konfirmasi penyelesaian.'
      ]
    case 'gopay':
      return [
        'Buka aplikasi GoPay/QRIS dan pilih menu Scan.',
        'Arahkan kamera ke QR di layar.',
        'Konfirmasi pembayaran di aplikasi.'
      ]
    case 'cstore':
      return [
        'Pilih toko (Alfamart/Indomaret) dan buat kode pembayaran.',
        'Datang ke kasir dan tunjukkan/sebutkan kode pembayaran.',
        'Konfirmasi nominal lalu selesaikan pembayaran di kasir.',
        'Simpan struk, status akan diperbarui dalam beberapa menit.'
      ]
    default:
      return ['Ikuti instruksi yang muncul pada layar pembayaran.']
  }
}