import { forwardRef, useId } from "react";
import { inputVariants } from "@cloudflare/kumo/components/input";
import { Label } from "@cloudflare/kumo/components/label";
import { Select as KumoSelect } from "@cloudflare/kumo/components/select";
import { cn } from "~/utils/cn";

const CONTROL = cn(inputVariants({ focusIndicator: true }), "w-full disabled:opacity-60");
const ERROR_CONTROL = cn(inputVariants({ variant: "error", focusIndicator: true }), "w-full disabled:opacity-60");

function controlClass(error: string | null | undefined, className?: string): string {
  return cn(error ? ERROR_CONTROL : CONTROL, className);
}

type FieldShellProps = {
  label: string;
  hint?: string;
  error?: string | null;
  id: string;
  children: React.ReactNode;
};

function FieldShell({ label, hint, error, id, children }: FieldShellProps) {
  return (
    <div className="flex flex-col gap-1.5">
      <Label htmlFor={id}>{label}</Label>
      {children}
      {hint && !error && (
        <p id={`${id}-hint`} className="text-sm text-kumo-subtle">
          {hint}
        </p>
      )}
      {error && <FieldError id={`${id}-error`}>{error}</FieldError>}
    </div>
  );
}

function describedBy(id: string, hint?: string, error?: string | null): string | undefined {
  if (error) return `${id}-error`;
  if (hint) return `${id}-hint`;
  return undefined;
}

type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "id"> & {
  label: string;
  hint?: string;
  error?: string | null;
};

export const TextField = forwardRef<HTMLInputElement, InputProps>(function TextField(
  { label, hint, error, className, ...rest },
  ref,
) {
  const id = useId();
  return (
    <FieldShell label={label} hint={hint} error={error} id={id}>
      <input
        ref={ref}
        id={id}
        aria-invalid={error ? true : undefined}
        aria-describedby={describedBy(id, hint, error)}
        className={controlClass(error, className)}
        {...rest}
      />
    </FieldShell>
  );
});
TextField.displayName = "TextField";

type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "id"> & {
  label: string;
  hint?: string;
  error?: string | null;
};

export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaField(
  { label, hint, error, className, ...rest },
  ref,
) {
  const id = useId();
  return (
    <FieldShell label={label} hint={hint} error={error} id={id}>
      <textarea
        ref={ref}
        id={id}
        aria-invalid={error ? true : undefined}
        aria-describedby={describedBy(id, hint, error)}
        className={controlClass(error, cn("h-auto py-2 font-mono", className))}
        {...rest}
      />
    </FieldShell>
  );
});
TextAreaField.displayName = "TextAreaField";

type SelectOption = { value: string; label: string };

type SelectProps = {
  label: string;
  hint?: string;
  options: ReadonlyArray<SelectOption>;
  /** Submitted with the surrounding form through Kumo's hidden input. */
  name?: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  required?: boolean;
  disabled?: boolean;
  className?: string;
};

/** Kumo `Select` with a visible label; uncontrolled selects start on the first option like a native select. */
export function SelectField({
  label,
  hint,
  options,
  value,
  defaultValue,
  onValueChange,
  className,
  ...rest
}: SelectProps) {
  const initial = value === undefined ? (defaultValue ?? options[0]?.value) : undefined;
  return (
    <KumoSelect<string>
      label={label}
      hideLabel={false}
      description={hint}
      items={options}
      value={value}
      defaultValue={initial}
      onValueChange={(next) => onValueChange?.(next ?? "")}
      className={cn("w-full", className)}
      {...rest}
    >
      {options.map((option) => (
        <KumoSelect.Option key={option.value} value={option.value}>
          {option.label}
        </KumoSelect.Option>
      ))}
    </KumoSelect>
  );
}

type InlineSelectProps = {
  label: string;
  options: ReadonlyArray<SelectOption>;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  name?: string;
  placeholder?: string;
  className?: string;
  disabled?: boolean;
};

/** Compact Kumo `Select` for table cells, toolbars and filter rows, labelled for screen readers only. */
export function InlineSelect({
  label,
  options,
  value,
  defaultValue,
  onValueChange,
  className,
  ...rest
}: InlineSelectProps) {
  return (
    <KumoSelect<string>
      label={label}
      size="sm"
      items={options}
      value={value}
      defaultValue={defaultValue}
      onValueChange={(next) => onValueChange?.(next ?? "")}
      className={className}
      {...rest}
    >
      {options.map((option) => (
        <KumoSelect.Option key={option.value} value={option.value}>
          {option.label}
        </KumoSelect.Option>
      ))}
    </KumoSelect>
  );
}

type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "type"> & {
  label: string;
  hint?: string;
};

export const CheckboxField = forwardRef<HTMLInputElement, CheckboxProps>(function CheckboxField(
  { label, hint, ...rest },
  ref,
) {
  const id = useId();
  return (
    <div className="flex items-start gap-2.5">
      <input
        ref={ref}
        id={id}
        type="checkbox"
        aria-describedby={hint ? `${id}-hint` : undefined}
        className="mt-0.5 size-4 accent-kumo-brand"
        {...rest}
      />
      <div className="flex flex-col gap-0.5">
        <Label htmlFor={id} className="font-normal">
          {label}
        </Label>
        {hint && (
          <p id={`${id}-hint`} className="text-sm text-kumo-subtle">
            {hint}
          </p>
        )}
      </div>
    </div>
  );
});
CheckboxField.displayName = "CheckboxField";

export const inputClass = CONTROL;

type FieldErrorProps = { id?: string; className?: string; children: React.ReactNode };

export function FieldError({ id, className, children }: FieldErrorProps) {
  return (
    <p id={id} role="alert" className={cn("text-sm text-kumo-danger", className)}>
      {children}
    </p>
  );
}

/** Kumo control styling for bare inputs and selects that sit inline (toolbars, table cells). */
export function compactInputClass(className?: string): string {
  return cn(inputVariants({ size: "sm", focusIndicator: true }), className);
}