ReceiveModal.tsx

import { useEffect, useRef, useState } from 'react';
import QRCode from 'qrcode';

interface ReceiveModalProps {
  addresses: string[];
  onClose: () => void;
}

export default function ReceiveModal({ addresses, onClose }: ReceiveModalProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [selectedAddr, setSelectedAddr] = useState(addresses[0] || '');

  const showToast = (msg: string) => {
    const t = document.createElement('div');
    t.className = 'toast';
    t.textContent = msg;
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 2000);
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text).then(() => showToast('Address copied!'));
  };

  useEffect(() => {
    if (canvasRef.current && selectedAddr) {
      QRCode.toCanvas(canvasRef.current, selectedAddr, {
        width: 200,
        margin: 2,
        color: {
          dark: '#0f1117',
          light: '#ffffff',
        },
      }).catch(console.error);
    }
  }, [selectedAddr]);

  useEffect(() => {
    if (addresses.length > 0 && !addresses.includes(selectedAddr)) {
      setSelectedAddr(addresses[0]);
    }
  }, [addresses, selectedAddr]);

  return (
    <div className="modal-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: '440px' }}>
        <div className="modal-header">
          <h3 className="modal-title">Receive Bitcoin</h3>
          <button className="modal-close" onClick={onClose}>✕</button>
        </div>
        <div className="modal-body">
          <div className="qr-container">
            <div className="qr-canvas-wrapper">
              <canvas ref={canvasRef} />
            </div>

            {addresses.length > 1 && (
              <select
                className="input"
                value={selectedAddr}
                onChange={e => setSelectedAddr(e.target.value)}
                style={{ maxWidth: '320px' }}
              >
                {addresses.map(a => (
                  <option key={a} value={a}>{a.slice(0, 12)}…{a.slice(-8)}</option>
                ))}
              </select>
            )}

            <div
              className="qr-address"
              onClick={() => copyToClipboard(selectedAddr)}
              title="Click to copy"
            >
              {selectedAddr}
            </div>

            <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginTop: '8px' }}>
              Tap the address to copy
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}