import { useState } from "react";
import type { getBilling } from "~/fns/billing";
import { updateSpendingLimit } from "~/fns/billing";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { ProgressTrack, quotaTone } from "~/ui/ProgressTrack";
import { MAX_SPENDING_LIMIT_CENTS } from "~/lib/plans";

type Billing = Awaited<ReturnType<typeof getBilling>>;

function dollars(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`;
}

/** The monthly cap on overage: current status, a progress bar, and one aligned input row to change it. */
export function SpendingLimit({ billing, org }: { billing: Billing; org: string | null }) {
  const { summary, account } = billing;
  const limit = summary.spendingLimitCents;
  const [value, setValue] = useState(limit === null ? "" : String(limit / 100));
  const save = useAction(updateSpendingLimit);
  const parsed = value.trim() === "" ? null : Math.round(Number(value) * 100);
  const invalid = parsed !== null && (!Number.isFinite(parsed) || parsed < 0 || parsed > MAX_SPENDING_LIMIT_CENTS);
  const unchanged = parsed === limit;
  const percent = limit && limit > 0 ? Math.min(100, (summary.totalCents / limit) * 100) : 0;
  if (!summary.plan.billsOverage) {
    return (
      <p className="p-4 text-sm text-kumo-subtle">
        The {summary.plan.label} plan never bills overage: usage stops at the plan's limits instead.
      </p>
    );
  }
  return (
    <div className="space-y-4 p-4">
      <div className="space-y-1.5 text-sm">
        <div className="flex items-baseline justify-between gap-3">
          <span className="text-kumo-default">
            {limit === null ? "No limit set" : limit === 0 ? "Overage is blocked" : `${dollars(limit)} per month`}
          </span>
          <span className="font-mono text-kumo-subtle">{dollars(summary.totalCents)} used this period</span>
        </div>
        {limit !== null && limit > 0 && <ProgressTrack percent={percent} tone={quotaTone(percent)} />}
      </div>
      {account.canEdit ? (
        <form
          className="space-y-2"
          onSubmit={(event) => {
            event.preventDefault();
            if (!invalid) void save.run({ data: { org, cents: parsed } });
          }}
        >
          <label htmlFor="spending-limit" className="block text-sm text-kumo-default">
            Monthly limit (USD)
          </label>
          <div className="flex items-center gap-2">
            <div className="relative w-40">
              <span className="pointer-events-none absolute inset-y-0 left-2.5 flex items-center text-sm text-kumo-subtle">
                $
              </span>
              <input
                id="spending-limit"
                inputMode="decimal"
                placeholder="Plan default"
                aria-invalid={invalid}
                value={value}
                onChange={(event) => setValue(event.target.value)}
                className="h-9 w-full rounded-md border border-kumo-hairline bg-kumo-canvas pl-6 pr-2 font-mono text-sm text-kumo-strong focus:border-accent-500 focus:outline-none aria-[invalid=true]:border-danger-500"
              />
            </div>
            <Button type="submit" pending={save.pending} disabled={invalid || unchanged}>
              Save
            </Button>
          </div>
          <p className="text-xs text-kumo-subtle">
            {invalid
              ? `Enter an amount from $0 to ${dollars(MAX_SPENDING_LIMIT_CENTS)}.`
              : `Raise or lower it any time, up to ${dollars(MAX_SPENDING_LIMIT_CENTS)}. Leave empty for the plan's default limit, or enter 0 to never pay overage. Alerts go out at 50%, 80% and 100%.`}
          </p>
          <ErrorBanner message={save.error} />
        </form>
      ) : (
        <p className="text-xs text-kumo-subtle">Only account owners can change the spending limit.</p>
      )}
    </div>
  );
}