// ❌ Optimisticなし — サーバー応答を待ってからUI変更
'use client';
import { useState, useTransition } from 'react';
import { likeAction } from './actions';

export function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes);
  const [isPending, startTransition] = useTransition();

  async function handleClick() {
    startTransition(async () => {
      // ユーザー: クリック → 200~500ms停止 → カウント変更
      const result = await likeAction();
      setLikes(result.likes);
    });
  }

  return (
    <button onClick={handleClick} disabled={isPending}>
      ❤️ {likes} {isPending && '(処理中...)'}
    </button>
  );
}

// 欠点:
// - クリック → 0.3秒停止 → カウント変更 → ユーザー「押されたかな？」
// - isPending表示を追加しても不自然さは残る

// ✅ useOptimistic — 即時反応 + 自動同期
'use client';
import { useOptimistic, useTransition } from 'react';
import { likeAction } from './actions';

export function LikeButton({ initialLikes, postId }: { initialLikes: number; postId: number }) {
  // optimistic state定義 — 実際のlikesとは別
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    initialLikes,
    (current, increment: number) => current + increment,
  );
  const [isPending, startTransition] = useTransition();

  function handleClick() {
    startTransition(async () => {
      addOptimisticLike(1);              // UI即時+1
      try {
        await likeAction(postId);
        // 成功: Reactが自動的に実際の値に置き換え
      } catch (e) {
        // 失敗: Reactが自動的にoptimistic値を破棄、元の値に復元
        console.error('いいね失敗:', e);
      }
    });
  }

  return (
    <button onClick={handleClick}>
      ❤️ {optimisticLikes}
    </button>
  );
}

// 📁 app/posts/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function likeAction(postId: number) {
  await db.like.create({ data: { postId } });
  revalidatePath(`/posts/${postId}`);
  // revalidate後、サーバーが新しいlikes値を返し → optimistic値と同期
}

// ユーザー体感:
// クリック → 即時 ❤️ 543 → 545 (0ms)
// サーバー応答: 545確定 (バックグラウンド、ユーザーは知らない)
// もし失敗: ❤️ 543に自動復元 + エラートースト

// コメントリストも同じパターン — 即時新しいコメントを追加、「送信中」表示
export function CommentList({ initial }: { initial: Comment[] }) {
  const [optimistic, addOptimisticComment] = useOptimistic(
    initial,
    (state, newText: string) => [
      ...state,
      { id: Date.now(), text: newText, pending: true },
    ],
  );

  // ... formAction内でaddOptimisticComment(formData.get('text'))を呼び出し
  return (
    <ul>
      {optimistic.map(c => (
        <li key={c.id} style={{ opacity: c.pending ? 0.5 : 1 }}>
          {c.text} {c.pending && '(送信中...)'}
        </li>
      ))}
    </ul>
  );
}