const SelfServingDemo = () => {
  const [result, setResult] = useState(null); // 'win', 'lose', null
  const [isSpinning, setIsSpinning] = useState(false);
  const [reason, setReason] = useState(null);

  const play = () => {
    setIsSpinning(true);
    setResult(null);
    setReason(null);
    
    setTimeout(() => {
      setIsSpinning(false);
      // 50% chance
      setResult(Math.random() > 0.5 ? 'win' : 'lose');
    }, 1500);
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center">
      <h3 className="font-bold text-card-foreground mb-6">運命のコイン・トス</h3>
      
      <div className={`w-32 h-32 mx-auto mb-8 rounded-full flex items-center justify-center text-4xl border-4 shadow-xl transition-all ${isSpinning ? 'animate-spin border-border bg-muted' : result === 'win' ? 'border-yellow-400 bg-yellow-100 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-300 scale-110' : result === 'lose' ? 'border-gray-400 bg-muted text-muted-foreground scale-90' : 'border-primary/30 bg-primary/10 text-blue-300'}`}>
        {isSpinning ? '?' : result === 'win' ? 'WIN' : result === 'lose' ? 'LOSE' : 'Start'}
      </div>

      {!result && !isSpinning && (
        <button
          onClick={play}
          className="bg-primary text-primary-foreground px-8 py-3 rounded-full font-bold hover:bg-primary/90 shadow-lg transform active:scale-95 transition-transform"
        >
          勝負する！
        </button>
      )}

      {isSpinning && <p className="text-muted-foreground font-bold animate-pulse">判定中...</p>}

      {result && !reason && (
        <div className="animate-in fade-in slide-in-from-bottom-2">
          <p className="font-bold mb-4 text-lg">
            {result === 'win' ? "おめでとうございます！🎉" : "残念...負けました 😢"}
          </p>
          <p className="text-sm text-muted-foreground mb-2">なぜこの結果になったと思いますか？</p>
          
          <div className="grid grid-cols-1 gap-2">
            {result === 'win' ? (
              // Winning options (Tend to be internal)
              <>
                <button onClick={() => setReason('internal')} className="p-3 border rounded hover:bg-yellow-50 dark:hover:bg-yellow-950 hover:text-yellow-900 dark:hover:text-yellow-200 font-bold text-foreground">自分の勘が冴えていた！ (実力)</button>
                <button onClick={() => setReason('external')} className="p-3 border rounded hover:bg-muted/30 text-muted-foreground">たまたま運が良かった (環境)</button>
              </>
            ) : (
             // Losing options (Tend to be external)
              <>
                 <button onClick={() => setReason('internal')} className="p-3 border rounded hover:bg-muted/30 text-muted-foreground">自分の判断ミスだ... (実力)</button>
                 <button onClick={() => setReason('external')} className="p-3 border rounded hover:bg-red-50 dark:hover:bg-red-950 hover:text-red-900 dark:hover:text-red-200 font-bold text-foreground">このゲーム、操作されてない？ (環境)</button>
              </>
            )}
          </div>
        </div>
      )}

      {reason && (
        <div className="mt-6 bg-indigo-50 dark:bg-indigo-950 p-4 rounded text-sm text-indigo-900 dark:text-indigo-200 animate-in zoom-in">
          <p className="font-bold mb-2">分析結果:</p>
          <p className="mb-2">
             あなたが選んだのは
             <span className="font-bold px-1">{reason === 'internal' ? '内的帰属（自分のせい/おかげ）' : '外的帰属（他人のせい/運）'}</span>
             です。
          </p>
          <p className="text-xs opacity-80">
            自己奉仕バイアスによれば、<br/>
            人は<strong>成功時は「実力」</strong>を選びがちで、<br/>
            <strong>失敗時は「運や環境」</strong>を選びがちです。<br/>
            ユーザーの自尊心を傷つけないよう、UIの言葉選びには注意しましょう。
          </p>
          <button onClick={() => {setResult(null); setReason(null);}} className="mt-4 text-indigo-500 dark:text-indigo-400 underline text-xs">もう一度</button>
        </div>
      )}

    </div>
  );
};

render(<SelfServingDemo />);