import { cn } from "@/lib/utils";

type FieldProps = {
  label: string;
  name: string;
  error?: string;
  hint?: string;
  className?: string;
  children?: React.ReactNode;
};

export function Field({ label, name, error, hint, className, children }: FieldProps) {
  return (
    <label className={cn("block space-y-1.5", className)}>
      <span className="text-sm font-medium text-text/90">{label}</span>
      {children}
      {hint ? <span className="block text-xs text-muted">{hint}</span> : null}
      {error ? <span className="block text-xs text-danger">{error}</span> : null}
      <span className="sr-only">{name}</span>
    </label>
  );
}

const inputClass =
  "w-full rounded-xl border border-border bg-bg px-3 py-2.5 text-sm text-text outline-none transition placeholder:text-muted focus:border-accent";

export function TextInput({
  label,
  name,
  error,
  hint,
  className,
  ...props
}: FieldProps & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <Field label={label} name={name} error={error} hint={hint} className={className}>
      <input id={name} name={name} className={inputClass} {...props} />
    </Field>
  );
}

export function TextArea({
  label,
  name,
  error,
  hint,
  className,
  rows = 4,
  ...props
}: FieldProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
  return (
    <Field label={label} name={name} error={error} hint={hint} className={className}>
      <textarea id={name} name={name} rows={rows} className={cn(inputClass, "resize-y")} {...props} />
    </Field>
  );
}

export function SelectField({
  label,
  name,
  error,
  hint,
  className,
  options,
  ...props
}: FieldProps &
  React.SelectHTMLAttributes<HTMLSelectElement> & {
    options: { value: string; label: string }[];
  }) {
  return (
    <Field label={label} name={name} error={error} hint={hint} className={className}>
      <select id={name} name={name} className={inputClass} {...props}>
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </Field>
  );
}

export function CheckboxField({
  label,
  name,
  className,
  ...props
}: {
  label: string;
  name: string;
  className?: string;
} & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <label className={cn("inline-flex items-center gap-2 text-sm", className)}>
      <input
        type="checkbox"
        name={name}
        className="h-4 w-4 rounded border-border bg-bg accent-accent"
        {...props}
      />
      {label}
    </label>
  );
}

export function FormCard({
  title,
  children,
  className,
}: {
  title?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("rounded-2xl border border-border bg-surface p-5 md:p-6", className)}>
      {title ? (
        <h2 className="mb-4 font-[family-name:var(--font-space)] text-lg font-semibold">{title}</h2>
      ) : null}
      {children}
    </div>
  );
}