Codewalkers/apps/web/src/components/RefineSpawnDialog.tsx

import { useState } from "react";
import { Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";

interface RefineSpawnDialogProps {
  /** Button text to show in the trigger */
  triggerText: string;
  /** Dialog title */
  title: string;
  /** Dialog description */
  description: string;
  /** Whether to show the instruction textarea */
  showInstructionInput?: boolean;
  /** Placeholder text for the instruction textarea */
  instructionPlaceholder?: string;
  /** Whether the spawn mutation is pending */
  isSpawning: boolean;
  /** Error message if spawn failed */
  error?: string;
  /** Called when the user wants to spawn */
  onSpawn: (instruction?: string) => void;
  /** Custom trigger button (optional) */
  trigger?: React.ReactNode;
}

export function RefineSpawnDialog({
  triggerText,
  title,
  description,
  showInstructionInput = true,
  instructionPlaceholder = "What should the agent focus on? (optional)",
  isSpawning,
  error,
  onSpawn,
  trigger,
}: RefineSpawnDialogProps) {
  const [showDialog, setShowDialog] = useState(false);
  const [instruction, setInstruction] = useState("");

  const handleSpawn = () => {
    const finalInstruction = showInstructionInput && instruction.trim()
      ? instruction.trim()
      : undefined;
    onSpawn(finalInstruction);
  };

  const handleOpenChange = (open: boolean) => {
    setShowDialog(open);
    if (!open) {
      setInstruction("");
    }
  };

  const defaultTrigger = (
    <Button
      variant="outline"
      size="sm"
      onClick={() => setShowDialog(true)}
      className="gap-1.5"
    >
      <Sparkles className="h-3.5 w-3.5" />
      {triggerText}
    </Button>
  );

  return (
    <>
      {trigger ? (
        <div onClick={() => setShowDialog(true)}>
          {trigger}
        </div>
      ) : (
        defaultTrigger
      )}

      <Dialog open={showDialog} onOpenChange={handleOpenChange}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{title}</DialogTitle>
            <DialogDescription>{description}</DialogDescription>
          </DialogHeader>

          {showInstructionInput && (
            <Textarea
              placeholder={instructionPlaceholder}
              value={instruction}
              onChange={(e) => setInstruction(e.target.value)}
              rows={3}
            />
          )}

          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setShowDialog(false)}
            >
              Cancel
            </Button>
            <Button
              onClick={handleSpawn}
              disabled={isSpawning}
            >
              {isSpawning ? "Starting..." : "Start"}
            </Button>
          </DialogFooter>

          {error && (
            <p className="text-xs text-destructive">
              {error}
            </p>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}