"use client";

// Synced from Subframe ("Dropdown Menu select", 2026-07-21) for WF-P8 S02/S05.
//
// The searchable single-select counterpart of DropdownMenuMultiSelect: `Select`
// has no search and the multi-select has the wrong cardinality.
//
// The same two export defects as the multi-select apply here and are fixed the
// same way, both reported to David:
//   1. The search input is dead markup — hardcoded `value=""`, no handler and a
//      hardcoded German placeholder. It is a controlled input here, and the
//      placeholder is a prop so the caller supplies a translated string.
//   2. The item checkboxes are hardcoded unselected. Here they follow the
//      `selected` prop, so a chosen option reads as chosen.
//
// Unlike the multi-select, `DropdownItem` keeps the Radix close-on-select
// behaviour: picking the one value is the end of the interaction.

import React from "react";
import { FeatherLayers } from "@subframe/core";
import { FeatherSearch } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Accordion } from "../Accordion";
import { Avatar } from "../Avatar";
import { Checkbox } from "../Checkbox";

export interface DropdownDividerProps
  extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
}

const DropdownDivider = React.forwardRef<HTMLDivElement, DropdownDividerProps>(
  function DropdownDivider(
    { className, ...otherProps }: DropdownDividerProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full items-start gap-2 px-1 py-1",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
      </div>
    );
  }
);

export interface DropdownItemProps
  extends React.ComponentProps<typeof SubframeCore.DropdownMenu.Item> {
  children?: React.ReactNode;
  icon?: React.ReactNode;
  iconRight?: React.ReactNode;
  image?: string;
  selected?: boolean;
  showCheckbox?: boolean;
  className?: string;
}

const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
  function DropdownItem(
    {
      children,
      icon = null,
      iconRight = null,
      image,
      selected = false,
      showCheckbox = false,
      className,
      ...otherProps
    }: DropdownItemProps,
    ref
  ) {
    return (
      <SubframeCore.DropdownMenu.Item asChild={true} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "group/adcae8d6 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 group/dropdown-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
            {
              "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
                selected,
            },
            className
          )}
          ref={ref}
        >
          <div
            className={SubframeUtils.twClassNames("hidden items-start", {
              flex: showCheckbox,
            })}
          >
            <Checkbox
              className="h-auto w-auto flex-none self-stretch"
              label="label"
              description="Description"
              helpText=""
              hideLabel={true}
              checked={selected}
            />
          </div>
          {image ? (
            <img
              className="h-6 w-6 flex-none rounded-round object-cover"
              src={image}
              // Decorative: the item's own text already names the option.
              alt=""
            />
          ) : null}
          {icon ? (
            <SubframeCore.IconWrapper
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
                { "text-icon-neutral-primary": selected }
              )}
            >
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {children ? (
            <span
              className={SubframeUtils.twClassNames(
                "line-clamp-1 grow shrink-0 basis-0 text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                { "text-text-neutral-primary": selected }
              )}
            >
              {children}
            </span>
          ) : null}
          {iconRight ? (
            <SubframeCore.IconWrapper
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
                { "text-icon-neutral-primary": selected }
              )}
            >
              {iconRight}
            </SubframeCore.IconWrapper>
          ) : null}
        </div>
      </SubframeCore.DropdownMenu.Item>
    );
  }
);

export interface DropdownUserItemProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  image?: string;
  selected?: boolean;
  showCheckbox?: boolean;
  /** Avatar fallback initials; the export hardcoded "OR". */
  initials?: string;
  className?: string;
}

const DropdownUserItem = React.forwardRef<
  HTMLDivElement,
  DropdownUserItemProps
>(function DropdownUserItem(
  {
    title,
    subtitle,
    image,
    selected = false,
    showCheckbox = false,
    initials,
    className,
    ...otherProps
  }: DropdownUserItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/0d3c57ad flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/user-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
        {
          "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
            selected,
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames("hidden items-start", {
          flex: showCheckbox,
        })}
      >
        <Checkbox
          label="label"
          description="Description"
          helpText=""
          hideLabel={true}
          checked={selected}
        />
      </div>
      <Avatar size="small" image={image}>
        {initials}
      </Avatar>
      <div className="flex grow shrink-0 basis-0 flex-col items-start">
        {title ? (
          <span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
            {title}
          </span>
        ) : null}
        {subtitle ? (
          <span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
            {subtitle}
          </span>
        ) : null}
      </div>
    </div>
  );
});

export interface DropdownCustomItemProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  selected?: boolean;
  showCheckbox?: boolean;
  size?: "medium" | "small" | "large";
  className?: string;
}

const DropdownCustomItem = React.forwardRef<
  HTMLDivElement,
  DropdownCustomItemProps
>(function DropdownCustomItem(
  {
    children,
    selected = false,
    showCheckbox = false,
    size = "medium",
    className,
    ...otherProps
  }: DropdownCustomItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/4abe03f9 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
        {
          "px-2.5 py-3": size === "large",
          "px-1 py-1": size === "small",
          "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
            selected,
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <Checkbox
        className={SubframeUtils.twClassNames("hidden", { flex: showCheckbox })}
        label="label"
        description="Description"
        helpText=""
        hideLabel={true}
        checked={selected}
      />
      {children ? (
        <div className="flex grow shrink-0 basis-0 flex-col items-start">
          {children}
        </div>
      ) : null}
    </div>
  );
});

export interface DropdownNestedItemProps
  extends React.ComponentProps<typeof Accordion> {
  children?: React.ReactNode;
  label?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

const DropdownNestedItem = React.forwardRef<
  React.ElementRef<typeof Accordion>,
  DropdownNestedItemProps
>(function DropdownNestedItem(
  {
    children,
    label,
    icon = <FeatherLayers />,
    className,
    ...otherProps
  }: DropdownNestedItemProps,
  ref
) {
  return (
    <Accordion
      className={SubframeUtils.twClassNames(
        "group/ca3b20a3 cursor-pointer group/nested-item",
        className
      )}
      variant="ghost"
      trigger={
        <div className="flex h-8 w-full flex-none items-center gap-2 rounded-md px-3 group-hover/ca3b20a3:bg-surface-neutral-tertiary">
          {icon ? (
            <SubframeCore.IconWrapper className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-primary">
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {label ? (
            <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
              {label}
            </span>
          ) : null}
          <Accordion.Chevron />
        </div>
      }
      ref={ref}
      {...otherProps}
    >
      {children ? (
        <div className="flex w-full flex-col items-start gap-1">{children}</div>
      ) : null}
    </Accordion>
  );
});

export interface DropdownMenuSelectRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  showSearch?: boolean;
  /** Controlled search term — the export shipped a dead, hardcoded input. */
  searchValue?: string;
  searchPlaceholder?: string;
  onSearchChange?: (value: string) => void;
  className?: string;
}

const DropdownMenuSelectRoot = React.forwardRef<
  HTMLDivElement,
  DropdownMenuSelectRootProps
>(function DropdownMenuSelectRoot(
  {
    children,
    showSearch = false,
    searchValue,
    searchPlaceholder,
    onSearchChange,
    className,
    ...otherProps
  }: DropdownMenuSelectRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        // Local adjustment: `relative z-50`, same as DropdownMenu. The panel
        // opens in a portal whose wrapper has no z-index, so any positioned
        // `z-10` in the page (e.g. the ProjectCard price row) paints over the
        // open menu.
        "group/99951515 relative z-50 flex min-w-[192px] flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-lg",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "hidden w-full flex-col items-start gap-1 pb-1",
          { flex: showSearch }
        )}
      >
        <div className="flex w-full items-center gap-2 rounded-sm bg-surface-neutral-tertiary px-2 py-1.5">
          <FeatherSearch className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
          <input
            // Reset against @tailwindcss/forms, which would otherwise draw a
            // border and a white fill inside the tinted search row.
            className="subframe-text-input-control min-w-[0px] grow shrink-0 basis-0 self-stretch border-none bg-transparent px-0 py-0 text-body-small-regular-150 font-body-small-regular-150 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle"
            placeholder={searchPlaceholder}
            value={searchValue ?? ""}
            onChange={(event) => onSearchChange?.(event.target.value)}
            type="search"
          />
        </div>
        <div className="flex h-px w-full flex-none flex-col items-center gap-2 bg-border-default" />
      </div>
      {children ? (
        <div className="flex w-full flex-col items-start gap-0.5">
          {children}
        </div>
      ) : null}
    </div>
  );
});

export const DropdownMenuSelect = Object.assign(DropdownMenuSelectRoot, {
  DropdownDivider,
  DropdownItem,
  DropdownUserItem,
  DropdownCustomItem,
  DropdownNestedItem,
});