import { CheckIcon, BookOpenIcon } from "@heroicons/react/20/solid";
import { type MetaFunction } from "@remix-run/react";
import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
import { IconCardsFilled, IconDiamondFilled, IconTallymark4 } from "@tabler/icons-react";
import { tryCatch } from "@trigger.dev/core";
import { Gauge } from "lucide-react";
import { typedjson, useTypedLoaderData } from "remix-typedjson";
import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
import { Feedback } from "~/components/Feedback";
import { PageBody, PageContainer } from "~/components/layout/AppLayout";
import { EnvironmentSelector } from "~/components/navigation/EnvironmentSelector";
import { AnimatedNumber } from "~/components/primitives/AnimatedNumber";
import { Badge } from "~/components/primitives/Badge";
import { Button, LinkButton } from "~/components/primitives/Buttons";
import { Header2 } from "~/components/primitives/Headers";
import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
import * as Property from "~/components/primitives/PropertyTable";
import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableHeaderCell,
  TableRow,
} from "~/components/primitives/Table";
import { InfoIconTooltip } from "~/components/primitives/Tooltip";
import { useAutoRevalidate } from "~/hooks/useAutoRevalidate";
import { useEnvironment } from "~/hooks/useEnvironment";
import { useShowSelfServe } from "~/hooks/useShowSelfServe";
import { useOrganization } from "~/hooks/useOrganizations";
import { useProject } from "~/hooks/useProject";
import { findProjectBySlug } from "~/models/project.server";
import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
import {
  LimitsPresenter,
  type FeatureInfo,
  type LimitsResult,
  type QuotaInfo,
  type RateLimitInfo,
} from "~/presenters/v3/LimitsPresenter.server";
import { requireUserId } from "~/services/session.server";
import { cn } from "~/utils/cn";
import { formatNumber } from "~/utils/numberFormatter";
import {
  concurrencyPath,
  docsPath,
  EnvironmentParamSchema,
  organizationBillingPath,
} from "~/utils/pathBuilder";

export const meta: MetaFunction = () => {
  return [
    {
      title: `Limits | Trigger.dev`,
    },
  ];
};

export const loader = async ({ request, params }: LoaderFunctionArgs) => {
  const userId = await requireUserId(request);
  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);

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

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

  const presenter = new LimitsPresenter();
  const [error, result] = await tryCatch(
    presenter.call({
      organizationId: project.organizationId,
      projectId: project.id,
      environmentId: environment.id,
      environmentType: environment.type,
      environmentApiKey: environment.apiKey,
    })
  );

  if (error) {
    throw new Response(error.message, {
      status: 400,
    });
  }

  // Match the queues page pattern: pass a poll interval from the loader
  const autoReloadPollIntervalMs = 5000;

  return typedjson({
    ...result,
    autoReloadPollIntervalMs,
  });
};

export default function Page() {
  const data = useTypedLoaderData<typeof loader>();
  const organization = useOrganization();
  const project = useProject();
  const environment = useEnvironment();

  // Auto-revalidate using the loader-provided interval and refresh on focus
  useAutoRevalidate({ interval: data.autoReloadPollIntervalMs, onFocus: true });

  return (
    <PageContainer>
      <NavBar>
        <PageTitle title="Limits" />
        <PageAccessories>
          <AdminDebugTooltip>
            <Property.Table>
              <Property.Item>
                <Property.Label>Plan</Property.Label>
                <Property.Value>{data.planName ?? "No plan"}</Property.Value>
              </Property.Item>
              <Property.Item>
                <Property.Label>Organization ID</Property.Label>
                <Property.Value>{data.organizationId}</Property.Value>
              </Property.Item>
            </Property.Table>
          </AdminDebugTooltip>
          <LinkButton variant={"docs/small"} LeadingIcon={BookOpenIcon} to={docsPath("/limits")}>
            Limits docs
          </LinkButton>
        </PageAccessories>
      </NavBar>
      <PageBody scrollable={true}>
        <div className="mx-auto mt-10 max-w-2xl p-4">
          <div className="flex flex-col gap-8">
            {/* Current Plan Section */}
            {data.planName && (
              <CurrentPlanSection
                planName={data.planName}
                isOnTopPlan={data.isOnTopPlan}
                billingPath={organizationBillingPath(organization)}
              />
            )}

            {/* Concurrency Section */}
            <ConcurrencySection
              concurrencyPath={concurrencyPath(organization, project, environment)}
            />

            {/* Rate Limits Section */}
            <RateLimitsSection
              rateLimits={data.rateLimits}
              isOnTopPlan={data.isOnTopPlan}
              billingPath={organizationBillingPath(organization)}
              organization={organization}
              project={project}
              environment={environment}
            />

            {/* Quotas Section */}
            <QuotasSection
              quotas={data.quotas}
              isOnTopPlan={data.isOnTopPlan}
              billingPath={organizationBillingPath(organization)}
            />

            {/* Features Section */}
            <FeaturesSection
              features={data.features}
              isOnTopPlan={data.isOnTopPlan}
              billingPath={organizationBillingPath(organization)}
            />
          </div>
        </div>
      </PageBody>
    </PageContainer>
  );
}

function CurrentPlanSection({
  planName,
  isOnTopPlan,
  billingPath,
}: {
  planName: string;
  isOnTopPlan: boolean;
  billingPath: string;
}) {
  const showSelfServe = useShowSelfServe();

  return (
    <div className="flex flex-col gap-3">
      <Header2 className="flex items-center gap-1">
        <IconCardsFilled className="size-5 text-amber-400" />
        Current plan
      </Header2>
      <Table variant="bright/no-hover">
        <TableBody>
          <TableRow>
            <TableCell className="w-full text-sm">{planName}</TableCell>
            <TableCell alignment="right">
              {isOnTopPlan ? (
                <Feedback
                  button={<Button variant="secondary/small">Request Enterprise</Button>}
                  defaultValue="help"
                />
              ) : showSelfServe ? (
                <LinkButton to={billingPath} variant="secondary/small">
                  View plans
                </LinkButton>
              ) : (
                <Feedback
                  defaultValue="enterprise"
                  button={<Button variant="secondary/small">Contact us</Button>}
                />
              )}
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

function ConcurrencySection({ concurrencyPath }: { concurrencyPath: string }) {
  return (
    <div className="flex flex-col gap-3">
      <Header2 className="flex items-center gap-1.5">
        <ConcurrencyIcon className="size-5 text-orange-500" />
        Concurrency limits
        <InfoIconTooltip
          content="Concurrency limits control how many runs execute at the same time."
          disableHoverableContent
        />
      </Header2>
      <Table variant="bright/no-hover">
        <TableBody>
          <TableRow>
            <TableCell className="w-full text-sm">Concurrency</TableCell>
            <TableCell alignment="right">
              <LinkButton to={concurrencyPath} variant="secondary/small">
                Manage concurrency
              </LinkButton>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

function RateLimitsSection({
  rateLimits,
  isOnTopPlan,
  billingPath,
  organization,
  project,
  environment,
}: {
  rateLimits: LimitsResult["rateLimits"];
  isOnTopPlan: boolean;
  billingPath: string;
  organization: ReturnType<typeof useOrganization>;
  project: ReturnType<typeof useProject>;
  environment: ReturnType<typeof useEnvironment>;
}) {
  const showSelfServe = useShowSelfServe();

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <Header2 className="flex items-center gap-1.5">
          <Gauge className="size-5 text-indigo-500" />
          Rate limits
          <InfoIconTooltip
            content="Rate limits control how many API requests can be made within a time window. They are tracked per API key."
            disableHoverableContent
          />
        </Header2>
        <EnvironmentSelector
          organization={organization}
          project={project}
          environment={environment}
          className="w-auto"
        />
      </div>
      <Table variant="bright/no-hover">
        <TableHeader>
          <TableRow>
            <TableHeaderCell>Rate limit</TableHeaderCell>
            <TableHeaderCell alignment="right">
              <span className="flex items-center justify-end gap-x-1">
                Type
                <InfoIconTooltip
                  content={
                    <div className="flex max-w-xs flex-col gap-3 py-1">
                      <div className="flex flex-col items-start gap-1.5">
                        <RateLimitTypeBadge type="tokenBucket" />
                        <span className="pl-0.5 text-text-bright">
                          Requests consume tokens from a bucket that refills over time. When empty,
                          requests are rate limited.
                        </span>
                      </div>
                      <div className="flex flex-col items-start gap-1.5">
                        <RateLimitTypeBadge type="fixedWindow" />
                        <span className="pl-0.5 text-text-bright">
                          Allows a set number of requests per time window. The window resets at
                          fixed intervals.
                        </span>
                      </div>
                      <div className="flex flex-col items-start gap-1.5">
                        <RateLimitTypeBadge type="slidingWindow" />
                        <span className="pl-0.5 text-text-bright">
                          Allows a set number of requests per rolling time window. The limit is
                          continuously evaluated.
                        </span>
                      </div>
                    </div>
                  }
                  disableHoverableContent
                />
              </span>
            </TableHeaderCell>
            <TableHeaderCell alignment="right">Configuration</TableHeaderCell>
            <TableHeaderCell alignment="right">
              <span className="flex items-center justify-end gap-x-1">
                Available
                <InfoIconTooltip
                  content="Current available tokens for this environment's API key"
                  disableHoverableContent
                />
              </span>
            </TableHeaderCell>
            {showSelfServe ? <TableHeaderCell alignment="right">Upgrade</TableHeaderCell> : null}
          </TableRow>
        </TableHeader>
        <TableBody>
          <RateLimitRow
            info={rateLimits.api}
            isOnTopPlan={isOnTopPlan}
            billingPath={billingPath}
            showSelfServe={showSelfServe}
          />
          <RateLimitRow
            info={rateLimits.batch}
            isOnTopPlan={isOnTopPlan}
            billingPath={billingPath}
            showSelfServe={showSelfServe}
          />
        </TableBody>
      </Table>
    </div>
  );
}

function RateLimitRow({
  info,
  isOnTopPlan,
  billingPath,
  showSelfServe,
}: {
  info: RateLimitInfo;
  isOnTopPlan: boolean;
  billingPath: string;
  showSelfServe: boolean;
}) {
  const maxTokens = info.config.type === "tokenBucket" ? info.config.maxTokens : info.config.tokens;
  const percentage =
    info.currentTokens !== null && maxTokens > 0 ? info.currentTokens / maxTokens : null;

  return (
    <TableRow>
      <TableCell>
        <span className="flex items-center gap-1 text-sm">
          {info.name}
          <InfoIconTooltip content={info.description} disableHoverableContent />
        </span>
      </TableCell>
      <TableCell alignment="right">
        <div className="flex justify-end">
          <RateLimitTypeBadge config={info.config} />
        </div>
      </TableCell>
      <TableCell alignment="right">
        <RateLimitConfigDisplay config={info.config} />
      </TableCell>
      <TableCell alignment="right">
        {info.currentTokens !== null ? (
          <div className="flex flex-col items-end gap-0.5">
            <span
              className={cn(
                "font-medium tabular-nums",
                getUsageColorClass(percentage, "remaining")
              )}
            >
              <AnimatedNumber value={info.currentTokens} />
            </span>
            <span className="text-xs tabular-nums text-text-dimmed">
              of {formatNumber(maxTokens)}
            </span>
          </div>
        ) : (
          <span className="text-text-dimmed">–</span>
        )}
      </TableCell>
      {showSelfServe ? (
        <TableCell alignment="right">
          <div className="flex justify-end">
            {info.name === "Batch rate limit" ? (
              isOnTopPlan ? (
                <Feedback
                  button={<Button variant="secondary/small">Contact us</Button>}
                  defaultValue="help"
                />
              ) : (
                <LinkButton to={billingPath} variant="secondary/small">
                  View plans
                </LinkButton>
              )
            ) : (
              <Feedback
                button={<Button variant="secondary/small">Contact us</Button>}
                defaultValue="help"
              />
            )}
          </div>
        </TableCell>
      ) : null}
    </TableRow>
  );
}

function RateLimitTypeBadge({
  config,
  type,
}: {
  config?: RateLimitInfo["config"];
  type?: "tokenBucket" | "fixedWindow" | "slidingWindow";
}) {
  const rateLimitType = type ?? config?.type;
  switch (rateLimitType) {
    case "tokenBucket":
      return (
        <Badge variant="small" className="w-fit bg-blue-500/20 text-blue-400">
          Token bucket
        </Badge>
      );
    case "fixedWindow":
      return (
        <Badge variant="small" className="w-fit bg-purple-500/20 text-purple-400">
          Fixed window
        </Badge>
      );
    case "slidingWindow":
      return (
        <Badge variant="small" className="w-fit bg-green-500/20 text-green-400">
          Sliding window
        </Badge>
      );
    default:
      return null;
  }
}

function RateLimitConfigDisplay({ config }: { config: RateLimitInfo["config"] }) {
  if (config.type === "tokenBucket") {
    return (
      <div className="flex flex-col items-end gap-0.5 text-xs">
        <span className="tabular-nums">
          <span className="text-text-dimmed">Max tokens:</span>{" "}
          <span className="font-medium text-text-bright">{formatNumber(config.maxTokens)}</span>
        </span>
        <span className="tabular-nums">
          <span className="text-text-dimmed">Refill:</span>{" "}
          <span className="font-medium text-text-bright">
            {formatNumber(config.refillRate)}/{config.interval}
          </span>
        </span>
      </div>
    );
  }

  if (config.type === "fixedWindow" || config.type === "slidingWindow") {
    return (
      <div className="flex flex-col items-end gap-0.5 text-xs">
        <span className="tabular-nums">
          <span className="text-text-dimmed">Tokens:</span>{" "}
          <span className="font-medium text-text-bright">{formatNumber(config.tokens)}</span>
        </span>
        <span className="tabular-nums">
          <span className="text-text-dimmed">Window:</span>{" "}
          <span className="font-medium text-text-bright">{config.window}</span>
        </span>
      </div>
    );
  }

  return <span className="text-text-dimmed">–</span>;
}

function QuotasSection({
  quotas,
  isOnTopPlan,
  billingPath,
}: {
  quotas: LimitsResult["quotas"];
  isOnTopPlan: boolean;
  billingPath: string;
}) {
  // Collect all quotas that should be shown
  const quotaRows: QuotaInfo[] = [];

  // Always show projects
  quotaRows.push(quotas.projects);

  // Add plan-based quotas if they exist
  if (quotas.teamMembers) quotaRows.push(quotas.teamMembers);
  if (quotas.schedules) quotaRows.push(quotas.schedules);
  if (quotas.alerts) quotaRows.push(quotas.alerts);
  if (quotas.branches) quotaRows.push(quotas.branches);
  if (quotas.realtimeConnections) quotaRows.push(quotas.realtimeConnections);
  if (quotas.logRetentionDays) quotaRows.push(quotas.logRetentionDays);

  // Include batch processing concurrency
  quotaRows.push(quotas.batchProcessingConcurrency);

  // Add queue size quota if set
  if (quotas.queueSize.limit !== null) quotaRows.push(quotas.queueSize);

  // Metric & query quotas
  if (quotas.metricDashboards) quotaRows.push(quotas.metricDashboards);
  if (quotas.metricWidgetsPerDashboard) quotaRows.push(quotas.metricWidgetsPerDashboard);
  if (quotas.queryPeriodDays) quotaRows.push(quotas.queryPeriodDays);

  const showSelfServe = useShowSelfServe();

  return (
    <div className="flex flex-col gap-3">
      <Header2 className="flex items-center gap-1">
        <IconTallymark4 className="size-6 text-blue-500" />
        Quotas
        <InfoIconTooltip
          content="Quotas define the maximum resources available to your organization."
          disableHoverableContent
        />
      </Header2>
      <Table variant="bright/no-hover">
        <TableHeader>
          <TableRow>
            <TableHeaderCell>Quota</TableHeaderCell>
            <TableHeaderCell alignment="right">Limit</TableHeaderCell>
            <TableHeaderCell alignment="right">Current</TableHeaderCell>
            <TableHeaderCell alignment="right">Source</TableHeaderCell>
            {showSelfServe ? <TableHeaderCell alignment="right">Upgrade</TableHeaderCell> : null}
          </TableRow>
        </TableHeader>
        <TableBody>
          {quotaRows.map((quota) => (
            <QuotaRow
              key={quota.name}
              quota={quota}
              isOnTopPlan={isOnTopPlan}
              billingPath={billingPath}
              showSelfServe={showSelfServe}
            />
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function QuotaRow({
  quota,
  isOnTopPlan,
  billingPath,
  showSelfServe,
}: {
  quota: QuotaInfo;
  isOnTopPlan: boolean;
  billingPath: string;
  showSelfServe: boolean;
}) {
  // For log retention and query period, we don't show current usage as it's a duration, not a count
  // For widgets per dashboard, the usage varies per dashboard so we don't show a single number
  const isDurationQuota = quota.name === "Log retention" || quota.name === "Query period";
  const isPerItemQuota = quota.name === "Charts per dashboard";
  const isRetentionQuota = isDurationQuota || isPerItemQuota;
  const isQueueSizeQuota = quota.name === "Max queued runs";
  const hideCurrentUsage = isRetentionQuota || isQueueSizeQuota;

  const percentage =
    !hideCurrentUsage && quota.limit && quota.limit > 0 ? quota.currentUsage / quota.limit : null;

  // Special handling for duration-based quotas (Log retention, Query period)
  if (isDurationQuota) {
    const canUpgrade = !isOnTopPlan;
    return (
      <TableRow>
        <TableCell className="flex w-full items-center gap-1">
          <span className="text-sm">{quota.name}</span>
          <InfoIconTooltip content={quota.description} disableHoverableContent />
        </TableCell>
        <TableCell alignment="right" className="font-medium tabular-nums">
          {quota.limit !== null
            ? `${formatNumber(quota.limit)} ${quota.limit === 1 ? "day" : "days"}`
            : "Unlimited"}
        </TableCell>
        <TableCell alignment="right" className="tabular-nums text-text-dimmed">
          –
        </TableCell>
        <TableCell alignment="right">
          <SourceBadge source={quota.source} />
        </TableCell>
        {showSelfServe ? (
          <TableCell alignment="right">
            <div className="flex justify-end">
              {canUpgrade ? (
                <LinkButton to={billingPath} variant="secondary/small">
                  View plans
                </LinkButton>
              ) : (
                <Feedback
                  button={<Button variant="secondary/small">Contact us</Button>}
                  defaultValue="help"
                />
              )}
            </div>
          </TableCell>
        ) : null}
      </TableRow>
    );
  }

  const renderUpgrade = () => {
    // Projects always show Contact us (regardless of upgrade flags)
    if (quota.name === "Projects") {
      return (
        <div className="flex justify-end">
          <Feedback
            button={<Button variant="secondary/small">Contact us</Button>}
            defaultValue="help"
          />
        </div>
      );
    }

    if (!quota.isUpgradable) {
      return null;
    }

    // Not on top plan - show View plans
    if (!isOnTopPlan) {
      return (
        <div className="flex justify-end">
          <LinkButton to={billingPath} variant="secondary/small">
            View plans
          </LinkButton>
        </div>
      );
    }

    // On top plan - show Contact us if canExceed is true
    if (quota.canExceed) {
      return (
        <div className="flex justify-end">
          <Feedback
            button={<Button variant="secondary/small">Contact us</Button>}
            defaultValue="help"
          />
        </div>
      );
    }

    // On top plan but cannot exceed - no upgrade option
    return null;
  };

  return (
    <TableRow>
      <TableCell className="flex w-full items-center gap-1">
        <span className="text-sm">{quota.name}</span>
        <InfoIconTooltip content={quota.description} disableHoverableContent />
      </TableCell>
      <TableCell alignment="right" className="font-medium tabular-nums">
        {quota.limit !== null
          ? isDurationQuota
            ? `${formatNumber(quota.limit)} ${quota.limit === 1 ? "day" : "days"}`
            : formatNumber(quota.limit)
          : "Unlimited"}
      </TableCell>
      <TableCell
        alignment="right"
        className={cn(
          "tabular-nums",
          hideCurrentUsage ? "text-text-dimmed" : getUsageColorClass(percentage, "usage")
        )}
      >
        {hideCurrentUsage ? "–" : formatNumber(quota.currentUsage)}
      </TableCell>
      <TableCell alignment="right">
        <SourceBadge source={quota.source} />
      </TableCell>
      {showSelfServe ? <TableCell alignment="right">{renderUpgrade()}</TableCell> : null}
    </TableRow>
  );
}

function FeaturesSection({
  features,
  isOnTopPlan,
  billingPath,
}: {
  features: LimitsResult["features"];
  isOnTopPlan: boolean;
  billingPath: string;
}) {
  // For staging environment: show View plans if not enabled (i.e., on Free plan)
  const stagingUpgradeType = features.hasStagingEnvironment.enabled ? "none" : "view-plans";
  const showSelfServe = useShowSelfServe();

  return (
    <div className="flex flex-col gap-3">
      <Header2 className="flex items-center gap-1.5">
        <IconDiamondFilled className="size-5 text-green-600" />
        Plan features
      </Header2>
      <Table variant="bright/no-hover">
        <TableHeader>
          <TableRow>
            <TableHeaderCell>Feature</TableHeaderCell>
            <TableHeaderCell alignment="right">Status</TableHeaderCell>
            {showSelfServe ? <TableHeaderCell alignment="right">Upgrade</TableHeaderCell> : null}
          </TableRow>
        </TableHeader>
        <TableBody>
          <FeatureRow
            feature={features.hasStagingEnvironment}
            upgradeType={stagingUpgradeType}
            billingPath={billingPath}
            showSelfServe={showSelfServe}
          />
          <FeatureRow
            feature={features.support}
            upgradeType={isOnTopPlan ? "contact-us" : "view-plans"}
            billingPath={billingPath}
            showSelfServe={showSelfServe}
          />
          <FeatureRow
            feature={features.includedUsage}
            upgradeType={isOnTopPlan ? "contact-us" : "view-plans"}
            billingPath={billingPath}
            showSelfServe={showSelfServe}
          />
        </TableBody>
      </Table>
    </div>
  );
}

function FeatureRow({
  feature,
  upgradeType,
  billingPath,
  showSelfServe,
}: {
  feature: FeatureInfo;
  upgradeType: "view-plans" | "contact-us" | "none";
  billingPath: string;
  showSelfServe: boolean;
}) {
  const displayValue = () => {
    if (feature.name === "Included compute" && typeof feature.value === "number") {
      if (!feature.enabled || feature.value === 0) {
        return <span className="text-text-dimmed">None</span>;
      }
      return (
        <span className="font-medium text-text-bright">${formatNumber(feature.value / 100)}</span>
      );
    }

    if (feature.value !== undefined) {
      return <span className="font-medium text-text-bright">{feature.value}</span>;
    }

    return feature.enabled ? (
      <span className="inline-flex items-center gap-1 text-success">
        <CheckIcon className="size-4" />
        Enabled
      </span>
    ) : (
      <span className="inline-flex items-center gap-1 text-text-dimmed">Not available</span>
    );
  };

  const renderUpgrade = () => {
    switch (upgradeType) {
      case "view-plans":
        return (
          <div className="flex justify-end">
            <LinkButton to={billingPath} variant="secondary/small">
              View plans
            </LinkButton>
          </div>
        );
      case "contact-us":
        return (
          <div className="flex justify-end">
            <Feedback
              button={<Button variant="secondary/small">Contact us</Button>}
              defaultValue="help"
            />
          </div>
        );
      case "none":
        return null;
    }
  };

  return (
    <TableRow>
      <TableCell className="flex w-full items-center gap-1">
        <span className="text-sm">{feature.name}</span>
        <InfoIconTooltip content={feature.description} disableHoverableContent />
      </TableCell>
      <TableCell alignment="right">{displayValue()}</TableCell>
      {showSelfServe ? <TableCell alignment="right">{renderUpgrade()}</TableCell> : null}
    </TableRow>
  );
}

/**
 * Returns the appropriate color class based on usage percentage.
 * @param percentage - The usage percentage (0-1 scale)
 * @param mode - "usage" means higher is worse (quotas), "remaining" means lower is worse (rate limits)
 * @returns Tailwind color class
 */
function getUsageColorClass(
  percentage: number | null,
  mode: "usage" | "remaining" = "usage"
): string {
  if (percentage === null) return "text-text-dimmed";

  if (mode === "remaining") {
    // For remaining tokens: 0 = bad (red), <=10% = warning (orange)
    if (percentage <= 0) return "text-error";
    if (percentage <= 0.1) return "text-warning";
    return "text-text-bright";
  } else {
    // For usage: 100% = bad (red), >=90% = warning (orange)
    if (percentage >= 1) return "text-error";
    if (percentage >= 0.9) return "text-warning";
    return "text-text-bright";
  }
}

function SourceBadge({ source }: { source: "default" | "plan" | "override" }) {
  const variants: Record<typeof source, { label: string; className: string }> = {
    default: {
      label: "Default",
      className: "bg-indigo-500/20 text-indigo-400",
    },
    plan: {
      label: "Plan",
      className: "bg-purple-500/20 text-purple-400",
    },
    override: {
      label: "Override",
      className: "bg-amber-500/20 text-amber-400",
    },
  };

  const variant = variants[source];

  return (
    <span
      className={cn(
        "inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium",
        variant.className
      )}
    >
      {variant.label}
    </span>
  );
}