"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { formatDateDE } from "@/lib/orderConstants";

export type ClientOption = { id: string; name: string; email: string; birthDate: string | null };

function label(c: ClientOption) {
  return `${c.name} (${c.email})`;
}

// Ersetzt ein langes <select> (unpraktisch bei vielen Kunden, siehe
// Nutzer-Screenshot 15.09.2026) durch ein Suchfeld — filtert clientseitig
// über die bereits geladene Kundenliste nach Name, E-Mail UND Geburtsdatum,
// damit sich z. B. Namensvetter darüber unterscheiden lassen.
export function ClientSearchField({
  clients,
  value,
  onChange,
  placeholder = "Name, E-Mail oder Geburtsdatum suchen…",
}: {
  clients: ClientOption[];
  value: ClientOption | null;
  onChange: (client: ClientOption | null) => void;
  placeholder?: string;
}) {
  const [query, setQuery] = useState(value ? label(value) : "");
  const [open, setOpen] = useState(false);
  const boxRef = useRef<HTMLDivElement>(null);

  const results = useMemo(() => {
    const q = query.trim().toLowerCase();
    const isCurrentSelection = value && label(value) === query;
    if (!q || isCurrentSelection) return clients.slice(0, 50);
    return clients
      .filter((c) => {
        const birth = c.birthDate ? formatDateDE(c.birthDate) : "";
        return c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q) || birth.includes(q);
      })
      .slice(0, 50);
  }, [clients, query, value]);

  useEffect(() => {
    function onOutsideClick(e: MouseEvent) {
      if (boxRef.current && !boxRef.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener("mousedown", onOutsideClick);
    return () => document.removeEventListener("mousedown", onOutsideClick);
  }, []);

  return (
    <div ref={boxRef} className="relative">
      <input
        type="text"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          onChange(null);
          setOpen(true);
        }}
        onFocus={() => setOpen(true)}
        placeholder={placeholder}
        autoComplete="off"
        className="w-full bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
      />
      {open && (
        <div className="absolute z-20 mt-1.5 w-full max-h-64 overflow-y-auto bg-[var(--rk-surface)] border border-white/15 rounded-lg shadow-xl shadow-black/40">
          {results.length === 0 ? (
            <p className="px-3.5 py-2.5 text-sm text-[var(--rk-ink-muted)]">Keine Treffer.</p>
          ) : (
            results.map((c) => (
              <button
                key={c.id}
                type="button"
                onClick={() => {
                  onChange(c);
                  setQuery(label(c));
                  setOpen(false);
                }}
                className="block w-full text-left px-3.5 py-2.5 hover:bg-white/5 transition-colors border-b border-white/5 last:border-b-0"
              >
                <p className="text-sm text-[var(--rk-ink)]">{c.name}</p>
                <p className="text-xs text-[var(--rk-ink-muted)]">
                  {c.email}
                  {c.birthDate && <> · {formatDateDE(c.birthDate)}</>}
                </p>
              </button>
            ))
          )}
        </div>
      )}
    </div>
  );
}