/**
 * Combobox — WealthX Design System
 * Base: @base-ui/react/combobox
 * WealthX overrides: square corners (rounded-none), design token colors,
 * consistent styling with Select component, built-in search filtering.
 */
import * as React from "react";
import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";

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

export type ComboboxProps<
  Value = string,
  Multiple extends boolean | undefined = false,
> = React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>>;

function Combobox<Value, Multiple extends boolean | undefined = false>({
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>>) {
  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />;
}

export type ComboboxTriggerProps = React.ComponentProps<
  typeof ComboboxPrimitive.Trigger
> & {
  size?: "sm" | "default";
};

function ComboboxTrigger({
  className,
  size = "default",
  children,
  ...props
}: ComboboxTriggerProps) {
  return (
    <ComboboxPrimitive.Trigger
      data-slot="combobox-trigger"
      data-size={size}
      className={cn(
        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-body-small whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-[popup-open]:border-primary data-[popup-open]:ring-[3px] data-[popup-open]:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:font-normal data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
        className,
      )}
      {...props}
    >
      {children}
      <ComboboxPrimitive.Icon className="transition-transform duration-200 data-[popup-open]:rotate-180">
        <ChevronDownIcon className="size-4 opacity-50" />
      </ComboboxPrimitive.Icon>
    </ComboboxPrimitive.Trigger>
  );
}

export type ComboboxValueProps = React.ComponentProps<
  typeof ComboboxPrimitive.Value
>;

function ComboboxValue({ ...props }: ComboboxValueProps) {
  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
}

export type ComboboxInputProps = React.ComponentProps<
  typeof ComboboxPrimitive.Input
>;

function ComboboxInput({ className, ...props }: ComboboxInputProps) {
  return (
    <div
      data-slot="combobox-input-wrapper"
      className="flex items-center gap-2 border-b border-border px-3"
    >
      <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
      <ComboboxPrimitive.Input
        data-slot="combobox-input"
        className={cn(
          "h-9 w-full min-w-0 bg-transparent py-1 text-body-small outline-none placeholder:font-normal placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
        {...props}
      />
    </div>
  );
}

export type ComboboxContentProps = React.ComponentProps<
  typeof ComboboxPrimitive.Popup
>;

function ComboboxContent({
  className,
  children,
  ...props
}: ComboboxContentProps) {
  return (
    <ComboboxPrimitive.Portal>
      <ComboboxPrimitive.Positioner
        sideOffset={4}
        align="start"
        className="z-[200]"
      >
        <ComboboxPrimitive.Popup
          data-slot="combobox-content"
          className={cn(
            "relative z-50 max-h-[var(--available-height)] min-w-[var(--anchor-width,8rem)] overflow-hidden border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
            className,
          )}
          {...props}
        >
          {children}
        </ComboboxPrimitive.Popup>
      </ComboboxPrimitive.Positioner>
    </ComboboxPrimitive.Portal>
  );
}

export type ComboboxListProps = React.ComponentProps<
  typeof ComboboxPrimitive.List
>;

function ComboboxList({ className, ...props }: ComboboxListProps) {
  return (
    <ComboboxPrimitive.List
      data-slot="combobox-list"
      className={cn(
        "max-h-[min(var(--available-height),18rem)] overflow-y-auto p-1",
        className,
      )}
      {...props}
    />
  );
}

export type ComboboxItemProps = React.ComponentProps<
  typeof ComboboxPrimitive.Item
>;

function ComboboxItem({ className, children, ...props }: ComboboxItemProps) {
  return (
    <ComboboxPrimitive.Item
      data-slot="combobox-item"
      className={cn(
        "relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-body-small outline-hidden select-none data-highlighted:bg-primary/5 data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
        className,
      )}
      {...props}
    >
      <span
        data-slot="combobox-item-indicator"
        className="absolute right-2 flex size-3.5 items-center justify-center"
      >
        <ComboboxPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </ComboboxPrimitive.ItemIndicator>
      </span>
      {children}
    </ComboboxPrimitive.Item>
  );
}

export type ComboboxEmptyProps = React.ComponentProps<
  typeof ComboboxPrimitive.Empty
>;

function ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) {
  return (
    <ComboboxPrimitive.Empty
      data-slot="combobox-empty"
      className={cn(
        "text-body-small py-6 text-center text-muted-foreground empty:hidden",
        className,
      )}
      {...props}
    />
  );
}

export type ComboboxGroupProps = React.ComponentProps<
  typeof ComboboxPrimitive.Group
>;

function ComboboxGroup({ ...props }: ComboboxGroupProps) {
  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />;
}

export type ComboboxGroupLabelProps = React.ComponentProps<
  typeof ComboboxPrimitive.GroupLabel
>;

function ComboboxGroupLabel({ className, ...props }: ComboboxGroupLabelProps) {
  return (
    <ComboboxPrimitive.GroupLabel
      data-slot="combobox-group-label"
      className={cn(
        "text-label-small px-2 py-1.5 uppercase text-muted-foreground",
        className,
      )}
      {...props}
    />
  );
}

export type ComboboxSeparatorProps = React.ComponentProps<"div">;

function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {
  return (
    <div
      role="separator"
      data-slot="combobox-separator"
      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
      {...props}
    />
  );
}

export {
  Combobox,
  ComboboxTrigger,
  ComboboxValue,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxGroupLabel,
  ComboboxSeparator,
};