apps/web/src/components/DonationWalletCard.tsx

'use client'

import React, { useState } from 'react'
import { QRCodeSVG } from 'qrcode.react'
import {
  explorerHref,
  paymentUri,
  type DonationWallet,
} from '@/lib/donations'

type CopyState = 'idle' | 'copied' | 'error'

export default function DonationWalletCard({
  wallet,
}: {
  wallet: DonationWallet
}) {
  const [copyState, setCopyState] = useState<CopyState>('idle')

  async function copyAddress() {
    try {
      if (!navigator.clipboard) throw new Error('Clipboard indisponível')
      await navigator.clipboard.writeText(wallet.address)
      setCopyState('copied')
    } catch {
      setCopyState('error')
    }
  }

  return (
    <section className="overflow-hidden rounded-sm border border-border bg-surface">
      <div className="h-1 bg-accent" aria-hidden="true" />
      <div className="p-6 sm:grid sm:grid-cols-[1fr_auto] sm:gap-10 sm:p-8">
        <div className="min-w-0">
          <div
            className="flex flex-wrap items-center gap-3"
            aria-label={`${wallet.symbol} · ${wallet.network}`}
          >
            <span className="seal h-10 w-10 text-xs">{wallet.symbol}</span>
            <div>
              <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted">
                Rede {wallet.network}
              </p>
              <h3 className="font-serif text-xl font-semibold text-ink">
                {wallet.asset}
              </h3>
            </div>
          </div>

          <div className="mt-6">
            <p className="text-[10px] font-semibold uppercase tracking-widest text-muted">
              Endereço público para recebimento
            </p>
            <code className="mt-2 block break-all rounded-sm border border-border bg-panel px-4 py-3 text-xs leading-relaxed text-ink">
              {wallet.address}
            </code>
          </div>

          <div className="mt-4 flex flex-wrap gap-3">
            <button
              type="button"
              onClick={copyAddress}
              className="rounded-sm bg-primary px-4 py-2.5 text-xs font-semibold uppercase tracking-wider text-white transition-colors hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
            >
              {copyState === 'copied' ? 'Copiado' : 'Copiar endereço'}
            </button>
            <a
              href={explorerHref(wallet)}
              target="_blank"
              rel="noopener noreferrer"
              className="rounded-sm border border-border bg-white px-4 py-2.5 text-xs font-semibold uppercase tracking-wider text-primary transition-colors hover:border-primary/40 hover:bg-panel"
            >
              Ver no explorador
            </a>
          </div>

          <p
            role="status"
            aria-live="polite"
            className={`mt-3 min-h-5 text-xs ${
              copyState === 'error' ? 'text-danger' : 'text-success'
            }`}
          >
            {copyState === 'copied' && 'Endereço copiado para a área de transferência.'}
            {copyState === 'error' &&
              'Não foi possível copiar. Selecione o endereço acima.'}
          </p>

          <p className="mt-4 border-l-2 border-accent pl-3 text-xs leading-relaxed text-muted">
            {wallet.networkWarning}
          </p>
        </div>

        <div className="mt-8 w-fit self-start sm:mt-0">
          <div className="rounded-sm border border-border bg-white p-4 shadow-sm">
            <QRCodeSVG
              value={paymentUri(wallet)}
              size={160}
              level="M"
              bgColor="#ffffff"
              fgColor="#0F3D5C"
              marginSize={1}
              title={`QR code ${wallet.symbol} na rede ${wallet.network}`}
            />
          </div>
          <p className="mt-2 text-center text-[10px] uppercase tracking-widest text-muted">
            Ler com a carteira
          </p>
        </div>
      </div>
    </section>
  )
}