podcastdistributiona/components/app/repurpose-client.tsx

"use client";

import { useState } from "react";
import { FileText, Hash, Mail, Loader2, Copy, Sparkles, Download } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { repurposeAction } from "@/app/(app)/episodes/actions";

type Format = "blog" | "social_thread" | "newsletter";
type Content = { title: string; body: string } | null;

const FORMATS: { key: Format; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
  { key: "blog", label: "Blog post", icon: FileText },
  { key: "social_thread", label: "Social thread", icon: Hash },
  { key: "newsletter", label: "Newsletter", icon: Mail },
];

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

function slugify(s: string): string {
  return s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) || "content";
}

function downloadMarkdown(filename: string, markdown: string) {
  const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

export function RepurposeClient({
  episodeId,
  initial,
}: {
  episodeId: string;
  initial: Record<Format, Content>;
}) {
  const [content, setContent] = useState<Record<Format, Content>>(initial);
  const [busy, setBusy] = useState<Format | null>(null);

  async function generate(format: Format) {
    setBusy(format);
    const res = await repurposeAction(episodeId, format);
    setBusy(null);
    if (!res.ok || !res.content) {
      toast.error(res.error ?? "Could not generate");
      return;
    }
    setContent((prev) => ({ ...prev, [format]: res.content! }));
    toast.success("Generated");
  }

  function copy(text: string) {
    navigator.clipboard.writeText(text).then(() => toast.success("Copied to clipboard"));
  }

  return (
    <div className="grid gap-6 lg:grid-cols-3">
      {FORMATS.map((f) => {
        const c = content[f.key];
        return (
          <Card key={f.key} className="flex flex-col">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2 text-base">
                <f.icon className="h-4 w-4 text-brand" /> {f.label}
              </CardTitle>
              <Button size="sm" variant="outline" onClick={() => generate(f.key)} disabled={busy === f.key}>
                {busy === f.key ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Sparkles className="h-4 w-4" />
                )}
                {c ? "Regenerate" : "Generate"}
              </Button>
            </CardHeader>
            <CardContent className="flex-1">
              {c ? (
                <div className="space-y-3">
                  <div className="flex items-start justify-between gap-2">
                    <p className="font-medium">{c.title}</p>
                    <span className="shrink-0 whitespace-nowrap text-xs text-muted-foreground">
                      {wordCount(c.body).toLocaleString()} words · {c.body.length.toLocaleString()} chars
                    </span>
                  </div>
                  <div className="max-h-96 overflow-y-auto whitespace-pre-wrap rounded-md bg-muted/40 p-3 text-sm text-muted-foreground">
                    {c.body}
                  </div>
                  <div className="flex items-center gap-1">
                    <Button size="sm" variant="ghost" onClick={() => copy(`${c.title}\n\n${c.body}`)}>
                      <Copy className="h-4 w-4" /> Copy
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={() =>
                        downloadMarkdown(`${slugify(c.title)}.md`, `# ${c.title}\n\n${c.body}\n`)
                      }
                    >
                      <Download className="h-4 w-4" /> Download .md
                    </Button>
                  </div>
                </div>
              ) : (
                <p className="py-8 text-center text-sm text-muted-foreground">
                  Turn this episode into a {f.label.toLowerCase()}.
                </p>
              )}
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}