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 } 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 { StackLockBanner } from "@/components/stacks/StackLockBanner";
import { AutoUpdatePanel } from "@/components/stacks/AutoUpdatePanel";
import { SecretsPanel } from "@/components/stacks/SecretsPanel";
import { GitPanel } from "@/components/stacks/GitPanel";
import { StackIconEditor } from "@/components/stacks/IconPicker";
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", "Git"] 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. A stack
    // held by an operation is watched closely instead — the banner's "stop
    // the backup" has to turn back into the normal page once it worked.
    refetchInterval: (query) => (query.state.data?.lock ? 3000 : 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 className="flex items-center gap-3">
          {/* Clicking the icon opens the picker — the way an existing stack
              gets one without a trip through the editor. */}
          <StackIconEditor stack={data} status={data.status} editable={isAdmin} />
          <div>
            <div className="flex items-center gap-2">
              <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>
        </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>

      {data.lock && isAdmin && <StackLockBanner stackId={id} lock={data.lock} />}

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

      {/* Tabs */}
      <div className="flex gap-1 overflow-x-auto border-b border-slate-200 dark:border-slate-700">
        {TABS.map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={
              tab === t
                ? "shrink-0 whitespace-nowrap border-b-2 border-accent px-4 py-2 text-sm font-medium text-accent dark:border-accent-dark dark:text-accent-dark"
                : "shrink-0 whitespace-nowrap 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} isAdmin={isAdmin} />}
        {tab === "Compose" && <ComposeView yaml={data.yaml} />}
        {tab === "Git" && <GitPanel stackId={id} isAdmin={isAdmin} />}
        {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, isAdmin }: { env: string; isAdmin: boolean }) {
  return (
    <Card className="h-full overflow-auto">
      {env ? (
        <pre className="whitespace-pre-wrap font-mono text-xs">{env}</pre>
      ) : isAdmin ? (
        <p className="text-sm text-slate-500">No .env file for this stack.</p>
      ) : (
        // The server leaves it out for this role; "no .env file" was untrue.
        <p className="text-sm text-slate-500">The .env file is shown to administrators only.</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 {
      const res = await stacksApi.remove(stackId, deleteFiles);
      if (res.kept?.length) {
        toast.success(`Deleted ${stackId}`, {
          id: t,
          description: `Left in place (another filesystem is mounted there): ${res.kept.join(", ")}`,
        });
      } else {
        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's containers are stopped and removed. Named volumes are kept. 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 stack folder from disk
              <span className="block text-xs text-slate-500">
                Everything in <code>{stackId}/</code> goes — the compose file, <code>.env</code> and
                any data folders inside it (e.g. <code>./config</code>). Shares or disks mounted
                inside are left alone. Uncheck to keep the folder; StackPilot will then list it
                again as a stopped stack.
              </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>
      )}
    </>
  );
}