import { useEffect } from 'react'

export function TradeResultToast({ result, onDismiss }) {
  useEffect(() => {
    const timer = setTimeout(onDismiss, 4000)
    return () => clearTimeout(timer)
  }, [onDismiss])

  const isWin = result.type === 'won'
  const isTie = result.type === 'cancelled'

  return (
    <div
      style={{
        position: 'fixed',
        bottom: '80px',
        right: '16px',
        zIndex: 99999,
        background: isWin ? 'rgba(0,230,118,0.15)' : isTie ? 'rgba(255,215,0,0.15)' : 'rgba(255,61,87,0.15)',
        border: '1px solid ' + (isWin ? '#00E676' : isTie ? '#FFD700' : '#FF3D57'),
        borderRadius: '12px',
        padding: '14px 18px',
        minWidth: '220px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
        animation: 'slideInRight 0.3s ease',
        cursor: 'pointer',
      }}
      onClick={onDismiss}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }}>
        <span style={{ fontSize: '20px' }}>
          {isWin ? '🏆' : isTie ? '🤝' : '❌'}
        </span>
        <span style={{
          fontSize: '15px',
          fontWeight: '700',
          color: isWin ? '#00E676' : isTie ? '#FFD700' : '#FF3D57',
        }}>
          {isWin ? 'Trade Won!' : isTie ? 'Trade Tied' : 'Trade Lost'}
        </span>
      </div>
      <div style={{ fontSize: '12px', color: '#6B7A9F', marginBottom: '2px' }}>
        {result.asset} · ${result.amount}
      </div>
      <div style={{ fontSize: '14px', fontWeight: '600', color: isWin ? '#00E676' : isTie ? '#FFD700' : '#FF3D57' }}>
        {isWin ? '+$' + result.profit?.toFixed(2) : isTie ? 'Refunded $' + result.amount : '-$' + result.amount}
      </div>
    </div>
  )
}
