import { useState } from 'react'
import { useStore } from '@/store'
import { Icons } from '@/Components/icons'

export function ToastHost({ toasts }) {
  return (
    <div className="toast-host">
      {toasts.map((t) => (
        <div key={t.id} className={'toast ' + (t.kind || '')}>
          {t.icon && <span style={{ fontSize: 16 }}>{t.icon}</span>}
          <span>{t.msg}</span>
        </div>
      ))}
    </div>
  )
}

export function Confetti() {
  const cols = ['#00E676', '#FFD700', '#F0F4FF', '#00b85f']
  const bits = Array.from({ length: 60 }, (_, i) => i)
  return (
    <div className="confetti">
      {bits.map((i) => {
        const dur = 1.6 + Math.random() * 1.4
        return (
          <i key={i} style={{
            left: Math.random() * 100 + '%',
            background: cols[i % cols.length],
            animationDuration: dur + 's',
            animationDelay: Math.random() * 0.4 + 's',
            opacity: 0,
          }} />
        )
      })}
    </div>
  )
}

export function ResultModal({ result, onClose }) {
  const win = result.win
  return (
    <div className="modal-scrim" onClick={onClose}>
      {win && <Confetti />}
      <div className="result-card" onClick={(e) => e.stopPropagation()}>
        <div className={'check-ring ' + (win ? 'win' : 'loss')}>{win ? '✓' : '✕'}</div>
        <div className={'big-amt ' + (win ? 'up' : 'down')}>
          {win ? '+' : '−'}${Math.abs(win ? result.profit : result.amount).toFixed(2)}
        </div>
        <h3 className={win ? 'up' : 'down'}>{win ? 'YOU WIN' : 'TRADE LOST'}</h3>
        <p className="muted" style={{ fontSize: 13, marginTop: 6 }}>
          {result.asset} · {result.dir} · ${result.amount.toFixed(2)} stake
        </p>
        <button className={'btn-primary ' + (win ? 'green' : '')} onClick={onClose}>
          {win ? 'Collect & Continue' : 'Try Again'}
        </button>
      </div>
    </div>
  )
}

export function DepositModal() {
  const { balance, setBalance, toast, setDepositOpen } = useStore()
  const [method, setMethod] = useState('Card')
  const [amt, setAmt] = useState(100)
  const opts = [50, 100, 250, 500, 1000, 2500]
  const methods = [{ k: 'Card', i: '💳' }, { k: 'Crypto', i: '₿' }, { k: 'Bank', i: '🏦' }]
  const deposit = () => {
    setBalance((b) => b + amt)
    toast(`Deposited $${amt} · +100% bonus pending`, 'win', '✓')
    setDepositOpen(false)
  }
  return (
    <div className="modal-scrim" onClick={() => setDepositOpen(false)}>
      <div className="result-card" style={{ maxWidth: 440, width: 440, textAlign: 'left', padding: 28 }} onClick={(e) => e.stopPropagation()}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <h3 className="disp" style={{ fontSize: 22 }}>Deposit Funds</h3>
          <button onClick={() => setDepositOpen(false)} style={{ color: 'var(--muted)' }}><Icons.x /></button>
        </div>
        <div className="bonus" style={{ marginTop: 0 }}>
          <span style={{ fontSize: 22 }}>🎁</span>
          <div>
            <div style={{ fontWeight: 700, color: 'var(--gold)' }}>100% Deposit Bonus</div>
            <div className="muted" style={{ fontSize: 12 }}>Up to $500 on your first deposit</div>
          </div>
        </div>
        <div className="section-title" style={{ marginTop: 14 }}>Payment Method</div>
        <div className="pay-grid">
          {methods.map((m) => (
            <button key={m.k} className={'pay' + (method === m.k ? ' active' : '')} onClick={() => setMethod(m.k)}>
              <div className="pic">{m.i}</div>{m.k}
            </button>
          ))}
        </div>
        <div className="section-title">Amount</div>
        <div className="amt-grid">
          {opts.map((o) => (
            <button key={o} className={'amt-opt' + (amt === o ? ' active' : '')} onClick={() => setAmt(o)}>${o}</button>
          ))}
        </div>
        <button className="btn-primary green" onClick={deposit}>Deposit ${amt} via {method}</button>
      </div>
    </div>
  )
}
