Optimistic UI: Phản hồi trước, lưu sau, lỗi thì hoàn lại trạng thái cũ với trong React

export default function ReactButton({
  postId,       // để gọi server action
  mood,         // mood hiện tại của người dùng (null nếu chưa react)
  reactionCount,// tổng số reaction của bài viết
}: {
  postId: string
  mood: MoodSelection
  reactionCount: number
}) {
  // Mỗi thứ cần hiển thị = một useState riêng
  const [selected, setSelected] = useState(() => getMoodOption(mood))
  const [count, setCount] = useState(reactionCount)

  const handleMoodChange = async (nextSelectedOption: MoodOption) => {
	// Lưu lại previous để có thể xử lý lỗi sau này
    const previousMood = selected.value

    // Gọi server, đợi response...
    const updatedMood = await reactMood(postId, nextSelectedOption.value)

    // Nhận response xong mới cập nhật UI
    if ('mood' in updatedMood) {
      setSelected(getMoodOption(updatedMood.mood))

      if (previousMood === null && updatedMood.mood !== null) {
        setCount((current) => current + 1)
      } else if (previousMood !== null && updatedMood.mood === null) {
        setCount((current) => Math.max(0, current - 1))
      }
    }
  }

  return (
    <div>
      <Listbox value={selected} onChange={handleMoodChange}>
        <ListboxButton>
          <selected.icon />
          <span>{selected.name}</span>
        </ListboxButton>

        <ListboxOptions>
          {moods.map((mood) => (
            <ListboxOption key={mood.value ?? 'none'} value={mood}>
              {mood.name}
            </ListboxOption>
          ))}
        </ListboxOptions>
      </Listbox>

      <span>{count}</span>
    </div>
  )
}

const [isPending, startTransition] = useTransition()

const handleMoodChange = async (nextSelectedOption: MoodOption) => {
  const nextMood = nextSelectedOption.value as MoodSelection

  setActionError(null)

  startTransition(async () => {
    // 1. Cập nhật UI ngay lập tức
    addOptimisticReaction(nextMood)

    // 2. Gọi server ở background
    const updatedMood = await reactMood(postId, nextMood)

    if ('error' in updatedMood) {
      // Server thất bại → useOptimistic tự rollback về savedReaction
	  // thông điệp báo lỗi sẽ hiển thị bên cạnh nút reaction
      setActionError(updatedMood.error)
      return
    }

    // 3. Server thành công → cập nhật savedReaction để "confirm"
	// "currentReaction" chỉ đơn giản là "prevState", không liên quan gì đến useOptimistic
    setSavedReaction((currentReaction) => ({
      mood: updatedMood.mood,
      reactionCount: getNextReactionCount(
        currentReaction.mood,
        updatedMood.mood,
        currentReaction.reactionCount,
      ),
    }))
  })
}

return (
    <div>
      <Listbox value={selected} onChange={handleMoodChange}>
        <ListboxButton>
          <selected.icon />
          <span>{selected.name}</span>
        </ListboxButton>

        <ListboxOptions>
          {moods.map((mood) => (
            <ListboxOption key={mood.value ?? 'none'} value={mood}>
              {mood.name}
            </ListboxOption>
          ))}
        </ListboxOptions>
      </Listbox>

      <span>{count}</span>
    </div>
  )
}

// Lấy giá trị hiển thị từ optimisticReaction thay vì useState trực tiếp
const selected = getMoodOption(optimisticReaction.mood)
const count = optimisticReaction.reactionCount

return (
    <div>
      <Listbox value={selected} onChange={handleMoodChange}>
        {/* disabled khi đang chờ server, tránh click nhiều lần */}
        <ListboxButton disabled={isPending}>
          <selected.icon />
          <span>{selected.name}</span>
        </ListboxButton>

        <ListboxOptions>
          {moods.map((mood) => (
            <ListboxOption key={mood.value ?? 'none'} value={mood}>
              {mood.name}
            </ListboxOption>
          ))}
        </ListboxOptions>
      </Listbox>

      <span>{count}</span>

      {/* Hiển thị lỗi nếu server thất bại (UI đã rollback tự động lúc này) */}
      {actionError ? <span>{actionError}</span> : null}
    </div>
  )
}