ClaudeMarketing/components/repurpose-modal.tsx

"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

const FORMAT_LABELS: Record<string, { label: string; dimensions: string }> = {
  "instagram-feed": { label: "Instagram Feed", dimensions: "1080x1080" },
  "instagram-stories": { label: "Instagram Stories", dimensions: "1080x1920" },
  tiktok: { label: "TikTok", dimensions: "1080x1920" },
  "nextdoor-spotlight": { label: "Nextdoor Spotlight", dimensions: "1200x1200" },
  "nextdoor-display": { label: "Nextdoor Display", dimensions: "1200x628" },
};

interface RepurposeModalProps {
  assetId: string;
  onClose: () => void;
}

export function RepurposeModal({ assetId, onClose }: RepurposeModalProps) {
  const [available, setAvailable] = useState<string[]>([]);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ formats?: string[] } | null>(null);

  useEffect(() => {
    fetch(`/api/assets/${assetId}/repurpose`)
      .then((r) => r.json())
      .then((data) => {
        setAvailable(data.formats || []);
        setSelected(new Set(data.formats || []));
      })
      .catch(() => {});
  }, [assetId]);

  async function handleRepurpose() {
    setLoading(true);
    const res = await fetch(`/api/assets/${assetId}/repurpose`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ formats: Array.from(selected) }),
    });
    const data = await res.json();
    setResult(data);
    setLoading(false);
  }

  function toggle(key: string) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  }

  return (
    <Dialog open onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Repurpose Asset</DialogTitle>
          <DialogDescription>
            Resize this image for other platforms. Captions will be re-toned to match each platform.
          </DialogDescription>
        </DialogHeader>

        {result ? (
          <div className="py-4 text-center">
            <p className="text-lg font-semibold">Repurposing to {result.formats?.length || 0} format{(result.formats?.length || 0) !== 1 ? "s" : ""}</p>
            <p className="text-sm text-muted-foreground mt-1">
              Gemini is regenerating the ad at each new size. New assets will appear in the Asset Library when ready.
            </p>
            <DialogFooter>
              <Button onClick={onClose}>Done</Button>
            </DialogFooter>
          </div>
        ) : (
          <>
            <div className="space-y-2 py-2">
              {available.map((key) => {
                const fmt = FORMAT_LABELS[key];
                if (!fmt) return null;
                return (
                  <label key={key} className="flex items-center gap-3 rounded-md border p-3 cursor-pointer hover:bg-muted/50">
                    <input
                      type="checkbox"
                      checked={selected.has(key)}
                      onChange={() => toggle(key)}
                      className="h-4 w-4"
                    />
                    <span className="flex-1 text-sm font-medium">{fmt.label}</span>
                    <span className="text-xs text-muted-foreground">{fmt.dimensions}</span>
                  </label>
                );
              })}
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={onClose}>Cancel</Button>
              <Button onClick={handleRepurpose} disabled={loading || selected.size === 0}>
                {loading ? "Repurposing..." : `Repurpose to ${selected.size} format${selected.size !== 1 ? "s" : ""}`}
              </Button>
            </DialogFooter>
          </>
        )}
      </DialogContent>
    </Dialog>
  );
}