'use client';

import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type FormEvent,
  type KeyboardEvent,
} from 'react';
import { useRouter } from 'next/navigation';
import { Briefcase, Search } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { getCategoryTl } from '@/lib/categoryTl';
import { useLanguage } from '@/contexts/LanguageContext';
import {
  categorySearchKeywords,
  matchesExpandedSearch,
} from '@ehandyhire/shared';
import { cn } from '@/lib/utils';

type CategorySuggest = {
  id: string;
  name: string;
  slug: string;
  icon?: string;
};

type SuggestItem =
  | { kind: 'trade'; category: CategorySuggest }
  | { kind: 'search-all'; query: string };

interface HomeSearchBoxProps {
  categories: CategorySuggest[];
  workersHref: string;
  className?: string;
}

export function HomeSearchBox({
  categories,
  workersHref,
  className,
}: HomeSearchBoxProps) {
  const { t, lang } = useLanguage();
  const router = useRouter();
  const listId = useId();
  const rootRef = useRef<HTMLFormElement>(null);
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);

  const tradeHits = useMemo(() => {
    const q = query.trim();
    if (q.length < 1) return [];
    return categories
      .filter((cat) => cat.slug !== 'other')
      .filter((cat) => {
        const tl = getCategoryTl(cat.slug)?.nameTl ?? '';
        const haystack = [cat.name, tl, categorySearchKeywords(cat.slug, cat.name)].join(' ');
        return matchesExpandedSearch(haystack, q);
      })
      .slice(0, 8);
  }, [categories, query]);

  const items: SuggestItem[] = useMemo(() => {
    const q = query.trim();
    if (!q) return [];

    const next: SuggestItem[] = tradeHits.map((category) => ({ kind: 'trade' as const, category }));
    next.push({ kind: 'search-all', query: q });
    return next;
  }, [query, tradeHits]);

  const showPanel = open && query.trim().length > 0;

  useEffect(() => {
    setActiveIndex(0);
  }, [query, tradeHits.length]);

  useEffect(() => {
    const onPointerDown = (event: MouseEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', onPointerDown);
    return () => document.removeEventListener('mousedown', onPointerDown);
  }, []);

  const goToItem = useCallback(
    (item: SuggestItem) => {
      setOpen(false);
      if (item.kind === 'trade') {
        router.push(`/category/${item.category.slug}`);
        return;
      }
      router.push(`${workersHref}?search=${encodeURIComponent(item.query)}`);
    },
    [router, workersHref]
  );

  const submitSearch = (e?: FormEvent) => {
    e?.preventDefault();
    const q = query.trim();
    if (showPanel && items[activeIndex]) {
      goToItem(items[activeIndex]);
      return;
    }
    router.push(q ? `${workersHref}?search=${encodeURIComponent(q)}` : workersHref);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (!showPanel || items.length === 0) {
      if (e.key === 'Escape') setOpen(false);
      return;
    }

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setActiveIndex((i) => (i + 1) % items.length);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setActiveIndex((i) => (i - 1 + items.length) % items.length);
    } else if (e.key === 'Escape') {
      e.preventDefault();
      setOpen(false);
    } else if (e.key === 'Enter') {
      e.preventDefault();
      goToItem(items[activeIndex] ?? { kind: 'search-all', query: query.trim() });
    }
  };

  return (
    <form
      ref={rootRef}
      className={cn('home-search relative z-30', className)}
      onSubmit={submitSearch}
      role="search"
    >
      <div className="relative z-30 min-w-0 w-full flex-1">
        <Search className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-slate-400" />
        <input
          type="search"
          role="combobox"
          aria-expanded={showPanel}
          aria-controls={listId}
          aria-autocomplete="list"
          aria-activedescendant={
            showPanel && items[activeIndex] ? `${listId}-option-${activeIndex}` : undefined
          }
          placeholder={t(
            'Search by skill or trade (e.g. mekaniko, labandera)…',
            'Maghanap ayon sa kasanayan o trabaho (hal. mechanic, laundry)…'
          )}
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          onKeyDown={onKeyDown}
          autoComplete="off"
          aria-label={t('Search trades', 'Maghanap ng trabaho')}
        />

        {showPanel && (
          <div
            id={listId}
            role="listbox"
            className="absolute left-0 right-0 top-[calc(100%+0.35rem)] z-[60] max-h-[min(22rem,70vh)] overflow-y-auto border border-[#e2ddd2] bg-[#fffdf9] shadow-xl sm:left-[-0.4rem] sm:right-auto sm:w-[min(100vw-2rem,28rem)]"
          >
            {tradeHits.length > 0 ? (
              <div className="border-b border-[#e2ddd2]">
                <p className="px-3 pt-2.5 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted">
                  {t('Trades', 'Mga trabaho')}
                </p>
                {items.map((item, index) => {
                  if (item.kind !== 'trade') return null;
                  const cat = item.category;
                  const tl = getCategoryTl(cat.slug)?.nameTl;
                  const label = lang === 'tl' && tl ? tl : cat.name;
                  const active = index === activeIndex;
                  return (
                    <button
                      key={`trade-${cat.id}`}
                      id={`${listId}-option-${index}`}
                      type="button"
                      role="option"
                      aria-selected={active}
                      className={cn(
                        'flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors',
                        active ? 'bg-[var(--home-sand)]' : 'hover:bg-[var(--home-sand)]/70'
                      )}
                      onMouseEnter={() => setActiveIndex(index)}
                      onClick={() => goToItem(item)}
                    >
                      <span className="flex h-9 w-9 shrink-0 items-center justify-center border border-[#e2ddd2] bg-white text-lg">
                        {cat.icon || '🔧'}
                      </span>
                      <span className="min-w-0 flex-1">
                        <span className="block truncate text-sm font-semibold text-slate-900">
                          {label}
                        </span>
                        {tl && lang !== 'tl' ? (
                          <span className="block truncate text-xs text-muted">{tl}</span>
                        ) : lang === 'tl' && tl ? (
                          <span className="block truncate text-xs text-muted">{cat.name}</span>
                        ) : null}
                      </span>
                      <Briefcase className="h-3.5 w-3.5 shrink-0 text-[var(--home-amber)]" />
                    </button>
                  );
                })}
              </div>
            ) : (
              <p className="border-b border-[#e2ddd2] px-3 py-3 text-sm text-muted">
                {t('No matching trades', 'Walang tumugmang trabaho')}
              </p>
            )}

            {items.map((item, index) => {
              if (item.kind !== 'search-all') return null;
              const active = index === activeIndex;
              return (
                <button
                  key="search-all"
                  id={`${listId}-option-${index}`}
                  type="button"
                  role="option"
                  aria-selected={active}
                  className={cn(
                    'flex w-full items-center gap-3 px-3 py-3 text-left transition-colors',
                    active ? 'bg-[var(--home-sand)]' : 'hover:bg-[var(--home-sand)]/70'
                  )}
                  onMouseEnter={() => setActiveIndex(index)}
                  onClick={() => goToItem(item)}
                >
                  <span className="flex h-9 w-9 shrink-0 items-center justify-center bg-[var(--home-amber)] text-white">
                    <Search className="h-4 w-4" />
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block text-sm font-semibold text-slate-900">
                      {t(`Search all for “${item.query}”`, `Hanapin lahat para sa “${item.query}”`)}
                    </span>
                    <span className="block text-xs text-muted">
                      {t('Browse the full workers directory', 'Tingnan ang buong workers directory')}
                    </span>
                  </span>
                </button>
              );
            })}
          </div>
        )}
      </div>

      <Button
        type="submit"
        size="lg"
        className="w-full border-0 bg-[var(--home-amber)] text-white shadow-none hover:bg-[var(--home-amber-soft)] sm:w-auto"
      >
        {t('Find workers', 'Hanapin')}
      </Button>
    </form>
  );
}