Filter builder

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { ChangeEvent, ComponentProps } from "react";
import "./filter-builder.css";

export type FilterFieldType = "text" | "number" | "date" | "choice";

export type FilterField = {
  /** The property each row is matched on. */
  key: string;
  label: string;
  type: FilterFieldType;
  /** The values a choice field can take. */
  options?: { value: string; label: string }[];
};

export type FilterOperator =
  | "contains"
  | "notContains"
  | "is"
  | "isNot"
  | "startsWith"
  | "isEmpty"
  | "isNotEmpty"
  | "eq"
  | "neq"
  | "gt"
  | "gte"
  | "lt"
  | "lte"
  | "between"
  | "on"
  | "before"
  | "after"
  | "anyOf";

/** Plain JSON: a string, a number, an ISO date, a list of choices, a [from, to] pair, or null. */
export type FilterValue = string | number | null | (string | number | null)[];

export type FilterCondition = { id: string; field: string; operator: FilterOperator; value: FilterValue };

export type Filter = { combinator: "and" | "or"; conditions: FilterCondition[] };

type Shape = "none" | "single" | "range" | "many";

export type FilterOperatorInfo = { value: FilterOperator; label: string; shape: Shape };

/** The operators each field type offers, in menu order. The first one is picked for a new row. */
export const filterOperators: Record<FilterFieldType, FilterOperatorInfo[]> = {
  text: [
    { value: "contains", label: "contains", shape: "single" },
    { value: "notContains", label: "does not contain", shape: "single" },
    { value: "is", label: "is", shape: "single" },
    { value: "isNot", label: "is not", shape: "single" },
    { value: "startsWith", label: "starts with", shape: "single" },
    { value: "isEmpty", label: "is empty", shape: "none" },
    { value: "isNotEmpty", label: "is not empty", shape: "none" },
  ],
  number: [
    { value: "eq", label: "equals", shape: "single" },
    { value: "neq", label: "does not equal", shape: "single" },
    { value: "gt", label: "greater than", shape: "single" },
    { value: "gte", label: "at least", shape: "single" },
    { value: "lt", label: "less than", shape: "single" },
    { value: "lte", label: "at most", shape: "single" },
    { value: "between", label: "between", shape: "range" },
    { value: "isEmpty", label: "is empty", shape: "none" },
  ],
  date: [
    { value: "on", label: "is on", shape: "single" },
    { value: "before", label: "before", shape: "single" },
    { value: "after", label: "after", shape: "single" },
    { value: "between", label: "between", shape: "range" },
    { value: "isEmpty", label: "is empty", shape: "none" },
  ],
  choice: [
    { value: "is", label: "is", shape: "single" },
    { value: "isNot", label: "is not", shape: "single" },
    { value: "anyOf", label: "is any of", shape: "many" },
  ],
};

function operatorInfo(type: FilterFieldType, operator: FilterOperator) {
  const list = filterOperators[type];
  return list.find((o) => o.value === operator) ?? list[0];
}

function emptyValue(type: FilterFieldType, shape: Shape): FilterValue {
  if (shape === "none") return null;
  if (shape === "many") return [];
  if (shape === "range") return type === "number" ? [null, null] : ["", ""];
  return type === "number" ? null : "";
}

function filled(v: unknown) {
  return v != null && v !== "" && !(typeof v === "number" && Number.isNaN(v));
}

/** True when a condition has everything it needs to be applied. Incomplete ones are skipped. */
export function isConditionComplete(condition: FilterCondition, fields: FilterField[]) {
  const field = fields.find((f) => f.key === condition.field);
  if (!field) return false;
  const { shape } = operatorInfo(field.type, condition.operator);
  const v = condition.value;
  if (shape === "none") return true;
  if (shape === "many") return Array.isArray(v) && v.length > 0;
  if (shape === "range") return Array.isArray(v) && v.length === 2 && filled(v[0]) && filled(v[1]);
  return !Array.isArray(v) && filled(v);
}

function blank(v: unknown) {
  return v == null || v === "" || (Array.isArray(v) && v.length === 0);
}

/** A row value as YYYY-MM-DD, read in local time when it is a Date. */
function isoDay(v: unknown): string | null {
  if (v instanceof Date) {
    if (Number.isNaN(v.getTime())) return null;
    const pad = (n: number) => String(n).padStart(2, "0");
    return `${v.getFullYear()}-${pad(v.getMonth() + 1)}-${pad(v.getDate())}`;
  }
  if (typeof v === "string" && /^\d{4}-\d{2}-\d{2}/.test(v)) return v.slice(0, 10);
  return null;
}

function test(raw: unknown, type: FilterFieldType, operator: FilterOperator, value: FilterValue): boolean {
  if (operator === "isEmpty") return blank(raw);
  if (operator === "isNotEmpty") return !blank(raw);
  const pair = Array.isArray(value) ? value : [];

  if (type === "number") {
    const n = typeof raw === "number" ? raw : blank(raw) ? NaN : Number(raw);
    if (Number.isNaN(n)) return operator === "neq";
    const x = Number(value);
    switch (operator) {
      case "eq": return n === x;
      case "neq": return n !== x;
      case "gt": return n > x;
      case "gte": return n >= x;
      case "lt": return n < x;
      case "lte": return n <= x;
      case "between": {
        const [a, b] = [Number(pair[0]), Number(pair[1])];
        return n >= Math.min(a, b) && n <= Math.max(a, b);
      }
      default: return false;
    }
  }

  if (type === "date") {
    const day = isoDay(raw);
    if (!day) return false;
    switch (operator) {
      case "on": return day === value;
      case "before": return day < String(value);
      case "after": return day > String(value);
      case "between": {
        const [a, b] = [String(pair[0]), String(pair[1])].sort();
        return day >= a && day <= b;
      }
      default: return false;
    }
  }

  if (type === "choice") {
    const s = raw == null ? "" : String(raw);
    if (operator === "is") return s === value;
    if (operator === "isNot") return s !== value;
    if (operator === "anyOf") return pair.map(String).includes(s);
    return false;
  }

  const s = raw == null ? "" : String(raw).toLocaleLowerCase();
  const needle = String(value).toLocaleLowerCase();
  switch (operator) {
    case "contains": return s.includes(needle);
    case "notContains": return !s.includes(needle);
    case "is": return s === needle;
    case "isNot": return s !== needle;
    case "startsWith": return s.startsWith(needle);
    default: return false;
  }
}

/**
 * Whether a record passes the filter. Incomplete conditions are ignored, and a filter
 * with nothing complete lets every row through.
 */
export function matchesFilter(row: object, filter: Filter, fields: FilterField[]) {
  const record = row as Record<string, unknown>;
  const live = filter.conditions.filter((c) => isConditionComplete(c, fields));
  if (live.length === 0) return true;
  const check = (c: FilterCondition) => {
    const field = fields.find((f) => f.key === c.field);
    return field ? test(record[c.field], field.type, c.operator, c.value) : true;
  };
  return filter.combinator === "or" ? live.some(check) : live.every(check);
}

export type FilterBuilderProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  /** Names the group, such as "Invoice filters". */
  label: string;
  /** The fields people can filter on. */
  fields: FilterField[];
  value?: Filter;
  defaultValue?: Filter;
  /** Called with the whole filter after every edit. */
  onValueChange?: (filter: Filter) => void;
  /** Control height: s for toolbars and side panels. */
  size?: "s" | "m";
  /** Shown when there are no conditions. */
  empty?: string;
};

const START: Filter = { combinator: "and", conditions: [] };

export function FilterBuilder({
  label,
  fields,
  value,
  defaultValue = START,
  onValueChange,
  size = "m",
  empty = "No conditions. Every row is shown.",
  className,
  ...rest
}: FilterBuilderProps) {
  const uid = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const counter = useRef(0);
  const focusNext = useRef<string | null>(null);
  const [inner, setInner] = useState<Filter>(defaultValue);
  const [status, setStatus] = useState("");
  const filter = value ?? inner;

  useEffect(() => {
    const target = focusNext.current;
    if (!target) return;
    focusNext.current = null;
    rootRef.current?.querySelector<HTMLElement>(target)?.focus();
  });

  function commit(next: Filter) {
    if (value === undefined) setInner(next);
    onValueChange?.(next);
  }

  function newId() {
    const taken = new Set(filter.conditions.map((c) => c.id));
    let id = "";
    do id = `c${++counter.current}`;
    while (taken.has(id));
    return id;
  }

  function fresh(field: FilterField, id: string): FilterCondition {
    const op = filterOperators[field.type][0];
    return { id, field: field.key, operator: op.value, value: emptyValue(field.type, op.shape) };
  }

  function update(id: string, patch: (c: FilterCondition) => FilterCondition) {
    commit({ ...filter, conditions: filter.conditions.map((c) => (c.id === id ? patch(c) : c)) });
  }

  function add() {
    if (fields.length === 0) return;
    const condition = fresh(fields[0], newId());
    commit({ ...filter, conditions: [...filter.conditions, condition] });
    focusNext.current = `[data-condition="${condition.id}"] [data-control="field"]`;
    setStatus(`Condition ${filter.conditions.length + 1} added`);
  }

  function remove(id: string) {
    const list = filter.conditions;
    const i = list.findIndex((c) => c.id === id);
    const neighbour = list[i + 1] ?? list[i - 1];
    commit({ ...filter, conditions: list.filter((c) => c.id !== id) });
    focusNext.current = neighbour ? `[data-condition="${neighbour.id}"] [data-control="field"]` : "[data-control=\"add\"]";
    setStatus(`Condition ${i + 1} removed`);
  }

  function clear() {
    commit({ ...filter, conditions: [] });
    focusNext.current = "[data-control=\"add\"]";
    setStatus("All conditions removed");
  }

  function changeField(c: FilterCondition, key: string) {
    const field = fields.find((f) => f.key === key);
    if (field) update(c.id, () => fresh(field, c.id));
  }

  function changeOperator(c: FilterCondition, type: FilterFieldType, operator: FilterOperator) {
    const before = operatorInfo(type, c.operator).shape;
    const after = operatorInfo(type, operator).shape;
    update(c.id, (x) => ({ ...x, operator, value: before === after ? x.value : emptyValue(type, after) }));
  }

  const conditions = filter.conditions;

  return (
    <div
      role="group"
      aria-label={label}
      {...rest}
      ref={rootRef}
      className={["eq-filter-builder", className].filter(Boolean).join(" ")}
      data-size={size}
    >
      {conditions.length === 0 ? (
        <p className="eq-filter-builder-empty">{empty}</p>
      ) : (
        <ol className="eq-filter-builder-list">
          {conditions.map((c, i) => {
            const field = fields.find((f) => f.key === c.field) ?? fields[0];
            const n = i + 1;
            const info = operatorInfo(field.type, c.operator);
            return (
              <li key={c.id} className="eq-filter-builder-row" data-condition={c.id}>
                <span className="eq-filter-builder-lead">
                  {i === 0 ? (
                    "Where"
                  ) : i === 1 ? (
                    <select
                      className="eq-filter-builder-control eq-filter-builder-combinator"
                      aria-label="Match all or any conditions"
                      value={filter.combinator}
                      onChange={(e) => commit({ ...filter, combinator: e.currentTarget.value === "or" ? "or" : "and" })}
                    >
                      <option value="and">and</option>
                      <option value="or">or</option>
                    </select>
                  ) : (
                    filter.combinator
                  )}
                </span>
                <select
                  className="eq-filter-builder-control eq-filter-builder-field"
                  data-control="field"
                  aria-label={`Field for condition ${n}`}
                  value={field.key}
                  onChange={(e) => changeField(c, e.currentTarget.value)}
                >
                  {fields.map((f) => (
                    <option key={f.key} value={f.key}>
                      {f.label}
                    </option>
                  ))}
                </select>
                <select
                  className="eq-filter-builder-control eq-filter-builder-operator"
                  aria-label={`Operator for condition ${n}`}
                  value={info.value}
                  onChange={(e) => changeOperator(c, field.type, e.currentTarget.value as FilterOperator)}
                >
                  {filterOperators[field.type].map((o) => (
                    <option key={o.value} value={o.value}>
                      {o.label}
                    </option>
                  ))}
                </select>
                <span className="eq-filter-builder-value" data-shape={info.shape}>
                  <ValueInput
                    key={`${field.key}:${info.shape}`}
                    id={`${uid}${c.id}`}
                    n={n}
                    field={field}
                    shape={info.shape}
                    value={c.value}
                    onChange={(v) => update(c.id, (x) => ({ ...x, value: v }))}
                  />
                </span>
                <button
                  type="button"
                  className="eq-filter-builder-remove"
                  aria-label={`Remove condition ${n}`}
                  title="Remove condition"
                  onClick={() => remove(c.id)}
                >
                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
                    <path d="m5 5 6 6m0-6-6 6" />
                  </svg>
                </button>
              </li>
            );
          })}
        </ol>
      )}
      <div className="eq-filter-builder-footer">
        <button type="button" className="eq-filter-builder-add" data-control="add" onClick={add} disabled={fields.length === 0}>
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
            <path d="M8 3.5v9M3.5 8h9" />
          </svg>
          Add condition
        </button>
        {conditions.length > 1 && (
          <button type="button" className="eq-filter-builder-clear" onClick={clear}>
            Clear all
          </button>
        )}
      </div>
      <span className="eq-filter-builder-status" role="status">
        {status}
      </span>
    </div>
  );
}

function ValueInput({
  id,
  n,
  field,
  shape,
  value,
  onChange,
}: {
  id: string;
  n: number;
  field: FilterField;
  shape: Shape;
  value: FilterValue;
  onChange: (value: FilterValue) => void;
}) {
  if (shape === "none") return null;
  const pair = Array.isArray(value) ? value : [null, null];
  const name = `Value for condition ${n}`;

  if (shape === "many") {
    const chosen = Array.isArray(value) ? value.map(String) : [];
    return (
      <fieldset className="eq-filter-builder-choices">
        <legend className="eq-filter-builder-legend">{name}</legend>
        {(field.options ?? []).map((o) => (
          <label key={o.value} className="eq-filter-builder-choice">
            <input
              type="checkbox"
              checked={chosen.includes(o.value)}
              onChange={(e) =>
                onChange(
                  e.currentTarget.checked
                    ? (field.options ?? []).map((x) => x.value).filter((v) => v === o.value || chosen.includes(v))
                    : chosen.filter((v) => v !== o.value),
                )
              }
            />
            <span>{o.label}</span>
          </label>
        ))}
      </fieldset>
    );
  }

  if (field.type === "choice") {
    return (
      <select
        className="eq-filter-builder-control eq-filter-builder-input"
        aria-label={name}
        value={typeof value === "string" ? value : ""}
        onChange={(e) => onChange(e.currentTarget.value)}
      >
        <option value="" disabled>
          Choose…
        </option>
        {(field.options ?? []).map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
    );
  }

  if (shape === "range") {
    const set = (i: 0 | 1, v: string | number | null) => onChange(i === 0 ? [v, pair[1] ?? null] : [pair[0] ?? null, v]);
    return (
      <>
        <Single id={`${id}a`} type={field.type} label={`From, condition ${n}`} value={pair[0] ?? null} onChange={(v) => set(0, v)} />
        <span className="eq-filter-builder-and" aria-hidden="true">
          and
        </span>
        <Single id={`${id}b`} type={field.type} label={`To, condition ${n}`} value={pair[1] ?? null} onChange={(v) => set(1, v)} />
      </>
    );
  }

  return (
    <Single
      id={id}
      type={field.type}
      label={name}
      value={Array.isArray(value) ? null : value}
      onChange={onChange}
    />
  );
}

function Single({
  id,
  type,
  label,
  value,
  onChange,
}: {
  id: string;
  type: FilterFieldType;
  label: string;
  value: string | number | null;
  onChange: (value: string | number | null) => void;
}) {
  // A number field keeps its own text, so "1." or "-" survive while being typed.
  const [text, setText] = useState(value == null ? "" : String(value));
  const parsed = text.trim() === "" || Number.isNaN(Number(text)) ? null : Number(text);
  if (type === "number" && parsed !== value && !(parsed === null && value === null)) {
    const next = value == null ? "" : String(value);
    if (next !== text) setText(next);
  }

  if (type === "number") {
    return (
      <input
        id={id}
        className="eq-filter-builder-control eq-filter-builder-input"
        type="text"
        inputMode="decimal"
        autoComplete="off"
        aria-label={label}
        placeholder="0"
        value={text}
        onChange={(e: ChangeEvent<HTMLInputElement>) => {
          const raw = e.currentTarget.value;
          setText(raw);
          const n = raw.trim() === "" ? null : Number(raw);
          onChange(n == null || Number.isNaN(n) ? null : n);
        }}
      />
    );
  }

  return (
    <input
      id={id}
      className="eq-filter-builder-control eq-filter-builder-input"
      type={type === "date" ? "date" : "text"}
      autoComplete="off"
      aria-label={label}
      placeholder={type === "date" ? undefined : "Value"}
      value={typeof value === "string" ? value : value == null ? "" : String(value)}
      onChange={(e) => onChange(e.currentTarget.value)}
    />
  );
}