logbuch/components/ObjektSelector.tsx

'use client';

import { useEffect, useState } from 'react';
import type { ObjektOption, SelectedObjekt } from '@/types/logbuch';
import CustomSelect from './CustomSelect';

interface Props {
  selected: SelectedObjekt[];
  onChange: (objekte: SelectedObjekt[]) => void;
}

export default function ObjektSelector({ selected, onChange }: Props) {
  const [all, setAll] = useState<ObjektOption[]>([]);
  const [newName, setNewName] = useState('');
  const [showNewInput, setShowNewInput] = useState(false);

  useEffect(() => {
    fetch('/api/objekte')
      .then((r) => { if (!r.ok) throw new Error('Fehler'); return r.json(); })
      .then(setAll)
      .catch(() => {});
  }, []);

  const selectedNames = new Set(selected.map((o) => o.Name.toLowerCase()));
  const available = all.filter((o) => !selectedNames.has(o.Name.toLowerCase()));

  function add(value: string) {
    const obj = all.find((o) => o.ID === parseInt(value));
    if (obj && !selectedNames.has(obj.Name.toLowerCase())) {
      onChange([...selected, { ID: obj.ID, Name: obj.Name }]);
    }
  }

  function addNew() {
    const name = newName.trim();
    if (!name || selectedNames.has(name.toLowerCase())) return;
    onChange([...selected, { ID: null, Name: name }]);
    setNewName('');
    setShowNewInput(false);
  }

  function remove(name: string) {
    onChange(selected.filter((o) => o.Name !== name));
  }

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-2">
        {selected.map((o) => (
          <span
            key={o.Name}
            className="inline-flex items-center gap-2 bg-green-100 text-green-800 text-base px-3 py-1.5 rounded-full"
          >
            {o.Name}
            <button
              type="button"
              onClick={() => remove(o.Name)}
              className="flex items-center justify-center w-7 h-7 rounded-full text-green-600 hover:bg-red-100 hover:text-red-600 font-bold text-xl leading-none"
              aria-label={`${o.Name} entfernen`}
            >
              ×
            </button>
          </span>
        ))}
      </div>

      <div className="flex gap-2">
        {available.length > 0 && (
          <div className="flex-1">
            <CustomSelect
              placeholder="+ Objekte hinzufügen"
              options={available.map((o) => ({ value: String(o.ID), label: o.Name }))}
              onChange={add}
              keepOpen
            />
          </div>
        )}
        <button
          type="button"
          onClick={() => setShowNewInput((v) => !v)}
          className="px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-700 hover:bg-gray-50 whitespace-nowrap"
        >
          + Neu
        </button>
      </div>

      {showNewInput && (
        <div className="flex gap-2">
          <input
            type="text"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }}
            placeholder="Objektname eingeben"
            className="flex-1 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
            autoFocus
          />
          <button
            type="button"
            onClick={addNew}
            className="px-4 py-2 bg-green-600 text-white text-base rounded-lg hover:bg-green-700"
          >
            OK
          </button>
          <button
            type="button"
            onClick={() => { setShowNewInput(false); setNewName(''); }}
            className="px-4 py-2 bg-gray-200 text-gray-700 text-base rounded-lg hover:bg-gray-300"
          >
            ✕
          </button>
        </div>
      )}
    </div>
  );
}