stackpilot/frontend/src/pages/StackDetail.tsx

import { useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Play,
  Square,
  RotateCw,
  DownloadCloud,
  ArrowUpCircle,
  Pencil,
  Power,
  Trash2,
  LayoutTemplate,
} from "lucide-react";
import { toast } from "sonner";
import { Badge, Button, Card, Input, Spinner, StatusDot } from "@/components/ui";
import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
import { LogViewer } from "@/components/stacks/LogViewer";
import { ContainerCard } from "@/components/stacks/ContainerCard";
import { ActionStatusList } from "@/components/stacks/ActionStatusBanner";
import { AutoUpdatePanel } from "@/components/stacks/AutoUpdatePanel";
import { SecretsPanel } from "@/components/stacks/SecretsPanel";
import { BackupButton } from "@/components/stacks/BackupRestore";
import { stacksApi } from "@/api/stacks";
import { templatesApi } from "@/api/templates";
import { apiErrorMessage } from "@/api/client";
import { useAuthStore } from "@/store/auth";
import { useStackActions } from "@/hooks/useStackActions";
import type { ContainerInfo } from "@/types";

const TABS = ["Overview", "Logs", "Environment", "Compose", "Secrets"] as const;
type Tab = (typeof TABS)[number];

export function StackDetail() {
  const { id = "" } = useParams();
  const isAdmin = useAuthStore((s) => s.user?.role === "admin");
  const [tab, setTab] = useState<Tab>("Overview");
  const actions = useStackActions();
  const queryClient = useQueryClient();

  const { data, isLoading } = useQuery({
    queryKey: ["stack", id],
    queryFn: () => stacksApi.get(id),
    // Container state arrives over /ws/events; this is the fallback.
    refetchInterval: 30000,
  });

  if (isLoading || !data) return <Spinner />;
  const busy = actions.isBusy(id);

  return (
    <div className="flex h-full flex-col space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <StatusDot status={data.status} />
            <h1 className="sp-heading text-xl">{data.name}</h1>
            <Badge status={data.status}>{data.status}</Badge>
          </div>
          {data.description && (
            <p className="mt-1 text-sm text-slate-500">{data.description}</p>
          )}
        </div>
        {isAdmin && (
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" onClick={() => actions.start(id)} loading={busy}>
              <Play className="h-4 w-4 text-green-500" /> Start
            </Button>
            <Button variant="outline" onClick={() => actions.stop(id)} loading={busy}>
              <Square className="h-4 w-4 text-red-500" /> Stop
            </Button>
            <Button variant="outline" onClick={() => actions.restart(id)} loading={busy}>
              <RotateCw className="h-4 w-4 text-sky-500" /> Restart
            </Button>
            <Button variant="outline" onClick={() => actions.pull(id)} loading={busy}>
              <DownloadCloud className="h-4 w-4" /> Pull
            </Button>
            <Button variant="outline" onClick={() => actions.updateImages(id)} loading={busy}>
              <ArrowUpCircle className="h-4 w-4" /> Update
            </Button>
            <Button variant="outline" onClick={() => actions.down(id)} loading={busy}>
              <Power className="h-4 w-4" /> Down
            </Button>
            <BackupButton stackId={id} />
            <SaveAsTemplateButton stackId={id} defaultName={data.name} />
            <Link to={`/stacks/${id}/edit`}>
              <Button>
                <Pencil className="h-4 w-4" /> Edit
              </Button>
            </Link>
            <DeleteStackButton stackId={id} />
          </div>
        )}
      </div>

      <ActionStatusList statuses={actions.statuses} onDismiss={actions.dismissStatus} />

      {/* Tabs */}
      <div className="flex gap-1 border-b border-slate-200 dark:border-slate-700">
        {TABS.map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={
              tab === t
                ? "border-b-2 border-accent px-4 py-2 text-sm font-medium text-accent dark:border-accent-dark dark:text-accent-dark"
                : "px-4 py-2 text-sm text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
            }
          >
            {t}
          </button>
        ))}
      </div>

      <div className="flex-1 overflow-hidden">
        {tab === "Overview" && (
          <Overview
            data={data}
            isAdmin={isAdmin}
            onChanged={() => queryClient.invalidateQueries({ queryKey: ["stack", id] })}
          />
        )}
        {tab === "Logs" && <LogViewer stackId={id} />}
        {tab === "Environment" && <EnvView env={data.env} />}
        {tab === "Compose" && <ComposeView yaml={data.yaml} />}
        {tab === "Secrets" && (
          <SecretsPanel
            stackId={id}
            yaml={data.yaml}
            isAdmin={isAdmin}
            onChanged={() => queryClient.invalidateQueries({ queryKey: ["stack", id] })}
          />
        )}
      </div>
    </div>
  );
}

function Overview({
  data,
  isAdmin,
  onChanged,
}: {
  data: ReturnType<typeof Object> & any;
  isAdmin: boolean;
  onChanged: () => void;
}) {
  return (
    <div className="space-y-2 overflow-auto">
      <AutoUpdatePanel stackId={data.id} isAdmin={isAdmin} />
      {data.containers.length === 0 && (
        <Card>
          <p className="text-sm text-slate-500">
            No containers running. Start the stack to see services.
          </p>
        </Card>
      )}
      {data.containers.map((c: ContainerInfo) => (
        <ContainerCard key={c.id} container={c} isAdmin={isAdmin} onChanged={onChanged} />
      ))}
    </div>
  );
}

function EnvView({ env }: { env: string }) {
  return (
    <Card className="h-full overflow-auto">
      {env ? (
        <pre className="whitespace-pre-wrap font-mono text-xs">{env}</pre>
      ) : (
        <p className="text-sm text-slate-500">No .env file for this stack.</p>
      )}
    </Card>
  );
}

function ComposeView({ yaml }: { yaml: string }) {
  return (
    <Card className="h-full overflow-auto">
      <pre className="whitespace-pre-wrap font-mono text-xs">{yaml}</pre>
    </Card>
  );
}

function DeleteStackButton({ stackId }: { stackId: string }) {
  const navigate = useNavigate();
  const qc = useQueryClient();
  const [open, setOpen] = useState(false);
  const [deleteFiles, setDeleteFiles] = useState(true);
  const [busy, setBusy] = useState(false);

  const remove = async () => {
    setBusy(true);
    const t = toast.loading(`Deleting ${stackId}…`);
    try {
      await stacksApi.remove(stackId, deleteFiles);
      toast.success(`Deleted ${stackId}`, { id: t });
      qc.invalidateQueries({ queryKey: ["stacks"] });
      navigate("/stacks");
    } catch (e) {
      toast.error(apiErrorMessage(e), { id: t });
      setBusy(false);
    }
  };

  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>
        <Trash2 className="h-4 w-4" /> Delete
      </Button>
      {open && (
        <ConfirmDialog
          title={`Delete stack “${stackId}”?`}
          message="The stack is stopped and removed. This cannot be undone."
          confirmLabel="Delete stack"
          danger
          busy={busy}
          onConfirm={remove}
          onCancel={() => setOpen(false)}
        >
          <label className="flex items-start gap-2 text-sm">
            <input
              type="checkbox"
              checked={deleteFiles}
              onChange={(e) => setDeleteFiles(e.target.checked)}
              className="mt-0.5 h-4 w-4"
            />
            <span>
              Also delete the compose files from disk
              <span className="block text-xs text-slate-500">
                Uncheck to keep <code>{stackId}/</code> on disk (it can be re-discovered later).
              </span>
            </span>
          </label>
        </ConfirmDialog>
      )}
    </>
  );
}

function SaveAsTemplateButton({ stackId, defaultName }: { stackId: string; defaultName: string }) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState(defaultName);
  const [busy, setBusy] = useState(false);

  const save = async () => {
    if (!name.trim()) {
      toast.error("Template name required");
      return;
    }
    setBusy(true);
    try {
      await templatesApi.saveFromStack({ stack_id: stackId, name: name.trim() });
      toast.success(`Saved template “${name.trim()}”`);
      setOpen(false);
    } catch (e) {
      toast.error(apiErrorMessage(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        <LayoutTemplate className="h-4 w-4" /> Save as template
      </Button>
      {open && (
        <ConfirmDialog
          title="Save as template"
          message="Snapshots this stack's compose and .env into a reusable custom template."
          confirmLabel="Save template"
          busy={busy}
          onConfirm={save}
          onCancel={() => setOpen(false)}
        >
          <label className="block space-y-1">
            <span className="text-xs font-medium text-slate-500">Template name</span>
            <Input value={name} onChange={(e) => setName(e.target.value)} />
          </label>
        </ConfirmDialog>
      )}
    </>
  );
}