import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./select";
import { US_STATES, normalizeUsState } from "../../utils/usStates";

export interface StateSelectProps {
  /** The stored `Address.state`. May be anything at all - records predate this control. */
  value: string | undefined;
  /** Receives a canonical USPS code, or `undefined` when the field is cleared. */
  onChange: (next: string | undefined) => void;
  disabled?: boolean;
  className?: string;
  /** Accessible name. Both call sites sit in a row of unlabelled address boxes. */
  "aria-label"?: string;
}

/**
 * The one place a state is chosen. Both address call sites use this rather than each growing a list,
 * because two lists is how they drift apart.
 *
 * A picker rather than a validated text box on purpose: `Address.state` has no binding in FHIR and no
 * server check is possible, so refusal has to be structural. A rule that merely rejects on save is a
 * rule a later change can loosen without anyone noticing.
 */
export const StateSelect = ({
  value,
  onChange,
  disabled,
  className,
  "aria-label": ariaLabel = "State",
}: StateSelectProps) => {
  const canonical = normalizeUsState(value);
  const stored = (value ?? "").trim();

  // A record already holding a bad state has to remain correctable, and it has to keep SHOWING what
  // it holds while it is. Dropping the unrecognised value would blank the field, which reads as
  // "no state on file" and quietly loses the only clue to what was meant.
  const unrecognised = stored && !canonical ? stored : undefined;

  return (
    <Select
      value={canonical ?? unrecognised ?? ""}
      disabled={disabled}
      onValueChange={(next) => onChange(normalizeUsState(next))}
    >
      {/*
        The trigger shows the CODE, the list shows names. The address row is a fixed-width State box
        beside a flexible City, and a trigger sized for "District of Columbia" would take that room
        from City at phone width. Showing the code also keeps the field looking like the one it
        replaces, which had always held a code.
      */}
      {/* 🚨 THE WIDTH CANNOT COME FROM A CLASS HERE, and this is not a preference.
          `src/index.css` resets every select trigger inside the plugin root with an ID-SCOPED
          `width: 100%`, which outranks any Tailwind `w-*` by specificity. 📏 Measured on the running
          app: this trigger carries `w-20` and computed to 428px, squeezing the City and ZIP beside it
          in the address row to 25px each.
          ⇒ `ak-select-fixed-w` is the one escape hatch that rule allows, and the width travels as a
          custom property because a property beats nothing and is beaten by nothing — it is simply the
          value the rule reads. ⛔ Do not "simplify" this back to a width class; it will silently do
          nothing, which is exactly how it shipped. */}
      <SelectTrigger
        className={`ak-select-fixed-w ${className ?? ''}`}
        style={{ ['--ak-select-fixed-w' as string]: '5rem' }}
        aria-label={ariaLabel}
        title={stored || undefined}
      >
        <SelectValue placeholder="State">
          {canonical ?? unrecognised ?? undefined}
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        {unrecognised ? (
          <SelectItem value={unrecognised}>{unrecognised} — not a state</SelectItem>
        ) : null}
        {US_STATES.map((state) => (
          <SelectItem key={state.code} value={state.code}>
            {state.name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};

export default StateSelect;