'use client';

import * as React from 'react';
import { cva, type VariantProps } from '@/lib/cva';

import { cn } from '@/lib/utils';
import { Label } from '@/components/label/label';

const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {
  variants: {
    orientation: {
      /** Label above the control. The default for most forms. */
      vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
      /** Label beside the control — suits checkboxes and switches. */
      horizontal: 'flex-row items-center gap-3 [&>[data-slot=field-label]]:flex-auto',
    },
  },
  defaultVariants: {
    orientation: 'vertical',
  },
});

export interface FieldProps
  extends React.ComponentProps<'div'>,
    VariantProps<typeof fieldVariants> {
  /** Marks the whole group invalid, tinting the label and error text. */
  invalid?: boolean;
}

/**
 * Layout for one form control and its supporting text, without a form library.
 *
 * Use this when you manage state yourself; use the `form` subpath instead when
 * you are on react-hook-form, since that version also wires up `aria-invalid`
 * and `aria-describedby` from the validation state.
 *
 * You still own the accessible wiring here: give the control an `id` and point
 * `FieldLabel`'s `htmlFor` at it.
 *
 * ```tsx
 * <Field>
 *   <FieldLabel htmlFor="email">Email</FieldLabel>
 *   <Input id="email" aria-describedby="email-hint" />
 *   <FieldDescription id="email-hint">We never share it.</FieldDescription>
 * </Field>
 * ```
 */
function Field({ className, orientation, invalid, ...props }: FieldProps) {
  return (
    <div
      data-slot="field"
      data-invalid={invalid || undefined}
      className={cn(fieldVariants({ orientation }), className)}
      {...props}
    />
  );
}

function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
  return (
    <Label
      data-slot="field-label"
      className={cn('group-data-[invalid=true]/field:text-destructive', className)}
      {...props}
    />
  );
}

/** Hint shown under the control. Reference its `id` from the input. */
function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="field-description"
      className={cn('text-sm text-muted-foreground', className)}
      {...props}
    />
  );
}

/** Validation message. Announced live, so it is heard when it appears. */
function FieldError({ className, children, ...props }: React.ComponentProps<'p'>) {
  if (!children) return null;

  return (
    <p
      data-slot="field-error"
      role="alert"
      className={cn('text-sm text-destructive', className)}
      {...props}
    >
      {children}
    </p>
  );
}

/** Groups several fields into one titled section. Renders a real `<fieldset>`. */
function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot="field-set"
      className={cn(
        'flex flex-col gap-6',
        'has-[>[data-slot=radio-group]]:gap-3 has-[>[data-slot=checkbox-group]]:gap-3',
        className
      )}
      {...props}
    />
  );
}

export interface FieldLegendProps extends React.ComponentProps<'legend'> {
  /** `label` renders at control-label size instead of section-heading size. */
  variant?: 'legend' | 'label';
}

function FieldLegend({ className, variant = 'legend', ...props }: FieldLegendProps) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
      className={cn(
        'mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm',
        className
      )}
      {...props}
    />
  );
}

/** Vertical stack of fields with consistent rhythm. */
function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-group"
      className={cn('flex w-full flex-col gap-6 [&>[data-slot=field-group]]:gap-4', className)}
      {...props}
    />
  );
}

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldSet,
  FieldLegend,
  FieldGroup,
  fieldVariants,
};