Submatter/apps/web/components/mission-control/convoy-detail-panel.tsx

"use client";

import * as React from "react";
import type { ConvoyStatus } from "@tasks/shared/convoy-lifecycle";
import { Loader2, Sparkles } from "lucide-react";

import { Button } from "@/components/ui/button";
import { api } from "@/lib/trpc";

function gateActionsForStatus(status: ConvoyStatus): Array<{
  action: "approve" | "revise" | "request_changes" | "promote";
  label: string;
  variant?: "default" | "outline" | "destructive";
}> {
  switch (status) {
    case "convoy_review":
      return [
        { action: "approve", label: "Approve plan" },
        { action: "revise", label: "Request changes", variant: "outline" },
      ];
    case "pr_review":
      return [
        { action: "approve", label: "Approve merge" },
        { action: "request_changes", label: "Request changes", variant: "outline" },
      ];
    case "merged":
      return [{ action: "promote", label: "Promote to prod" }];
    default:
      return [];
  }
}

export function ConvoyDetailPanel({
  workspaceSlug,
  convoyId,
}: {
  workspaceSlug: string;
  convoyId: string | null;
}) {
  const utils = api.useUtils();
  const [copilotText, setCopilotText] = React.useState<string | null>(null);

  const detailQuery = api.convoys.get.useQuery(
    { workspace: workspaceSlug, convoyId: convoyId ?? "" },
    { enabled: Boolean(workspaceSlug && convoyId) },
  );

  const gateMut = api.convoys.gateAction.useMutation({
    onSuccess: () => {
      void utils.convoys.kanban.invalidate();
      if (convoyId) void utils.convoys.get.invalidate({ workspace: workspaceSlug, convoyId });
    },
  });

  const copilotMut = api.convoys.gateCopilot.useMutation({
    onSuccess: (result) => setCopilotText(result.text),
  });

  if (!convoyId) {
    return (
      <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
        Select a convoy to review gates and co-pilot suggestions.
      </div>
    );
  }

  if (detailQuery.isLoading) {
    return (
      <div className="flex items-center gap-2 p-6 text-sm text-muted-foreground">
        <Loader2 className="size-4 animate-spin" />
        Loading convoy…
      </div>
    );
  }

  const convoy = detailQuery.data?.convoy;
  if (!convoy) {
    return <p className="p-6 text-sm text-muted-foreground">Convoy not found.</p>;
  }

  const status = convoy.status as ConvoyStatus;
  const actions = gateActionsForStatus(status);

  return (
    <div className="flex h-full min-h-0 flex-col overflow-y-auto p-4">
      <div className="mb-4">
        <h2 className="text-lg font-semibold">
          {convoy.content?.convoySlug ?? convoy.title}
        </h2>
        <p className="text-xs text-muted-foreground">Status: {status}</p>
        {convoy.content?.successMetric && (
          <p className="mt-2 text-sm text-muted-foreground">{convoy.content.successMetric}</p>
        )}
      </div>

      <div className="mb-4 rounded-md border border-border bg-muted/30 p-3 text-sm">
        <p className="mb-1 text-xs font-medium uppercase text-muted-foreground">
          Worker checkpoints
        </p>
        <p>
          {detailQuery.data?.checkpoints.count ?? 0} checkpoint
          {(detailQuery.data?.checkpoints.count ?? 0) === 1 ? "" : "s"}
          {detailQuery.data?.checkpoints.lastOccurredAt
            ? ` · last ${new Date(detailQuery.data.checkpoints.lastOccurredAt).toLocaleString()}`
            : ""}
        </p>
      </div>

      {convoy.description && (
        <div className="mb-4 rounded-md border border-border bg-muted/30 p-3">
          <p className="mb-1 text-xs font-medium uppercase text-muted-foreground">Plan</p>
          <pre className="whitespace-pre-wrap text-sm">{convoy.description}</pre>
        </div>
      )}

      {actions.length > 0 && (
        <div className="mb-4 flex flex-wrap gap-2">
          {actions.map((item) => (
            <Button
              key={item.action}
              type="button"
              size="sm"
              variant={item.variant ?? "default"}
              disabled={gateMut.isPending}
              onClick={() =>
                gateMut.mutate({
                  workspace: workspaceSlug,
                  convoyId,
                  action: item.action,
                })
              }
            >
              {gateMut.isPending ? <Loader2 className="size-4 animate-spin" /> : item.label}
            </Button>
          ))}
        </div>
      )}

      <div className="mb-4 rounded-md border border-border p-3">
        <div className="mb-2 flex items-center justify-between gap-2">
          <p className="flex items-center gap-1 text-sm font-medium">
            <Sparkles className="size-4 text-primary" />
            Gate co-pilot
          </p>
          <Button
            type="button"
            size="sm"
            variant="outline"
            disabled={copilotMut.isPending}
            onClick={() =>
              copilotMut.mutate({
                workspace: workspaceSlug,
                convoyId,
              })
            }
          >
            {copilotMut.isPending ? (
              <Loader2 className="size-4 animate-spin" />
            ) : (
              "Summarize"
            )}
          </Button>
        </div>
        {copilotMut.data && (
          <p className="mb-2 text-[10px] text-muted-foreground">
            Model: {copilotMut.data.resolvedAlias} ({copilotMut.data.modelId})
          </p>
        )}
        {copilotMut.error && (
          <p className="text-xs text-destructive">{copilotMut.error.message}</p>
        )}
        {copilotText && (
          <div className="prose prose-sm dark:prose-invert max-w-none text-sm">
            <p className="whitespace-pre-wrap">{copilotText}</p>
          </div>
        )}
      </div>

      {(detailQuery.data?.briefs.length ?? 0) > 0 && (
        <div>
          <p className="mb-2 text-xs font-medium uppercase text-muted-foreground">Briefs</p>
          <ul className="space-y-1 text-sm">
            {detailQuery.data?.briefs.map((brief) => (
              <li key={brief.id} className="rounded border border-border px-2 py-1">
                {brief.title}{" "}
                <span className="text-muted-foreground">({brief.status ?? "—"})</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}