// アイコンをインラインで定義 (ライブラリ依存を排除)
const Heart = ({ fill = "none", className }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
  </svg>
);

const Loader2 = ({ className }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
  </svg>
);

const BenevolentDeceptionDemo = () => {
  const [likes, setLikes] = useState({ honest: 0, optimistic: 0 });
  const [loading, setLoading] = useState({ honest: false, optimistic: false });

  // 1. 正直なUI（サーバーの完了を待つ）
  const handleHonestClick = async () => {
    if (loading.honest) return;
    setLoading(p => ({ ...p, honest: true }));
    
    // サーバー通信の遅延をシミュレート (1秒)
    await new Promise(r => setTimeout(r, 1000));
    
    setLikes(p => ({ ...p, honest: p.honest + 1 }));
    setLoading(p => ({ ...p, honest: false }));
  };

  // 2. 善意の詐称UI（楽観的UI：先に反映し、裏で通信）
  const handleOptimisticClick = () => {
    // 瞬時に反映（嘘の完了）
    setLikes(p => ({ ...p, optimistic: p.optimistic + 1 }));
    setLoading(p => ({ ...p, optimistic: true })); // 裏では通信中

    // サーバー通信の遅延をシミュレート
    setTimeout(() => {
      setLoading(p => ({ ...p, optimistic: false })); // 通信完了して整合性が取れる
    }, 1000);
  };

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-lg mx-auto">
      <h3 className="font-bold text-lg mb-6 text-center">「正直なUI」vs「優しい嘘 (Optimistic UI)」</h3>

      <div className="grid grid-cols-2 gap-8">
        
        {/* 正直なUI */}
        <div className="flex flex-col items-center gap-3">
          <p className="text-sm font-bold text-muted-foreground">正直なUI<br/><span className="text-[10px] font-normal">(通信完了後に反映)</span></p>
          <button
            onClick={handleHonestClick}
            disabled={loading.honest}
            className={`w-16 h-16 rounded-full flex items-center justify-center border-2 transition-all ${loading.honest ? 'bg-muted border-muted-foreground' : 'bg-background hover:bg-red-50 border-red-200 text-red-500'}`}
          >
            {loading.honest ? <Loader2 className="animate-spin" /> : <Heart fill={likes.honest > 0 ? "currentColor" : "none"} />}
          </button>
          <p className="font-mono text-xl">{likes.honest}</p>
        </div>

        {/* 善意の詐称UI */}
        <div className="flex flex-col items-center gap-3">
          <p className="text-sm font-bold text-muted-foreground">善意の詐称<br/><span className="text-[10px] font-normal">(即時反映 / 裏で通信)</span></p>
          <button
            onClick={handleOptimisticClick}
            className="w-16 h-16 rounded-full flex items-center justify-center border-2 bg-background hover:bg-pink-50 border-pink-200 text-pink-500 transition-all active:scale-90"
          >
             <Heart fill={likes.optimistic > 0 ? "currentColor" : "none"} className={loading.optimistic ? "animate-pulse" : ""} />
          </button>
          <div className="flex items-center gap-2">
            <p className="font-mono text-xl">{likes.optimistic}</p>
            {loading.optimistic && <span className="text-[10px] text-muted-foreground animate-pulse">(送信中...)</span>}
          </div>
        </div>

      </div>

      <div className="mt-8 bg-muted p-4 rounded text-sm text-muted-foreground">
        <strong>解説:</strong> 右側のUIは、タップした瞬間に数字が増えます。実際には通信中（点滅中）ですが、ユーザーの「押した」という意思を即座に肯定することで、非常に快適な操作感を生み出しています。
      </div>
    </div>
  );
};

render(<BenevolentDeceptionDemo />);