import { useEffect, useState, type ReactNode } from "react";
import { Check, Search, X } from "lucide-react";
import { Badge } from "../ui/badge";
import { EmptyState } from "../ui/empty-state";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { cn } from "../../lib/utils";
import { IValueSet, useValueSetServiceContext } from "../../services/ValueSetService";
import { codedAnswerLabel } from "../../utils/codedAnswerLabel";
import { LANGUAGE_OPTIONS, type Demographics } from "./demographics";
import { ENROLLED_OPTIONS, enrolledChoice, enrolledFromChoice } from "../../utils/tribalAffiliation";

// Read, searched and sorted by its label; the item itself (system, code, display) is what is chosen and stored.
const sortByDisplay = (items: IValueSet[]): IValueSet[] => [...items].sort((a, b) => codedAnswerLabel(a).localeCompare(codedAnswerLabel(b)));

const ChipGroup = ({ items, onRemove, disabled }: { items: IValueSet[]; onRemove: (code: string) => void; disabled: boolean }) =>
  items.length ? (
    <div className="flex flex-wrap gap-2">
      {items.map((item) => (
        <Badge key={item.code} variant="outline" className="flex items-center gap-1 rounded bg-accent py-2">
          {codedAnswerLabel(item)}
          <button
            type="button"
            className="ml-1 rounded-full outline-none focus:ring-1"
            aria-label={`Remove ${codedAnswerLabel(item)}`}
            disabled={disabled}
            onClick={() => onRemove(item.code)}
          >
            <X className="h-3 w-3" aria-hidden="true" />
          </button>
        </Badge>
      ))}
    </div>
  ) : null;

type PickerProps = {
  id: string;
  options: IValueSet[];
  selected: IValueSet[];
  onSelect: (item: IValueSet) => void;
  placeholder: string;
  disabled: boolean;
};

const SearchableMultiSelect = ({ id, options, selected, onSelect, placeholder, disabled }: PickerProps) => {
  const [search, setSearch] = useState("");
  const [resetKey, setResetKey] = useState(0);
  const filtered = search.trim()
    ? options.filter((option) => codedAnswerLabel(option).toLowerCase().includes(search.toLowerCase()))
    : options;

  return (
    <Select
      key={resetKey}
      disabled={disabled}
      onValueChange={(code) => {
        const item = options.find((option) => option.code === code);
        if (!item) return;
        onSelect(item);
        setSearch("");
        setResetKey((key) => key + 1);
      }}
      onOpenChange={(open) => {
        if (!open) setSearch("");
      }}
    >
      <SelectTrigger id={id} className="w-full">
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent>
        <div className="mb-1 flex items-center border-b border-border px-2 py-1.5">
          <Search size={14} className="mr-2 shrink-0 opacity-50" aria-hidden="true" />
          <input
            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
            placeholder="Search..."
            aria-label={`Search ${placeholder.toLowerCase()}`}
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            // Typing filters the list; only Escape reaches the select, so its type-ahead does not take the keys.
            onKeyDown={(event) => {
              if (event.key !== "Escape") event.stopPropagation();
            }}
          />
        </div>
        {filtered.length === 0 ? (
          <EmptyState size="compact" title="No results found." />
        ) : (
          filtered.map((option) => (
            <SelectItem key={option.code} value={option.code}>
              <Check
                size={14}
                className={cn("shrink-0", selected.some((item) => item.code === option.code) ? "opacity-100" : "opacity-0")}
              />
              {codedAnswerLabel(option)}
            </SelectItem>
          ))
        )}
      </SelectContent>
    </Select>
  );
};

const toggle = (item: IValueSet, list: IValueSet[]): IValueSet[] =>
  list.some((entry) => entry.code === item.code) ? list.filter((entry) => entry.code !== item.code) : [...list, item];

type OptionLists = {
  races: IValueSet[];
  detailedRaces: IValueSet[];
  ethnicities: IValueSet[];
  detailedEthnicities: IValueSet[];
  tribes: IValueSet[];
};

const NO_OPTIONS: OptionLists = { races: [], detailedRaces: [], ethnicities: [], detailedEthnicities: [], tribes: [] };

/** Languages, race, ethnicity and tribal affiliation, edited inside the You section's form. */
export const DemographicsEditor = ({
  value,
  onChange,
  disabled,
  afterLanguages,
}: {
  value: Demographics;
  onChange: (next: Demographics) => void;
  disabled: boolean;
  /** A control of the caller's that the form places straight after Languages. */
  afterLanguages?: ReactNode;
}) => {
  const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
  const [options, setOptions] = useState<OptionLists>(NO_OPTIONS);
  const [optionsFailed, setOptionsFailed] = useState(false);

  useEffect(() => {
    let current = true;
    Promise.all([
      fetchValueSet(valueSetUrls.ombRaceCategory),
      fetchValueSet(valueSetUrls.detailedRace),
      fetchValueSet(valueSetUrls.ombEthnicityCategory),
      fetchValueSet(valueSetUrls.detailedEthnicity),
      fetchValueSet(valueSetUrls.tribalEntityUS),
    ])
      .then(([races, detailedRaces, ethnicities, detailedEthnicities, tribes]) => {
        if (!current) return;
        setOptions({
          races: sortByDisplay(races),
          detailedRaces: sortByDisplay(detailedRaces),
          ethnicities: sortByDisplay(ethnicities),
          detailedEthnicities: sortByDisplay(detailedEthnicities),
          tribes: sortByDisplay(tribes),
        });
      })
      .catch(() => {
        if (current) setOptionsFailed(true);
      });
    return () => {
      current = false;
    };
  }, [fetchValueSet, valueSetUrls]);

  const picker = (
    key: keyof Omit<Demographics, "enrolled">,
    label: string,
    list: IValueSet[],
    placeholder: string,
    onRemove?: (next: IValueSet[]) => Partial<Demographics>,
    single = false,
  ) => (
    <div className="profile-input">
      <label htmlFor={`you-${key}`} className="ak-label">{label}</label>
      <SearchableMultiSelect
        id={`you-${key}`}
        options={list}
        selected={value[key]}
        placeholder={placeholder}
        disabled={disabled}
        onSelect={(item) => onChange({ ...value, [key]: single ? toggle(item, value[key]).slice(-1) : toggle(item, value[key]) })}
      />
      <ChipGroup
        items={value[key]}
        disabled={disabled}
        onRemove={(code) => {
          const next = value[key].filter((item) => item.code !== code);
          onChange({ ...value, [key]: next, ...(onRemove?.(next) ?? {}) });
        }}
      />
    </div>
  );

  return (
    <>
      {optionsFailed && (
        <p className="profile-section__wide profile-section__hint ak-field-error">
          We could not load the race, ethnicity and tribe lists just now.
        </p>
      )}
      {picker("languages", "Languages you speak", LANGUAGE_OPTIONS, "Select language")}
      {afterLanguages}
      {picker("races", "Race", options.races, "Select race", (next) => (next.length ? {} : { detailedRaces: [] }))}
      {value.races.length > 0 && picker("detailedRaces", "More detail, if you want to give it", options.detailedRaces, "Select detail")}
      {picker("ethnicities", "Ethnicity", options.ethnicities, "Select ethnicity", (next) => (next.length ? {} : { detailedEthnicities: [] }), true)}
      {value.ethnicities.length > 0 &&
        picker("detailedEthnicities", "More detail, if you want to give it", options.detailedEthnicities, "Select detail")}
      {picker("tribes", "Tribal affiliation", options.tribes, "Select tribal affiliation", (next) => (next.length ? {} : { enrolled: undefined }), true)}
      <div className="profile-input">
        <label htmlFor="you-enrolled" className="ak-label">Enrolled tribe member</label>
        <Select
          value={enrolledChoice(value.tribes.length ? value.enrolled : undefined)}
          onValueChange={(choice) => onChange({ ...value, enrolled: enrolledFromChoice(choice) })}
          disabled={disabled || value.tribes.length === 0}
        >
          <SelectTrigger id="you-enrolled">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {ENROLLED_OPTIONS.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </>
  );
};

export default DemographicsEditor;