import React from 'react'

type TabKey = 'mobile' | 'atm' | 'ib'

export function BcaInstructionList() {
  const [tab, setTab] = React.useState<TabKey>('mobile')
  return (
    <div className="mt-2 rounded-lg border-2 border-gray-300 bg-white">
      <div className="p-3">
        <div className="text-sm font-medium mb-2">Instruksi BCA</div>
        <div
          role="tablist"
          aria-label="Metode pembayaran BCA"
          className="inline-flex mb-3 rounded-md border border-gray-300 overflow-hidden"
        >
          <button
            type="button"
            id="tab-bca-mobile"
            role="tab"
            aria-selected={tab === 'mobile'}
            aria-controls="panel-bca-mobile"
            onClick={() => setTab('mobile')}
            className={`px-3 py-2 text-xs font-medium focus:outline-none focus-visible:ring-[#2563EB] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white transition ${tab === 'mobile' ? 'bg-black text-white' : 'bg-transparent hover:bg-gray-100'}`}
          >
            BCA Mobile
          </button>
          <button
            type="button"
            id="tab-bca-atm"
            role="tab"
            aria-selected={tab === 'atm'}
            aria-controls="panel-bca-atm"
            onClick={() => setTab('atm')}
            className={`px-3 py-2 text-xs font-medium focus:outline-none focus-visible:ring-[#2563EB] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white transition ${tab === 'atm' ? 'bg-black text-white' : 'bg-transparent hover:bg-gray-100'}`}
          >
            ATM BCA
          </button>
          <button
            type="button"
            id="tab-bca-ib"
            role="tab"
            aria-selected={tab === 'ib'}
            aria-controls="panel-bca-ib"
            onClick={() => setTab('ib')}
            className={`px-3 py-2 text-xs font-medium focus:outline-none focus-visible:ring-[#2563EB] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white transition ${tab === 'ib' ? 'bg-black text-white' : 'bg-transparent hover:bg-gray-100'}`}
          >
            KlikBCA
          </button>
        </div>
        {tab === 'mobile' && (
          <div role="tabpanel" id="panel-bca-mobile" aria-labelledby="tab-bca-mobile">
            <StepsMobile />
          </div>
        )}
        {tab === 'atm' && (
          <div role="tabpanel" id="panel-bca-atm" aria-labelledby="tab-bca-atm">
            <StepsAtm />
          </div>
        )}
        {tab === 'ib' && (
          <div role="tabpanel" id="panel-bca-ib" aria-labelledby="tab-bca-ib">
            <StepsKlikBca />
          </div>
        )}
      </div>
      <div className="border-t border-gray-200 p-3 text-xs text-gray-600">
        Catatan: Gunakan label "Nomor VA" secara konsisten di semua metode.
      </div>
    </div>
  )
}

function StepsMobile() {
  const steps = [
    'Buka BCA Mobile, pilih m-BCA dan login.',
    'Masuk ke menu m-Transfer.',
    'Pilih BCA Virtual Account.',
    'Masukkan Nomor VA dari halaman ini.',
    'Periksa nama tujuan dan nominal, pastikan sesuai.',
    'Kirim dan konfirmasi.',
    'Masukkan PIN m-BCA untuk menyelesaikan pembayaran.'
  ]
  return <StepList steps={steps} />
}

function StepsAtm() {
  const steps = [
    'Masukkan kartu dan PIN di ATM BCA.',
    'Pilih Transaksi Lainnya.',
    'Pilih Transfer.',
    'Pilih ke BCA Virtual Account.',
    'Masukkan Nomor VA dari halaman ini.',
    'Periksa detail dan nominal, lalu konfirmasi.',
    'Selesaikan transaksi dan simpan bukti.'
  ]
  return <StepList steps={steps} />
}

function StepsKlikBca() {
  const steps = [
    'Login ke KlikBCA (Internet Banking).',
    'Pilih menu Transfer Dana.',
    'Pilih ke BCA Virtual Account.',
    'Masukkan Nomor VA dari halaman ini.',
    'Periksa detail dan nominal, lalu lanjutkan.',
    'Masukkan respon KeyBCA untuk konfirmasi.',
    'Transaksi selesai, simpan bukti/nota.'
  ]
  return <StepList steps={steps} />
}

function StepList({ steps }: { steps: string[] }) {
  return (
    <ol className="list-decimal list-inside space-y-2 text-sm text-gray-800">
      {steps.map((s, i) => (
        <li key={i}>{s}</li>
      ))}
    </ol>
  )
}