'use client';

import { useCallback } from 'react';

import { useRouter, useSearchParams, usePathname } from 'next/navigation';

import { ModuleSearch } from '@kit/module-builder/components';

import { encodeFilters, decodeFilters } from './_lib/filter-params';

interface FieldOption {
  name: string;
  display_name: string;
  show_in_filter: boolean;
  show_in_search: boolean;
}

interface ModuleSearchBarProps {
  fields: FieldOption[];
}

export function ModuleSearchBar({ fields }: ModuleSearchBarProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const currentSearch = searchParams.get('q') ?? '';
  const currentFilters = decodeFilters(searchParams.get('f') ?? '');

  const updateParams = useCallback(
    (updates: Record<string, string | null>) => {
      const params = new URLSearchParams(searchParams.toString());
      // Reset to page 1 when search/filters change
      params.delete('page');
      for (const [key, value] of Object.entries(updates)) {
        if (value === null || value === '') {
          params.delete(key);
        } else {
          params.set(key, value);
        }
      }
      router.push(`${pathname}?${params.toString()}`);
    },
    [router, pathname, searchParams],
  );

  return (
    <ModuleSearch
      fields={fields}
      initialSearch={currentSearch}
      initialFilters={currentFilters}
      onSearch={(search) => updateParams({ q: search || null })}
      onFilter={(filters) =>
        updateParams({ f: filters.length > 0 ? encodeFilters(filters) : null })
      }
    />
  );
}