// wci26/share-modal.jsx — "Which Country Are You?" share card + confetti

const ShareModal = ({ open, country, amount, onClose }) => {
  const [showCard, setShowCard] = React.useState(false);
  React.useEffect(() => {
    if (open) {
      setShowCard(false);
      const t = setTimeout(() => setShowCard(true), 100);
      return () => clearTimeout(t);
    }
  }, [open]);

  if (!open || !country) return null;
  const c = country;

  return (
    <div className="share-card" style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(10,6,21,0.85)', backdropFilter: 'blur(8px)',
      display: 'grid', placeItems: 'center',
      overflow: 'hidden',
      animation: 'fadeIn 280ms var(--ease)',
    }} onClick={onClose}>
      {/* Confetti */}
      <Confetti color={c.color} secondary={c.secondary} />

      <div onClick={e => e.stopPropagation()} style={{
        position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
        width: 'calc(100vw - 24px)', maxWidth: 560, boxSizing: 'border-box',
        transform: showCard ? 'scale(1)' : 'scale(0.85)',
        opacity: showCard ? 1 : 0,
        transition: 'all 400ms var(--ease-back)',
      }}>
        {/* Share card */}
        <ShareCard country={c} amount={amount} />

        {/* Actions */}
        <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
          <button className="btn-3d" style={{
            background: 'linear-gradient(180deg, #1DA1F2, #0d6daa)',
            color: '#fff',
            boxShadow: `
              inset 0 2px 0 rgba(255,255,255,0.4),
              0 4px 0 #0d6daa,
              0 6px 0 #08486f,
              0 10px 20px -2px rgba(0,0,0,0.6),
              0 0 32px -8px #1DA1F2
            `,
            textShadow: '0 1px 0 rgba(0,0,0,0.3)',
          }}>
            POST TO X
          </button>
          <button onClick={onClose} style={{
            padding: '14px 22px', borderRadius: 14,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid var(--hair-strong)',
            color: 'var(--t2)', cursor: 'pointer',
            fontWeight: 700, fontSize: 13,
            fontFamily: 'Bricolage Grotesque, sans-serif',
            letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>Close</button>
        </div>

        {/* Paul reaction */}
        <div className="share-paul" style={{
          position: 'absolute', top: -120, right: -100,
          width: 140, height: 140, pointerEvents: 'none',
          animation: 'wiggle 1.6s ease-in-out infinite',
        }}>
          <img src="assets/chibi_jumping.png" width="140" height="140" alt="Paul" />
        </div>
      </div>
    </div>
  );
};

// The share card itself (re-usable, lockable preview)
const ShareCard = ({ country: c, amount = 100 }) => {
  const tokenLabel = typeof wciCountryDollarTicker === 'function' ? wciCountryDollarTicker(c) : `$${c.code}26`;
  return (
    <div style={{
      width: 'calc(100vw - 32px)', maxWidth: 520, boxSizing: 'border-box',
      padding: 'clamp(20px, 6vw, 32px)', borderRadius: 24,
      background: `
        radial-gradient(ellipse 70% 50% at 70% 0%, ${c.color}55, transparent 70%),
        radial-gradient(ellipse 70% 50% at 30% 100%, ${c.secondary}33, transparent 70%),
        linear-gradient(180deg, #1a1340 0%, #0a0615 100%)`,
      border: `2px solid ${c.color}`,
      boxShadow: `
        inset 0 2px 0 rgba(255,255,255,0.15),
        0 30px 80px -10px rgba(0,0,0,0.8),
        0 0 80px -10px ${c.color}
      `,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Holo overlay pattern */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `repeating-linear-gradient(135deg, transparent 0 8px, ${c.color}06 8px 9px)`,
        pointerEvents: 'none',
      }} />

      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <div className="label" style={{ color: c.color }}>CRYPTO WORLD CUP · 2026</div>
        <img src="assets/logo.png" width="32" height="32" style={{ borderRadius: 8 }} />
      </div>

      {/* Big flag + I'm team */}
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '12px 0' }}>
        <div style={{ marginBottom: 16 }}>
          <FlagRect code={c.code} w={120} h={80} style={{ borderRadius: 8, boxShadow: `0 8px 24px -4px ${c.color}, inset 0 0 0 2px rgba(255,255,255,0.2)` }} />
        </div>
        <div className="display" style={{ fontSize: 14, color: 'var(--t3)', letterSpacing: '0.1em' }}>I'M TEAM</div>
        <div className="display" style={{ fontSize: 'clamp(34px, 9vw, 56px)', lineHeight: 1, color: '#fff', letterSpacing: '-0.03em', marginTop: 4 }}>
          {c.name}
        </div>
        <div className="display" style={{ fontSize: 22, color: c.color, marginTop: 8, textShadow: `0 0 16px ${c.color}` }}>
          {tokenLabel}
        </div>
      </div>

      {/* Stats row */}
      <div style={{
        marginTop: 22, padding: '14px 18px', borderRadius: 14,
        background: 'rgba(0,0,0,0.4)',
        border: '1px solid ' + c.color + '44',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
      }}>
        <div style={{ textAlign: 'center' }}>
          <div className="label" style={{ fontSize: 9 }}>PRICE</div>
          <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginTop: 2 }}>
            {typeof wciFormatCountryPrice === 'function' ? wciFormatCountryPrice(c) : fmtPrice(c.price)}
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div className="label" style={{ fontSize: 9 }}>RANK</div>
          <div className="display" style={{ fontSize: 18, color: c.rank <= 3 ? 'var(--gold)' : '#fff', marginTop: -2 }}>#{c.rank}</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div className="label" style={{ fontSize: 9 }}>YOUR STAKE</div>
          <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: 'var(--lime)', marginTop: 2 }}>${amount.toFixed(0)}</div>
        </div>
      </div>

      {/* Badge */}
      <div style={{
        position: 'absolute', top: 20, right: 20,
        padding: '4px 10px', borderRadius: 999,
        background: 'rgba(245,208,32,0.2)',
        border: '1px solid var(--gold)',
        color: 'var(--gold)', fontSize: 9, fontWeight: 700,
        letterSpacing: '0.1em',
      }}>FIRST 100 HOLDER</div>

      {/* Bottom tagline */}
      <div style={{
        marginTop: 18, paddingTop: 14, borderTop: '1px solid ' + c.color + '22',
        textAlign: 'center', fontSize: 12, color: 'var(--t2)',
      }}>
        Join the Crypto World Cup · <span className="mono" style={{ color: c.color }}>WCI26.com</span>
      </div>
    </div>
  );
};

// Confetti — 60 squares falling
const Confetti = ({ color, secondary }) => {
  const palette = [color, secondary, '#F5D020', '#9FD634', '#4ED1E6', '#FF7A1F'];
  const pieces = React.useMemo(() => Array.from({ length: 80 }).map((_, i) => ({
    x: Math.random() * 100,
    delay: Math.random() * 0.6,
    dur: 1.6 + Math.random() * 2.0,
    rot: Math.random() * 360,
    size: 6 + Math.random() * 8,
    color: palette[i % palette.length],
  })), []);
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      {pieces.map((p, i) => (
        <div key={i} style={{
          position: 'absolute', top: -20, left: `${p.x}%`,
          width: p.size, height: p.size * 0.5,
          background: p.color,
          transform: `rotate(${p.rot}deg)`,
          animation: `confetti-fall ${p.dur}s linear ${p.delay}s forwards`,
        }} />
      ))}
    </div>
  );
};

window.ShareModal = ShareModal;
window.ShareCard = ShareCard;
window.Confetti = Confetti;