import { getFormProps, useForm, type SubmissionResult } from "@conform-to/react";

import { parseWithZod } from "@conform-to/zod";
import { Form, useActionData } from "@remix-run/react";
import { useEffect, useMemo, useRef, useState } from "react";
import { z } from "zod";
import { getBillingLimitMode } from "~/components/billing/billingAlertsFormat";
import { formatGracePeriodMs } from "~/components/billing/billingLimitFormat";
import { AnimatedCallout } from "~/components/primitives/AnimatedCallout";
import { Button } from "~/components/primitives/Buttons";
import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
import { Fieldset } from "~/components/primitives/Fieldset";
import { FormButtons } from "~/components/primitives/FormButtons";
import { FormError } from "~/components/primitives/FormError";
import { Header2 } from "~/components/primitives/Headers";
import { Input } from "~/components/primitives/Input";
import { InputGroup } from "~/components/primitives/InputGroup";
import { Paragraph } from "~/components/primitives/Paragraph";
import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
import type { BillingLimitResult } from "~/services/billingLimit.schemas";
import { formatCurrency } from "~/utils/numberFormatter";

export const billingLimitFormSchema = z.discriminatedUnion("mode", [
  z.object({
    mode: z.literal("none"),
    cancelInProgressRuns: z
      .preprocess((v) => v === "on" || v === true || v === "true", z.boolean())
      .optional(),
  }),
  z.object({
    mode: z.literal("plan"),
    cancelInProgressRuns: z
      .preprocess((v) => v === "on" || v === true || v === "true", z.boolean())
      .optional(),
  }),
  z.object({
    mode: z.literal("custom"),
    amount: z.coerce
      .number({ invalid_type_error: "Not a valid amount" })
      .positive("Amount must be greater than 0"),
    cancelInProgressRuns: z
      .preprocess((v) => v === "on" || v === true || v === "true", z.boolean())
      .optional(),
  }),
]);

type BillingLimitActionData = {
  formIntent: "billing-limit";
  submission: SubmissionResult;
};

export function isBillingLimitFormDirty(input: {
  billingLimit: BillingLimitResult;
  mode: "none" | "plan" | "custom";
  customAmount: string;
  cancelInProgressRuns: boolean;
}): boolean {
  const needsInitialSave = !input.billingLimit.isConfigured;
  const savedMode = getBillingLimitMode(input.billingLimit);
  const savedCustomAmount =
    input.billingLimit.isConfigured && input.billingLimit.mode === "custom"
      ? (input.billingLimit.amountCents / 100).toFixed(2)
      : "";
  const savedCancelInProgressRuns =
    input.billingLimit.isConfigured && input.billingLimit.cancelInProgressRuns;

  const isLimitDirty =
    input.mode !== savedMode ||
    (input.mode === "custom" && input.customAmount !== savedCustomAmount);

  return (
    needsInitialSave || isLimitDirty || input.cancelInProgressRuns !== savedCancelInProgressRuns
  );
}

export function getBillingLimitFormLastSubmission(
  submission: BillingLimitActionData["submission"] | undefined,
  mode: "none" | "plan" | "custom",
  isDirty: boolean
) {
  if (!isDirty || !submission) {
    return undefined;
  }

  if (mode !== "custom" && submission.error?.amount) {
    const { amount: _amount, ...remainingErrors } = submission.error;
    return {
      ...submission,
      error: remainingErrors,
    };
  }

  return submission;
}

type BillingLimitConfigSectionProps = {
  billingLimit: BillingLimitResult;
  planLimitCents: number;
};

export function BillingLimitConfigSection({
  billingLimit,
  planLimitCents,
}: BillingLimitConfigSectionProps) {
  const gracePeriodLabel = formatGracePeriodMs(billingLimit.gracePeriodMs);

  const savedMode = getBillingLimitMode(billingLimit);
  const savedCustomAmount =
    billingLimit.isConfigured && billingLimit.mode === "custom"
      ? (billingLimit.amountCents / 100).toFixed(2)
      : "";
  const savedCancelInProgressRuns = billingLimit.isConfigured && billingLimit.cancelInProgressRuns;

  const [mode, setMode] = useState<"none" | "plan" | "custom">(savedMode);
  const [customAmount, setCustomAmount] = useState(savedCustomAmount);
  const [cancelInProgressRuns, setCancelInProgressRuns] = useState(savedCancelInProgressRuns);
  const customAmountInputRef = useRef<HTMLInputElement>(null);
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    setMode(savedMode);
    setCustomAmount(savedCustomAmount);
    setCancelInProgressRuns(savedCancelInProgressRuns);
  }, [savedMode, savedCustomAmount, savedCancelInProgressRuns]);

  function handleModeChange(value: string) {
    const nextMode = value as typeof mode;
    if (mode === "custom" && nextMode !== "custom") {
      setCustomAmount(savedCustomAmount);
    }
    setMode(nextMode);
    if (nextMode === "custom") {
      window.setTimeout(() => customAmountInputRef.current?.focus(), 0);
    }
  }

  const actionData = useActionData<BillingLimitActionData>();
  const limitSubmission =
    actionData?.formIntent === "billing-limit" ? actionData.submission : undefined;

  const _needsInitialSave = !billingLimit.isConfigured;
  const _isLimitDirty =
    mode !== savedMode || (mode === "custom" && customAmount !== savedCustomAmount);
  const isDirty = isBillingLimitFormDirty({
    billingLimit,
    mode,
    customAmount,
    cancelInProgressRuns,
  });
  const lastSubmission = useMemo(
    () => getBillingLimitFormLastSubmission(limitSubmission, mode, isDirty),
    [limitSubmission, mode, isDirty]
  );

  const [form, fields] = useForm({
    id: "billing-limit",
    lastResult: lastSubmission as any,
    shouldRevalidate: "onInput",
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: billingLimitFormSchema });
    },
    defaultValue: {
      mode: savedMode,
    },
  });

  useEffect(() => {
    formRef.current?.dispatchEvent(new Event("input", { bubbles: true }));
  }, [customAmount, mode]);

  const planLimitLabel = formatCurrency(planLimitCents / 100, false);
  const showPlanInfoCallout = mode === "plan";
  const showCustomInfoCallout = mode === "custom";
  const showNoneWarningCallout = mode === "none";

  return (
    <div>
      <div className="mb-3 border-b border-grid-dimmed pb-3">
        <Header2 spacing>Billing limit</Header2>
        <Paragraph variant="small">
          Set a monthly compute spend limit for your organization. When the limit is reached,
          billable environments enter a grace period before new triggers are rejected.
        </Paragraph>
      </div>

      <Form method="post" {...getFormProps(form)} ref={formRef}>
        <input type="hidden" name="intent" value="billing-limit" />
        <Fieldset>
          <input type="hidden" name="mode" value={mode} />

          <RadioGroup value={mode} onValueChange={handleModeChange} className="flex flex-col gap-2">
            <div className="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:items-start lg:gap-x-4 lg:gap-y-2">
              <RadioGroupItem
                id="limit_mode_plan"
                value="plan"
                variant="description"
                label={
                  <span className="inline-flex items-center">{`My plan limit (${planLimitLabel})`}</span>
                }
                description={`Pause billable environments when monthly spend reaches ${planLimitLabel}.`}
              />
              <div className="relative">
                <AnimatedCallout
                  show={showPlanInfoCallout}
                  variant="info"
                  className="absolute w-full text-sm"
                >
                  <LimitReachedCalloutContent
                    gracePeriodLabel={gracePeriodLabel}
                    cancelInProgressRuns={cancelInProgressRuns}
                  />
                </AnimatedCallout>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:items-start lg:gap-x-4 lg:gap-y-2">
              <div className="flex flex-col gap-2">
                <RadioGroupItem
                  id="limit_mode_custom"
                  value="custom"
                  variant="description"
                  label="Custom limit"
                  description="Set your own monthly spend threshold."
                />
                {mode === "custom" && (
                  <InputGroup fullWidth className="mb-1 mt-0.5">
                    <Input
                      ref={customAmountInputRef}
                      id="custom-amount"
                      name="amount"
                      type="number"
                      step={0.01}
                      min={0.01}
                      value={customAmount}
                      onChange={(e) => setCustomAmount(e.target.value)}
                      placeholder="Custom limit amount"
                      icon={
                        <span className="-mt-0.5 block pl-1.5 pr-2 text-sm font-semibold text-text-dimmed">
                          $
                        </span>
                      }
                      className="pl-px"
                      fullWidth
                    />
                    {fields.amount && (
                      <FormError id={fields.amount.errorId}>{fields.amount.errors}</FormError>
                    )}
                  </InputGroup>
                )}
              </div>
              <div className="relative">
                <AnimatedCallout
                  show={showCustomInfoCallout}
                  variant="info"
                  className="absolute w-full text-sm"
                >
                  <LimitReachedCalloutContent
                    gracePeriodLabel={gracePeriodLabel}
                    cancelInProgressRuns={cancelInProgressRuns}
                  />
                </AnimatedCallout>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:items-start lg:gap-x-4 lg:gap-y-2">
              <RadioGroupItem
                id="limit_mode_none"
                value="none"
                variant="description"
                label="I don't want a billing limit"
                description="Runs continue without protection against runaway usage."
              />
              <div className="relative">
                <AnimatedCallout
                  show={showNoneWarningCallout}
                  variant="warning"
                  className="absolute w-full"
                >
                  Without a billing limit, runs will continue even if usage spikes unexpectedly. You
                  may have to pay higher fees before you notice.
                </AnimatedCallout>
              </div>
            </div>
          </RadioGroup>

          {mode !== "none" && (
            <CheckboxWithLabel
              className="mt-4"
              name="cancelInProgressRuns"
              id="cancel_in_progress_runs"
              value="on"
              variant="simple/small"
              label="Cancel in-progress runs when this limit is reached"
              defaultChecked={cancelInProgressRuns}
              onChange={setCancelInProgressRuns}
            />
          )}
          <FormButtons
            className={isDirty ? undefined : "invisible"}
            confirmButton={
              <Button type="submit" variant="primary/small" disabled={!isDirty}>
                Save billing limit
              </Button>
            }
          />
        </Fieldset>
      </Form>
    </div>
  );
}

function LimitReachedCalloutContent({
  gracePeriodLabel,
  cancelInProgressRuns,
}: {
  gracePeriodLabel: string;
  cancelInProgressRuns: boolean;
}) {
  return (
    <>
      When this limit is reached, queued runs will be held for {gracePeriodLabel}, then new triggers
      will be rejected until you increase or remove the limit. Limits are enforced with a short
      delay, so spend may briefly exceed the limit before grace begins. See our{" "}
      <a href="https://trigger.dev/terms" className="underline">
        terms
      </a>{" "}
      for refund policy details.
      {cancelInProgressRuns ? (
        <> In-progress runs will be cancelled when the limit is hit.</>
      ) : null}
    </>
  );
}