import { Combobox } from "@tailor-platform/app-shell";
import { useCallback } from "react";
import { useClient } from "urql";
import { graphql } from "@/graphql";
import { cn } from "@/lib/utils";

const SupplierAccountSearchQuery = graphql(`
  query SupplierAccountSearch($query: SupplierAccountQueryInput, $first: Int) {
    supplierAccounts(query: $query, first: $first, order: [{ field: code, direction: Asc }]) {
      edges {
        node {
          id
          name
          companyId
          status
          defaultExpenseAccountId
        }
      }
    }
  }
`);

/** id is a SupplierAccount ID. */
export interface SupplierAccountRef {
  id: string;
  name: string;
  defaultExpenseAccountId?: string | null;
}

const DEBOUNCE_MS = 300;
/**
 * Browse mode (empty input) must show the whole supplier list, mirroring the
 * plain <Select> this component replaced — so the page size is sized well
 * above the current ~40-supplier roster rather than a typical search page.
 */
const PAGE_SIZE = 200;

interface SupplierAccountComboboxProps {
  value: SupplierAccountRef | null;
  onValueChange: (supplierAccount: SupplierAccountRef | null) => void;
  placeholder?: string;
  className?: string;
  disabled?: boolean;
  companyId?: string;
}

/** Selects active supplier accounts by their required display names. */
export const SupplierAccountCombobox = ({
  value,
  onValueChange,
  placeholder = "Search suppliers...",
  className,
  disabled,
  companyId,
}: SupplierAccountComboboxProps) => {
  const client = useClient();

  const fetcher = useCallback(
    async (input: string | null, { signal }: { signal: AbortSignal }) => {
      const searchText = input === value?.name ? null : input;
      const regex = searchText
        ? `(?i)${searchText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`
        : undefined;
      const query = {
        status: { eq: "ACTIVE" as const },
        ...(companyId ? { companyId: { eq: companyId } } : {}),
        ...(regex ? { or: [{ name: { regex } }, { code: { regex } }] } : {}),
      };
      const result = await client
        .query(
          SupplierAccountSearchQuery,
          {
            query,
            first: PAGE_SIZE,
          },
          { fetchOptions: { signal }, requestPolicy: "network-only" },
        )
        .toPromise();
      if (result.error) throw result.error;
      return (result.data?.supplierAccounts.edges ?? [])
        .map((edge) => edge.node)
        .map((account) => ({
          id: account.id,
          name: account.name,
          defaultExpenseAccountId: account.defaultExpenseAccountId,
        }));
    },
    [client, value, companyId],
  );

  return (
    <Combobox.Async
      fetcher={{ fn: fetcher, debounceMs: DEBOUNCE_MS }}
      value={value}
      onValueChange={onValueChange}
      mapItem={(s) => ({ label: s.name, key: s.id })}
      placeholder={placeholder}
      className={cn("[&_[data-slot=combobox-input]]:pr-14", className)}
      disabled={disabled}
    />
  );
};