podcastdistributiona/components/app/script-editor.tsx

"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Loader2, Save, RefreshCw, AudioLines } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  updateScriptAction,
  regenerateAction,
  regenerateSectionAction,
} from "@/app/(app)/episodes/actions";

interface Turn {
  speakerKey: string;
  text: string;
}
interface Section {
  id: string;
  title: string;
  turns: Turn[];
}
interface Script {
  title: string;
  sections: Section[];
}

export function ScriptEditor({
  episodeId,
  script,
  speakerNames,
}: {
  episodeId: string;
  script: Script;
  speakerNames: Record<string, string>;
}) {
  const router = useRouter();
  const [sections, setSections] = useState<Section[]>(script.sections);
  const [dirty, setDirty] = useState(false);
  const [saving, startSave] = useTransition();
  const [busySection, setBusySection] = useState<string | null>(null);
  const [rerecording, setRerecording] = useState(false);

  function updateTurn(si: number, ti: number, text: string) {
    setSections((prev) =>
      prev.map((s, i) =>
        i === si ? { ...s, turns: s.turns.map((t, j) => (j === ti ? { ...t, text } : t)) } : s
      )
    );
    setDirty(true);
  }

  function save() {
    startSave(async () => {
      const res = await updateScriptAction(episodeId, { title: script.title, sections });
      if (res.ok) {
        toast.success("Script saved");
        setDirty(false);
      } else {
        toast.error(res.error ?? "Could not save");
      }
    });
  }

  async function regenSection(id: string) {
    setBusySection(id);
    const res = await regenerateSectionAction(episodeId, id);
    setBusySection(null);
    if (!res.ok || !res.section) {
      toast.error(res.error ?? "Could not regenerate");
      return;
    }
    setSections((prev) => prev.map((s) => (s.id === id ? res.section! : s)));
    setDirty(false);
    toast.success("Section regenerated");
  }

  async function rerecord() {
    setRerecording(true);
    if (dirty) {
      const saved = await updateScriptAction(episodeId, { title: script.title, sections });
      if (!saved.ok) {
        toast.error(saved.error ?? "Save failed");
        setRerecording(false);
        return;
      }
      setDirty(false);
    }
    const res = await regenerateAction(episodeId, "audio");
    if (res.ok) {
      toast.success("Re-recording audio…");
      router.refresh();
    } else {
      toast.error(res.error ?? "Could not re-record");
      setRerecording(false);
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Script</h2>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={rerecord} disabled={rerecording}>
            {rerecording ? <Loader2 className="h-4 w-4 animate-spin" /> : <AudioLines className="h-4 w-4" />}
            Re-record audio
          </Button>
          <Button size="sm" onClick={save} disabled={!dirty || saving}>
            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
            Save
          </Button>
        </div>
      </div>

      {sections.map((section, si) => (
        <Card key={section.id}>
          <CardHeader className="flex flex-row items-center justify-between py-3">
            <CardTitle className="text-sm">{section.title}</CardTitle>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => regenSection(section.id)}
              disabled={busySection === section.id}
            >
              {busySection === section.id ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <RefreshCw className="h-4 w-4" />
              )}
              Regenerate
            </Button>
          </CardHeader>
          <CardContent className="space-y-3">
            {section.turns.map((turn, ti) => (
              <div key={ti} className="space-y-1">
                <span className="text-xs font-medium text-muted-foreground">
                  {speakerNames[turn.speakerKey] ?? turn.speakerKey}
                </span>
                <Textarea
                  value={turn.text}
                  onChange={(e) => updateTurn(si, ti, e.target.value)}
                  rows={Math.max(2, Math.ceil(turn.text.length / 80))}
                />
              </div>
            ))}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}