import { Button, Combobox, Field } from "@tailor-platform/app-shell";
import { ChevronDown, X } from "lucide-react";
import { useEffect, useState } from "react";
import { useClient } from "urql";
import { graphql } from "@/graphql";
import { useT } from "@/i18n/labels";

type SelectOption = { id: string; label: string };
type SelectPage = { items: SelectOption[]; hasNextPage: boolean; endCursor: string | null };

const CurrenciesQuery = graphql(`
  query BPCurrencyOptions($query: CurrencyQueryInput, $after: String) {
    currencies(query: $query, first: 20, after: $after, order: [{ field: code, direction: Asc }]) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        node {
          id
          code
        }
      }
    }
  }
`);

export function CurrencyField({
  name,
  label,
  value,
  required,
}: {
  name: string;
  label: string;
  value?: SelectOption | null;
  required?: boolean;
}) {
  const t = useT();
  const client = useClient();
  const [selected, setSelected] = useState<SelectOption | null>(value ?? null);
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [after, setAfter] = useState<string>();
  const [page, setPage] = useState<SelectPage>({ items: [], hasNextPage: false, endCursor: null });
  const [fetching, setFetching] = useState(false);
  const [error, setError] = useState(false);
  const [retry, setRetry] = useState(0);
  useEffect(() => {
    if (!open) return;
    const controller = new AbortController();
    const fetchPage = async (search: string, after: string | undefined, signal: AbortSignal) => {
      const result = await client
        .query(
          CurrenciesQuery,
          {
            after,
            query: search
              ? { or: [{ code: { contains: search } }, { name: { contains: search } }] }
              : undefined,
          },
          { requestPolicy: "network-only", fetchOptions: { signal } },
        )
        .toPromise();
      if (result.error) throw result.error;
      if (!result.data) throw new Error("No currency data returned");
      const page = result.data.currencies;
      return {
        ...page.pageInfo,
        items: page.edges.map(({ node }) => ({ id: node.id, label: node.code })),
      };
    };
    const timer = setTimeout(
      () => {
        void fetchPage(search.trim(), after, controller.signal)
          .then((next) => {
            if (controller.signal.aborted) return;
            setPage((previous) => ({
              ...next,
              items: after
                ? [
                    ...previous.items,
                    ...next.items.filter(
                      (item) => !previous.items.some((old) => old.id === item.id),
                    ),
                  ]
                : next.items,
            }));
          })
          .catch(() => {
            if (!controller.signal.aborted) setError(true);
          })
          .finally(() => {
            if (!controller.signal.aborted) setFetching(false);
          });
      },
      after ? 0 : 200,
    );
    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [open, search, after, retry, client]);
  const more = () => {
    if (!fetching && !error && page.hasNextPage && page.endCursor && page.endCursor !== after) {
      setFetching(true);
      setAfter(page.endCursor);
    }
  };
  return (
    <Field.Root validate={() => (required && !selected ? t("bp.selectRequired") : null)}>
      <Field.Label>{label}</Field.Label>
      <Combobox.Parts.Root<SelectOption>
        items={page.items}
        value={selected}
        itemToStringLabel={(option) => option.label}
        itemToStringValue={(option) => option.id}
        filter={null}
        onValueChange={(option) => {
          setSelected(option);
        }}
        onInputValueChange={(input, details) => {
          if (details.reason !== "input-change") return;
          setFetching(true);
          setError(false);
          setSearch(input);
          setAfter(undefined);
          setPage({ items: [], hasNextPage: false, endCursor: null });
        }}
        onOpenChange={(next, details) => {
          setOpen(next);
          if (next) {
            setError(false);
            if (details.reason !== "input-change") setSearch("");
            setAfter(undefined);
            setPage({ items: [], hasNextPage: false, endCursor: null });
            setFetching(true);
          }
        }}
      >
        <Combobox.Parts.InputGroup className="w-full">
          <Combobox.Parts.Input className="pr-16" />
          {selected && (
            <Combobox.Parts.Clear aria-label={t("bp.clearSelection")} className="right-8!">
              <X className="size-4" />
            </Combobox.Parts.Clear>
          )}
          <Combobox.Parts.Trigger aria-label={label}>
            <ChevronDown className="size-4" />
          </Combobox.Parts.Trigger>
        </Combobox.Parts.InputGroup>
        <Combobox.Parts.Content>
          <Combobox.Parts.List
            onScroll={(event) => {
              const node = event.currentTarget;
              if (node.scrollHeight - node.scrollTop - node.clientHeight < 40) more();
            }}
          >
            {(option: SelectOption) => (
              <Combobox.Parts.Item key={option.id} value={option}>
                {option.label}
              </Combobox.Parts.Item>
            )}
          </Combobox.Parts.List>
          {!fetching && !error && page.items.length === 0 && (
            <p className="p-3 text-sm text-muted-foreground">{t("bp.empty")}</p>
          )}
          {fetching && (
            <p role="status" className="p-3 text-sm text-muted-foreground">
              {t("bp.loading")}
            </p>
          )}
          {error && (
            <div role="alert" className="p-3 text-sm">
              <p>{t("bp.loadFailed")}</p>
              <Button
                type="button"
                variant="ghost"
                onClick={() => {
                  setError(false);
                  setFetching(true);
                  setRetry((v) => v + 1);
                }}
              >
                {t("bp.retry")}
              </Button>
            </div>
          )}
          {!fetching && !error && page.hasNextPage && (
            <Button type="button" variant="ghost" className="w-full" onClick={more}>
              {t("bp.loadMore")}
            </Button>
          )}
        </Combobox.Parts.Content>
      </Combobox.Parts.Root>
      {name && <input type="hidden" name={name} value={selected?.id ?? ""} />}
      <Field.Error />
    </Field.Root>
  );
}