import type { ReactNode } from "react";
import type { Address } from "fhir/r4";
import { Input } from "../components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../components/ui/select";
import { StateSelect } from "../components/ui/state-select";
import {
  ADDRESS_CITY_CLASS,
  ADDRESS_ROW_CLASS,
  ADDRESS_STATE_CLASS,
  ADDRESS_STATE_ZIP_GROUP_CLASS,
  ADDRESS_ZIP_CLASS,
} from "../components/ui/address-row";
import { sanitizeUsPostalCode } from "./usStates";

// Flat draft model for the emergency-contact multi-part editor (mapped to/from a `Patient.contact[]`
// entry by each caller - see `PatientProfileCard`'s `setEmergencyContact`/`emergencyContactDraft`
// (single, staff card) and `EmergencyContacts`'s `setEmergencyContactAt`/`emergencyContactToDraft`
// (multi, patient card)).
export interface EmergencyContactDraft {
  given: string;
  family: string;
  relationship: string;
  phone: string;
  email: string;
}

/**
 * Multi-part `renderEditor` for a FHIR `Address` - plain `ui/input`, no `@wordpress/components`,
 * so it ports cleanly wherever it's used. Extracted out of `PatientProfileCard` (staff patient
 * edit) so the patient-self profile cards can reuse it without duplicating the markup.
 *
 * Matches `EditableField`'s `renderEditor` prop signature exactly
 * (`(draft, setDraft, disabled) => ReactNode`), so callers can pass it straight through:
 * `renderEditor={AddressEditor}` - no wrapping arrow function needed.
 */
export const AddressEditor = (
  draft: Address,
  setDraft: (value: Address) => void,
  disabled: boolean,
): ReactNode => {
  const line = draft.line ?? [];
  const set = (patch: Partial<Address>) => setDraft({ ...draft, ...patch });
  const setLine = (index: number, next: string) => {
    const lines = [line[0] ?? "", line[1] ?? ""];
    lines[index] = next;
    setDraft({ ...draft, line: lines });
  };
  return (
    <div className="space-y-2">
      <Input
        className="h-9 text-sm"
        placeholder="Street address"
        value={line[0] ?? ""}
        disabled={disabled}
        autoFocus
        onChange={(event) => setLine(0, event.target.value)}
      />
      <Input
        className="h-9 text-sm"
        placeholder="Apt, suite, etc. (optional)"
        value={line[1] ?? ""}
        disabled={disabled}
        onChange={(event) => setLine(1, event.target.value)}
      />
      {/* The widths live in `address-row.ts` because the register-patient dialog renders this same
          row, and when each one sized itself they disagreed: this one gave City 54px and ZIP 112px at
          phone width, which clipped a city name while the ZIP box had twice the room it needed. */}
      <div className={ADDRESS_ROW_CLASS}>
        <Input
          className={ADDRESS_CITY_CLASS}
          placeholder="City"
          value={draft.city ?? ""}
          disabled={disabled}
          onChange={(event) => set({ city: event.target.value })}
        />
        <div className={ADDRESS_STATE_ZIP_GROUP_CLASS}>
          <StateSelect
            className={ADDRESS_STATE_CLASS}
            value={draft.state}
            disabled={disabled}
            onChange={(next) => set({ state: next })}
          />
          <Input
            className={ADDRESS_ZIP_CLASS}
            placeholder="ZIP"
            inputMode="numeric"
            value={draft.postalCode ?? ""}
            disabled={disabled}
            onChange={(event) =>
              set({ postalCode: sanitizeUsPostalCode(event.target.value) || undefined })
            }
          />
        </div>
      </div>
      <div className="flex gap-2">
        <Select
          value={draft.use ?? ""}
          disabled={disabled}
          onValueChange={(value) => set({ use: (value || undefined) as Address["use"] })}
        >
          <SelectTrigger className="h-9 flex-1 text-sm">
            <SelectValue placeholder="Usage (optional)" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="home">Home</SelectItem>
            <SelectItem value="work">Work</SelectItem>
            <SelectItem value="temp">Temporary</SelectItem>
            <SelectItem value="old">Old / Previous</SelectItem>
            <SelectItem value="billing">Billing</SelectItem>
          </SelectContent>
        </Select>
        <Select
          value={draft.type ?? ""}
          disabled={disabled}
          onValueChange={(value) => set({ type: (value || undefined) as Address["type"] })}
        >
          <SelectTrigger className="h-9 flex-1 text-sm">
            <SelectValue placeholder="Type (optional)" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="postal">Postal</SelectItem>
            <SelectItem value="physical">Physical</SelectItem>
            <SelectItem value="both">Both</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
};

/**
 * Multi-part `renderEditor` for the flat `EmergencyContactDraft` shape. Same reuse rationale and
 * signature contract as `AddressEditor` above.
 */
export const EmergencyContactEditor = (
  draft: EmergencyContactDraft,
  setDraft: (value: EmergencyContactDraft) => void,
  disabled: boolean,
): ReactNode => {
  const set = (patch: Partial<EmergencyContactDraft>) =>
    setDraft({ ...draft, ...patch });
  return (
    <div className="space-y-2">
      <div className="flex gap-2">
        <Input
          className="h-9 flex-1 text-sm"
          placeholder="First name"
          value={draft.given}
          disabled={disabled}
          autoFocus
          onChange={(event) => set({ given: event.target.value })}
        />
        <Input
          className="h-9 flex-1 text-sm"
          placeholder="Last name"
          value={draft.family}
          disabled={disabled}
          onChange={(event) => set({ family: event.target.value })}
        />
      </div>
      <Input
        className="h-9 text-sm"
        placeholder="Relationship (e.g. Spouse, Parent)"
        value={draft.relationship}
        disabled={disabled}
        onChange={(event) => set({ relationship: event.target.value })}
      />
      <Input
        className="h-9 text-sm"
        type="tel"
        placeholder="Phone"
        value={draft.phone}
        disabled={disabled}
        onChange={(event) => set({ phone: event.target.value })}
      />
      <Input
        className="h-9 text-sm"
        type="email"
        placeholder="Email (optional)"
        value={draft.email}
        disabled={disabled}
        onChange={(event) => set({ email: event.target.value })}
      />
    </div>
  );
};