"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { setClientTagsAction } from "@/lib/actions/clientAccounts";

export function ClientTagsPanel({ clientId, tags }: { clientId: string; tags: string[] }) {
  const [current, setCurrent] = useState(tags);
  const [input, setInput] = useState("");
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  function persist(next: string[]) {
    setCurrent(next);
    startTransition(async () => {
      await setClientTagsAction(clientId, next);
      router.refresh();
    });
  }

  function addTag() {
    const value = input.trim();
    if (!value || current.includes(value)) return setInput("");
    persist([...current, value]);
    setInput("");
  }

  function removeTag(tag: string) {
    persist(current.filter((t) => t !== tag));
  }

  return (
    <div className="mb-8">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2">Tags</p>
      <div className="flex flex-wrap items-center gap-1.5">
        {current.map((tag) => (
          <span
            key={tag}
            className="flex items-center gap-1.5 text-[0.65rem] border border-white/15 rounded-full pl-2.5 pr-1.5 py-1 text-[var(--rk-ink-muted)]"
          >
            {tag}
            <button
              type="button"
              disabled={pending}
              onClick={() => removeTag(tag)}
              className="hover:text-red-400 transition-colors disabled:opacity-50"
              aria-label={`„${tag}" entfernen`}
            >
              ✕
            </button>
          </span>
        ))}
        <input
          value={input}
          disabled={pending}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              addTag();
            }
          }}
          placeholder="+ Tag hinzufügen…"
          className="bg-transparent border border-dashed border-white/15 rounded-full px-2.5 py-1 text-[0.65rem] w-32 focus:outline-none focus:border-white/50 disabled:opacity-50"
        />
      </div>
    </div>
  );
}