'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Search, FileText, Clipboard, Image, Loader2 } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { useSearchSuggestions } from '@/hooks/use-search';

/** Search suggestion item returned from the API */
interface SearchSuggestion {
  uuid: string;
  id?: string | number; // Excluded from API responses (ADR-019)
  type: string;
  title: string;
  documentNumber?: string;
}

function useDebounceValue<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
}

export function GlobalSearch() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');

  const debouncedQuery = useDebounceValue(query, 300);

  const { data: suggestions, isLoading } = useSearchSuggestions(debouncedQuery);

  useEffect(() => {
    if (debouncedQuery.length > 2 && suggestions && suggestions.length > 0) {
      setOpen(true);
    } else {
      if (debouncedQuery.length === 0) setOpen(false);
    }
  }, [debouncedQuery, suggestions]);

  const handleSearch = () => {
    if (query.trim()) {
      router.push(`/search?q=${encodeURIComponent(query)}`);
      setOpen(false);
    }
  };

  const getIcon = (type: string) => {
    switch (type) {
      case 'correspondence':
        return <FileText className="mr-2 h-4 w-4" />;
      case 'rfa':
        return <Clipboard className="mr-2 h-4 w-4" />;
      case 'drawing':
        return <Image className="mr-2 h-4 w-4" />;
      default:
        return <Search className="mr-2 h-4 w-4" />;
    }
  };

  return (
    <div className="relative w-full max-w-sm">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              type="search"
              placeholder="Search documents..."
              className="pl-8 w-full bg-background"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              onFocus={() => {
                if (suggestions && suggestions.length > 0) setOpen(true);
              }}
            />
            {isLoading && <Loader2 className="absolute right-2.5 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />}
          </div>
        </PopoverTrigger>
        <PopoverContent
          className="p-0 w-[var(--radix-popover-trigger-width)]"
          align="start"
          onOpenAutoFocus={(e) => e.preventDefault()}
        >
          <Command>
            <CommandList>
              {suggestions && suggestions.length > 0 && (
                <CommandGroup heading="Suggestions">
                  {(suggestions as SearchSuggestion[]).map((item) => (
                    <CommandItem
                      key={`${item.type}-${item.uuid}`}
                      onSelect={() => {
                        setQuery(item.title);
                        // ADR-019: Use UUID for public routes
                        router.push(`/${item.type}s/${item.uuid}`);
                        setOpen(false);
                      }}
                    >
                      {getIcon(item.type)}
                      <span className="truncate">{item.title}</span>
                      <span className="ml-auto text-xs text-muted-foreground">{item.documentNumber}</span>
                    </CommandItem>
                  ))}
                </CommandGroup>
              )}
              {(!suggestions || suggestions.length === 0) && !isLoading && (
                <div className="py-6 text-center text-sm text-muted-foreground">No suggestions found.</div>
              )}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  );
}