podcastdistributiona/components/app/script-editor.tsx

"use client";

import { useMemo, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Loader2, Save, RefreshCw, AudioLines, Clipboard, Clock } 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 { Badge } from "@/components/ui/badge";
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[];
}

// Average speaking pace used to estimate spoken duration from word count.
const WORDS_PER_MINUTE = 150;

function wordCount(text: string): number {
  const t = text.trim();
  return t ? t.split(/\s+/).length : 0;
}

function estimateDuration(words: number): string {
  const totalSec = Math.round((words / WORDS_PER_MINUTE) * 60);
  const m = Math.floor(totalSec / 60);
  const s = totalSec % 60;
  return m > 0 ? `${m}m ${s}s` : `${s}s`;
}

function sectionWords(section: Section): number {
  return section.turns.reduce((n, t) => n + wordCount(t.text), 0);
}

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);

  const totalWords = useMemo(
    () => sections.reduce((n, s) => n + sectionWords(s), 0),
    [sections]
  );

  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);
    }
  }

  function copyTranscript() {
    const lines: string[] = [script.title, ""];
    for (const section of sections) {
      lines.push(section.title, "");
      for (const turn of section.turns) {
        const name = speakerNames[turn.speakerKey] ?? turn.speakerKey;
        lines.push(`${name}: ${turn.text}`, "");
      }
    }
    navigator.clipboard
      .writeText(lines.join("\n").trimEnd())
      .then(() => toast.success("Transcript copied"))
      .catch(() => toast.error("Could not copy"));
  }

  return (
    <div className="space-y-4">
      {/* Sticky save bar — dirty-aware. */}
      <div className="sticky top-2 z-10 flex flex-wrap items-center justify-between gap-3 rounded-2xl border bg-card/95 px-4 py-3 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-card/80">
        <div className="flex items-center gap-3">
          <h2 className="font-display text-lg font-extrabold tracking-tight">Script</h2>
          <span className="hidden items-center gap-1.5 text-xs text-muted-foreground sm:inline-flex">
            <Clock className="h-3.5 w-3.5" />
            {totalWords.toLocaleString()} words · ~{estimateDuration(totalWords)}
          </span>
          {dirty && (
            <Badge variant="warning" className="hidden sm:inline-flex">
              Unsaved changes
            </Badge>
          )}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Button variant="ghost" size="sm" onClick={copyTranscript}>
            <Clipboard className="h-4 w-4" /> Copy full transcript
          </Button>
          <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) => {
        const words = sectionWords(section);
        return (
          <Card key={section.id}>
            <CardHeader className="flex flex-row items-center justify-between gap-2 py-3">
              <div className="min-w-0">
                <CardTitle className="truncate text-sm">{section.title}</CardTitle>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  {words.toLocaleString()} words · ▶ {estimateDuration(words)}
                </p>
              </div>
              <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>
  );
}