import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";

import { EntityHelp } from "../../help";
import { AccessApiError } from "../../shared/api";
import { useQuickCreateDialogController } from "../controllers";
import type { QuickCreateDialogProps } from "../types";

export function QuickCreateDialog(props: QuickCreateDialogProps) {
  const { target, scope, onCreated } = props;
  const { form, existing, mutation, submit, changeOpen } = useQuickCreateDialogController(props);
  const { t } = useTranslation("access");
  const id = useId();

  return (
    <FormDialog
      cancelLabel={t("cancel")}
      formActions
      onOpenChange={changeOpen}
      open
      title={t(target.kind === "system" ? "quickAddSystem" : "quickAddEnvironment")}
    >
      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
        <FormBody>
          {target.kind === "environment" && (
            <p className="text-sm text-muted-foreground">
              {t("quickEnvironmentContext", { name: target.systemName })}
            </p>
          )}
          <div className="space-y-2">
            <Label htmlFor={id}>{t("name")}</Label>
            <Input
              id={id}
              maxLength={100}
              required
              {...form.register("name", { validate: (value) => value.trim().length > 0 })}
            />
            {form.formState.errors.name && (
              <p className="text-destructive" role="alert">
                {t("invalid")}
              </p>
            )}
          </div>
          {mutation.isError && (
            <p className="text-destructive" role="alert">
              {t(
                `errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
              )}
            </p>
          )}
          {existing && (
            <div className="space-y-2">
              <p>{t("quickExisting")}</p>
              <Button
                disabled={mutation.isPending}
                onClick={() => onCreated(existing.id)}
                type="button"
                variant="outline"
              >
                {t("quickUseExisting")}
              </Button>
            </div>
          )}
          <p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
          <EntityHelp kind={target.kind} scope={scope} />
        </FormBody>
        <FormActions>
          <Button disabled={mutation.isPending} type="submit">
            {t(mutation.isPending ? "saving" : "quickSaveSelect")}
          </Button>
        </FormActions>
      </form>
    </FormDialog>
  );
}