// components/VoteForm.tsx
import { useState } from 'react';

export const VoteForm = ({ program, wallet, poll, onVote }: any) => {
  const [status, setStatus] = useState<'idle' | 'signing' | 'submitting' | 'done'>('idle');
  const [selected, setSelected] = useState<number | null>(null);
  const [error, setError] = useState('');

  const handleVote = async () => {
    if (selected === null) return;
    setStatus('signing');
    setError('');

    try {
      setStatus('submitting');
      const tx = await program.methods
        .castVote(selected)
        .accounts({
          voteAccount: poll.publicKey,
          voter: wallet.publicKey,
          systemProgram: web3.SystemProgram.programId,
        })
        .rpc({
          commitment: 'confirmed',
          preflightCommitment: 'confirmed',
        });
      
      setStatus('done');
      onVote();  // 回调刷新列表
    } catch (e: any) {
      setError(e.message || '投票失败');
      setStatus('idle');
    }
  };

  return (
    <div className="vote-form">
      <h3>{poll.question}</h3>
      {poll.options.map((opt: string, i: number) => (
        <label key={i} className={`option ${selected === i ? 'selected' : ''}`}>
          <input
            type="radio"
            name="vote-option"
            checked={selected === i}
            onChange={() => setSelected(i)}
          />
          {opt}
        </label>
      ))}
      
      <button 
        onClick={handleVote}
        disabled={status !== 'idle' || selected === null}
      >
        {status === 'idle' && '投票'}
        {status === 'signing' && '钱包签名中...'}
        {status === 'submitting' && '提交中...'}
        {status === 'done' && '✅ 已投票'}
      </button>
      
      {error && <div className="error">{error}</div>}
    </div>
  );
};

// CSS（Tailwind 风格）
// .vote-form { @apply p-4 border rounded-lg bg-gray-50; }
// .option { @apply block p-2 cursor-pointer hover:bg-gray-100; }
// .option.selected { @apply bg-blue-100 border-blue-500; }
// button:disabled { @apply opacity-50 cursor-not-allowed; }