import { getFormProps, getInputProps, getSelectProps, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import {
  CheckCircleIcon,
  RectangleStackIcon,
  StarIcon,
  TrashIcon,
} from "@heroicons/react/20/solid";
import { DialogClose, DialogDescription } from "@radix-ui/react-dialog";
import { Form, useActionData, useFetcher, useParams, useSubmit } from "@remix-run/react";
import { type ActionFunction, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
import { MachinePresetName } from "@trigger.dev/core/v3";
import { AnimatePresence, motion } from "framer-motion";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { typedjson, useTypedLoaderData } from "remix-typedjson";
import { BeakerIcon } from "~/assets/icons/BeakerIcon";
import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
import { TaskIcon } from "~/assets/icons/TaskIcon";
import { JSONEditor } from "~/components/code/JSONEditor";
import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
import { Badge } from "~/components/primitives/Badge";
import { Button } from "~/components/primitives/Buttons";
import { DateField } from "~/components/primitives/DateField";
import { DateTime } from "~/components/primitives/DateTime";
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
import { DurationPicker } from "~/components/primitives/DurationPicker";
import { Fieldset } from "~/components/primitives/Fieldset";
import { FormButtons } from "~/components/primitives/FormButtons";
import { FormError } from "~/components/primitives/FormError";
import { Hint } from "~/components/primitives/Hint";
import { Input } from "~/components/primitives/Input";
import { InputGroup } from "~/components/primitives/InputGroup";
import { Label } from "~/components/primitives/Label";
import { Paragraph } from "~/components/primitives/Paragraph";
import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "~/components/primitives/Resizable";
import { Select, SelectItem } from "~/components/primitives/Select";
import { TabButton, TabContainer } from "~/components/primitives/Tabs";
import { TextLink } from "~/components/primitives/TextLink";
import { RunTagInput } from "~/components/runs/v3/RunTagInput";
import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
import { TaskTriggerSourceIcon } from "~/components/runs/v3/TaskTriggerSource";
import { TimezoneList } from "~/components/scheduled/timezones";
import { $replica } from "~/db.server";
import { useEnvironment } from "~/hooks/useEnvironment";
import { useSearchParams } from "~/hooks/useSearchParam";
import {
  redirectBackWithErrorMessage,
  redirectWithErrorMessage,
  redirectWithSuccessMessage,
} from "~/models/message.server";
import { findProjectBySlug } from "~/models/project.server";
import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
import { type Region, RegionsPresenter } from "~/presenters/v3/RegionsPresenter.server";
import {
  type RunTemplate,
  type ScheduledRun,
  type ScheduledTaskResult,
  type StandardRun,
  type StandardTaskResult,
  TestTaskPresenter,
} from "~/presenters/v3/TestTaskPresenter.server";
import { type loader as queuesLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues";
import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
import { logger } from "~/services/logger.server";
import { requireUser } from "~/services/session.server";
import { cn } from "~/utils/cn";
import { docsPath, v3RunSpanPath, v3TaskParamsSchema, v3TestPath } from "~/utils/pathBuilder";
import { DeleteTaskRunTemplateService } from "~/v3/services/deleteTaskRunTemplate.server";
import { TaskRunTemplateService } from "~/v3/services/taskRunTemplate.server";
import { TestTaskService } from "~/v3/services/testTask.server";
import { OutOfEntitlementError } from "~/v3/services/triggerTask.server";
import { DeleteTaskRunTemplateData, RunTemplateData } from "~/v3/taskRunTemplate";
import { TestTaskData } from "~/v3/testTask";
import { AIPayloadTabContent } from "./AIPayloadTabContent";
import { SchemaTabContent } from "./SchemaTabContent";
import { TestSidebarTabs } from "./TestSidebarTabs";
import { Header2 } from "~/components/primitives/Headers";

type FormAction = "create-template" | "delete-template" | "run-scheduled" | "run-standard";

export const loader = async ({ request, params }: LoaderFunctionArgs) => {
  const user = await requireUser(request);
  const { projectParam, organizationSlug, envParam, taskParam } = v3TaskParamsSchema.parse(params);

  const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
  if (!project) {
    throw new Response(undefined, {
      status: 404,
      statusText: "Project not found",
    });
  }

  const environment = await findEnvironmentBySlug(project.id, envParam, user.id);
  if (!environment) {
    throw new Response(undefined, {
      status: 404,
      statusText: "Environment not found",
    });
  }

  try {
    const clickhouse = await clickhouseFactory.getClickhouseForOrganization(
      project.organizationId,
      "standard"
    );
    const presenter = new TestTaskPresenter($replica, clickhouse);

    const [result, regionsResult] = await Promise.all([
      presenter.call({
        userId: user.id,
        projectId: project.id,
        taskIdentifier: taskParam,
        environment: environment,
      }),
      new RegionsPresenter().call({
        userId: user.id,
        projectSlug: projectParam,
        isAdmin: user.admin || user.isImpersonating,
      }),
    ]);

    return typedjson({ ...result, regions: regionsResult.regions });
  } catch (error) {
    logger.error("Failed to load test page", {
      taskParam,
      error: error instanceof Error ? error.message : error,
      stack: error instanceof Error ? error.stack : undefined,
    });

    return redirectWithErrorMessage(
      v3TestPath({ slug: organizationSlug }, { slug: projectParam }, environment),
      request,
      `Couldn't load test page for ${taskParam}`
    );
  }
};

export const action: ActionFunction = async ({ request, params }) => {
  const user = await requireUser(request);
  const { organizationSlug, projectParam, envParam } = v3TaskParamsSchema.parse(params);

  const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
  if (!project) {
    return redirectBackWithErrorMessage(request, "Project not found");
  }

  const environment = await findEnvironmentBySlug(project.id, envParam, user.id);

  if (!environment) {
    return redirectBackWithErrorMessage(request, "Environment not found");
  }

  const formData = await request.formData();
  const formAction = formData.get("formAction") as FormAction;

  switch (formAction) {
    case "create-template": {
      const submission = parseWithZod(formData, { schema: RunTemplateData });
      if (submission.status !== "success") {
        return json({
          ...submission.reply(),
          formAction,
        });
      }

      const templateService = new TaskRunTemplateService();
      try {
        const template = await templateService.call(environment, submission.value);

        return json({
          ...submission.reply(),
          success: true,
          templateLabel: template.label,
          formAction,
        });
      } catch (e) {
        logger.error("Failed to create template", { error: e instanceof Error ? e.message : e });
        return redirectBackWithErrorMessage(request, "Failed to create template");
      }
    }
    case "delete-template": {
      const submission = parseWithZod(formData, { schema: DeleteTaskRunTemplateData });

      if (submission.status !== "success") {
        return json({
          ...submission.reply(),
          formAction,
        });
      }

      const deleteService = new DeleteTaskRunTemplateService();
      try {
        await deleteService.call(environment, submission.value.templateId);

        return json({
          ...submission.reply(),
          success: true,
          formAction,
        });
      } catch (e) {
        logger.error("Failed to delete template", { error: e instanceof Error ? e.message : e });
        return redirectBackWithErrorMessage(request, "Failed to delete template");
      }
    }
    case "run-scheduled":
    case "run-standard": {
      const submission = parseWithZod(formData, { schema: TestTaskData });

      if (submission.status !== "success") {
        return json({
          ...submission.reply(),
          formAction,
        });
      }

      if (environment.archivedAt) {
        return redirectBackWithErrorMessage(request, "Can't run a test on an archived environment");
      }

      const testService = new TestTaskService();
      try {
        const run = await testService.call(environment, submission.value);

        if (!run) {
          return redirectBackWithErrorMessage(
            request,
            "Unable to start a test run: Something went wrong"
          );
        }

        return redirectWithSuccessMessage(
          v3RunSpanPath(
            { slug: organizationSlug },
            { slug: projectParam },
            { slug: envParam },
            { friendlyId: run.friendlyId },
            { spanId: run.spanId }
          ),
          request,
          "Test run created"
        );
      } catch (e) {
        if (e instanceof OutOfEntitlementError) {
          return redirectBackWithErrorMessage(
            request,
            "Unable to start a test run: You have exceeded your free credits"
          );
        }

        logger.error("Failed to start a test run", { error: e instanceof Error ? e.message : e });

        return redirectBackWithErrorMessage(
          request,
          "Unable to start a test run: Something went wrong"
        );
      }
    }
    default: {
      formAction satisfies never;
      return redirectBackWithErrorMessage(request, "Failed to process request");
    }
  }
};

export default function Page() {
  const result = useTypedLoaderData<typeof loader>();

  if (!result.foundTask) {
    return <div></div>;
  }

  const params = useParams();
  const queueFetcher = useFetcher<typeof queuesLoader>();

  useEffect(() => {
    if (params.organizationSlug && params.projectParam && params.envParam) {
      const searchParams = new URLSearchParams();
      searchParams.set("type", "custom");
      searchParams.set("per_page", "100");

      queueFetcher.load(
        `/resources/orgs/${params.organizationSlug}/projects/${params.projectParam}/env/${
          params.envParam
        }/queues?${searchParams.toString()}`
      );
    }
  }, [params.organizationSlug, params.projectParam, params.envParam]);

  const defaultTaskQueue = result.queue;
  const queues = useMemo(() => {
    const customQueues = queueFetcher.data?.queues ?? [];

    return defaultTaskQueue && !customQueues.some((q) => q.id === defaultTaskQueue.id)
      ? [defaultTaskQueue, ...customQueues]
      : customQueues;
  }, [queueFetcher.data?.queues, defaultTaskQueue]);

  const { triggerSource } = result;

  switch (triggerSource) {
    case "STANDARD": {
      return (
        <StandardTaskForm
          task={result.task}
          queues={queues}
          runs={result.runs}
          versions={result.latestVersions}
          templates={result.taskRunTemplates}
          disableVersionSelection={result.disableVersionSelection}
          allowArbitraryQueues={result.allowArbitraryQueues}
          regions={result.regions}
        />
      );
    }
    case "SCHEDULED": {
      return (
        <ScheduledTaskForm
          task={result.task}
          queues={queues}
          runs={result.runs}
          versions={result.latestVersions}
          templates={result.taskRunTemplates}
          possibleTimezones={result.possibleTimezones}
          disableVersionSelection={result.disableVersionSelection}
          allowArbitraryQueues={result.allowArbitraryQueues}
          regions={result.regions}
        />
      );
    }
    default: {
      return triggerSource satisfies never;
    }
  }
}

const startingJson = "{\n\n}";
const machinePresets = Object.values(MachinePresetName.enum);

function StandardTaskForm({
  task,
  queues,
  runs,
  versions,
  templates,
  disableVersionSelection,
  allowArbitraryQueues,
  regions,
}: {
  task: StandardTaskResult["task"];
  queues: Required<StandardTaskResult>["queue"][];
  runs: StandardRun[];
  versions: string[];
  templates: RunTemplate[];
  disableVersionSelection: boolean;
  allowArbitraryQueues: boolean;
  regions: Region[];
}) {
  const environment = useEnvironment();
  const { value, replace } = useSearchParams();
  const tab = value("tab");

  const submit = useSubmit();
  const actionData = useActionData<typeof action>();
  const lastSubmission =
    actionData &&
    typeof actionData === "object" &&
    "formAction" in actionData &&
    actionData.formAction === ("run-standard" satisfies FormAction)
      ? actionData
      : undefined;

  const lastRun = runs.at(0);

  const [defaultPayloadJson, setDefaultPayloadJson] = useState<string>(
    lastRun?.payload ?? startingJson
  );
  const setPayload = useCallback((code: string) => {
    setDefaultPayloadJson(code);
  }, []);

  const currentPayloadJson = useRef<string>(defaultPayloadJson);

  const [defaultMetadataJson, setDefaultMetadataJson] = useState<string>(
    lastRun?.seedMetadata ?? startingJson
  );
  const setMetadata = useCallback((code: string) => {
    setDefaultMetadataJson(code);
  }, []);

  const currentMetadataJson = useRef<string>(defaultMetadataJson);

  const [ttlValue, setTtlValue] = useState<number | undefined>(lastRun?.ttlSeconds);
  const [concurrencyKeyValue, setConcurrencyKeyValue] = useState<string | undefined>(
    lastRun?.concurrencyKey
  );
  const [queueValue, setQueueValue] = useState<string | undefined>(lastRun?.queue);
  const [machineValue, setMachineValue] = useState<string | undefined>(lastRun?.machinePreset);
  const isDev = environment.type === "DEVELOPMENT";
  const defaultRegion = regions.find((r) => r.isDefault);
  const [regionValue, setRegionValue] = useState<string | undefined>(
    isDev ? undefined : defaultRegion?.name
  );

  const [maxAttemptsValue, setMaxAttemptsValue] = useState<number | undefined>(
    lastRun?.maxAttempts
  );
  const [maxDurationValue, setMaxDurationValue] = useState<number | undefined>(
    lastRun?.maxDurationInSeconds
  );
  const [tagsValue, setTagsValue] = useState<string[]>(lastRun?.runTags ?? []);
  const [sidebarTab, setSidebarTab] = useState("options");

  const regionItems = regions.map((r) => ({
    value: r.name,
    label: r.description ? `${r.name} — ${r.description}` : r.name,
    isDefault: r.isDefault,
  }));

  const queueItems = queues.map((q) => ({
    value: q.type === "task" ? `task/${q.name}` : q.name,
    label: q.name,
    type: q.type,
    paused: q.paused,
  }));

  const [showTemplateCreatedSuccessMessage, setShowTemplateCreatedSuccessMessage] = useState(false);

  const [
    form,
    {
      environmentId,
      payload,
      metadata,
      taskIdentifier,
      delaySeconds,
      ttlSeconds,
      idempotencyKey,
      idempotencyKeyTTLSeconds,
      queue,
      concurrencyKey,
      maxAttempts,
      maxDurationSeconds,
      triggerSource,
      tags,
      version,
      machine,
      region,
      prioritySeconds,
    },
  ] = useForm({
    id: "test-task",
    // TODO: type this
    lastResult: lastSubmission as any,
    onSubmit(event, { formData }) {
      event.preventDefault();

      formData.set(payload.name, currentPayloadJson.current);
      formData.set(metadata.name, currentMetadataJson.current);

      submit(formData, { method: "POST" });
    },
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: TestTaskData });
    },
  });

  return (
    <Form className="flex h-full max-h-full flex-col" method="post" {...getFormProps(form)}>
      <input {...getInputProps(taskIdentifier, { type: "hidden" })} value={task.taskIdentifier} />
      <input {...getInputProps(environmentId, { type: "hidden" })} value={environment.id} />
      <input {...getInputProps(triggerSource, { type: "hidden" })} value={"STANDARD"} />
      <div className="flex items-center justify-between gap-1.5 border-b border-grid-bright p-2">
        <div className="flex items-center gap-1.5">
          <TaskTriggerSourceIcon source={"STANDARD"} />
          <Paragraph variant="extra-small" className="text-text-dimmed">
            {task.taskIdentifier}
          </Paragraph>
        </div>
        <div className="flex items-center gap-1.5">
          <RunTemplatesPopover
            templates={templates}
            onTemplateSelected={(template) => {
              setPayload(template.payload ?? "");
              setMetadata(template.metadata ?? "");
              setTtlValue(template.ttlSeconds ?? 0);
              setConcurrencyKeyValue(template.concurrencyKey ?? "");
              setMaxAttemptsValue(template.maxAttempts ?? undefined);
              setMaxDurationValue(template.maxDurationSeconds ?? 0);
              setMachineValue(template.machinePreset ?? undefined);
              setTagsValue(template.tags ?? []);
              setQueueValue(template.queue ?? undefined);
            }}
            showTemplateCreatedSuccessMessage={showTemplateCreatedSuccessMessage}
          />
          <RecentRunsPopover
            runs={runs}
            onRunSelected={(run) => {
              setPayload(run.payload);
              run.seedMetadata && setMetadata(run.seedMetadata);
              setTtlValue(run.ttlSeconds);
              setConcurrencyKeyValue(run.concurrencyKey);
              setMaxAttemptsValue(run.maxAttempts);
              setMaxDurationValue(run.maxDurationInSeconds);
              setTagsValue(run.runTags ?? []);
              setQueueValue(run.queue);
              setMachineValue(run.machinePreset);
            }}
          />
        </div>
      </div>

      <ResizablePanelGroup orientation="horizontal" className="grow">
        <ResizablePanel id="test-task-main" min="300px">
          <div className="flex h-full flex-col overflow-hidden bg-background-deep">
            <div className="flex-1 overflow-hidden">
              <JSONEditor
                defaultValue={!tab || tab === "payload" ? defaultPayloadJson : defaultMetadataJson}
                readOnly={false}
                basicSetup
                onChange={(v) => {
                  if (!tab || tab === "payload") {
                    currentPayloadJson.current = v;
                    setPayload(v);
                  } else {
                    currentMetadataJson.current = v;
                    setMetadata(v);
                  }
                }}
                height="100%"
                autoFocus={true}
                className={cn("h-full overflow-auto")}
                additionalActions={
                  <TabContainer className="flex grow items-baseline justify-between self-end border-none">
                    <div className="flex gap-5">
                      <TabButton
                        isActive={!tab || tab === "payload"}
                        layoutId="test-editor"
                        onClick={() => {
                          replace({ tab: "payload" });
                        }}
                      >
                        Payload
                      </TabButton>
                      <TabButton
                        isActive={tab === "metadata"}
                        layoutId="test-editor"
                        onClick={() => {
                          replace({ tab: "metadata" });
                        }}
                      >
                        Metadata
                      </TabButton>
                    </div>
                  </TabContainer>
                }
              />
            </div>
          </div>
        </ResizablePanel>
        <ResizableHandle id="test-task-handle" />
        <ResizablePanel id="test-task-options" min="300px" default="380px" max="600px">
          <TestSidebarTabs
            activeTab={sidebarTab}
            onTabChange={setSidebarTab}
            optionsContent={
              <Fieldset className="px-3 py-3">
                <Hint>
                  Options enable you to control the execution behavior of your task.{" "}
                  <TextLink to={docsPath("triggering#options")}>Read the docs.</TextLink>
                </Hint>
                <InputGroup>
                  <Label htmlFor={machine.id} variant="small">
                    Machine
                  </Label>
                  <Select
                    {...getSelectProps(machine)}
                    variant="tertiary/small"
                    placeholder="Select machine type"
                    dropdownIcon
                    items={machinePresets}
                    defaultValue={undefined}
                    value={machineValue}
                    setValue={(e) => {
                      if (Array.isArray(e)) return;
                      setMachineValue(e);
                    }}
                  >
                    {machinePresets.map((machine) => (
                      <SelectItem key={machine} value={machine}>
                        {machine}
                      </SelectItem>
                    ))}
                  </Select>
                  <Hint>Overrides the machine preset.</Hint>
                  <FormError id={machine.errorId}>{machine.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label htmlFor={version.id} variant="small">
                    Version
                  </Label>
                  <Select
                    {...getSelectProps(version)}
                    defaultValue="latest"
                    variant="tertiary/small"
                    placeholder="Select version"
                    dropdownIcon
                    disabled={disableVersionSelection}
                  >
                    {versions.map((version, i) => (
                      <SelectItem key={version} value={i === 0 ? "latest" : version}>
                        {version} {i === 0 && "(latest)"}
                      </SelectItem>
                    ))}
                  </Select>
                  {disableVersionSelection ? (
                    <Hint>
                      Only the latest version is available in the development environment.
                    </Hint>
                  ) : (
                    <Hint>Runs task on a specific version.</Hint>
                  )}
                  <FormError id={version.errorId}>{version.errors}</FormError>
                </InputGroup>
                {regionItems.length > 1 && (
                  <InputGroup>
                    <Label htmlFor={region.id} variant="small">
                      Region
                    </Label>
                    {/* Our Select primitive uses Ariakit under the hood, which treats
                        value={undefined} as uncontrolled, keeping stale internal state when
                        switching environments. The key forces a remount so it reinitializes
                        with the correct defaultValue. */}
                    <Select
                      {...getSelectProps(region)}
                      key={`region-${environment.id}`}
                      variant="tertiary/small"
                      placeholder={isDev ? "–" : undefined}
                      dropdownIcon
                      items={regionItems}
                      defaultValue={isDev ? undefined : defaultRegion?.name}
                      value={isDev ? undefined : regionValue}
                      setValue={
                        isDev
                          ? undefined
                          : (e) => {
                              if (Array.isArray(e)) return;
                              setRegionValue(e);
                            }
                      }
                      disabled={isDev}
                    >
                      {regionItems.map((r) => (
                        <SelectItem key={r.value} value={r.value}>
                          {r.label}
                          {r.isDefault ? " (default)" : ""}
                        </SelectItem>
                      ))}
                    </Select>
                    {isDev ? (
                      <Hint>Region is not available in the development environment.</Hint>
                    ) : (
                      <Hint>Overrides the region for this run.</Hint>
                    )}
                    <FormError id={region.errorId}>{region.errors}</FormError>
                  </InputGroup>
                )}
                <InputGroup>
                  <Label htmlFor={queue.id} variant="small">
                    Queue
                  </Label>
                  {allowArbitraryQueues ? (
                    <Input
                      {...getInputProps(queue, { type: "text" })}
                      variant="small"
                      value={queueValue ?? ""}
                      onChange={(e) => setQueueValue(e.target.value)}
                    />
                  ) : (
                    <Select
                      name={queue.name}
                      id={queue.id}
                      placeholder="Select queue"
                      heading="Filter queues"
                      variant="tertiary/small"
                      dropdownIcon
                      items={queueItems}
                      filter={{ keys: ["label"] }}
                      value={queueValue}
                      setValue={setQueueValue}
                    >
                      {(matches) =>
                        matches.map((queueItem) => (
                          <SelectItem
                            key={queueItem.value}
                            value={queueItem.value}
                            className="max-w-(--popover-anchor-width)"
                            icon={
                              queueItem.type === "task" ? (
                                <TaskIcon className="size-4 shrink-0 text-blue-500" />
                              ) : (
                                <RectangleStackIcon className="size-4 shrink-0 text-purple-500" />
                              )
                            }
                          >
                            <div className="flex w-full min-w-0 items-center justify-between">
                              <span className="truncate">{queueItem.label}</span>
                              {queueItem.paused && (
                                <Badge variant="extra-small" className="ml-1 text-warning">
                                  Paused
                                </Badge>
                              )}
                            </div>
                          </SelectItem>
                        ))
                      }
                    </Select>
                  )}
                  <Hint>Assign run to a specific queue.</Hint>
                  <FormError id={queue.errorId}>{queue.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label htmlFor={tags.id} variant="small">
                    Tags
                  </Label>
                  <RunTagInput
                    name={tags.name}
                    id={tags.id}
                    variant="small"
                    tags={tagsValue}
                    onTagsChange={setTagsValue}
                  />
                  <Hint>Add tags to easily filter runs.</Hint>
                  <FormError id={tags.errorId}>{tags.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label htmlFor={maxAttempts.id} variant="small">
                    Max attempts
                  </Label>
                  <Input
                    {...getInputProps(maxAttempts, { type: "number" })}
                    className="[&::-webkit-inner-spin-button]:appearance-none"
                    variant="small"
                    min={1}
                    value={maxAttemptsValue}
                    onChange={(e) =>
                      setMaxAttemptsValue(e.target.value ? parseInt(e.target.value) : undefined)
                    }
                    onKeyDown={(e) => {
                      // only allow entering integers > 1
                      if (["-", "+", ".", "e", "E"].includes(e.key)) {
                        e.preventDefault();
                      }
                    }}
                    onBlur={(e) => {
                      const value = parseInt(e.target.value);
                      if (value < 1 && e.target.value !== "") {
                        e.target.value = "1";
                      }
                    }}
                  />
                  <Hint>Retries failed runs up to the specified number of attempts.</Hint>
                  <FormError id={maxAttempts.errorId}>{maxAttempts.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label variant="small">Max duration</Label>
                  <DurationPicker
                    name={maxDurationSeconds.name}
                    id={maxDurationSeconds.id}
                    value={maxDurationValue}
                    onChange={setMaxDurationValue}
                  />
                  <Hint>Overrides the maximum compute time limit for the run.</Hint>
                  <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label htmlFor={idempotencyKey.id} variant="small">
                    Idempotency key
                  </Label>
                  <Input {...getInputProps(idempotencyKey, { type: "text" })} variant="small" />
                  <FormError id={idempotencyKey.errorId}>{idempotencyKey.errors}</FormError>
                  <Hint>
                    Specify an idempotency key to ensure that a task is only triggered once with the
                    same key.
                  </Hint>
                </InputGroup>
                <InputGroup>
                  <Label variant="small">Idempotency key TTL</Label>
                  <DurationPicker
                    name={idempotencyKeyTTLSeconds.name}
                    id={idempotencyKeyTTLSeconds.id}
                  />
                  <Hint>Keys expire after 30 days by default.</Hint>
                  <FormError id={idempotencyKeyTTLSeconds.errorId}>
                    {idempotencyKeyTTLSeconds.errors}
                  </FormError>
                </InputGroup>
                <InputGroup>
                  <Label htmlFor={concurrencyKey.id} variant="small">
                    Concurrency key
                  </Label>
                  <Input
                    {...getInputProps(concurrencyKey, { type: "text" })}
                    variant="small"
                    value={concurrencyKeyValue ?? ""}
                    onChange={(e) => setConcurrencyKeyValue(e.target.value)}
                  />
                  <Hint>
                    Limits concurrency by creating a separate queue for each value of the key.
                  </Hint>
                  <FormError id={concurrencyKey.errorId}>{concurrencyKey.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label variant="small">Delay</Label>
                  <DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
                  <Hint>Delays run by a specific duration.</Hint>
                  <FormError id={delaySeconds.errorId}>{delaySeconds.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label variant="small">Priority</Label>
                  <DurationPicker name={prioritySeconds.name} id={prioritySeconds.id} />
                  <Hint>Sets the priority of the run. Higher values mean higher priority.</Hint>
                  <FormError id={prioritySeconds.errorId}>{prioritySeconds.errors}</FormError>
                </InputGroup>
                <InputGroup>
                  <Label variant="small">TTL</Label>
                  <DurationPicker
                    name={ttlSeconds.name}
                    id={ttlSeconds.id}
                    value={ttlValue}
                    onChange={setTtlValue}
                  />
                  <Hint>Expires the run if it hasn't started within the TTL.</Hint>
                  <FormError id={ttlSeconds.errorId}>{ttlSeconds.errors}</FormError>
                </InputGroup>
                <FormError>{form.errors}</FormError>
              </Fieldset>
            }
            aiContent={
              <AIPayloadTabContent
                onPayloadGenerated={setPayload}
                payloadSchema={task.payloadSchema ?? task.inferredPayloadSchema}
                taskIdentifier={task.taskIdentifier}
                getCurrentPayload={() => currentPayloadJson.current}
              />
            }
            schemaContent={
              <SchemaTabContent
                schema={task.payloadSchema}
                inferredSchema={task.inferredPayloadSchema}
              />
            }
          />
        </ResizablePanel>
      </ResizablePanelGroup>
      <div className="flex items-center justify-end gap-3 border-t border-grid-bright bg-background-dimmed p-2">
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-1">
            <Paragraph variant="small" className="whitespace-nowrap">
              This test will run in
            </Paragraph>
            <EnvironmentCombo environment={environment} className="gap-0.5" />
          </div>
          <CreateTemplateModal
            rawTestTaskFormData={{
              environmentId: environment.id,
              taskIdentifier: task.taskIdentifier,
              triggerSource: "STANDARD",
              ttlSeconds: ttlValue?.toString(),
              queue: queueValue,
              concurrencyKey: concurrencyKeyValue,
              maxAttempts: maxAttemptsValue?.toString(),
              maxDurationSeconds: maxDurationValue?.toString(),
              tags: tagsValue.join(","),
              machine: machineValue,
            }}
            getCurrentPayload={() => currentPayloadJson.current}
            getCurrentMetadata={() => currentMetadataJson.current}
            setShowCreatedSuccessMessage={setShowTemplateCreatedSuccessMessage}
          />
          <Button
            type="submit"
            variant="primary/medium"
            LeadingIcon={BeakerIcon}
            iconSpacing="gap-x-2.5"
            leadingIconClassName="-mx-2"
            shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
            name="formAction"
            value={"run-standard" satisfies FormAction}
          >
            Run test
          </Button>
        </div>
      </div>
    </Form>
  );
}

function ScheduledTaskForm({
  task,
  runs,
  possibleTimezones,
  queues,
  versions,
  templates,
  disableVersionSelection,
  allowArbitraryQueues,
  regions,
}: {
  task: ScheduledTaskResult["task"];
  runs: ScheduledRun[];
  possibleTimezones: string[];
  queues: Required<ScheduledTaskResult>["queue"][];
  versions: string[];
  templates: RunTemplate[];
  disableVersionSelection: boolean;
  allowArbitraryQueues: boolean;
  regions: Region[];
}) {
  const environment = useEnvironment();

  const lastRun = runs.at(0);

  const [timestampValue, setTimestampValue] = useState<Date | undefined>(
    lastRun?.payload?.timestamp ?? new Date()
  );
  const [lastTimestampValue, setLastTimestampValue] = useState<Date | undefined>(
    lastRun?.payload?.lastTimestamp
  );
  const [externalIdValue, setExternalIdValue] = useState<string | undefined>(
    lastRun?.payload?.externalId
  );
  const [timezoneValue, setTimezoneValue] = useState<string>(lastRun?.payload?.timezone ?? "UTC");
  const [ttlValue, setTtlValue] = useState<number | undefined>(lastRun?.ttlSeconds);
  const [concurrencyKeyValue, setConcurrencyKeyValue] = useState<string | undefined>(
    lastRun?.concurrencyKey
  );
  const [queueValue, setQueueValue] = useState<string | undefined>(lastRun?.queue);
  const [machineValue, setMachineValue] = useState<string | undefined>(lastRun?.machinePreset);
  const isDev = environment.type === "DEVELOPMENT";
  const defaultRegion = regions.find((r) => r.isDefault);
  const [regionValue, setRegionValue] = useState<string | undefined>(
    isDev ? undefined : defaultRegion?.name
  );

  const [maxAttemptsValue, setMaxAttemptsValue] = useState<number | undefined>(
    lastRun?.maxAttempts
  );
  const [maxDurationValue, setMaxDurationValue] = useState<number | undefined>(
    lastRun?.maxDurationInSeconds
  );
  const [tagsValue, setTagsValue] = useState<string[]>(lastRun?.runTags ?? []);

  const [showTemplateCreatedSuccessMessage, setShowTemplateCreatedSuccessMessage] = useState(false);

  const regionItems = regions.map((r) => ({
    value: r.name,
    label: r.description ? `${r.name} — ${r.description}` : r.name,
    isDefault: r.isDefault,
  }));

  const queueItems = queues.map((q) => ({
    value: q.type === "task" ? `task/${q.name}` : q.name,
    label: q.name,
    type: q.type,
    paused: q.paused,
  }));

  const actionData = useActionData<typeof action>();
  const lastSubmission =
    actionData &&
    typeof actionData === "object" &&
    "formAction" in actionData &&
    actionData.formAction === ("run-scheduled" satisfies FormAction)
      ? actionData
      : undefined;

  const [
    form,
    {
      timestamp,
      lastTimestamp,
      externalId,
      triggerSource,
      taskIdentifier,
      environmentId,
      timezone,
      ttlSeconds,
      idempotencyKey,
      idempotencyKeyTTLSeconds,
      queue,
      concurrencyKey,
      maxAttempts,
      maxDurationSeconds,
      tags,
      version,
      machine,
      region,
      prioritySeconds,
    },
  ] = useForm({
    id: "test-task-scheduled",
    // TODO: type this
    lastResult: lastSubmission as any,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: TestTaskData });
    },
  });

  return (
    <Form
      className="grid h-full max-h-full grid-rows-[1fr_auto]"
      method="post"
      {...getFormProps(form)}
    >
      <input {...getInputProps(triggerSource, { type: "hidden" })} value={"SCHEDULED"} />
      <input {...getInputProps(taskIdentifier, { type: "hidden" })} value={task.taskIdentifier} />
      <input {...getInputProps(environmentId, { type: "hidden" })} value={environment.id} />
      {/* Main area: scrolling form with the toolbar floating on top-right in the same grid cell */}
      <div className="grid min-h-0 grid-cols-1 grid-rows-1 overflow-hidden">
        <div className="col-start-1 row-start-1 overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
          <div className="mx-auto w-fit p-3">
            <div className="mb-6 flex items-center gap-1.5">
              <TaskTriggerSourceIcon source={"SCHEDULED"} />
              <Header2 className="text-text-bright">{task.taskIdentifier}</Header2>
            </div>
            <Fieldset>
              <InputGroup>
                <Label htmlFor={timestamp.id} variant="small">
                  Timestamp UTC
                </Label>
                <input
                  {...getInputProps(timestamp, { type: "hidden" })}
                  value={timestampValue?.toISOString() ?? ""}
                />
                <DateField
                  label="Timestamp UTC"
                  defaultValue={timestampValue}
                  onValueChange={(val) => setTimestampValue(val)}
                  granularity="second"
                  showNowButton
                  variant="small"
                  utc
                />
                <Hint>
                  This is the timestamp of the CRON, it will come through to your run in the
                  payload.
                </Hint>
                <FormError id={timestamp.errorId}>{timestamp.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={lastTimestamp.id} variant="small">
                  Last timestamp UTC
                </Label>
                <input
                  {...getInputProps(lastTimestamp, { type: "hidden" })}
                  value={lastTimestampValue?.toISOString() ?? ""}
                />
                <DateField
                  label="Last timestamp UTC"
                  defaultValue={lastTimestampValue}
                  onValueChange={(val) => setLastTimestampValue(val)}
                  granularity="second"
                  showNowButton
                  showClearButton
                  variant="small"
                  utc
                />
                <Hint>
                  This is the timestamp of the previous run. You can use this in your code to find
                  new data since the previous run.
                </Hint>
                <FormError id={lastTimestamp.errorId}>{lastTimestamp.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={timezone.id} variant="small">
                  Timezone
                </Label>
                <Select
                  {...getSelectProps(timezone)}
                  placeholder="Select a timezone"
                  defaultValue={timezoneValue}
                  value={timezoneValue}
                  setValue={(e) => {
                    if (Array.isArray(e)) return;
                    setTimezoneValue(e);
                  }}
                  items={possibleTimezones}
                  filter={{ keys: [(item) => item.replace(/\//g, " ").replace(/_/g, " ")] }}
                  dropdownIcon
                  variant="tertiary/small"
                >
                  {(matches) => <TimezoneList timezones={matches} />}
                </Select>
                <Hint>
                  The Timestamp and Last timestamp are in UTC so this just changes the timezone
                  string that comes through in the payload.
                </Hint>
                <FormError id={timezone.errorId}>{timezone.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={externalId.id} variant="small">
                  External ID
                </Label>
                <Input
                  {...getInputProps(externalId, { type: "text" })}
                  placeholder="Optionally specify your own ID, e.g. user id"
                  value={externalIdValue ?? ""}
                  onChange={(e) => setExternalIdValue(e.target.value)}
                  variant="small"
                />
                <Hint>
                  Optionally, you can specify your own IDs (like a user ID) and then use it inside
                  the run function of your task.{" "}
                  <TextLink to={docsPath("v3/tasks-scheduled")}>Read the docs.</TextLink>
                </Hint>
                <FormError id={externalId.errorId}>{externalId.errors}</FormError>
              </InputGroup>
              <div className="w-full border-b border-grid-bright" />
              <Hint>
                Options enable you to control the execution behavior of your task.{" "}
                <TextLink to={docsPath("triggering#options")}>Read the docs.</TextLink>
              </Hint>
              <InputGroup>
                <Label htmlFor={machine.id} variant="small">
                  Machine
                </Label>
                <Select
                  {...getSelectProps(machine)}
                  variant="tertiary/small"
                  placeholder="Select machine type"
                  dropdownIcon
                  items={machinePresets}
                  defaultValue={undefined}
                  value={machineValue}
                  setValue={(e) => {
                    if (Array.isArray(e)) return;
                    setMachineValue(e);
                  }}
                >
                  {machinePresets.map((machine) => (
                    <SelectItem key={machine} value={machine}>
                      {machine}
                    </SelectItem>
                  ))}
                </Select>
                <Hint>Overrides the machine preset.</Hint>
                <FormError id={machine.errorId}>{machine.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={version.id} variant="small">
                  Version
                </Label>
                <Select
                  {...getSelectProps(version)}
                  defaultValue="latest"
                  variant="tertiary/small"
                  placeholder="Select version"
                  dropdownIcon
                  disabled={disableVersionSelection}
                >
                  {versions.map((version, i) => (
                    <SelectItem key={version} value={i === 0 ? "latest" : version}>
                      {version} {i === 0 && "(latest)"}
                    </SelectItem>
                  ))}
                </Select>
                {disableVersionSelection ? (
                  <Hint>Only the latest version is available in the development environment.</Hint>
                ) : (
                  <Hint>Runs task on a specific version.</Hint>
                )}
                <FormError id={version.errorId}>{version.errors}</FormError>
              </InputGroup>
              {regionItems.length > 1 && (
                <InputGroup>
                  <Label htmlFor={region.id} variant="small">
                    Region
                  </Label>
                  {/* Our Select primitive uses Ariakit under the hood, which treats
                  value={undefined} as uncontrolled, keeping stale internal state when
                  switching environments. The key forces a remount so it reinitializes
                  with the correct defaultValue. */}
                  <Select
                    {...getSelectProps(region)}
                    key={`region-${environment.id}`}
                    variant="tertiary/small"
                    placeholder={isDev ? "–" : undefined}
                    dropdownIcon
                    items={regionItems}
                    defaultValue={isDev ? undefined : defaultRegion?.name}
                    value={isDev ? undefined : regionValue}
                    setValue={
                      isDev
                        ? undefined
                        : (e) => {
                            if (Array.isArray(e)) return;
                            setRegionValue(e);
                          }
                    }
                    disabled={isDev}
                  >
                    {regionItems.map((r) => (
                      <SelectItem key={r.value} value={r.value}>
                        {r.label}
                        {r.isDefault ? " (default)" : ""}
                      </SelectItem>
                    ))}
                  </Select>
                  {isDev ? (
                    <Hint>Region is not available in the development environment.</Hint>
                  ) : (
                    <Hint>Overrides the region for this run.</Hint>
                  )}
                  <FormError id={region.errorId}>{region.errors}</FormError>
                </InputGroup>
              )}
              <InputGroup>
                <Label htmlFor={queue.id} variant="small">
                  Queue
                </Label>
                {allowArbitraryQueues ? (
                  <Input
                    {...getInputProps(queue, { type: "text" })}
                    variant="small"
                    value={queueValue ?? ""}
                    onChange={(e) => setQueueValue(e.target.value)}
                  />
                ) : (
                  <Select
                    name={queue.name}
                    id={queue.id}
                    placeholder="Select queue"
                    heading="Filter queues"
                    variant="tertiary/small"
                    dropdownIcon
                    items={queueItems}
                    filter={{ keys: ["label"] }}
                    value={queueValue}
                    setValue={setQueueValue}
                  >
                    {(matches) =>
                      matches.map((queueItem) => (
                        <SelectItem
                          key={queueItem.value}
                          value={queueItem.value}
                          className="max-w-(--popover-anchor-width)"
                          icon={
                            queueItem.type === "task" ? (
                              <TaskIcon className="size-4 shrink-0 text-blue-500" />
                            ) : (
                              <RectangleStackIcon className="size-4 shrink-0 text-purple-500" />
                            )
                          }
                        >
                          <div className="flex w-full min-w-0 items-center justify-between">
                            <span className="truncate">{queueItem.label}</span>
                            {queueItem.paused && (
                              <Badge variant="extra-small" className="ml-1 text-warning">
                                Paused
                              </Badge>
                            )}
                          </div>
                        </SelectItem>
                      ))
                    }
                  </Select>
                )}
                <Hint>Assign run to a specific queue.</Hint>
                <FormError id={queue.errorId}>{queue.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={tags.id} variant="small">
                  Tags
                </Label>
                <RunTagInput
                  name={tags.name}
                  id={tags.id}
                  variant="small"
                  tags={tagsValue}
                  onTagsChange={setTagsValue}
                />
                <Hint>Add tags to easily filter runs.</Hint>
                <FormError id={tags.errorId}>{tags.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={maxAttempts.id} variant="small">
                  Max attempts
                </Label>
                <Input
                  {...getInputProps(maxAttempts, { type: "number" })}
                  className="[&::-webkit-inner-spin-button]:appearance-none"
                  variant="small"
                  min={1}
                  value={maxAttemptsValue}
                  onChange={(e) =>
                    setMaxAttemptsValue(e.target.value ? parseInt(e.target.value) : undefined)
                  }
                  onKeyDown={(e) => {
                    // only allow entering integers > 1
                    if (["-", "+", ".", "e", "E"].includes(e.key)) {
                      e.preventDefault();
                    }
                  }}
                  onBlur={(e) => {
                    const value = parseInt(e.target.value);
                    if (value < 1 && e.target.value !== "") {
                      e.target.value = "1";
                    }
                  }}
                />
                <Hint>Retries failed runs up to the specified number of attempts.</Hint>
                <FormError id={maxAttempts.errorId}>{maxAttempts.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={maxDurationSeconds.id} variant="small">
                  Max duration
                </Label>
                <DurationPicker
                  name={maxDurationSeconds.name}
                  id={maxDurationSeconds.id}
                  value={maxDurationValue}
                  onChange={setMaxDurationValue}
                />
                <Hint>Overrides the maximum compute time limit for the run.</Hint>
                <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={idempotencyKey.id} variant="small">
                  Idempotency key
                </Label>
                <Input {...getInputProps(idempotencyKey, { type: "text" })} variant="small" />
                <FormError id={idempotencyKey.errorId}>{idempotencyKey.errors}</FormError>
                <Hint>
                  Specify an idempotency key to ensure that a task is only triggered once with the
                  same key.
                </Hint>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={idempotencyKeyTTLSeconds.id} variant="small">
                  Idempotency key TTL
                </Label>
                <DurationPicker
                  name={idempotencyKeyTTLSeconds.name}
                  id={idempotencyKeyTTLSeconds.id}
                />
                <Hint>Keys expire after 30 days by default.</Hint>
                <FormError id={idempotencyKeyTTLSeconds.errorId}>
                  {idempotencyKeyTTLSeconds.errors}
                </FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={concurrencyKey.id} variant="small">
                  Concurrency key
                </Label>
                <Input
                  {...getInputProps(concurrencyKey, { type: "text" })}
                  variant="small"
                  value={concurrencyKeyValue ?? ""}
                  onChange={(e) => setConcurrencyKeyValue(e.target.value)}
                />
                <Hint>
                  Limits concurrency by creating a separate queue for each value of the key.
                </Hint>
                <FormError id={concurrencyKey.errorId}>{concurrencyKey.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={prioritySeconds.id} variant="small">
                  Priority
                </Label>
                <DurationPicker name={prioritySeconds.name} id={prioritySeconds.id} />
                <Hint>Sets the priority of the run. Higher values mean higher priority.</Hint>
                <FormError id={prioritySeconds.errorId}>{prioritySeconds.errors}</FormError>
              </InputGroup>
              <InputGroup>
                <Label htmlFor={ttlSeconds.id} variant="small">
                  TTL
                </Label>
                <DurationPicker
                  name={ttlSeconds.name}
                  id={ttlSeconds.id}
                  value={ttlValue}
                  onChange={setTtlValue}
                />
                <Hint>Expires the run if it hasn't started within the TTL.</Hint>
                <FormError id={ttlSeconds.errorId}>{ttlSeconds.errors}</FormError>
              </InputGroup>
            </Fieldset>
          </div>
        </div>
        {/* Toolbar overlay — same grid cell, sits above scrolling form. Outer
            layer disables pointer events so the form scrolls through; the
            inner buttons re-enable them. */}
        <div className="pointer-events-none col-start-1 row-start-1 z-10 flex items-start justify-end p-2">
          <div className="pointer-events-auto flex items-center gap-1.5">
            <RunTemplatesPopover
              templates={templates}
              onTemplateSelected={(template) => {
                setTtlValue(template.ttlSeconds ?? 0);
                setConcurrencyKeyValue(template.concurrencyKey ?? "");
                setMaxAttemptsValue(template.maxAttempts ?? undefined);
                setMaxDurationValue(template.maxDurationSeconds ?? 0);
                setMachineValue(template.machinePreset ?? undefined);
                setTagsValue(template.tags ?? []);
                setQueueValue(template.queue ?? undefined);

                setTimestampValue(template.scheduledTaskPayload?.timestamp);
                setLastTimestampValue(template.scheduledTaskPayload?.lastTimestamp);
                setExternalIdValue(template.scheduledTaskPayload?.externalId);
                setTimezoneValue(template.scheduledTaskPayload?.timezone ?? "UTC");
              }}
              showTemplateCreatedSuccessMessage={showTemplateCreatedSuccessMessage}
            />
            <RecentRunsPopover
              runs={runs}
              onRunSelected={(run) => {
                setTimestampValue(run.payload.timestamp);
                setLastTimestampValue(run.payload.lastTimestamp);
                setExternalIdValue(run.payload.externalId);
                setTimezoneValue(run.payload.timezone);
                setTtlValue(run.ttlSeconds);
                setConcurrencyKeyValue(run.concurrencyKey);
                setMaxAttemptsValue(run.maxAttempts);
                setMaxDurationValue(run.maxDurationInSeconds);
                setTagsValue(run.runTags ?? []);
                setQueueValue(run.queue);
                setMachineValue(run.machinePreset ?? undefined);
              }}
            />
          </div>
        </div>
      </div>
      <div className="flex items-center justify-end gap-3 border-t border-grid-bright bg-background-dimmed p-2">
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-1">
            <Paragraph variant="small" className="whitespace-nowrap">
              This test will run in
            </Paragraph>
            <EnvironmentCombo environment={environment} className="gap-0.5" />
          </div>
          <CreateTemplateModal
            rawTestTaskFormData={{
              environmentId: environment.id,
              taskIdentifier: task.taskIdentifier,
              triggerSource: "SCHEDULED",
              ttlSeconds: ttlValue?.toString(),
              queue: queueValue,
              concurrencyKey: concurrencyKeyValue,
              maxAttempts: maxAttemptsValue?.toString(),
              maxDurationSeconds: maxDurationValue?.toString(),
              tags: tagsValue.join(","),
              machine: machineValue,
              timestamp: timestampValue?.toISOString(),
              lastTimestamp: lastTimestampValue?.toISOString(),
              timezone: timezoneValue,
              externalId: externalIdValue,
            }}
            getCurrentPayload={() => ""}
            getCurrentMetadata={() => ""}
            setShowCreatedSuccessMessage={setShowTemplateCreatedSuccessMessage}
          />
          <Button
            type="submit"
            variant="primary/medium"
            LeadingIcon={BeakerIcon}
            iconSpacing="gap-x-2.5"
            leadingIconClassName="-mx-2"
            shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
            name="formAction"
            value={"run-scheduled" satisfies FormAction}
          >
            Run test
          </Button>
        </div>
      </div>
    </Form>
  );
}

function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
  runs,
  onRunSelected,
}: {
  runs: T[];
  onRunSelected: (run: T) => void;
}) {
  const [isRecentRunsPopoverOpen, setIsRecentRunsPopoverOpen] = useState(false);

  return (
    <Popover open={isRecentRunsPopoverOpen} onOpenChange={setIsRecentRunsPopoverOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="tertiary/small"
          LeadingIcon={ClockRotateLeftIcon}
          disabled={runs.length === 0}
        >
          Recent runs
        </Button>
      </PopoverTrigger>
      <PopoverContent className="min-w-[294px] p-0" align="end" sideOffset={6}>
        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
          <div className="p-1">
            {runs.map((run) => (
              <button
                key={run.id}
                type="button"
                onClick={() => {
                  onRunSelected(run);
                  setIsRecentRunsPopoverOpen(false);
                }}
                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-hidden transition-colors focus-custom hover:bg-background-deep	"
              >
                <div className="flex flex-col items-start">
                  <Paragraph variant="small/bright">
                    <DateTime date={run.createdAt} showTooltip={false} />
                  </Paragraph>
                  <div className="flex items-center gap-2 text-xs text-text-dimmed">
                    <div>
                      Run <span className="font-mono">{run.friendlyId.slice(-8)}</span>
                    </div>
                    <TaskRunStatusCombo status={run.status} />
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}

function RunTemplatesPopover({
  templates,
  onTemplateSelected,
  showTemplateCreatedSuccessMessage,
}: {
  templates: RunTemplate[];
  onTemplateSelected: (run: RunTemplate) => void;
  showTemplateCreatedSuccessMessage: boolean;
}) {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [templateIdToDelete, setTemplateIdToDelete] = useState<string | undefined>();

  const actionData = useActionData<typeof action>();
  const lastSubmission =
    actionData &&
    typeof actionData === "object" &&
    "formAction" in actionData &&
    actionData.formAction === ("delete-template" satisfies FormAction)
      ? actionData
      : undefined;

  useEffect(() => {
    if (lastSubmission && "success" in lastSubmission && lastSubmission.success === true) {
      setIsDeleteDialogOpen(false);
    }
  }, [lastSubmission]);

  const [deleteForm, { templateId }] = useForm({
    id: "delete-template",
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: DeleteTaskRunTemplateData });
    },
  });

  return (
    <div className="relative">
      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
        <PopoverTrigger asChild>
          <Button
            type="button"
            variant="tertiary/small"
            LeadingIcon={StarIcon}
            disabled={templates.length === 0}
          >
            Templates
          </Button>
        </PopoverTrigger>
        <PopoverContent className="min-w-[279px] p-0" align="end" sideOffset={6}>
          <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
            <div className="p-1">
              {templates.map((template) => (
                <div
                  key={template.id}
                  className="group flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-hidden transition-colors hover:bg-background-deep"
                >
                  <button
                    type="button"
                    onClick={() => {
                      onTemplateSelected(template);
                      setIsPopoverOpen(false);
                    }}
                    className="flex-1 text-left outline-hidden focus-custom"
                  >
                    <div className="flex flex-col items-start">
                      <Paragraph variant="small/bright" className="truncate">
                        {template.label}
                      </Paragraph>
                      <div className="flex items-center gap-2 text-xs text-text-dimmed">
                        <DateTime
                          date={template.createdAt}
                          showTooltip={false}
                          includeTime={false}
                        />
                      </div>
                    </div>
                  </button>
                  <Button
                    type="button"
                    className="group/delete-template shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
                    variant="minimal/medium"
                    LeadingIcon={TrashIcon}
                    leadingIconClassName="group-hover/delete-template:text-error"
                    onClick={() => {
                      setTemplateIdToDelete(template.id);
                      setIsDeleteDialogOpen(true);
                      setIsPopoverOpen(false);
                    }}
                  />
                </div>
              ))}
            </div>
          </div>
        </PopoverContent>
      </Popover>

      <AnimatePresence mode="wait">
        {showTemplateCreatedSuccessMessage && (
          <motion.div
            key="template-success-message"
            initial={{
              opacity: 0,
              scale: 0.8,
              y: -10,
            }}
            animate={{
              opacity: 1,
              scale: 1,
              y: 0,
            }}
            exit={{
              opacity: 0,
              scale: 0.7,
              y: -10,
              transition: {
                duration: 0.15,
                ease: "easeOut",
              },
            }}
            transition={{
              type: "spring",
              stiffness: 400,
              damping: 25,
              duration: 0.15,
            }}
            className="absolute -left-1/2 top-full z-10 mt-1 flex min-w-max max-w-64 items-center gap-1 rounded border border-grid-bright bg-background-bright px-2 py-1 text-xs shadow-md outline-hidden before:absolute before:-top-2 before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-b-grid-bright before:content-[''] after:absolute after:top-[-7px] after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-b-background-bright after:content-['']"
          >
            <CheckCircleIcon className="h-4 w-4 shrink-0 text-success" /> Template saved
            successfully
          </motion.div>
        )}
      </AnimatePresence>

      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>Delete template</DialogHeader>
          <DialogDescription className="mt-3">
            Are you sure you want to delete the template? This can't be reversed.
          </DialogDescription>
          <div className="mt-4 flex justify-end gap-2">
            <Button
              type="button"
              variant="tertiary/medium"
              onClick={() => setIsDeleteDialogOpen(false)}
            >
              Cancel
            </Button>
            <Form method="post" {...getFormProps(deleteForm)}>
              <input
                {...getInputProps(templateId, { type: "hidden" })}
                value={templateIdToDelete || ""}
              />
              <Button
                type="submit"
                variant="danger/medium"
                LeadingIcon={TrashIcon}
                name="formAction"
                value={"delete-template" satisfies FormAction}
              >
                Delete
              </Button>
            </Form>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function CreateTemplateModal({
  rawTestTaskFormData,
  getCurrentPayload,
  getCurrentMetadata,
  setShowCreatedSuccessMessage,
}: {
  rawTestTaskFormData: {
    environmentId: string;
    taskIdentifier: string;
    triggerSource: string;
    delaySeconds?: string;
    ttlSeconds?: string;
    queue?: string;
    concurrencyKey?: string;
    maxAttempts?: string;
    maxDurationSeconds?: string;
    tags?: string;
    machine?: string;
    externalId?: string;
    timestamp?: string;
    timezone?: string;
    lastTimestamp?: string;
  };
  getCurrentPayload: () => string;
  getCurrentMetadata: () => string;
  setShowCreatedSuccessMessage: (value: boolean) => void;
}) {
  const submit = useSubmit();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const actionData = useActionData<typeof action>();
  const lastSubmission =
    actionData &&
    typeof actionData === "object" &&
    "formAction" in actionData &&
    actionData.formAction === ("create-template" satisfies FormAction)
      ? actionData
      : undefined;

  useEffect(() => {
    if (lastSubmission && "success" in lastSubmission && lastSubmission.success === true) {
      setIsModalOpen(false);
      setShowCreatedSuccessMessage(true);
      setTimeout(() => {
        setShowCreatedSuccessMessage(false);
      }, 2000);
    }
  }, [lastSubmission]);

  const [
    form,
    {
      label,
      environmentId,
      payload,
      metadata,
      taskIdentifier,
      delaySeconds,
      ttlSeconds,
      queue,
      concurrencyKey,
      maxAttempts,
      maxDurationSeconds,
      triggerSource,
      tags,
      machine,
      externalId,
      timestamp,
      lastTimestamp,
      timezone,
    },
  ] = useForm({
    id: "save-template",
    lastResult: lastSubmission as any,
    onSubmit(event, { formData }) {
      event.preventDefault();

      formData.set(payload.name, getCurrentPayload());
      formData.set(metadata.name, getCurrentMetadata());

      submit(formData, { method: "POST" });
    },
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: RunTemplateData });
    },
    shouldRevalidate: "onInput",
  });

  return (
    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
      <DialogTrigger asChild>
        <Button
          type="button"
          variant="tertiary/medium"
          LeadingIcon={StarIcon}
          tooltip="Create run template"
        />
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>Create run template</DialogHeader>
        <div className="mt-2 flex flex-col gap-4">
          <Form method="post" {...getFormProps(form)} className="w-full">
            <input
              {...getInputProps(taskIdentifier, { type: "hidden" })}
              value={rawTestTaskFormData.taskIdentifier}
            />
            <input
              {...getInputProps(environmentId, { type: "hidden" })}
              value={rawTestTaskFormData.environmentId}
            />
            <input
              {...getInputProps(triggerSource, { type: "hidden" })}
              value={rawTestTaskFormData.triggerSource}
            />
            <input
              {...getInputProps(delaySeconds, { type: "hidden" })}
              value={rawTestTaskFormData.delaySeconds}
            />
            <input
              {...getInputProps(ttlSeconds, { type: "hidden" })}
              value={rawTestTaskFormData.ttlSeconds}
            />
            <input
              {...getInputProps(queue, { type: "hidden" })}
              value={rawTestTaskFormData.queue}
            />
            <input
              {...getInputProps(concurrencyKey, { type: "hidden" })}
              value={rawTestTaskFormData.concurrencyKey}
            />
            <input
              {...getInputProps(maxAttempts, { type: "hidden" })}
              value={rawTestTaskFormData.maxAttempts}
            />
            <input
              {...getInputProps(maxDurationSeconds, { type: "hidden" })}
              value={rawTestTaskFormData.maxDurationSeconds}
            />
            <input {...getInputProps(tags, { type: "hidden" })} value={rawTestTaskFormData.tags} />
            <input
              {...getInputProps(machine, { type: "hidden" })}
              value={rawTestTaskFormData.machine}
            />
            <input
              {...getInputProps(externalId, { type: "hidden" })}
              value={rawTestTaskFormData.externalId}
            />
            <input
              {...getInputProps(timestamp, { type: "hidden" })}
              value={rawTestTaskFormData.timestamp}
            />
            <input
              {...getInputProps(lastTimestamp, { type: "hidden" })}
              value={rawTestTaskFormData.lastTimestamp}
            />
            <input
              {...getInputProps(timezone, { type: "hidden" })}
              value={rawTestTaskFormData.timezone}
            />
            <Paragraph className="mb-3">
              Save your current run configuration as a template to reuse it later. Templates can be
              used across environments.
            </Paragraph>
            <Fieldset className="max-w-full gap-y-3">
              <InputGroup className="max-w-full">
                <Label htmlFor={label.id}>Template label</Label>
                <Input
                  {...getInputProps(label, { type: "text" })}
                  placeholder="Enter a name for this template"
                  maxLength={42}
                />
                <FormError id={label.errorId}>{label.errors}</FormError>
              </InputGroup>
              <FormError>{form.errors}</FormError>
              <FormButtons
                confirmButton={
                  <Button
                    type="submit"
                    variant="primary/medium"
                    name="formAction"
                    value={"create-template" satisfies FormAction}
                  >
                    Create template
                  </Button>
                }
                cancelButton={
                  <DialogClose asChild>
                    <Button variant="tertiary/medium">Cancel</Button>
                  </DialogClose>
                }
              />
            </Fieldset>
          </Form>
        </div>
      </DialogContent>
    </Dialog>
  );
}