"use client";

import { useRef, useState, type KeyboardEvent } from "react";

// Interaktiver Tag-Editor: tippen + Enter (oder Komma) legt einen Chip an,
// × entfernt ihn, Backspace im leeren Feld löscht den letzten. Sendet weiter
// ein komma-getrenntes verstecktes `name`-Feld — der Server-Vertrag
// (updatePortfolioItemAction / updateBlogPostAction …) bleibt unverändert.
export function TagInput({
  name,
  defaultValue = "",
  placeholder = "Tag eingeben, dann Enter",
  quickTags = [],
}: {
  name: string;
  defaultValue?: string;
  placeholder?: string;
  quickTags?: string[];
}) {
  const [tags, setTags] = useState<string[]>(() => {
    const seen = new Set<string>();
    return defaultValue
      .split(",")
      .map((t) => t.trim())
      .filter(Boolean)
      .filter((t) => {
        const k = t.toLowerCase();
        if (seen.has(k)) return false;
        seen.add(k);
        return true;
      });
  });
  const [draft, setDraft] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const add = (raw: string) => {
    const t = raw.replace(/,/g, " ").trim();
    if (!t) {
      setDraft("");
      return;
    }
    setTags((prev) => (prev.some((x) => x.toLowerCase() === t.toLowerCase()) ? prev : [...prev, t]));
    setDraft("");
  };
  const remove = (t: string) => setTags((prev) => prev.filter((x) => x !== t));

  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      add(draft);
    } else if (e.key === "Backspace" && draft === "" && tags.length) {
      e.preventDefault();
      remove(tags[tags.length - 1]);
    }
  };

  return (
    <div className="flex flex-col gap-1.5">
      {quickTags.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {quickTags.map((q) => (
            <button
              key={q}
              type="button"
              onClick={() => add(q)}
              className="rounded-full border border-white/15 px-3 py-1 text-xs text-[var(--rk-ink-muted)] transition-colors hover:border-white/40 hover:text-[var(--rk-ink)]"
            >
              + {q}
            </button>
          ))}
        </div>
      )}
      <div
        onClick={() => inputRef.current?.focus()}
        className="flex flex-wrap items-center gap-1.5 rounded-lg border border-white/15 bg-transparent px-2 py-1.5 focus-within:border-white/50"
      >
        {tags.map((t) => (
          <span
            key={t}
            className="inline-flex items-center gap-1 rounded-full border border-white/20 bg-white/5 px-2 py-0.5 text-xs"
          >
            {t}
            <button
              type="button"
              onClick={() => remove(t)}
              aria-label={`${t} entfernen`}
              className="text-[var(--rk-ink-muted)] transition-colors hover:text-[var(--rk-ink)]"
            >
              ×
            </button>
          </span>
        ))}
        <input
          ref={inputRef}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={onKeyDown}
          onBlur={() => add(draft)}
          placeholder={tags.length ? "" : placeholder}
          className="min-w-[8rem] flex-1 bg-transparent px-1 py-0.5 text-sm focus:outline-none"
        />
      </div>
      <input type="hidden" name={name} value={tags.join(", ")} />
    </div>
  );
}