ClaudeMarketing/components/variation-modal.tsx

"use client";

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

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

export function VariationModal({ assetId, assetName, onClose }: VariationModalProps) {
  const [count, setCount] = useState(5);
  const [loading, setLoading] = useState(false);
  const [launched, setLaunched] = useState(false);

  async function handleSpawn() {
    setLoading(true);
    await fetch(`/api/assets/${assetId}/variations`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ count }),
    });
    setLoading(false);
    setLaunched(true);
  }

  function handleClose() {
    setLaunched(false);
    setCount(5);
    onClose();
  }

  return (
    <Dialog open onOpenChange={handleClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Spawn Variations</DialogTitle>
          <DialogDescription>
            Generate new ads with the same emotional pattern as &ldquo;{assetName}&rdquo; but with different hook angles.
          </DialogDescription>
        </DialogHeader>

        {launched ? (
          <div className="py-4 text-center">
            <p className="text-lg font-semibold">Spawning {count} variations</p>
            <p className="text-sm text-muted-foreground mt-1">
              The AI pipeline is running. New assets will appear in the Asset Library when ready.
            </p>
            <DialogFooter>
              <Button onClick={handleClose}>Done</Button>
            </DialogFooter>
          </div>
        ) : (
          <>
            <div className="space-y-2 py-2">
              <Label htmlFor="count">Number of Variations</Label>
              <Input
                id="count"
                type="number"
                min={1}
                max={20}
                value={count}
                onChange={(e) => setCount(Math.max(1, Math.min(20, parseInt(e.target.value) || 5)))}
              />
              <p className="text-xs text-muted-foreground">
                Each variation keeps the same visual style and CTA but explores a different hook angle.
                Uses the original ad as a reference image for visual consistency.
              </p>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={handleClose}>Cancel</Button>
              <Button onClick={handleSpawn} disabled={loading}>
                {loading ? "Launching..." : `Spawn ${count} Variation${count !== 1 ? "s" : ""}`}
              </Button>
            </DialogFooter>
          </>
        )}
      </DialogContent>
    </Dialog>
  );
}