import React from 'react';

import { useTranslation } from 'react-i18next';

import { Trans } from '@kit/ui/makerkit/trans';
import { cn } from '@kit/ui/shadcn';
import { Button } from '@kit/ui/shadcn/button';

const BookingPagination = ({
  totalPages,
  setCurrentPage,
  currentPage,
}: {
  totalPages: number;
  setCurrentPage: (page: number) => void;
  currentPage: number;
}) => {
  const { t } = useTranslation();

  const generatePageNumbers = () => {
    const pages = [];
    const maxVisiblePages = 5;

    if (totalPages <= maxVisiblePages) {
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      if (currentPage <= 3) {
        for (let i = 1; i <= 4; i++) {
          pages.push(i);
        }
        pages.push('...');
        pages.push(totalPages);
      } else if (currentPage >= totalPages - 2) {
        pages.push(1);
        pages.push('...');
        for (let i = totalPages - 3; i <= totalPages; i++) {
          pages.push(i);
        }
      } else {
        pages.push(1);
        pages.push('...');
        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
          pages.push(i);
        }
        pages.push('...');
        pages.push(totalPages);
      }
    }

    return pages;
  };

  if (totalPages === 0) {
    return (
      <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
        <p>{t('booking:noResults')}</p>
      </div>
    );
  }

  return (
    totalPages > 1 && (
      <div className="flex items-center justify-between">
        <div className="text-muted-foreground text-sm">
          {t('common:pageOfPages', {
            page: currentPage,
            total: totalPages,
          })}
        </div>

        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setCurrentPage(currentPage - 1)}
            disabled={currentPage === 1}
          >
            <Trans i18nKey="common:previous" defaultValue="Previous" />
          </Button>

          {generatePageNumbers().map((page, index) => (
            <Button
              key={index}
              variant={page === currentPage ? 'default' : 'outline'}
              size="sm"
              onClick={() => typeof page === 'number' && setCurrentPage(page)}
              disabled={page === '...'}
              className={cn(
                'min-w-[2rem]',
                page === '...' && 'cursor-default hover:bg-transparent',
              )}
            >
              {page}
            </Button>
          ))}

          <Button
            variant="outline"
            size="sm"
            onClick={() => setCurrentPage(currentPage + 1)}
            disabled={currentPage === totalPages}
          >
            <Trans i18nKey="common:next" defaultValue="Next" />
          </Button>
        </div>
      </div>
    )
  );
};

export default BookingPagination;