"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2, Sparkles } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { generateFromSeriesAction } from "@/app/(app)/series/actions";

interface PlanItem {
  title: string;
  topic: string;
  summary: string;
}

export function SeriesDetailClient({
  seriesId,
  episodes,
}: {
  seriesId: string;
  episodes: PlanItem[];
}) {
  const router = useRouter();
  const [busy, setBusy] = useState<number | null>(null);

  async function generate(index: number) {
    setBusy(index);
    const res = await generateFromSeriesAction(seriesId, index);
    setBusy(null);
    if (!res.ok || !res.episodeId) {
      toast.error(res.error ?? "Could not generate");
      return;
    }
    toast.success("Generating episode…");
    router.push(`/episodes/${res.episodeId}`);
  }

  return (
    <div className="space-y-3">
      {episodes.map((ep, i) => (
        <Card key={i}>
          <CardContent className="flex items-start justify-between gap-4 py-4">
            <div className="min-w-0">
              <p className="font-medium">
                {i + 1}. {ep.title}
              </p>
              <p className="text-sm text-muted-foreground">{ep.summary}</p>
            </div>
            <Button size="sm" onClick={() => generate(i)} disabled={busy === i}>
              {busy === i ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
              Generate
            </Button>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}