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 [noteBody, setNoteBody] = React.useState("");
  const [noteDelivery, setNoteDelivery] = React.useState<"queued" | "direct">("queued");

  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),
  });

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

  const postNoteMut = api.convoys.postOperatorNote.useMutation({
    onSuccess: () => {
      setNoteBody("");
      void operatorNotesQuery.refetch();
    },
  });

  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>

      {detailQuery.data?.pr?.prUrl && (
        <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">PR</p>
          <a
            href={detailQuery.data.pr.prUrl}
            target="_blank"
            rel="noreferrer"
            className="break-all text-primary underline"
          >
            {detailQuery.data.pr.prUrl}
            {typeof detailQuery.data.pr.prNumber === "number" && detailQuery.data.pr.prNumber
              ? ` (#${detailQuery.data.pr.prNumber})`
              : ""}
          </a>
        </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 className="mb-4">
          <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>
      )}

      {status === "in_progress" && convoyId && (
        <div className="rounded-md border border-border p-3">
          <p className="mb-2 text-xs font-medium uppercase text-muted-foreground">
            Operator notes — in progress thread
          </p>
          <p className="mb-2 text-[11px] text-muted-foreground">
            Distinct from gate co-pilot. Queued notes inject at next tool round; direct messages prepend before next model call.
          </p>
          <div className="mb-3 space-y-2 max-h-64 overflow-y-auto">
            {(operatorNotesQuery.data ?? []).length === 0 ? (
              <p className="text-xs text-muted-foreground">No operator messages yet.</p>
            ) : (
              (operatorNotesQuery.data ?? []).map((note) => (
                <div key={note.id} className="rounded border border-border bg-muted/20 p-2 text-xs">
                  <div className="mb-1 flex items-center gap-2">
                    <span
                      className={
                        note.delivery === "direct"
                          ? "rounded bg-primary/10 px-1.5 py-0.5 font-medium text-primary"
                          : "rounded bg-muted px-1.5 py-0.5 font-medium"
                      }
                    >
                      {note.delivery}
                    </span>
                    <span className="text-muted-foreground">{new Date(note.createdAt).toLocaleString()}</span>
                    {note.deliveredAt && (
                      <span className="text-green-600">delivered {new Date(note.deliveredAt).toLocaleString()}</span>
                    )}
                  </div>
                  <p className="whitespace-pre-wrap text-sm">{note.body}</p>
                  <p className="mt-1 text-[10px] text-muted-foreground">author {note.authorUserId.slice(0, 8)}</p>
                </div>
              ))
            )}
          </div>
          <div className="space-y-2">
            <textarea
              className="min-h-[72px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
              placeholder="Queued note: use existing auth middleware"
              value={noteBody}
              onChange={(e) => setNoteBody(e.target.value)}
              maxLength={2000}
            />
            <div className="flex items-center justify-between gap-2">
              <select
                className="rounded-md border border-input bg-background px-2 py-1 text-xs"
                value={noteDelivery}
                onChange={(e) => setNoteDelivery(e.target.value as "queued" | "direct")}
              >
                <option value="queued">Queued note</option>
                <option value="direct">Direct message</option>
              </select>
              <Button
                type="button"
                size="sm"
                disabled={postNoteMut.isPending || !noteBody.trim()}
                onClick={() =>
                  postNoteMut.mutate({
                    workspace: workspaceSlug,
                    convoyId,
                    delivery: noteDelivery,
                    body: noteBody.trim(),
                  })
                }
              >
                {postNoteMut.isPending ? <Loader2 className="size-4 animate-spin" /> : "Send"}
              </Button>
            </div>
            {postNoteMut.error && <p className="text-xs text-destructive">{postNoteMut.error.message}</p>}
          </div>
        </div>
      )}
    </div>
  );
}