stackpilot/frontend/src/components/stacks/ContainerCard.tsx

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Play, Square, RotateCw, ChevronDown, ChevronRight } from "lucide-react";
import { toast } from "sonner";
import { Badge, Button, Card, Spinner, StatusDot } from "@/components/ui";
import { ContainerPorts } from "@/components/stacks/ContainerPorts";
import { containersApi, type ContainerAction } from "@/api/containers";
import { apiErrorMessage } from "@/api/client";
import type { ContainerInfo } from "@/types";

export function ContainerCard({
  container,
  agentId,
  host,
  isAdmin,
  onChanged,
}: {
  container: ContainerInfo;
  agentId?: number;
  host?: string;
  isAdmin: boolean;
  onChanged?: () => void;
}) {
  const [open, setOpen] = useState(false);
  const [busy, setBusy] = useState(false);
  const running = container.state === "running";

  const detail = useQuery({
    queryKey: ["container", agentId ?? "local", container.id],
    queryFn: () => containersApi.inspect(container.id, agentId),
    enabled: open,
  });

  const act = async (action: ContainerAction) => {
    setBusy(true);
    const t = toast.loading(`${action} ${container.service}…`);
    try {
      await containersApi.action(container.id, action, agentId);
      toast.success(`${container.service}: ${action} ok`, { id: t });
      onChanged?.();
      if (open) detail.refetch();
    } catch (e) {
      toast.error(apiErrorMessage(e), { id: t });
    } finally {
      setBusy(false);
    }
  };

  return (
    <Card className="p-0">
      <div className="flex flex-wrap items-center justify-between gap-3 p-3">
        <button
          className="flex min-w-0 items-center gap-3 text-left"
          onClick={() => setOpen((v) => !v)}
        >
          {open ? (
            <ChevronDown className="h-4 w-4 shrink-0 text-slate-400" />
          ) : (
            <ChevronRight className="h-4 w-4 shrink-0 text-slate-400" />
          )}
          <StatusDot status={running ? "running" : "stopped"} />
          <div className="min-w-0">
            <p className="font-medium">{container.service}</p>
            <p className="truncate font-mono text-xs text-slate-500">{container.image}</p>
          </div>
        </button>
        <div className="flex items-center gap-3 text-xs text-slate-500">
          {container.health && <Badge>{container.health}</Badge>}
          <span>{container.status}</span>
          <ContainerPorts ports={container.ports} host={host} />
          {isAdmin && (
            <div className="flex gap-1">
              <Button variant="outline" className="px-2 py-1" onClick={() => act("start")} disabled={busy || running}>
                <Play className="h-3.5 w-3.5 text-green-500" />
              </Button>
              <Button variant="outline" className="px-2 py-1" onClick={() => act("stop")} disabled={busy || !running}>
                <Square className="h-3.5 w-3.5 text-red-500" />
              </Button>
              <Button variant="outline" className="px-2 py-1" onClick={() => act("restart")} disabled={busy || !running}>
                <RotateCw className="h-3.5 w-3.5 text-sky-500" />
              </Button>
            </div>
          )}
        </div>
      </div>

      {open && (
        <div className="border-t border-slate-200 p-3 text-xs dark:border-slate-700">
          {detail.isLoading ? (
            <Spinner />
          ) : detail.data ? (
            <div className="grid gap-x-6 gap-y-1 sm:grid-cols-2">
              <Field label="Container">
                <span className="font-mono">{detail.data.name}</span>
              </Field>
              <Field label="ID">
                <span className="font-mono">{detail.data.id.slice(0, 12)}</span>
              </Field>
              <Field label="State">
                {detail.data.state}
                {detail.data.exit_code != null && detail.data.state !== "running"
                  ? ` (exit ${detail.data.exit_code})`
                  : ""}
              </Field>
              <Field label="Restarts">{detail.data.restart_count}</Field>
              {detail.data.started_at && (
                <Field label="Started">
                  {new Date(detail.data.started_at).toLocaleString()}
                </Field>
              )}
              {detail.data.networks.length > 0 && (
                <Field label="Networks">{detail.data.networks.join(", ")}</Field>
              )}
              {detail.data.mounts.length > 0 && (
                <div className="sm:col-span-2">
                  <p className="mb-1 font-medium text-slate-500">Mounts</p>
                  <ul className="space-y-0.5 font-mono">
                    {detail.data.mounts.map((m, i) => (
                      <li key={i} className="truncate">
                        {m.source} → {m.destination} {m.rw ? "(rw)" : "(ro)"}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {detail.data.env.length > 0 && (
                <div className="sm:col-span-2">
                  <p className="mb-1 font-medium text-slate-500">Environment</p>
                  <pre className="max-h-48 overflow-auto whitespace-pre-wrap font-mono">
                    {detail.data.env.join("\n")}
                  </pre>
                </div>
              )}
            </div>
          ) : (
            <p className="text-slate-500">{apiErrorMessage(detail.error)}</p>
          )}
        </div>
      )}
    </Card>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-2">
      <span className="w-20 shrink-0 font-medium text-slate-500">{label}</span>
      <span className="min-w-0 break-words">{children}</span>
    </div>
  );
}