import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import type { ReactNode } from "react";
import { useId, useState } from "react";

import { FormActions, FormBody, FormDialog } from "./form-dialog";
import type { RemotePickerOption } from "./remote-option-list";
import { RemoteOptionList } from "./remote-option-list";

export type { RemotePickerOption } from "./remote-option-list";

/** Presenta exclusivamente la página recibida; el consumidor controla consulta, filtros y paginación remota. */
export function RemoteOptionPicker({
  title,
  items,
  pending,
  error,
  search,
  onSearch,
  onRetry,
  onSelect,
  onClose,
  pagination,
  labels,
}: {
  title: string;
  items: readonly RemotePickerOption[];
  pending: boolean;
  error: string | undefined;
  search: string;
  onSearch: (search: string) => void;
  onRetry: () => Promise<unknown>;
  onSelect: (option: RemotePickerOption) => void;
  onClose: () => void;
  pagination: ReactNode;
  labels: {
    search: string;
    selection: string;
    name: string;
    description: string;
    empty: string;
    loading: string;
    confirm: string;
    cancel: string;
    retry: string;
  };
}) {
  const id = useId();
  const [selected, setSelected] = useState<RemotePickerOption>();

  return (
    <FormDialog
      cancelLabel={labels.cancel}
      formActions
      layout="picker"
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      size="medium"
      title={title}
    >
      <FormBody contentLayout="fill">
        <label className="sr-only" htmlFor={id}>
          {labels.search}
        </label>
        <Input
          data-quick-search=""
          id={id}
          maxLength={100}
          onChange={(event) => onSearch(event.target.value)}
          placeholder={labels.search}
          value={search}
        />
        {pending && <p role="status">{labels.loading}</p>}
        {error && (
          <div role="alert">
            <p>{error}</p>
            <Button
              onClick={async () => {
                await onRetry();
              }}
              variant="outline"
            >
              {labels.retry}
            </Button>
          </div>
        )}
        <RemoteOptionList
          error={error}
          items={items}
          labels={labels}
          onSelect={setSelected}
          pending={pending}
          title={title}
          value={selected?.id ?? ""}
        />
        {pagination}
      </FormBody>
      <FormActions>
        <Button
          disabled={!selected || pending || !!error || selected.disabled}
          onClick={() => {
            if (selected && !selected.disabled) {
              onSelect(selected);
              onClose();
            }
          }}
        >
          {labels.confirm}
        </Button>
      </FormActions>
    </FormDialog>
  );
}