'use client';

import { useRouter } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';

/**
 * Suchfeld für die Handouts. Sucht beim Tippen mit kurzer Verzögerung, damit
 * nicht bei jedem Buchstaben eine Anfrage losgeht, und funktioniert auch ohne
 * JavaScript – dann eben erst beim Absenden.
 */
export function Suchfeld({ anfangswert }: { anfangswert: string }) {
  const [wert, setzeWert] = useState(anfangswert);
  const router = useRouter();
  const erstesMal = useRef(true);

  useEffect(() => {
    if (erstesMal.current) {
      erstesMal.current = false;
      return;
    }

    const zeitgeber = setTimeout(() => {
      const ziel = wert.trim() ? `/handouts?suche=${encodeURIComponent(wert.trim())}` : '/handouts';
      router.replace(ziel, { scroll: false });
    }, 250);

    return () => clearTimeout(zeitgeber);
  }, [wert, router]);

  return (
    <form action="/handouts" method="get" role="search" className="nicht-drucken">
      <label htmlFor="suche" className="nur-lesehilfe">
        Handouts durchsuchen
      </label>
      <div className="reihe" style={{ gap: '0.5rem', flexWrap: 'nowrap' }}>
        <input
          id="suche"
          name="suche"
          type="search"
          placeholder="Suchen – z. B. Subnetting, SMART, Vererbung"
          value={wert}
          onChange={(e) => setzeWert(e.target.value)}
          autoComplete="off"
        />
        <button type="submit" className="knopf knopf-zweit" style={{ flexShrink: 0 }}>
          Suchen
        </button>
      </div>
    </form>
  );
}