// The core "I'm down" mechanic — satisfying pill button with flame icon

function ImDownFlame({ filled = false, size = 20, color = '#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
      <path
        d="M12 2.5c2 3.5 0 5.5-1 7 1-0.5 2.5-0.5 3.5.5 2 2 3.5 4.5 3.5 7.5a6 6 0 1 1-12 0c0-2 .8-3.5 2-4.5.2 1.5.7 2.3 1.5 2.5-.5-2-.5-5 2.5-13z"
        fill={filled ? color : 'none'}
        stroke={color}
        strokeWidth="1.7"
        strokeLinejoin="round"
      />
    </svg>
  );
}

// Heart burst particles on the "I'm down" press
function BurstParticles({ show }) {
  if (!show) return null;
  const parts = Array.from({ length: 8 });
  return (
    <div style={{
      position: 'absolute', inset: 0,
      pointerEvents: 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {parts.map((_, i) => {
        const angle = (i / parts.length) * Math.PI * 2;
        const dist = 44;
        const x = Math.cos(angle) * dist;
        const y = Math.sin(angle) * dist;
        return (
          <div key={i} style={{
            position: 'absolute',
            width: 8, height: 8, borderRadius: '50%',
            background: i % 2 ? C.coral : C.coralSoft,
            animation: `burst-${i} 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards`,
          }}>
            <style>{`@keyframes burst-${i} {
              0%   { transform: translate(0,0) scale(0.3); opacity: 1; }
              60%  { opacity: 1; }
              100% { transform: translate(${x}px, ${y}px) scale(1); opacity: 0; }
            }`}</style>
          </div>
        );
      })}
    </div>
  );
}

// Big hero button used on Item Card
function ImDownButton({ isDown, count, onToggle, avatars }) {
  const [burst, setBurst] = React.useState(false);
  const [bump, setBump] = React.useState(false);

  const handle = () => {
    if (!isDown) {
      setBurst(true);
      setTimeout(() => setBurst(false), 600);
    }
    setBump(true);
    setTimeout(() => setBump(false), 280);
    onToggle();
  };

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <BurstParticles show={burst}/>
      <button onClick={handle} style={{
        width: '100%',
        height: 62,
        borderRadius: 999,
        border: 'none',
        background: isDown
          ? `linear-gradient(180deg, ${C.sage}, #7A9886)`
          : `linear-gradient(180deg, ${C.coral}, ${C.coralDeep})`,
        color: C.white,
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 10,
        padding: '0 22px',
        boxShadow: isDown
          ? '0 6px 18px rgba(138,168,150,0.45), inset 0 1px 0 rgba(255,255,255,0.25)'
          : '0 6px 18px rgba(255,107,91,0.45), inset 0 1px 0 rgba(255,255,255,0.3)',
        fontFamily: '"DM Sans", system-ui',
        fontWeight: 700,
        fontSize: 17,
        letterSpacing: -0.2,
        transform: bump ? 'scale(0.96)' : 'scale(1)',
        transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, box-shadow 240ms ease',
      }}>
        <div style={{
          transform: bump ? 'scale(1.25) rotate(-8deg)' : 'scale(1)',
          transition: 'transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1)',
        }}>
          <ImDownFlame filled={isDown} size={22}/>
        </div>
        <span>{isDown ? "You're in" : "I'm down"}</span>
        <div style={{
          height: 26, width: 1,
          background: 'rgba(255,255,255,0.32)',
          margin: '0 4px',
        }}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
          <AvatarStack users={avatars} size={22} max={3}/>
          <span style={{ fontVariantNumeric: 'tabular-nums', fontSize: 15.5 }}>
            {count}
          </span>
        </div>
      </button>
    </div>
  );
}

// Small inline "I'm down" pill used on list / feed cards
function ImDownPill({ isDown, count, onToggle }) {
  const [bump, setBump] = React.useState(false);
  const [burst, setBurst] = React.useState(false);
  const handle = (e) => {
    e.stopPropagation();
    if (!isDown) {
      setBurst(true);
      setTimeout(() => setBurst(false), 500);
    }
    setBump(true);
    setTimeout(() => setBump(false), 260);
    onToggle();
  };

  return (
    <div style={{ position: 'relative' }}>
      {burst && (
        <>
          {[0,1,2,3,4].map(i => {
            const angle = (i / 5) * Math.PI - Math.PI/2;
            const x = Math.cos(angle) * 22;
            const y = Math.sin(angle) * 22;
            return (
              <div key={i} style={{
                position: 'absolute',
                left: 18, top: '50%',
                width: 5, height: 5, borderRadius: '50%',
                background: C.coral,
                pointerEvents: 'none',
                animation: `pillburst-${i} 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards`,
              }}>
                <style>{`@keyframes pillburst-${i} {
                  0%   { transform: translate(0,0) scale(0.5); opacity: 1; }
                  100% { transform: translate(${x}px, ${y}px) scale(1); opacity: 0; }
                }`}</style>
              </div>
            );
          })}
        </>
      )}
      <button onClick={handle} style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        height: 34,
        padding: '0 12px 0 10px',
        borderRadius: 999,
        border: `1.5px solid ${isDown ? C.sage : C.coral}`,
        background: isDown ? C.sage : 'transparent',
        color: isDown ? C.white : C.coral,
        cursor: 'pointer',
        fontFamily: '"DM Sans", system-ui',
        fontWeight: 700, fontSize: 13.5,
        letterSpacing: -0.1,
        transform: bump ? 'scale(0.92)' : 'scale(1)',
        transition: 'transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 220ms ease, color 220ms ease, border-color 220ms ease',
      }}>
        <div style={{
          transform: bump ? 'scale(1.3) rotate(-12deg)' : 'scale(1)',
          transition: 'transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1)',
        }}>
          <ImDownFlame filled={isDown} size={14} color={isDown ? '#fff' : C.coral}/>
        </div>
        <span>{isDown ? "You're in" : "I'm down"}</span>
        <span style={{
          fontVariantNumeric: 'tabular-nums',
          opacity: 0.72,
          fontSize: 12.5,
        }}>·&nbsp;{count}</span>
      </button>
    </div>
  );
}

Object.assign(window, { ImDownFlame, ImDownButton, ImDownPill, BurstParticles });