"use client";

// Synced from Subframe ("Dropdown Menu multi select", 2026-07-21) for WF-P8 S01.
//
// Two deliberate local deviations, both reported to David — the export renders
// a multi-select that cannot express selection or survive a click:
//   1. The item checkboxes are hardcoded unselected. Here they follow the
//      `selected` prop, so a checked facet option actually reads as checked.
//   2. `DropdownItem` wraps a Radix `DropdownMenu.Item`, which closes the menu
//      on select. A multi-select must stay open, so the default `onSelect`
//      preventsDefault; a caller that wants the closing behaviour back passes
//      its own `onSelect`.

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,
      onSelect,
      ...otherProps
    }: DropdownItemProps,
    ref
  ) {
    return (
      <SubframeCore.DropdownMenu.Item
        asChild={true}
        // Keep the menu open across selections — see the file header.
        onSelect={onSelect ?? ((event) => event.preventDefault())}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "group/744235d7 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;
  /** Initials fallback when there is no photo — the export hardcoded "OR". */
  initials?: string;
  selected?: boolean;
  showCheckbox?: boolean;
  className?: string;
}

const DropdownUserItem = React.forwardRef<
  HTMLDivElement,
  DropdownUserItemProps
>(function DropdownUserItem(
  {
    title,
    subtitle,
    image,
    initials,
    selected = false,
    showCheckbox = false,
    className,
    ...otherProps
  }: DropdownUserItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/ad6eaaaf 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/e2891f3f 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/e3a3cd0a 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/e3a3cd0a: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 DropdownMenuMultiSelectRootProps
  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 DropdownMenuMultiSelectRoot = React.forwardRef<
  HTMLDivElement,
  DropdownMenuMultiSelectRootProps
>(function DropdownMenuMultiSelectRoot(
  {
    children,
    showSearch = false,
    searchValue,
    searchPlaceholder,
    onSearchChange,
    className,
    ...otherProps
  }: DropdownMenuMultiSelectRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        // Local adjustment: `relative z-50`. 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/8c9fd450 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 DropdownMenuMultiSelect = Object.assign(
  DropdownMenuMultiSelectRoot,
  {
    DropdownDivider,
    DropdownItem,
    DropdownUserItem,
    DropdownCustomItem,
    DropdownNestedItem,
  }
);