// CSS 过渡动画
// components/VoteBar.tsx
import { useEffect, useState } from 'react';

export const VoteBar = ({ current, previous, label }: { current: number; previous: number; label: string; }) => {
  const [display, setDisplay] = useState(previous);
  
  // 数字递增动画
  useEffect(() => {
    if (current <= display) { setDisplay(current); return; }
    const step = Math.max(1, Math.ceil((current - display) / 20));
    const timer = setInterval(() => {
      setDisplay(d => {
        if (d >= current) { clearInterval(timer); return d; }
        return Math.min(d + step, current);
      });
    }, 50);
    return () => clearInterval(timer);
  }, [current]);

  return (
    <div className="vote-bar">
      <div className="label">{label}</div>
      <div className="bar-container">
        <div className="bar-fill" style={{ 
          width: `${display}%`,
          transition: 'width 1s ease-out',
        }} />
      </div>
      <div className="count">{display} 票</div>
    </div>
  );
};

// 使用 Solana 的 WebSocket 订阅
import { Connection, clusterApiUrl, PublicKey } from '@solana/web3.js';

const wsConnection = new Connection(clusterApiUrl('devnet'), 'confirmed');

export function subscribeToPoll(pollAddress: string, onUpdate: (data: any) => void) {
  const pubKey = new PublicKey(pollAddress);
  
  // 订阅账户变化
  const subId = wsConnection.onAccountChange(pubKey, (accountInfo) => {
    // 反序列化数据
    onUpdate(accountInfo.data);
  });
  
  return () => wsConnection.removeAccountChangeListener(subId);
}