Artifacts

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Square, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * Stop control for a session. Calls the stop endpoint, then refreshes the
 * server tree so the new status is reflected. Disabled once the session is no
 * longer running.
 */
export function StopButton({
  id,
  running,
  size = "sm",
  className,
}: {
  id: string;
  running: boolean;
  size?: "sm" | "default";
  className?: string;
}) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onStop() {
    setBusy(true);
    setError(null);
    try {
      const res = await fetch(`/api/sessions/${id}/stop`, { method: "POST" });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error ?? "Failed to stop session.");
      }
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to stop session.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className={cn("inline-flex flex-col items-end gap-1", className)}>
      <Button
        type="button"
        variant="outline"
        size={size}
        onClick={onStop}
        disabled={!running || busy}
        title={running ? "Stop this session" : "Session is not running"}
      >
        {busy ? (
          <Loader2 className="h-3.5 w-3.5 animate-spin" />
        ) : (
          <Square className="h-3.5 w-3.5" />
        )}
        Stop
      </Button>
      {error && <span className="text-[11px] text-destructive">{error}</span>}
    </div>
  );
}