import { forwardRef, useId } from "react";
import { cn } from "~/utils/cn";

const CONTROL =
  "w-full rounded-md border border-gray-700 bg-gray-900/80 px-3 text-sm text-gray-100 placeholder:text-gray-600 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none disabled:opacity-60";

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="space-y-1.5">
      <label htmlFor={id} className="block text-sm font-medium text-gray-300">
        {label}
      </label>
      {children}
      {hint && !error && <p className="text-xs text-gray-500">{hint}</p>}
      {error && (
        <p id={`${id}-error`} role="alert" className="text-xs text-red-400">
          {error}
        </p>
      )}
    </div>
  );
}

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={error ? `${id}-error` : undefined}
        className={cn(CONTROL, "h-9", 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}
        className={cn(CONTROL, "py-2 font-mono", className)}
        {...rest}
      />
    </FieldShell>
  );
});
TextAreaField.displayName = "TextAreaField";

type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "id"> & {
  label: string;
  hint?: string;
  options: ReadonlyArray<{ value: string; label: string }>;
};

export const SelectField = forwardRef<HTMLSelectElement, SelectProps>(function SelectField(
  { label, hint, options, className, ...rest },
  ref,
) {
  const id = useId();
  return (
    <FieldShell label={label} hint={hint} id={id}>
      <select ref={ref} id={id} className={cn(CONTROL, "h-9", className)} {...rest}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </FieldShell>
  );
});
SelectField.displayName = "SelectField";

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" className="mt-0.5 size-4 accent-accent-500" {...rest} />
      <div>
        <label htmlFor={id} className="text-sm text-gray-200">
          {label}
        </label>
        {hint && <p className="text-xs text-gray-500">{hint}</p>}
      </div>
    </div>
  );
});
CheckboxField.displayName = "CheckboxField";

export function ErrorBanner({ message }: { message: string | null }) {
  if (!message) return null;
  return (
    <div role="alert" className="rounded-md border border-red-900/70 bg-red-950/40 px-3 py-2 text-sm text-red-300">
      {message}
    </div>
  );
}

export const inputClass = CONTROL;