// Connect wallet & deposit flow modals

const WALLETS = [
  { id: 'metamask', name: 'MetaMask', desc: 'Connect using browser extension', color: '#f6851b', initial: 'M' },
  { id: 'wc', name: 'WalletConnect', desc: 'Scan with mobile wallet', color: '#3b99fc', initial: 'W' },
  { id: 'coinbase', name: 'Coinbase Wallet', desc: 'Coinbase smart wallet', color: '#0052ff', initial: 'C' },
  { id: 'rainbow', name: 'Rainbow', desc: 'Connect Rainbow wallet', color: '#ff6b6b', initial: 'R' },
];

function WalletConnectModal({ open, onClose, onConnected }) {
  const [connecting, setConnecting] = React.useState(null);

  function pickWallet(w) {
    setConnecting(w.id);
    setTimeout(() => {
      setConnecting(null);
      onConnected(w);
    }, 1100);
  }

  return (
    <Modal open={open} onClose={onClose} title="Connect Wallet">
      <p style={{color:'var(--text-soft)', fontSize:13, marginBottom:18}}>
        Choose a wallet to deposit your $100 USDC and activate your Terran rewards.
      </p>
      <div className="wallet-list">
        {WALLETS.map((w) => (
          <button key={w.id} className="wallet-row" onClick={() => pickWallet(w)} disabled={connecting}>
            <div className="wallet-icon" style={{background: w.color}}>{w.initial}</div>
            <div className="wallet-meta">
              <div className="wallet-name">{w.name}</div>
              <div className="wallet-desc">{connecting === w.id ? 'Connecting…' : w.desc}</div>
            </div>
            <span className="chev"><Icon name="chev"/></span>
          </button>
        ))}
      </div>
      <p style={{color:'var(--text-muted)', fontSize:11.5, marginTop:18, textAlign:'center', fontFamily:'var(--mono)'}}>
        BY CONNECTING, YOU AGREE TO TERRAN'S TERMS & PRIVACY POLICY.
      </p>
    </Modal>
  );
}

function DepositModal({ open, onClose, wallet, amount = 100, onSuccess }) {
  const [step, setStep] = React.useState('confirm'); // confirm | signing | success
  const [errored, setErrored] = React.useState(false);

  React.useEffect(() => {
    if (open) { setStep('confirm'); setErrored(false); }
  }, [open]);

  function deposit() {
    setStep('signing');
    setTimeout(() => {
      setStep('success');
      setTimeout(() => {
        onSuccess && onSuccess();
      }, 1400);
    }, 1800);
  }

  if (!open) return null;

  return (
    <Modal open={open} onClose={step === 'success' ? () => {} : onClose} title="Early Access Deposit">
      {step === 'confirm' && (
        <>
          <div style={{display:'flex', alignItems:'center', gap:10, padding:'12px 14px', border:'1px solid var(--border)', background:'var(--panel)', borderRadius:10, marginBottom:14}}>
            <div className="wallet-icon" style={{background: wallet?.color || '#888', width:28, height:28, fontSize:12}}>{wallet?.initial || 'W'}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:500}}>{wallet?.name || 'Wallet'}</div>
              <div className="mono" style={{fontSize:11.5, color:'var(--text-muted)'}}>0x7a3f…9c2e</div>
            </div>
            <div className="earn-live"><span className="pulse"></span>connected</div>
          </div>

          <div className="deposit-summary">
            <div className="dep-row"><span>Deposit amount</span><span className="v">${amount}.00 USDC</span></div>
            <div className="dep-row"><span>Network</span><span className="v">Ethereum Mainnet</span></div>
            <div className="dep-row"><span>Est. network fee</span><span className="v">~$2.40</span></div>
            <div className="dep-row"><span>Phase 1 bonus</span><span className="v" style={{color:'var(--accent)'}}>+3× points</span></div>
            <div className="dep-row total"><span>Total due</span><span className="v">${(amount + 2.4).toFixed(2)}</span></div>
          </div>

          <p style={{color:'var(--text-soft)', fontSize:12.5, marginBottom:18, lineHeight:1.6}}>
            Your deposit secures your Schok Quantum Ultra and immediately activates daily Terran point earnings. The balance of <b>${649 - amount}</b> is due when your device is ready to ship.
          </p>

          <button className="btn btn-primary btn-block btn-lg" onClick={deposit}>Sign & Deposit ${amount} USDC</button>
        </>
      )}

      {step === 'signing' && (
        <div style={{padding:'24px 0', textAlign:'center'}}>
          <div className="spinner" style={{
            width:48, height:48, margin:'0 auto 20px',
            border:'2px solid rgba(255,255,255,0.08)',
            borderTopColor:'var(--accent)',
            borderRadius:'50%',
            animation:'spin 0.8s linear infinite',
          }}/>
          <div style={{fontSize:15, fontWeight:500}}>Awaiting signature</div>
          <div style={{color:'var(--text-soft)', fontSize:13, marginTop:6}}>Confirm the transaction in your {wallet?.name || 'wallet'}.</div>
        </div>
      )}

      {step === 'success' && (
        <div style={{padding:'18px 0', textAlign:'center'}}>
          <div style={{
            width:56, height:56, borderRadius:'50%',
            background:'rgba(52, 211, 153, 0.12)',
            border:'1px solid rgba(52, 211, 153, 0.4)',
            margin:'0 auto 18px',
            display:'flex', alignItems:'center', justifyContent:'center',
            color:'var(--success)',
          }}>
            <Icon name="check" size={24}/>
          </div>
          <div style={{fontSize:18, fontWeight:600}}>Reservation locked in.</div>
          <div style={{color:'var(--text-soft)', fontSize:13, marginTop:8, maxWidth:340, margin:'8px auto 0'}}>
            Your $100 USDC deposit was confirmed. <b style={{color:'var(--accent)'}}>+300 Terran Points</b> credited as Phase 1 bonus. Daily earnings are now active.
          </div>
          <div className="mono" style={{fontSize:11.5, color:'var(--text-muted)', marginTop:14}}>
            TX: 0x9f4e…a201 · Block 19,482,317
          </div>
        </div>
      )}

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </Modal>
  );
}

window.WalletConnectModal = WalletConnectModal;
window.DepositModal = DepositModal;