tusk/src/components/docker/DockerContainersList.tsx

import { useState } from "react";
import {
  useTuskContainers,
  useStartContainer,
  useStopContainer,
  useRemoveContainer,
  useDockerStatus,
} from "@/hooks/use-docker";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import {
  ChevronDown,
  ChevronRight,
  Container,
  Play,
  Square,
  Trash2,
  Loader2,
} from "lucide-react";

export function DockerContainersList() {
  const [expanded, setExpanded] = useState(true);
  const { data: dockerStatus } = useDockerStatus();
  const { data: containers, isLoading } = useTuskContainers();
  const startMutation = useStartContainer();
  const stopMutation = useStopContainer();
  const removeMutation = useRemoveContainer();

  const dockerAvailable =
    dockerStatus?.installed && dockerStatus?.daemon_running;

  if (!dockerAvailable) {
    return null;
  }

  const handleStart = (name: string) => {
    startMutation.mutate(name, {
      onSuccess: () => toast.success(`Container "${name}" started`),
      onError: (err) =>
        toast.error("Failed to start container", {
          description: String(err),
        }),
    });
  };

  const handleStop = (name: string) => {
    stopMutation.mutate(name, {
      onSuccess: () => toast.success(`Container "${name}" stopped`),
      onError: (err) =>
        toast.error("Failed to stop container", {
          description: String(err),
        }),
    });
  };

  const handleRemove = (name: string) => {
    if (
      !confirm(
        `Remove container "${name}"? This will delete the container and all its data.`
      )
    ) {
      return;
    }
    removeMutation.mutate(name, {
      onSuccess: () => toast.success(`Container "${name}" removed`),
      onError: (err) =>
        toast.error("Failed to remove container", {
          description: String(err),
        }),
    });
  };

  const isRunning = (status: string) =>
    status.toLowerCase().startsWith("up");

  return (
    <div className="border-b">
      <div
        className="flex items-center gap-1 px-3 py-2 cursor-pointer select-none hover:bg-accent/50"
        onClick={() => setExpanded(!expanded)}
      >
        {expanded ? (
          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
        ) : (
          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
        )}
        <Container className="h-3.5 w-3.5 text-muted-foreground" />
        <span className="text-xs font-semibold flex-1">Docker Clones</span>
        {containers && containers.length > 0 && (
          <Badge
            variant="secondary"
            className="text-[9px] px-1 py-0"
          >
            {containers.length}
          </Badge>
        )}
      </div>

      {expanded && (
        <div className="pb-1">
          {isLoading && (
            <div className="px-3 py-2 text-xs text-muted-foreground flex items-center gap-1">
              <Loader2 className="h-3 w-3 animate-spin" /> Loading...
            </div>
          )}
          {containers && containers.length === 0 && (
            <div className="px-6 pb-2 text-xs text-muted-foreground">
              No Docker clones yet. Right-click a database to clone it.
            </div>
          )}
          {containers?.map((container) => (
            <div
              key={container.container_id}
              className="group flex items-center gap-1.5 px-6 py-1 text-xs hover:bg-accent/50"
            >
              <span className="truncate flex-1 font-medium">
                {container.name}
              </span>
              {container.source_database && (
                <span className="text-[10px] text-muted-foreground shrink-0">
                  {container.source_database}
                </span>
              )}
              <span className="text-[10px] text-muted-foreground shrink-0">
                :{container.host_port}
              </span>
              <Badge
                variant={isRunning(container.status) ? "default" : "secondary"}
                className={`text-[9px] px-1 py-0 shrink-0 ${
                  isRunning(container.status)
                    ? "bg-green-600 hover:bg-green-600"
                    : ""
                }`}
              >
                {isRunning(container.status) ? "running" : "stopped"}
              </Badge>
              <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 shrink-0">
                {isRunning(container.status) ? (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-5 w-5 p-0"
                    onClick={() => handleStop(container.name)}
                    title="Stop"
                    disabled={stopMutation.isPending}
                  >
                    <Square className="h-3 w-3" />
                  </Button>
                ) : (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-5 w-5 p-0"
                    onClick={() => handleStart(container.name)}
                    title="Start"
                    disabled={startMutation.isPending}
                  >
                    <Play className="h-3 w-3" />
                  </Button>
                )}
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-5 w-5 p-0 text-destructive hover:text-destructive"
                  onClick={() => handleRemove(container.name)}
                  title="Remove"
                  disabled={removeMutation.isPending}
                >
                  <Trash2 className="h-3 w-3" />
                </Button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}