"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";

type SearchResult = { id: string; label: string; sub: string };
type SearchResponse = {
  orders: SearchResult[];
  clients: SearchResult[];
  documents: SearchResult[];
  intranet: SearchResult[];
  portfolio: SearchResult[];
  blog: SearchResult[];
  todos: SearchResult[];
};

const EMPTY: SearchResponse = { orders: [], clients: [], documents: [], intranet: [], portfolio: [], blog: [], todos: [] };

export function GlobalSearchBox() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<SearchResponse>(EMPTY);
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (query.trim().length < 2) {
      setResults(EMPTY);
      return;
    }
    const handle = setTimeout(() => {
      fetch(`/api/admin/search?q=${encodeURIComponent(query.trim())}`)
        .then((r) => r.json())
        .then((data: SearchResponse) => setResults(data))
        .catch(() => setResults(EMPTY));
    }, 250);
    return () => clearTimeout(handle);
  }, [query]);

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

  const hasResults =
    results.orders.length +
      results.clients.length +
      results.documents.length +
      results.intranet.length +
      results.portfolio.length +
      results.blog.length +
      results.todos.length >
    0;

  return (
    <div ref={containerRef} className="relative ml-auto">
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onFocus={() => setOpen(true)}
        onKeyDown={(e) => e.key === "Escape" && setOpen(false)}
        placeholder="Suchen…"
        className="w-40 sm:w-56 bg-transparent border border-white/15 rounded-full px-3.5 py-1.5 text-xs normal-case tracking-normal focus:outline-none focus:border-white/50 focus:w-64 transition-[width]"
      />
      {open && query.trim().length >= 2 && (
        <div className="absolute right-0 top-full mt-1.5 w-72 max-h-96 overflow-y-auto bg-[var(--rk-surface)] border border-white/10 rounded-xl p-2 shadow-xl shadow-black/40 z-50 normal-case tracking-normal">
          {!hasResults && <p className="text-xs text-[var(--rk-ink-muted)] px-2 py-2">Keine Treffer.</p>}
          <ResultGroup title="Aufträge" items={results.orders} hrefPrefix="/de/admin/orders" onNavigate={() => setOpen(false)} />
          <ResultGroup title="Kunden" items={results.clients} hrefPrefix="/de/admin/clients" onNavigate={() => setOpen(false)} />
          {results.documents.length > 0 && (
            <div className="mb-1">
              <p className="text-[0.6rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] px-2 pt-1.5 pb-1">Dokumente</p>
              {results.documents.map((d) => (
                <Link
                  key={d.id}
                  href="/de/admin/documents"
                  onClick={() => setOpen(false)}
                  className="block px-2 py-1.5 rounded-lg text-xs hover:bg-white/5 transition-colors"
                >
                  <span className="text-[var(--rk-ink)]">{d.label}</span>
                  {d.sub && <span className="text-[var(--rk-ink-muted)]"> · {d.sub}</span>}
                </Link>
              ))}
            </div>
          )}
          {results.intranet.length > 0 && (
            <div className="mb-1">
              <p className="text-[0.6rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] px-2 pt-1.5 pb-1">Intranet</p>
              {results.intranet.map((a) => (
                <Link
                  key={a.id}
                  href={`/de/admin/intranet?open=${a.id}#intranet-article-${a.id}`}
                  onClick={() => setOpen(false)}
                  className="block px-2 py-1.5 rounded-lg text-xs hover:bg-white/5 transition-colors"
                >
                  <span className="text-[var(--rk-ink)]">{a.label}</span>
                  {a.sub && <span className="text-[var(--rk-ink-muted)]"> · {a.sub}</span>}
                </Link>
              ))}
            </div>
          )}
          <StaticResultGroup title="Portfolio" items={results.portfolio} href="/de/admin/portfolio" onNavigate={() => setOpen(false)} />
          <StaticResultGroup title="Blog" items={results.blog} href="/de/admin/blog" onNavigate={() => setOpen(false)} />
          <StaticResultGroup title="ToDos" items={results.todos} href="/de/admin/todos" onNavigate={() => setOpen(false)} />
        </div>
      )}
    </div>
  );
}

// Für Bereiche ohne eigene Detailseite pro Eintrag (Portfolio/Blog/ToDos sind
// Listenseiten mit Inline-Bearbeitung) — verlinkt auf die Übersichtsseite
// statt eine nicht existierende Detail-URL zu erfinden.
function StaticResultGroup({
  title,
  items,
  href,
  onNavigate,
}: {
  title: string;
  items: SearchResult[];
  href: string;
  onNavigate: () => void;
}) {
  if (items.length === 0) return null;
  return (
    <div className="mb-1">
      <p className="text-[0.6rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] px-2 pt-1.5 pb-1">{title}</p>
      {items.map((item) => (
        <Link
          key={item.id}
          href={href}
          onClick={onNavigate}
          className="block px-2 py-1.5 rounded-lg text-xs hover:bg-white/5 transition-colors"
        >
          <span className="text-[var(--rk-ink)]">{item.label}</span>
          {item.sub && <span className="text-[var(--rk-ink-muted)]"> · {item.sub}</span>}
        </Link>
      ))}
    </div>
  );
}

function ResultGroup({
  title,
  items,
  hrefPrefix,
  onNavigate,
}: {
  title: string;
  items: SearchResult[];
  hrefPrefix: string;
  onNavigate: () => void;
}) {
  if (items.length === 0) return null;
  return (
    <div className="mb-1">
      <p className="text-[0.6rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] px-2 pt-1.5 pb-1">{title}</p>
      {items.map((item) => (
        <Link
          key={item.id}
          href={`${hrefPrefix}/${item.id}`}
          onClick={onNavigate}
          className="block px-2 py-1.5 rounded-lg text-xs hover:bg-white/5 transition-colors"
        >
          <span className="text-[var(--rk-ink)]">{item.label}</span>
          {item.sub && <span className="text-[var(--rk-ink-muted)]"> · {item.sub}</span>}
        </Link>
      ))}
    </div>
  );
}