"use client"

import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectTrigger, SelectValue } from "@/components/ui/select"
import { cn } from "@/lib/utils"
import React from "react"

interface FormFieldProps {
  label: string
  required?: boolean
  error?: string
  children: React.ReactNode
  className?: string
  description?: string
}

export function FormField({ label, required = false, error, children, className, description }: FormFieldProps) {
  const fieldId = React.useId()
  const errorId = error ? `${fieldId}-error` : undefined
  const descriptionId = description ? `${fieldId}-description` : undefined

  return (
    <div className={cn("space-y-2", className)}>
      <Label htmlFor={fieldId} className="text-sm font-medium text-foreground">
        {label}
        {required && (
          <span className="text-red-500 ml-1" aria-label="required">
            *
          </span>
        )}
      </Label>
      {description && (
        <p id={descriptionId} className="text-xs text-muted-foreground">
          {description}
        </p>
      )}
      <div>
        {React.cloneElement(children as React.ReactElement, {
          id: fieldId,
          "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined,
          "aria-invalid": error ? "true" : undefined,
        })}
      </div>
      {error && (
        <p id={errorId} className="text-sm text-red-500 flex items-center gap-1" role="alert">
          <span className="text-red-500" aria-hidden="true">
            ⚠
          </span>
          {error}
        </p>
      )}
    </div>
  )
}

interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string
  required?: boolean
  error?: string
  description?: string
}

export function FormInput({ label, required = false, error, className, description, ...props }: FormInputProps) {
  return (
    <FormField label={label} required={required} error={error} className={className} description={description}>
      <Input
        {...props}
        className={cn(
          "transition-all duration-200 focus:ring-2 focus:ring-accent/20 focus:border-accent",
          error ? "border-red-500 focus:border-red-500 focus:ring-red-500/20" : "",
          className,
        )}
      />
    </FormField>
  )
}

interface FormTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label: string
  required?: boolean
  error?: string
  description?: string
}

export function FormTextarea({ label, required = false, error, className, description, ...props }: FormTextareaProps) {
  return (
    <FormField label={label} required={required} error={error} className={className} description={description}>
      <Textarea
        {...props}
        className={cn(
          "transition-all duration-200 focus:ring-2 focus:ring-accent/20 focus:border-accent min-h-[100px]",
          error ? "border-red-500 focus:border-red-500 focus:ring-red-500/20" : "",
          className,
        )}
      />
    </FormField>
  )
}

interface FormSelectProps {
  label: string
  required?: boolean
  error?: string
  placeholder?: string
  value?: string
  onValueChange?: (value: string) => void
  children: React.ReactNode
  className?: string
  description?: string
}

export function FormSelect({
  label,
  required = false,
  error,
  placeholder,
  value,
  onValueChange,
  children,
  className,
  description,
}: FormSelectProps) {
  return (
    <FormField label={label} required={required} error={error} className={className} description={description}>
      <Select value={value} onValueChange={onValueChange}>
        <SelectTrigger
          className={cn(
            "transition-all duration-200 focus:ring-2 focus:ring-accent/20 focus:border-accent",
            error ? "border-red-500 focus:border-red-500 focus:ring-red-500/20" : "",
          )}
        >
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>{children}</SelectContent>
      </Select>
    </FormField>
  )
}