Tag Input

"use client";

import { useId, useRef, useState, type KeyboardEvent } from "react";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TagInputProps {
  label?: string;
  hint?: string;
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (tags: string[]) => void;
  placeholder?: string;
  /** Suggestions shown as quick-add chips below. */
  suggestions?: string[];
  max?: number;
  className?: string;
}

/** Glass chip input: type and press Enter / comma to add, Backspace to remove the last, click × to remove; quick-add suggestions and a max count. */
export function TagInput({
  label = "Invite participants",
  hint = "Press Enter or comma to add. Halo sends them the recap.",
  value,
  defaultValue = ["amara@lumen.io", "leo@lumen.io"],
  onValueChange,
  placeholder = "name@company.com",
  suggestions = ["sofia@lumen.io", "noah@lumen.io", "jin@lumen.io"],
  max = 10,
  className,
}: TagInputProps) {
  const id = useId();
  const [inner, setInner] = useState(defaultValue);
  const tags = value ?? inner;
  const [draft, setDraft] = useState("");
  const input = useRef<HTMLInputElement>(null);
  const set = (next: string[]) => {
    setInner(next);
    onValueChange?.(next);
  };
  const add = (t: string) => {
    const v = t.trim().replace(/,$/, "");
    if (!v || tags.includes(v) || tags.length >= max) return;
    set([...tags, v]);
    setDraft("");
  };
  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      add(draft);
    } else if (e.key === "Backspace" && !draft && tags.length) {
      set(tags.slice(0, -1));
    }
  };

  return (
    <div className={cn("grid gap-2", className)}>
      <label htmlFor={id} className="text-sm font-semibold">
        {label}
      </label>
      <div
        onClick={() => input.current?.focus()}
        className="da-stroke flex min-h-12 flex-wrap items-center gap-1.5 rounded-da-md bg-da-input p-2 backdrop-blur-da backdrop-saturate-150 has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring"
      >
        <ul className="contents" aria-label="Added">
          {tags.map((t) => (
            <li
              key={t}
              className="inline-flex items-center gap-1 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent py-1 pr-1 pl-3 text-sm font-medium text-da-primary-fg"
            >
              {t}
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  set(tags.filter((x) => x !== t));
                }}
                aria-label={`Remove ${t}`}
                className="da-focus grid size-5 place-items-center rounded-full hover:bg-da-primary-fg/20"
              >
                <X aria-hidden className="size-3" />
              </button>
            </li>
          ))}
        </ul>
        <input
          ref={input}
          id={id}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={onKey}
          onBlur={() => add(draft)}
          placeholder={tags.length ? "" : placeholder}
          disabled={tags.length >= max}
          aria-describedby={`${id}-hint`}
          className="min-w-32 flex-1 bg-transparent px-2 py-1 text-sm outline-none placeholder:text-da-muted-fg"
        />
      </div>
      <p id={`${id}-hint`} className="text-xs text-da-muted-fg">
        {hint} {tags.length}/{max}
      </p>
      {suggestions.filter((s) => !tags.includes(s)).length > 0 && (
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="text-xs text-da-muted-fg">Suggested:</span>
          {suggestions
            .filter((s) => !tags.includes(s))
            .map((s) => (
              <button
                key={s}
                type="button"
                onClick={() => add(s)}
                className="da-focus da-transition da-stroke rounded-da-pill bg-da-surface px-2.5 py-0.5 text-xs hover:bg-da-secondary"
              >
                + {s}
              </button>
            ))}
        </div>
      )}
    </div>
  );
}

export default TagInput;