import { useTranslation } from "../../locales/i18n.ts";

import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Input,
  Separator,
} from "@repo/shadcn-ui/components";
import { PlusIcon, RefreshCwIcon } from "lucide-react";

type LookupDialogProps<T> = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  items: T[];
  isLoading: boolean;
  isError?: boolean;
  refetch?: () => void;
  search: string;
  onSearchChange: (value: string) => void;
  title: string;
  description?: string;
  searchPlaceholder?: string;
  onSelect: (item: T) => void;
  onCreate: () => void;
  createLabel?: string;
  maxWidth?: "lg" | "xl" | "2xl" | "3xl";
  renderItem: (item: T) => React.ReactNode; // no se usa si se usa renderContainer
  renderContainer: (items: T[]) => React.ReactNode;
  emptyStateComponent?: React.ReactNode;
  page?: number;
  perPage?: number;
  totalItems?: number;
  onPageChange?: (page: number) => void;
};

export const LookupDialog = <T,>({
  open,
  onOpenChange,
  items,
  isLoading,
  isError,
  refetch,
  search,
  onSearchChange,
  title,
  description,
  searchPlaceholder,
  onSelect,
  onCreate,
  createLabel,
  maxWidth = "xl",
  renderItem,
  renderContainer,
  emptyStateComponent,
  page,
  perPage = 10,
  totalItems,
  onPageChange,
}: LookupDialogProps<T>) => {
  const { t } = useTranslation();

  const widthClass = {
    lg: "custom-dialog-lg",
    xl: "custom-dialog-xl",
    "2xl": "custom-dialog-2xl",
    "3xl": "custom-dialog-3xl",
  }[maxWidth];

  const showPagination = totalItems !== undefined && onPageChange !== undefined;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className={`${widthClass} max-h-[90vh] overflow-y-auto`}>
        <DialogHeader>
          <DialogTitle>{title || t("components.entity_selector.select_entity")}</DialogTitle>
          <DialogDescription>
            {description || t("components.entity_selector.select_or_create")}
          </DialogDescription>
        </DialogHeader>

        <div className='flex items-center justify-between mb-4 gap-4'>
          <Input
            placeholder={searchPlaceholder || t("components.entity_selector.search_entity")}
            value={search}
            onChange={(e) => onSearchChange(e.target.value)}
            className='flex-1'
          />
        </div>

        <Separator />

        {isLoading && (
          <p className='text-center text-muted-foreground py-8'>
            {t("components.entity_selector.loading")}
          </p>
        )}

        {isError && (
          <div className='text-center text-red-500 py-8 space-y-2'>
            <p>Error al cargar los datos.</p>
            {refetch && (
              <Button variant='outline' onClick={refetch}>
                <RefreshCwIcon className='h-4 w-4 mr-2' />
                Reintentar
              </Button>
            )}
          </div>
        )}

        {!isLoading && !isError && (
          <>
            {items.length === 0 ? (
              emptyStateComponent || (
                <p className='text-center text-sm text-muted-foreground mt-8'>
                  {t("components.entity_selector.no_entities_found")}
                </p>
              )
            ) : (
              <div className='mt-4'>{renderContainer(items)}</div>
            )}
          </>
        )}

        <div className='mt-6 flex justify-center'>
          <Button onClick={onCreate}>
            <PlusIcon className='h-4 w-4 mr-2' />
            {createLabel || t("components.entity_selector.create_label")}
          </Button>
        </div>

        <DialogFooter className='mt-4'>
          <Button variant='outline' onClick={() => onOpenChange(false)}>
            {t("components.entity_selector.close")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
