// WalletModal — CIP-30 wallet picker + challenge-sign login flow.
// Wallet icons come from window.cardano[id].icon (wallet branding, not UI icons).
function WalletModal({ open, onClose, t, onLoggedIn }) {
  const [phase, setPhase] = React.useState('list'); // 'list' | 'signing' | 'error'
  const [wallets, setWallets] = React.useState([]);

  React.useEffect(() => {
    if (open) { setPhase('list'); setWallets(window.EWWallet.listWallets()); }
  }, [open]);

  if (!open) return null;

  const pick = async (id) => {
    setPhase('signing');
    try {
      const out = await window.EWWallet.login(id); // { token, user }
      onLoggedIn(out);
    } catch (e) {
      setPhase('error');
    }
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 30,
      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div role="dialog" aria-modal="true" aria-label={t('wallet.title')}
        onClick={(e) => e.stopPropagation()} className="ew-card"
        style={{ width: 'min(360px, 100%)', padding: 28, borderRadius: 16 }}>
        <span className="corner-tl" /><span className="corner-tr" />
        <span className="corner-bl" /><span className="corner-br" />

        <h2 style={{ margin: '0 0 18px', fontSize: 14, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase' }}>
          {t('wallet.title')}
        </h2>

        {phase === 'signing' ? (
          <p style={{ margin: 0, fontSize: 12, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{t('wallet.signing')}</p>
        ) : (
          <>
            {phase === 'error' && (
              <p style={{ margin: '0 0 14px', fontSize: 11, color: 'var(--sev-breaking)' }}>{t('wallet.failed')}</p>
            )}
            {wallets.length === 0 ? (
              <p style={{ margin: 0, fontSize: 12, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{t('wallet.none')}</p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {wallets.map((w) => (
                  <button key={w.id} onClick={() => pick(w.id)} style={{
                    display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
                    borderRadius: 10, cursor: 'pointer', border: '1px solid var(--border-color)',
                    background: 'transparent', color: 'var(--text-primary)', fontSize: 12,
                    letterSpacing: '0.05em', textAlign: 'left',
                  }}>
                    {w.icon
                      ? <img src={w.icon} alt="" style={{ width: 20, height: 20 }} />
                      : <span aria-hidden="true" style={{ width: 20, textAlign: 'center', color: 'var(--text-secondary)' }}>■</span>}
                    {String(w.name).toUpperCase()}
                  </button>
                ))}
              </div>
            )}
          </>
        )}

        <p style={{ margin: '18px 0 0', fontSize: 9, letterSpacing: '0.1em', color: 'var(--text-secondary)', opacity: 0.6, textAlign: 'center', textTransform: 'uppercase' }}>
          [ CLICK OUTSIDE TO DISMISS ]
        </p>
      </div>
    </div>
  );
}
window.WalletModal = WalletModal;