import { useNavigate } from "@tanstack/react-router";import { CalendarClockIcon, PlayIcon, Settings2Icon } from "lucide-react";import { useState } from "react";import type { EnvironmentId, ScheduledTask, ThreadId } from "@t3tools/contracts";import {  isAtomCommandInterrupted,  squashAtomCommandFailure,} from "@t3tools/client-runtime/state/runtime"; import { cn } from "../../lib/utils";import { relativeLabel, scheduleLabel } from "../settings/ScheduledTasksSettings";import { useEnvironmentQuery } from "../../state/query";import { serverEnvironment } from "../../state/server";import { useAtomCommand } from "../../state/use-atom-command";import { Button } from "../ui/button";import { Switch } from "../ui/switch";import { stackedThreadToast, toastManager } from "../ui/toast";import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";import {  THREAD_DETAILS_PANEL_ICON_ACTION_CLASS,  THREAD_DETAILS_PANEL_ICON_CLASS,} from "./threadDetailsPanelStyles"; const STATUS_DOT_CLASS: Record<ScheduledTask["lastRunStatus"], string> = {  never: "bg-muted-foreground/40",  running: "animate-pulse bg-sky-500",  succeeded: "bg-emerald-500",  failed: "bg-destructive",}; /** * Thread details panel section listing the automations (scheduled tasks) bound * to this thread. Fed by the live scheduled-task subscription, so run status * and next-run times update as the scheduler works — no manual refresh. * Renders nothing when the thread has no bound automations. */export function ThreadAutomationsPanel(props: {  readonly environmentId: EnvironmentId;  readonly threadId: ThreadId;}) {  const tasksQuery = useEnvironmentQuery(    serverEnvironment.scheduledTasksLive({ environmentId: props.environmentId, input: {} }),  );  const setTaskEnabled = useAtomCommand(serverEnvironment.setScheduledTaskEnabled, {    label: "thread automation toggle",  });  const runTaskNow = useAtomCommand(serverEnvironment.runScheduledTaskNow, {    label: "thread automation run now",  });  const navigate = useNavigate();  const [busyTaskId, setBusyTaskId] = useState<string | null>(null);   const boundTasks = (tasksQuery.data?.tasks ?? []).filter(    (task) => task.threadId === props.threadId,  );  // A load error must not look like "no automations" — this thread may have  // tasks whose controls would silently vanish. Only hide the section when we  // positively know there is nothing bound to it.  if (tasksQuery.error === null && boundTasks.length === 0) return null;   const reportFailure = (title: string, error: unknown) => {    toastManager.add(      stackedThreadToast({        type: "error",        title,        description: error instanceof Error ? error.message : String(error),      }),    );  };   const toggleEnabled = async (task: ScheduledTask, enabled: boolean) => {    if (busyTaskId !== null) return;    setBusyTaskId(task.id);    // Partial update: only the enabled flag changes, so a toggle can never    // revert concurrent edits made to the task elsewhere.    const result = await setTaskEnabled({      environmentId: props.environmentId,      input: { id: task.id, enabled },    });    setBusyTaskId(null);    if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {      reportFailure("Could not update automation", squashAtomCommandFailure(result));    }  };   const runNow = async (task: ScheduledTask) => {    if (busyTaskId !== null) return;    setBusyTaskId(task.id);    const result = await runTaskNow({      environmentId: props.environmentId,      input: { id: task.id },    });    setBusyTaskId(null);    if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {      reportFailure("Could not run automation", squashAtomCommandFailure(result));    }  };   return (    <section      aria-labelledby="thread-details-automations-heading"      className="border-t border-border/65 px-2 pb-2.5 pt-2"      data-thread-automations-panel    >      <div className="mb-1 flex min-h-8 items-center justify-between gap-2 px-2">        <h3          id="thread-details-automations-heading"          className="text-[11px] font-medium text-muted-foreground"        >          Automations        </h3>        <Tooltip>          <TooltipTrigger            render={              <Button                size="icon-xs"                variant="ghost"                className={THREAD_DETAILS_PANEL_ICON_ACTION_CLASS}                aria-label="Manage schedule tasks"                onClick={() => void navigate({ to: "/settings/scheduled-tasks" })}              >                <Settings2Icon className="size-3.5" />              </Button>            }          />          <TooltipPopup>Manage schedule tasks</TooltipPopup>        </Tooltip>      </div>       {tasksQuery.error !== null ? (        <p className="px-2.5 py-1.5 text-[11px] text-destructive">          Could not load automations: {tasksQuery.error}        </p>      ) : null}       <ul className="m-0 list-none p-0">        {boundTasks.map((task) => (          <li key={task.id} className="group flex items-center gap-2.5 rounded-lg px-2.5 py-1.5">            <CalendarClockIcon className={THREAD_DETAILS_PANEL_ICON_CLASS} />            <div className="min-w-0 flex-1">              <div className="flex items-center gap-1.5">                <span                  className={cn(                    "size-1.5 shrink-0 rounded-full",                    STATUS_DOT_CLASS[task.lastRunStatus],                  )}                  aria-hidden                />                <span className="truncate text-[13px] font-medium text-foreground/80">                  {task.title}                </span>              </div>              <p className="truncate text-[11px] text-muted-foreground">                {scheduleLabel(task.schedule)}                {task.enabled && task.nextRunAt !== null                  ? ` · next ${relativeLabel(task.nextRunAt)}`                  : task.enabled                    ? ""                    : " · paused"}              </p>            </div>            <Tooltip>              <TooltipTrigger                render={                  <Button                    size="icon-xs"                    variant="ghost"                    className={THREAD_DETAILS_PANEL_ICON_ACTION_CLASS}                    aria-label={`Run ${task.title} now`}                    disabled={busyTaskId !== null || task.lastRunStatus === "running"}                    onClick={() => void runNow(task)}                  >                    <PlayIcon className="size-3.5" />                  </Button>                }              />              <TooltipPopup>Run now</TooltipPopup>            </Tooltip>            <Switch              checked={task.enabled}              disabled={busyTaskId !== null}              aria-label={task.enabled ? `Pause ${task.title}` : `Resume ${task.title}`}              onCheckedChange={(enabled) => void toggleEnabled(task, enabled)}            />          </li>        ))}      </ul>    </section>  );}