"use client"

import * as React from "react"
import { Search, X } from "lucide-react"

import { cn } from "../../lib/utils"
import { Input } from "./input"

/**
 * Replaces `@wordpress/components`' `SearchControl` (2 sites: Paginator, LoincSearch).
 *
 * An adapter, not a rename. `onChange` receives the STRING, not the event, exactly as WP's did -
 * both sites pass a handler that takes a search term straight through to a query.
 *
 * WP's defaults are reproduced because both call sites rely on them and pass no label at all:
 * `label` defaults to "Search" and `hideLabelFromVision` to true, so the field keeps an accessible
 * name it never showed. Dropping that would leave two unnamed search boxes.
 *
 * The magnifier and the clear button are WP's too, not additions: WP swaps the icon for a reset
 * button once the field has a value, and the reset calls `onChange('')`.
 *
 * `className` and `style` land on the wrapper, which is where WP put them - `.wp-search-control`
 * sets a width and Paginator sets a bottom margin, and both expect the outer box.
 * `__nextHasNoMarginBottom` is not accepted; call sites drop it.
 */

export interface SearchControlProps
  extends Omit<React.ComponentProps<"input">, "onChange" | "value" | "size"> {
  label?: React.ReactNode
  help?: React.ReactNode
  hideLabelFromVision?: boolean
  value?: string
  /** WP's contract: the VALUE, not the event. */
  onChange: (value: string) => void
  /** WP's own sizes. Neither call site sets it. */
  size?: "default" | "compact"
}

function SearchControl({
  label = "Search",
  help,
  hideLabelFromVision = true,
  value = "",
  onChange,
  placeholder = "Search",
  className,
  style,
  size = "default",
  disabled,
  id,
  ...props
}: SearchControlProps) {
  const generated = React.useId().replace(/:/g, "")
  const inputId = id ?? `search-control-${generated}`
  const helpId = help ? `${inputId}-help` : undefined

  return (
    <div
      data-slot="search-control"
      data-size={size}
      className={cn("w-full", className)}
      style={style}
    >
      {label && (
        <label
          data-slot="search-control-label"
          htmlFor={inputId}
          className={cn(
            "mb-1 block text-sm font-medium",
            hideLabelFromVision && "sr-only"
          )}
        >
          {label}
        </label>
      )}

      <div className="relative">
        <Search
          aria-hidden="true"
          className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-faint"
        />

        {/* `type="text"` with the searchbox role, not `type="search"`: WebKit paints its own clear
            button on a search input, which would sit next to the one below it. */}
        <Input
          id={inputId}
          type="text"
          role="searchbox"
          aria-describedby={helpId}
          className={cn("ahr-input-icon-left", value && "ahr-input-icon-right")}
          value={value}
          placeholder={placeholder}
          disabled={disabled}
          onChange={(event) => onChange(event.target.value)}
          {...props}
        />

        {value && (
          <button
            type="button"
            onClick={() => onChange("")}
            disabled={disabled}
            aria-label="Reset search"
            className="absolute top-1/2 right-2 -translate-y-1/2 rounded-sm p-0.5 text-ink-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:pointer-events-none disabled:opacity-50"
          >
            <X className="size-4" />
          </button>
        )}
      </div>

      {help && (
        <p
          data-slot="search-control-help"
          id={helpId}
          className="mt-1 text-sm text-muted-foreground"
        >
          {help}
        </p>
      )}
    </div>
  )
}

export { SearchControl }