import * as React from "react"
import { cn } from "@/lib/utils"

export function Field({
  label,
  htmlFor,
  hint,
  required,
  children,
}: {
  label: string
  htmlFor?: string
  hint?: string
  required?: boolean
  children: React.ReactNode
}) {
  return (
    <div className="space-y-1.5">
      <label htmlFor={htmlFor} className="block text-sm font-medium text-foreground">
        {label}
        {required ? <span className="mr-1 text-destructive">*</span> : null}
      </label>
      {children}
      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
    </div>
  )
}

export const TextInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  function TextInput({ className, ...props }, ref) {
    return (
      <input
        ref={ref}
        {...props}
        className={cn(
          "h-10 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground shadow-sm outline-none ring-gold-500/30 placeholder:text-muted-foreground/70 focus:border-gold-500 focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",
          className,
        )}
      />
    )
  },
)

export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
  function Textarea({ className, ...props }, ref) {
    return (
      <textarea
        ref={ref}
        {...props}
        className={cn(
          "block min-h-[88px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none ring-gold-500/30 placeholder:text-muted-foreground/70 focus:border-gold-500 focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",
          className,
        )}
      />
    )
  },
)

export const Select = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
  function Select({ className, children, ...props }, ref) {
    return (
      <select
        ref={ref}
        {...props}
        className={cn(
          "h-10 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground shadow-sm outline-none ring-gold-500/30 focus:border-gold-500 focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",
          className,
        )}
      >
        {children}
      </select>
    )
  },
)

export function FormError({ message }: { message?: string | null }) {
  if (!message) return null
  return (
    <p className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
      {message}
    </p>
  )
}
