"use client";

import { Children, isValidElement, useMemo } from "react";
import { Select as SelectPrimitive } from "@base-ui/react/select";

import { cn } from "./cn";

/*
 * Inline rather than imported, matching Checkbox. The package takes no icon
 * dependency, so a product's icon set and version stay entirely its own.
 */
function ChevronDownIcon({ className }: { className?: string }) {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" className={className}>
      <path
        d="M4 6l4 4 4-4"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" className="size-4">
      <path
        d="M13 4.5l-6 6-3-3"
        stroke="currentColor"
        strokeWidth="1.75"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

/*
 * No new tokens. A select trigger is a field, so it reads the `--input-*`
 * geometry; the popup is a menu-like surface, so it reads `--menu-*`. Reusing
 * both means a brand that has styled Input and Menu gets a coherent Select for
 * free, and there is one less thing to keep in sync.
 *
 * `container` is here for the reason it is on Dialog and Menu: a portal
 * re-parents to document.body and would otherwise escape the `data-brand`
 * subtree that supplies the theme.
 */


/*
 * Base UI's `Select.Value` renders the raw value, not the matching item's
 * text: it resolves labels only when the root is handed an `items` structure
 * up front. Products write `<SelectItem value="america-new-york">
 * America/New_York</SelectItem>` and expect the trigger to read
 * "America/New_York", so the labels are read straight off the JSX.
 *
 * Off the JSX, and not from the mounted items -- the popup is not in the DOM
 * until it is first opened, so anything that waits for items to mount is a
 * commit too late and the trigger paints the raw value. The element tree is
 * available on the very first render, which is when the trigger needs it.
 *
 * Items produced by a component that hides them behind its own boundary are
 * invisible to this walk; those fall back to the raw value, exactly as they
 * would without it.
 */
function collectItems(
  node: React.ReactNode,
  out: Array<{ label: React.ReactNode; value: string }>,
) {
  Children.forEach(node, (child) => {
    if (!isValidElement(child)) return;
    const childProps = child.props as {
      value?: unknown;
      children?: React.ReactNode;
    };
    if (child.type === SelectItem && childProps.value != null) {
      out.push({ value: String(childProps.value), label: childProps.children });
      return;
    }
    if (childProps.children != null) collectItems(childProps.children, out);
  });
}

/*
 * Declared against `string` rather than re-exported. Base UI's root is
 * generic over any value type, so a consumer writing
 * `React.ComponentProps<typeof Select>` collapses that generic to `unknown` --
 * every `onValueChange={(v) => ...}` at the call site silently loses its
 * parameter type. RadioGroup hit this first.
 *
 * Constraining the parameter to `string` keeps that collapse harmless: it
 * yields `string`, the safe default, rather than `unknown`. Keeping it generic
 * at all is what lets a call site pass a handler narrowed to a string union
 * -- `(value: PeriodOption) => void` -- without a contravariance error, which
 * a plain `(value: string) => void` would reject. Products that genuinely
 * need non-string values can reach for the primitive directly.
 */
export interface SelectProps<T extends string = string>
  extends Omit<
    SelectPrimitive.Root.Props<string>,
    "value" | "defaultValue" | "onValueChange" | "multiple"
  > {
  value?: T | null;
  defaultValue?: T | null;
  onValueChange?: (value: T) => void;
}

function Select<T extends string = string>({
  onValueChange,
  ...props
}: SelectProps<T>) {
  const items = useMemo(() => {
    const collected: Array<{ label: React.ReactNode; value: string }> = [];
    collectItems(props.children, collected);
    return collected.length > 0 ? collected : undefined;
  }, [props.children]);

  return (
    <SelectPrimitive.Root
      items={items}
      {...props}
      // Base UI emits null when the selection is cleared; a string-typed
      // API has no way to express that, so it surfaces as the empty string.
      onValueChange={
        onValueChange &&
        ((value: string | null) => onValueChange((value ?? "") as T))
      }
    />
  );
}

const SelectGroup = SelectPrimitive.Group;

function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
  return (
    <SelectPrimitive.Value
      data-slot="select-value"
      className={cn(
        "line-clamp-1 flex flex-1 items-center gap-2 text-left",
        className,
      )}
      {...props}
    />
  );
}

export interface SelectTriggerProps
  extends Omit<SelectPrimitive.Trigger.Props, "className"> {
  className?: string;
  size?: "sm" | "md" | "lg";
}

function SelectTrigger({ className, size = "md", children, ...props }: SelectTriggerProps) {
    return (
      <SelectPrimitive.Trigger
        data-slot="select-trigger"
        data-size={size}
        className={cn(
          "flex w-full items-center justify-between gap-2 whitespace-nowrap",
          "rounded-(--input-radius) border border-(color:--color-border)",
          "bg-(color:--input-background) text-(length:--font-size-control) text-(color:--color-content)",
          size === "sm" && "h-(--input-height-sm) px-(--input-padding-x-sm)",
          size === "md" && "h-(--input-height-md) px-(--input-padding-x-md)",
          size === "lg" && "h-(--input-height-lg) px-(--input-padding-x-lg)",
          "transition-[border-color,background-color,outline-color]",
          "duration-(--motion-duration) ease-(--motion-ease)",
          "outline-none focus-visible:border-(color:--color-brand-accent)",
          "focus-visible:outline-solid",
          "focus-visible:outline-(length:--focus-ring-width)",
          "focus-visible:outline-(color:--color-focus-ring)",
          "focus-visible:-outline-offset-1",
          "data-popup-open:border-(color:--color-brand-accent)",
          "data-[placeholder]:text-(color:--color-content-muted)",
          "aria-invalid:border-(color:--color-action-danger)",
          "disabled:cursor-not-allowed disabled:opacity-50",
          "data-disabled:cursor-not-allowed data-disabled:opacity-50",
          "[&_svg]:pointer-events-none [&_svg]:shrink-0",
          "[&_svg:not([class*='size-'])]:size-4",
          className,
        )}
        {...props}
      >
        {children}
        <SelectPrimitive.Icon
          render={
            <ChevronDownIcon className="text-(color:--color-content-muted)" />
          }
        />
      </SelectPrimitive.Trigger>
    );
}

export interface SelectContentProps
  extends Omit<SelectPrimitive.Popup.Props, "className">,
    Pick<
      SelectPrimitive.Positioner.Props,
      "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
    > {
  className?: string;
  container?: SelectPrimitive.Portal.Props["container"];
}

function SelectContent({
      className,
      container,
      side = "bottom",
      sideOffset = 4,
      align = "start",
      alignOffset = 0,
      alignItemWithTrigger = false,
      children,
      ...props
    }: SelectContentProps) {
    return (
<SelectPrimitive.Portal container={container}>
        <SelectPrimitive.Positioner
          className="z-50 outline-none"
          side={side}
          sideOffset={sideOffset}
          align={align}
          alignOffset={alignOffset}
          alignItemWithTrigger={alignItemWithTrigger}
        >
          <SelectPrimitive.Popup
            data-slot="select-content"
            className={cn(
              "z-50 min-w-(--anchor-width) origin-(--transform-origin) p-1",
              "max-h-(--available-height) overflow-x-hidden overflow-y-auto",
              "rounded-(--menu-radius) border border-(color:--color-border)",
              "bg-(color:--color-surface-raised) text-(color:--color-content)",
              "shadow-lg outline-none",
              /*
               * Keyed off `data-closed`, not the starting/ending-style pair
               * that Dialog and Menu use. Select offers no `keepMounted`: its
               * popup is in the DOM from first render and never unmounts, so
               * `data-ending-style` is set once and never cleared — an exit
               * rule written against it also applies while open, and the open
               * popup renders invisible. `data-closed` is the only attribute
               * here that actually tracks the state. `invisible` rides the
               * same transition so a closed popup leaves the a11y tree and
               * stops taking hits once it has faded.
               */
              "transition-[opacity,transform,visibility] duration-(--motion-duration) ease-(--motion-ease)",
              "data-closed:invisible data-closed:scale-95 data-closed:opacity-0",
              "data-closed:pointer-events-none",
              className,
            )}
            {...props}
          >
            {children}
          </SelectPrimitive.Popup>
        </SelectPrimitive.Positioner>
      </SelectPrimitive.Portal>
    );
}

function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
    return (
      <SelectPrimitive.Item
        data-slot="select-item"
        className={cn(
          "relative flex w-full cursor-default items-center gap-2 select-none",
          "h-(--menu-item-height) rounded-(--menu-item-radius) pr-7 pl-2 text-(length:--font-size-control)",
          "outline-none data-highlighted:bg-(color:--color-action-neutral)",
          "data-disabled:pointer-events-none data-disabled:opacity-50",
          "[&_svg]:pointer-events-none [&_svg]:shrink-0",
          "[&_svg:not([class*='size-'])]:size-4",
          className,
        )}
        {...props}
      >
        <SelectPrimitive.ItemText className="flex flex-1 items-center gap-2">
          {children}
        </SelectPrimitive.ItemText>
        <SelectPrimitive.ItemIndicator
          render={
            <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
          }
        >
          <CheckIcon />
        </SelectPrimitive.ItemIndicator>
      </SelectPrimitive.Item>
    );
}

function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
  return (
    <SelectPrimitive.GroupLabel
      data-slot="select-label"
      className={cn(
        "px-2 py-1 text-(length:--font-size-control-sm) leading-(--line-height-control-sm) font-medium text-(color:--color-content-muted)",
        className,
      )}
      {...props}
    />
  );
}

function SelectSeparator({
  className,
  ...props
}: SelectPrimitive.Separator.Props) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn("-mx-1 my-1 h-px bg-(color:--color-border)", className)}
      {...props}
    />
  );
}

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