const FeedbackButton = () => {
  const [status, setStatus] = useState('idle'); // idle, loading, success

  const handleClick = () => {
    if (status !== 'idle') return;

    // 1. 即時フィードバック: ローディング開始
    setStatus('loading');

    // 擬似的な非同期処理
    setTimeout(() => {
      // 2. 完了フィードバック: 成功状態へ
      setStatus('success');
      
      // 数秒後にリセット
      setTimeout(() => setStatus('idle'), 2500);
    }, 1500);
  };

  return (
    <div className="p-8 flex flex-col items-center justify-center bg-muted/30 rounded-xl gap-4">
      {/* ボタン自体のフィードバック */}
      <button
        onClick={handleClick}
        disabled={status !== 'idle'}
        className={`
          relative px-6 py-3 rounded-full font-bold text-white transition-all duration-300 w-48 h-12 flex items-center justify-center overflow-hidden
          ${status === 'idle' ? 'bg-indigo-600 hover:bg-indigo-500 shadow-md hover:shadow-lg transform hover:-translate-y-0.5' : ''}
          ${status === 'loading' ? 'bg-indigo-400 cursor-wait' : ''}
          ${status === 'success' ? 'bg-green-600 scale-105 shadow-none' : ''}
        `}
      >
        <span className={`transition-opacity duration-300 ${status === 'idle' ? 'opacity-100' : 'opacity-0 absolute'}`}>
          Submit
        </span>
        
        {/* ローディングスピナー */}
        <span className={`absolute transition-opacity duration-300 flex items-center justify-center ${status === 'loading' ? 'opacity-100' : 'opacity-0'}`}>
          <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
        </span>

        {/* 成功マーク */}
        <span className={`absolute transition-all duration-300 transform flex items-center justify-center ${status === 'success' ? 'opacity-100 scale-100' : 'opacity-0 scale-50'}`}>
          <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
          </svg>
          <span className="ml-2">Done!</span>
        </span>
      </button>

      {/* 補助的なテキストフィードバック */}
      <p className={`text-sm font-medium transition-colors duration-300 h-6 ${
        status === 'success' ? 'text-green-500' : 
        status === 'loading' ? 'text-indigo-400' : 'text-transparent'
      }`}>
        {status === 'loading' ? 'Processing...' : status === 'success' ? 'Successfully saved!' : ''}
      </p>
    </div>
  );
};

render(<FeedbackButton />);