"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { undoAction, watchNextAction } from "@/app/actions/library";
import { useToasts } from "@/components/Toasts";

/**
 * „+1 Episode" für die Übersicht — derselbe Griff wie auf der Detailseite,
 * nur ohne Kontext drumherum.
 */
export function QuickWatch({ entryId }: { entryId: string }) {
  const router = useRouter();
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();

  async function undo(watchIds: string[]) {
    await undoAction(entryId, watchIds);
    router.refresh();
  }

  return (
    <button
      type="button"
      disabled={pending}
      onClick={() =>
        startTransition(async () => {
          const result = await watchNextAction(entryId);
          report(result, (ids) => undo(ids));
          router.refresh();
        })
      }
      className="fl-btn fl-btn-ghost px-3 py-1.5 text-sm"
    >
      +1 Episode
    </button>
  );
}