paperclip/ui/src/pages/ExecutionWorkspaceDetail.tsx

import { useEffect, useMemo, useState } from "react";
import { Link, useParams } from "@/lib/router";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { ExecutionWorkspace, Project, ProjectWorkspace } from "@paperclipai/shared";
import { ArrowLeft, Check, Copy, ExternalLink, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { CopyText } from "../components/CopyText";
import { executionWorkspacesApi } from "../api/execution-workspaces";
import { issuesApi } from "../api/issues";
import { projectsApi } from "../api/projects";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { useCompany } from "../context/CompanyContext";
import { queryKeys } from "../lib/queryKeys";
import { cn, formatDateTime, issueUrl, projectRouteRef, projectWorkspaceUrl } from "../lib/utils";

type WorkspaceFormState = {
  name: string;
  cwd: string;
  repoUrl: string;
  baseRef: string;
  branchName: string;
  providerRef: string;
  provisionCommand: string;
  teardownCommand: string;
  cleanupCommand: string;
  workspaceRuntime: string;
};

function isSafeExternalUrl(value: string | null | undefined) {
  if (!value) return false;
  try {
    const parsed = new URL(value);
    return parsed.protocol === "http:" || parsed.protocol === "https:";
  } catch {
    return false;
  }
}

function readText(value: string | null | undefined) {
  return value ?? "";
}

function formatJson(value: Record<string, unknown> | null | undefined) {
  if (!value || Object.keys(value).length === 0) return "";
  return JSON.stringify(value, null, 2);
}

function normalizeText(value: string) {
  const trimmed = value.trim();
  return trimmed.length > 0 ? trimmed : null;
}

function parseWorkspaceRuntimeJson(value: string) {
  const trimmed = value.trim();
  if (!trimmed) return { ok: true as const, value: null as Record<string, unknown> | null };

  try {
    const parsed = JSON.parse(trimmed);
    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
      return {
        ok: false as const,
        error: "Workspace runtime JSON must be a JSON object.",
      };
    }
    return { ok: true as const, value: parsed as Record<string, unknown> };
  } catch (error) {
    return {
      ok: false as const,
      error: error instanceof Error ? error.message : "Invalid JSON.",
    };
  }
}

function formStateFromWorkspace(workspace: ExecutionWorkspace): WorkspaceFormState {
  return {
    name: workspace.name,
    cwd: readText(workspace.cwd),
    repoUrl: readText(workspace.repoUrl),
    baseRef: readText(workspace.baseRef),
    branchName: readText(workspace.branchName),
    providerRef: readText(workspace.providerRef),
    provisionCommand: readText(workspace.config?.provisionCommand),
    teardownCommand: readText(workspace.config?.teardownCommand),
    cleanupCommand: readText(workspace.config?.cleanupCommand),
    workspaceRuntime: formatJson(workspace.config?.workspaceRuntime),
  };
}

function buildWorkspacePatch(initialState: WorkspaceFormState, nextState: WorkspaceFormState) {
  const patch: Record<string, unknown> = {};
  const configPatch: Record<string, unknown> = {};

  const maybeAssign = (
    key: keyof Pick<WorkspaceFormState, "name" | "cwd" | "repoUrl" | "baseRef" | "branchName" | "providerRef">,
  ) => {
    if (initialState[key] === nextState[key]) return;
    patch[key] = key === "name" ? (normalizeText(nextState[key]) ?? initialState.name) : normalizeText(nextState[key]);
  };

  maybeAssign("name");
  maybeAssign("cwd");
  maybeAssign("repoUrl");
  maybeAssign("baseRef");
  maybeAssign("branchName");
  maybeAssign("providerRef");

  const maybeAssignConfigText = (key: keyof Pick<WorkspaceFormState, "provisionCommand" | "teardownCommand" | "cleanupCommand">) => {
    if (initialState[key] === nextState[key]) return;
    configPatch[key] = normalizeText(nextState[key]);
  };

  maybeAssignConfigText("provisionCommand");
  maybeAssignConfigText("teardownCommand");
  maybeAssignConfigText("cleanupCommand");

  if (initialState.workspaceRuntime !== nextState.workspaceRuntime) {
    const parsed = parseWorkspaceRuntimeJson(nextState.workspaceRuntime);
    if (!parsed.ok) throw new Error(parsed.error);
    configPatch.workspaceRuntime = parsed.value;
  }

  if (Object.keys(configPatch).length > 0) {
    patch.config = configPatch;
  }

  return patch;
}

function validateForm(form: WorkspaceFormState) {
  const repoUrl = normalizeText(form.repoUrl);
  if (repoUrl) {
    try {
      new URL(repoUrl);
    } catch {
      return "Repo URL must be a valid URL.";
    }
  }

  const runtimeJson = parseWorkspaceRuntimeJson(form.workspaceRuntime);
  if (!runtimeJson.ok) {
    return runtimeJson.error;
  }

  return null;
}

function Field({
  label,
  hint,
  children,
}: {
  label: string;
  hint?: string;
  children: React.ReactNode;
}) {
  return (
    <label className="space-y-1.5">
      <div className="flex items-center justify-between gap-3">
        <span className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">{label}</span>
        {hint ? <span className="text-[11px] text-muted-foreground">{hint}</span> : null}
      </div>
      {children}
    </label>
  );
}

function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-start gap-3 py-1.5">
      <div className="w-32 shrink-0 text-xs text-muted-foreground">{label}</div>
      <div className="min-w-0 flex-1 text-sm">{children}</div>
    </div>
  );
}

function StatusPill({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn("inline-flex items-center rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground", className)}>
      {children}
    </div>
  );
}

function MonoValue({ value, copy }: { value: string; copy?: boolean }) {
  return (
    <div className="inline-flex max-w-full items-center gap-2">
      <span className="break-all font-mono text-xs">{value}</span>
      {copy ? (
        <CopyText text={value} className="shrink-0 text-muted-foreground hover:text-foreground" copiedLabel="Copied">
          <Copy className="h-3.5 w-3.5" />
        </CopyText>
      ) : null}
    </div>
  );
}

function WorkspaceLink({
  project,
  workspace,
}: {
  project: Project;
  workspace: ProjectWorkspace;
}) {
  return <Link to={projectWorkspaceUrl(project, workspace.id)} className="hover:underline">{workspace.name}</Link>;
}

export function ExecutionWorkspaceDetail() {
  const { workspaceId } = useParams<{ workspaceId: string }>();
  const queryClient = useQueryClient();
  const { setBreadcrumbs } = useBreadcrumbs();
  const { selectedCompanyId, setSelectedCompanyId } = useCompany();
  const [form, setForm] = useState<WorkspaceFormState | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const workspaceQuery = useQuery({
    queryKey: queryKeys.executionWorkspaces.detail(workspaceId!),
    queryFn: () => executionWorkspacesApi.get(workspaceId!),
    enabled: Boolean(workspaceId),
  });
  const workspace = workspaceQuery.data ?? null;

  const projectQuery = useQuery({
    queryKey: workspace ? [...queryKeys.projects.detail(workspace.projectId), workspace.companyId] : ["projects", "detail", "__pending__"],
    queryFn: () => projectsApi.get(workspace!.projectId, workspace!.companyId),
    enabled: Boolean(workspace?.projectId),
  });
  const project = projectQuery.data ?? null;

  const sourceIssueQuery = useQuery({
    queryKey: workspace?.sourceIssueId ? queryKeys.issues.detail(workspace.sourceIssueId) : ["issues", "detail", "__none__"],
    queryFn: () => issuesApi.get(workspace!.sourceIssueId!),
    enabled: Boolean(workspace?.sourceIssueId),
  });
  const sourceIssue = sourceIssueQuery.data ?? null;

  const derivedWorkspaceQuery = useQuery({
    queryKey: workspace?.derivedFromExecutionWorkspaceId
      ? queryKeys.executionWorkspaces.detail(workspace.derivedFromExecutionWorkspaceId)
      : ["execution-workspaces", "detail", "__none__"],
    queryFn: () => executionWorkspacesApi.get(workspace!.derivedFromExecutionWorkspaceId!),
    enabled: Boolean(workspace?.derivedFromExecutionWorkspaceId),
  });
  const derivedWorkspace = derivedWorkspaceQuery.data ?? null;

  const linkedProjectWorkspace = useMemo(
    () => project?.workspaces.find((item) => item.id === workspace?.projectWorkspaceId) ?? null,
    [project, workspace?.projectWorkspaceId],
  );

  const initialState = useMemo(() => (workspace ? formStateFromWorkspace(workspace) : null), [workspace]);
  const isDirty = Boolean(form && initialState && JSON.stringify(form) !== JSON.stringify(initialState));
  const projectRef = project ? projectRouteRef(project) : workspace?.projectId ?? "";

  useEffect(() => {
    if (!workspace?.companyId || workspace.companyId === selectedCompanyId) return;
    setSelectedCompanyId(workspace.companyId, { source: "route_sync" });
  }, [workspace?.companyId, selectedCompanyId, setSelectedCompanyId]);

  useEffect(() => {
    if (!workspace) return;
    setForm(formStateFromWorkspace(workspace));
    setErrorMessage(null);
  }, [workspace]);

  useEffect(() => {
    if (!workspace) return;
    const crumbs = [
      { label: "Projects", href: "/projects" },
      ...(project ? [{ label: project.name, href: `/projects/${projectRef}` }] : []),
      ...(project ? [{ label: "Workspaces", href: `/projects/${projectRef}/workspaces` }] : []),
      { label: workspace.name },
    ];
    setBreadcrumbs(crumbs);
  }, [setBreadcrumbs, workspace, project, projectRef]);

  const updateWorkspace = useMutation({
    mutationFn: (patch: Record<string, unknown>) => executionWorkspacesApi.update(workspace!.id, patch),
    onSuccess: (nextWorkspace) => {
      queryClient.setQueryData(queryKeys.executionWorkspaces.detail(nextWorkspace.id), nextWorkspace);
      if (project) {
        queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.id) });
        queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.urlKey) });
      }
      if (sourceIssue) {
        queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(sourceIssue.id) });
      }
      setErrorMessage(null);
    },
    onError: (error) => {
      setErrorMessage(error instanceof Error ? error.message : "Failed to save execution workspace.");
    },
  });

  if (workspaceQuery.isLoading) return <p className="text-sm text-muted-foreground">Loading workspace…</p>;
  if (workspaceQuery.error) {
    return (
      <p className="text-sm text-destructive">
        {workspaceQuery.error instanceof Error ? workspaceQuery.error.message : "Failed to load workspace"}
      </p>
    );
  }
  if (!workspace || !form || !initialState) return null;

  const saveChanges = () => {
    const validationError = validateForm(form);
    if (validationError) {
      setErrorMessage(validationError);
      return;
    }

    let patch: Record<string, unknown>;
    try {
      patch = buildWorkspacePatch(initialState, form);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Failed to build workspace update.");
      return;
    }

    if (Object.keys(patch).length === 0) return;
    updateWorkspace.mutate(patch);
  };

  return (
    <div className="mx-auto max-w-5xl space-y-6">
      <div className="flex flex-wrap items-center gap-3">
        <Button variant="ghost" size="sm" asChild>
          <Link to={project ? `/projects/${projectRef}/workspaces` : "/projects"}>
            <ArrowLeft className="mr-1 h-4 w-4" />
            Back to all workspaces
          </Link>
        </Button>
        <StatusPill>{workspace.mode}</StatusPill>
        <StatusPill>{workspace.providerType}</StatusPill>
        <StatusPill className={workspace.status === "active" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : undefined}>
          {workspace.status}
        </StatusPill>
      </div>

      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.95fr)]">
        <div className="space-y-6">
          <div className="rounded-2xl border border-border bg-card p-5">
            <div className="flex flex-wrap items-start justify-between gap-4">
              <div className="space-y-2">
                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
                  Execution workspace
                </div>
                <h1 className="text-2xl font-semibold">{workspace.name}</h1>
                <p className="max-w-2xl text-sm text-muted-foreground">
                  Configure the concrete runtime workspace that Paperclip reuses for this issue flow. These settings stay
                  attached to the execution workspace so future runs can keep local paths, repo refs, provisioning, teardown,
                  and runtime-service behavior in sync with the actual workspace being reused.
                </p>
              </div>
            </div>

            <Separator className="my-5" />

            <div className="grid gap-4 md:grid-cols-2">
              <Field label="Workspace name">
                <input
                  className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
                  value={form.name}
                  onChange={(event) => setForm((current) => current ? { ...current, name: event.target.value } : current)}
                  placeholder="Execution workspace name"
                />
              </Field>
              <Field label="Branch name" hint="Useful for isolated worktrees">
                <input
                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.branchName}
                  onChange={(event) => setForm((current) => current ? { ...current, branchName: event.target.value } : current)}
                  placeholder="PAP-946-workspace"
                />
              </Field>
            </div>

            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <Field label="Working directory">
                <input
                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.cwd}
                  onChange={(event) => setForm((current) => current ? { ...current, cwd: event.target.value } : current)}
                  placeholder="/absolute/path/to/workspace"
                />
              </Field>
              <Field label="Provider path / ref">
                <input
                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.providerRef}
                  onChange={(event) => setForm((current) => current ? { ...current, providerRef: event.target.value } : current)}
                  placeholder="/path/to/worktree or provider ref"
                />
              </Field>
            </div>

            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <Field label="Repo URL">
                <input
                  className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
                  value={form.repoUrl}
                  onChange={(event) => setForm((current) => current ? { ...current, repoUrl: event.target.value } : current)}
                  placeholder="https://github.com/org/repo"
                />
              </Field>
              <Field label="Base ref">
                <input
                  className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.baseRef}
                  onChange={(event) => setForm((current) => current ? { ...current, baseRef: event.target.value } : current)}
                  placeholder="origin/main"
                />
              </Field>
            </div>

            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <Field label="Provision command" hint="Runs when Paperclip prepares this execution workspace">
                <textarea
                  className="min-h-28 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.provisionCommand}
                  onChange={(event) => setForm((current) => current ? { ...current, provisionCommand: event.target.value } : current)}
                  placeholder="bash ./scripts/provision-worktree.sh"
                />
              </Field>
              <Field label="Teardown command" hint="Runs when the execution workspace is archived or cleaned up">
                <textarea
                  className="min-h-28 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.teardownCommand}
                  onChange={(event) => setForm((current) => current ? { ...current, teardownCommand: event.target.value } : current)}
                  placeholder="bash ./scripts/teardown-worktree.sh"
                />
              </Field>
            </div>

            <div className="mt-4 grid gap-4">
              <Field label="Cleanup command" hint="Workspace-specific cleanup before teardown">
                <textarea
                  className="min-h-24 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.cleanupCommand}
                  onChange={(event) => setForm((current) => current ? { ...current, cleanupCommand: event.target.value } : current)}
                  placeholder="pkill -f vite || true"
                />
              </Field>

              <Field label="Runtime services JSON" hint="Concrete workspace runtime settings, including services">
                <textarea
                  className="min-h-48 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
                  value={form.workspaceRuntime}
                  onChange={(event) => setForm((current) => current ? { ...current, workspaceRuntime: event.target.value } : current)}
                  placeholder={'{\n  "services": [\n    {\n      "name": "web",\n      "command": "pnpm dev",\n      "port": 3100\n    }\n  ]\n}'}
                />
              </Field>
            </div>

            <div className="mt-5 flex flex-wrap items-center gap-3">
              <Button disabled={!isDirty || updateWorkspace.isPending} onClick={saveChanges}>
                {updateWorkspace.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
                Save changes
              </Button>
              <Button
                variant="outline"
                disabled={!isDirty || updateWorkspace.isPending}
                onClick={() => {
                  setForm(initialState);
                  setErrorMessage(null);
                }}
              >
                Reset
              </Button>
              {errorMessage ? <p className="text-sm text-destructive">{errorMessage}</p> : null}
              {!errorMessage && !isDirty ? <p className="text-sm text-muted-foreground">No unsaved changes.</p> : null}
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <div className="rounded-2xl border border-border bg-card p-5">
            <div className="space-y-1">
              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Linked objects</div>
              <h2 className="text-lg font-semibold">Workspace context</h2>
            </div>
            <Separator className="my-4" />
            <DetailRow label="Project">
              {project ? <Link to={`/projects/${projectRef}`} className="hover:underline">{project.name}</Link> : <MonoValue value={workspace.projectId} />}
            </DetailRow>
            <DetailRow label="Project workspace">
              {project && linkedProjectWorkspace ? (
                <WorkspaceLink project={project} workspace={linkedProjectWorkspace} />
              ) : workspace.projectWorkspaceId ? (
                <MonoValue value={workspace.projectWorkspaceId} />
              ) : (
                "None"
              )}
            </DetailRow>
            <DetailRow label="Source issue">
              {sourceIssue ? (
                <Link to={issueUrl(sourceIssue)} className="hover:underline">
                  {sourceIssue.identifier ?? sourceIssue.id} · {sourceIssue.title}
                </Link>
              ) : workspace.sourceIssueId ? (
                <MonoValue value={workspace.sourceIssueId} />
              ) : (
                "None"
              )}
            </DetailRow>
            <DetailRow label="Derived from">
              {derivedWorkspace ? (
                <Link to={`/execution-workspaces/${derivedWorkspace.id}`} className="hover:underline">
                  {derivedWorkspace.name}
                </Link>
              ) : workspace.derivedFromExecutionWorkspaceId ? (
                <MonoValue value={workspace.derivedFromExecutionWorkspaceId} />
              ) : (
                "None"
              )}
            </DetailRow>
            <DetailRow label="Workspace ID">
              <MonoValue value={workspace.id} />
            </DetailRow>
          </div>

          <div className="rounded-2xl border border-border bg-card p-5">
            <div className="space-y-1">
              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Paths and refs</div>
              <h2 className="text-lg font-semibold">Concrete location</h2>
            </div>
            <Separator className="my-4" />
            <DetailRow label="Working dir">
              {workspace.cwd ? <MonoValue value={workspace.cwd} copy /> : "None"}
            </DetailRow>
            <DetailRow label="Provider ref">
              {workspace.providerRef ? <MonoValue value={workspace.providerRef} copy /> : "None"}
            </DetailRow>
            <DetailRow label="Repo URL">
              {workspace.repoUrl && isSafeExternalUrl(workspace.repoUrl) ? (
                <div className="inline-flex items-center gap-2">
                  <a href={workspace.repoUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
                    {workspace.repoUrl}
                    <ExternalLink className="h-3.5 w-3.5" />
                  </a>
                  <CopyText text={workspace.repoUrl} className="text-muted-foreground hover:text-foreground" copiedLabel="Copied">
                    <Copy className="h-3.5 w-3.5" />
                  </CopyText>
                </div>
              ) : workspace.repoUrl ? (
                <MonoValue value={workspace.repoUrl} copy />
              ) : (
                "None"
              )}
            </DetailRow>
            <DetailRow label="Base ref">
              {workspace.baseRef ? <MonoValue value={workspace.baseRef} copy /> : "None"}
            </DetailRow>
            <DetailRow label="Branch">
              {workspace.branchName ? <MonoValue value={workspace.branchName} copy /> : "None"}
            </DetailRow>
            <DetailRow label="Opened">{formatDateTime(workspace.openedAt)}</DetailRow>
            <DetailRow label="Last used">{formatDateTime(workspace.lastUsedAt)}</DetailRow>
            <DetailRow label="Cleanup">
              {workspace.cleanupEligibleAt
                ? `${formatDateTime(workspace.cleanupEligibleAt)}${workspace.cleanupReason ? ` · ${workspace.cleanupReason}` : ""}`
                : "Not scheduled"}
            </DetailRow>
          </div>

          <div className="rounded-2xl border border-border bg-card p-5">
            <div className="space-y-1">
              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
              <h2 className="text-lg font-semibold">Attached services</h2>
            </div>
            <Separator className="my-4" />
            {workspace.runtimeServices && workspace.runtimeServices.length > 0 ? (
              <div className="space-y-3">
                {workspace.runtimeServices.map((service) => (
                  <div key={service.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
                    <div className="flex items-start justify-between gap-3">
                      <div className="space-y-1">
                        <div className="text-sm font-medium">{service.serviceName}</div>
                        <div className="text-xs text-muted-foreground">{service.status} · {service.lifecycle}</div>
                        <div className="space-y-1 text-xs text-muted-foreground">
                          {service.url ? (
                            <a href={service.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
                              {service.url}
                              <ExternalLink className="h-3.5 w-3.5" />
                            </a>
                          ) : null}
                          {service.command ? <MonoValue value={service.command} copy /> : null}
                          {service.cwd ? <MonoValue value={service.cwd} copy /> : null}
                        </div>
                      </div>
                      <StatusPill>{service.healthStatus}</StatusPill>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">No runtime services are attached to this execution workspace.</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}