'use client';

import * as React from 'react';
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XIcon } from '@/icons';
import * as SelectPrimitive from 'radix-ui/select';

import { cn } from '@/lib/utils';
import type { VariantProps } from '@/lib/cva';
import { focusRing, iconSizing } from '@/lib/cva-presets';
import { useControllableState } from '@/hooks/use-controllable-state';
import { inputVariants } from '@/components/input';

export type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
/**
 * The trigger is a field, so it takes Input's two axes — `variant` (`outline` /
 * `flushed`) and its 32 / 36 / 44 / 56px `size` ladder.
 *
 * Those two come from `VariantProps<typeof inputVariants>`, the same way
 * `InputProps` and `TextareaProps` take them, rather than being written out
 * here. The trigger already *renders* through `inputVariants` below, so a
 * hand-written union meant the behaviour was shared and the type was not: a
 * third shape added to `fieldShape` would reach Input and Textarea
 * automatically and stop at Select.
 */
export interface SelectTriggerProps
  extends Omit<React.ComponentProps<typeof SelectPrimitive.Trigger>, 'size'>,
    VariantProps<typeof inputVariants> {
  /**
   * Show a reset control once something is chosen — CBAR's `.isClearable?`.
   *
   * Clearing sets the value to `''`, which is how Radix returns a Select to its
   * placeholder. That is also why an item may not use `''` as its own value.
   */
  clearable?: boolean;
  /** Accessible name for that control. */
  clearLabel?: string;
  /**
   * Classes for the trigger itself when `clearable` is on.
   *
   * With it on, the trigger gains a wrapper and `className` lands there — that
   * is the element a parent lays out, so `className="w-56"` should size it.
   * Same split as Input's adornment wrapper.
   */
  classNames?: { trigger?: string };
}

/**
 * Tracks the selected value so a trigger can decide whether to offer a reset.
 *
 * Radix keeps its value in a context this package cannot read, so `Select`
 * mirrors it. `Root` ends up controlled either way — transparently, since the
 * mirror follows `defaultValue` when the caller does not control it.
 */
const SelectValueContext = React.createContext<{ value: string; clear: () => void } | null>(null);

/**
 * Choose one value from a list.
 *
 * Renders a real listbox with type-ahead and keyboard navigation. Reach for
 * Combobox instead once the list is long enough to need filtering, and for
 * DropdownMenu when the items are actions rather than values.
 */
function Select({ value, defaultValue, onValueChange, children, ...props }: SelectProps) {
  const [current, handleValueChange] = useControllableState({
    value,
    defaultValue: defaultValue ?? '',
    onChange: onValueChange,
  });

  const context = React.useMemo(
    () => ({ value: current, clear: () => handleValueChange('') }),
    [current, handleValueChange]
  );

  return (
    <SelectValueContext.Provider value={context}>
      <SelectPrimitive.Root
        data-slot="select"
        value={current}
        onValueChange={handleValueChange}
        {...props}
      >
        {children}
      </SelectPrimitive.Root>
    </SelectValueContext.Provider>
  );
}

function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}

function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}

function SelectTrigger({
  className,
  classNames,
  variant,
  size = 'md',
  clearable = false,
  clearLabel = 'Clear selection',
  children,
  ...props
}: SelectTriggerProps) {
  const context = React.useContext(SelectValueContext);

  const trigger = (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        inputVariants({ variant, size }),
        'flex w-fit items-center justify-between gap-2 whitespace-nowrap',
        'data-[placeholder]:text-muted-foreground dark:hover:bg-input/50',
        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
        "[&_svg:not([class*='text-'])]:text-muted-foreground",
        iconSizing,
        /* The trigger fills its wrapper, because that is the element the
           surrounding layout sizes. */
        clearable && 'w-full',
        clearable ? classNames?.trigger : className
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        {/* The gap goes on the chevron rather than on the trigger's padding:
            padding would push the chevron inward too, and the reset control has
            to sit *between* the value and the chevron, not outside it. */}
        <ChevronDownIcon className={cn('size-4 opacity-50', clearable && 'ml-6')} />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  );

  if (!clearable) return trigger;

  /*
   * The reset button is a *sibling* of the trigger, positioned over it.
   * `SelectPrimitive.Trigger` renders a real <button>, and a button inside a
   * button is invalid HTML — jest-axe reports it as `nested-interactive` and a
   * screen reader stops announcing either one.
   *
   * The wrapper is present whenever `clearable` is set, not only while there is
   * a value: mounting it on the first selection would remount the trigger and
   * drop focus mid-interaction.
   */
  return (
    <div data-slot="select-trigger-wrapper" className={cn('relative w-fit', className)}>
      {trigger}
      {context?.value ? (
        <button
          type="button"
          data-slot="select-clear"
          aria-label={clearLabel}
          onClick={context.clear}
          className={cn(
            'absolute top-1/2 right-7 -translate-y-1/2 rounded-xs p-0.5',
            'text-muted-foreground hover:text-foreground',
            'transition-colors duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
            focusRing
          )}
        >
          <XIcon className="size-3.5" />
        </button>
      ) : null}
    </div>
  );
}

function SelectContent({
  className,
  children,
  position = 'item-aligned',
  align = 'center',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'relative z-(--ui-z-dropdown) max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md',
          'duration-(--ui-duration-base) ease-(--ui-ease-standard)',
          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
          'data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2',
          'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
          position === 'popper' &&
            'data-[side=top]:-translate-y-1 data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1',
          className
        )}
        position={position}
        align={align}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1'
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  );
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
      {...props}
    />
  );
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        'relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none',
        'focus:bg-accent focus:text-accent-foreground',
        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
        iconSizing,
        "[&_svg:not([class*='text-'])]:text-muted-foreground",
        className
      )}
      {...props}
    >
      <span
        data-slot="select-item-indicator"
        className="absolute right-2 flex size-3.5 items-center justify-center"
      >
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  );
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
      {...props}
    />
  );
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn('flex cursor-default items-center justify-center py-1', className)}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  );
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn('flex cursor-default items-center justify-center py-1', className)}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  );
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
};