const SpacedRepetitionDemo = () => {
  const [history, setHistory] = useState([]);
  
  const addReview = () => {
    const today = new Date();
    // 実際の実装ではDBに保存しますが、ここではデモ用にリストに追加
    const nextIntervals = [1, 3, 7, 14, 30]; // Days
    const stage = history.length;
    
    if (stage >= nextIntervals.length) {
      alert("Mastered! 記憶が長期記憶に移行しました！");
      return;
    }

    const nextDays = nextIntervals[stage];
    const nextDate = new Date();
    nextDate.setDate(today.getDate() + nextDays);
    
    setHistory([...history, { 
      date: today.toLocaleDateString(), 
      next: nextDate.toLocaleDateString(),
      interval: nextDays 
    }]);
  };

  const reset = () => setHistory([]);

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-sm mx-auto">
      <div className="text-center mb-6">
        <h3 className="font-bold text-lg">単語カード: "Ephemeral"</h3>
        <p className="text-sm text-muted-foreground">意味: つかの間の、儚い</p>
      </div>

      <div className="flex justify-center mb-6">
        <button 
          onClick={addReview}
          disabled={history.length >= 5}
          className="px-6 py-3 bg-green-600 text-white rounded-full font-bold shadow-lg hover:bg-green-700 active:scale-95 transition-all disabled:opacity-50"
        >
          {history.length === 0 ? "覚えた！ (学習完了)" : "復習した！"}
        </button>
      </div>

      <div className="bg-muted p-4 rounded-lg">
        <h4 className="text-xs font-bold text-muted-foreground uppercase mb-2">学習ログ & 次回の予定</h4>
        {history.length === 0 ? (
          <p className="text-sm text-center py-4 opacity-50">まだ学習記録がありません</p>
        ) : (
          <ul className="space-y-2 text-sm">
            {history.map((log, i) => (
              <li key={i} className="flex justify-between items-center bg-background p-2 rounded border">
                <span>Lv.{i+1} 完了</span>
                <span className="text-xs text-primary font-bold">
                  次は {log.interval}日後 ({log.next})
                </span>
              </li>
            ))}
          </ul>
        )}
      </div>
      
      {history.length > 0 && (
         <button onClick={reset} className="w-full mt-4 text-xs text-muted-foreground hover:text-red-500 underline">
           リセットする
         </button>
      )}
    </div>
  );
};

render(<SpacedRepetitionDemo />);