triggerdotdev--trigger.dev/apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx

import { Form } from "@remix-run/react";
import { useEffect, useState } from "react";
import { Button } from "~/components/primitives/Buttons";
import { FormError } from "~/components/primitives/FormError";
import { Header2 } from "~/components/primitives/Headers";
import { Input } from "~/components/primitives/Input";
import { Label } from "~/components/primitives/Label";
import { Paragraph } from "~/components/primitives/Paragraph";
import * as Property from "~/components/primitives/PropertyTable";

// Local shape mirrors the server-side discriminated union just enough for this
// view. Decoupled from the .server module so the component stays client-safe.
// Duration fields are always suffixed strings — the server's DurationSchema
// rejects anything else, so non-string overrides fall back to the default.
export type RateLimitConfig =
  | {
      type: "tokenBucket";
      refillRate: number;
      interval: string;
      maxTokens: number;
    }
  | {
      type: "fixedWindow" | "slidingWindow";
      window: string;
      tokens: number;
    };

export type EffectiveRateLimit = {
  source: "override" | "default";
  config: RateLimitConfig;
};

export type FieldErrors = Record<string, string[] | undefined> | null;

// Props shared by every per-domain wrapper (Api / Batch / future ones).
export type RateLimitWrapperProps = {
  effective: EffectiveRateLimit;
  errors: FieldErrors;
  savedJustNow: boolean;
  isSubmitting: boolean;
};

type Props = RateLimitWrapperProps & {
  title: string;
  intent: string;
};

export function RateLimitSection({
  title,
  intent,
  effective,
  errors,
  savedJustNow,
  isSubmitting,
}: Props) {
  const hasFieldErrors = !!errors && Object.keys(errors).length > 0;
  const fieldError = (field: string) =>
    errors && field in errors ? errors[field]?.[0] : undefined;

  const current = effective.config.type === "tokenBucket" ? effective.config : null;

  const [isEditing, setIsEditing] = useState(hasFieldErrors);
  const [refillRate, setRefillRate] = useState(current ? String(current.refillRate) : "");
  const [intervalStr, setIntervalStr] = useState(current ? String(current.interval) : "");
  const [maxTokens, setMaxTokens] = useState(current ? String(current.maxTokens) : "");

  useEffect(() => {
    if (hasFieldErrors) setIsEditing(true);
  }, [hasFieldErrors]);

  useEffect(() => {
    if (savedJustNow && !hasFieldErrors) setIsEditing(false);
  }, [savedJustNow, hasFieldErrors]);

  const currentDescription = current
    ? describeRateLimit(
        current.refillRate,
        parseDurationToMs(String(current.interval)),
        current.maxTokens
      )
    : null;

  const previewDescription = describeRateLimit(
    Number(refillRate) || 0,
    parseDurationToMs(intervalStr),
    Number(maxTokens) || 0
  );

  const cancelEdit = () => {
    setRefillRate(current ? String(current.refillRate) : "");
    setIntervalStr(current ? String(current.interval) : "");
    setMaxTokens(current ? String(current.maxTokens) : "");
    setIsEditing(false);
  };

  return (
    <section className="flex flex-col gap-3 rounded-md border border-grid-bright bg-background-bright p-4">
      <div className="flex items-center justify-between">
        <Header2>{title}</Header2>
        {!isEditing && (
          <Button
            variant="tertiary/small"
            onClick={() => setIsEditing(true)}
            disabled={isSubmitting || effective.config.type !== "tokenBucket"}
          >
            Edit
          </Button>
        )}
      </div>

      {savedJustNow && (
        <div className="rounded-md border border-green-600/40 bg-green-600/10 px-3 py-2">
          <Paragraph variant="small" className="text-green-500">
            Saved.
          </Paragraph>
        </div>
      )}

      <Paragraph variant="small">
        Status:{" "}
        {effective.source === "override" ? "Custom override active." : "Using system default."}
      </Paragraph>

      {!isEditing ? (
        <>
          <Property.Table>
            {effective.config.type === "tokenBucket" ? (
              currentDescription ? (
                <>
                  <Property.Item>
                    <Property.Label>Sustained rate</Property.Label>
                    <Property.Value>{currentDescription.sustained}</Property.Value>
                  </Property.Item>
                  <Property.Item>
                    <Property.Label>Burst allowance</Property.Label>
                    <Property.Value>{currentDescription.burst}</Property.Value>
                  </Property.Item>
                </>
              ) : (
                <Property.Item>
                  <Property.Value>Invalid interval on the stored config.</Property.Value>
                </Property.Item>
              )
            ) : (
              <>
                <Property.Item>
                  <Property.Label>Type</Property.Label>
                  <Property.Value>{effective.config.type}</Property.Value>
                </Property.Item>
                <Property.Item>
                  <Property.Label>Window</Property.Label>
                  <Property.Value>{String(effective.config.window)}</Property.Value>
                </Property.Item>
                <Property.Item>
                  <Property.Label>Tokens</Property.Label>
                  <Property.Value>{effective.config.tokens.toLocaleString()}</Property.Value>
                </Property.Item>
              </>
            )}
          </Property.Table>
          {effective.config.type !== "tokenBucket" && (
            <Paragraph variant="small" className="text-amber-500">
              This override is a {effective.config.type} limit and can't be edited from this form.
              Change it in the database directly.
            </Paragraph>
          )}
        </>
      ) : (
        <Form method="post" className="flex flex-col gap-3 pt-2">
          <input type="hidden" name="intent" value={intent} />

          <div className="flex flex-col gap-1">
            <Label>Refill rate (tokens per interval)</Label>
            <Input
              name="refillRate"
              type="number"
              min={1}
              value={refillRate}
              onChange={(e) => setRefillRate(e.target.value)}
              required
            />
            <FormError>{fieldError("refillRate")}</FormError>
          </div>

          <div className="flex flex-col gap-1">
            <Label>Interval (e.g. 10s, 1m)</Label>
            <Input
              name="interval"
              type="text"
              value={intervalStr}
              onChange={(e) => setIntervalStr(e.target.value)}
              required
            />
            <FormError>{fieldError("interval")}</FormError>
          </div>

          <div className="flex flex-col gap-1">
            <Label>Max tokens (burst allowance)</Label>
            <Input
              name="maxTokens"
              type="number"
              min={1}
              value={maxTokens}
              onChange={(e) => setMaxTokens(e.target.value)}
              required
            />
            <FormError>{fieldError("maxTokens")}</FormError>
          </div>

          <Paragraph variant="small" className="text-text-dimmed">
            {previewDescription
              ? `Preview: ${previewDescription.sustained} · ${previewDescription.burst}.`
              : "Preview: enter valid values to see the effective limit."}
          </Paragraph>

          <div className="flex items-center gap-2">
            <Button
              type="submit"
              variant="primary/medium"
              disabled={
                isSubmitting || !refillRate.trim() || !intervalStr.trim() || !maxTokens.trim()
              }
            >
              Save
            </Button>
            <Button
              type="button"
              variant="tertiary/medium"
              onClick={cancelEdit}
              disabled={isSubmitting}
            >
              Cancel
            </Button>
          </div>
        </Form>
      )}
    </section>
  );
}

export function parseDurationToMs(duration: string): number {
  const match = duration.trim().match(/^(\d+)\s*(ms|s|m|h|d)$/);
  if (!match) return 0;
  const value = parseInt(match[1], 10);
  switch (match[2]) {
    case "ms":
      return value;
    case "s":
      return value * 1_000;
    case "m":
      return value * 60_000;
    case "h":
      return value * 3_600_000;
    case "d":
      return value * 86_400_000;
    default:
      return 0;
  }
}

function describeRateLimit(
  refillRate: number,
  intervalMs: number,
  maxTokens: number
): { sustained: string; burst: string } | null {
  if (refillRate <= 0 || intervalMs <= 0 || maxTokens <= 0) return null;
  const perMin = (refillRate * 60_000) / intervalMs;
  let sustained: string;
  if (perMin >= 1) {
    sustained = `${formatRateValue(perMin)} requests per minute`;
  } else {
    const perHour = perMin * 60;
    if (perHour >= 1) {
      sustained = `${formatRateValue(perHour)} requests per hour`;
    } else {
      const perDay = perHour * 24;
      sustained = `${formatRateValue(perDay)} requests per day`;
    }
  }
  return {
    sustained,
    burst: `${maxTokens.toLocaleString()} request burst allowance`,
  };
}

function formatRateValue(value: number): string {
  return value >= 10 ? Math.round(value).toLocaleString() : value.toFixed(1);
}