// @design-system: primitives/Pagination
// Registered at /design-system#pagination-primitive

import { useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { pageButtonVariants, navButtonVariants } from './variants';
import { getPageNumbers } from '../PaginationLinks/getPageNumbers';

export interface PaginationProps {
  /** Current page number, 1-indexed. */
  page: number;
  /** Total number of pages. */
  totalPages: number;
  /** Called with the new 1-indexed page number when user navigates. */
  onPageChange: (page: number) => void;
  /** Whether a data fetch is in progress - disables all buttons. */
  isLoading?: boolean;
  /** Additional className for the nav wrapper. */
  className?: string;
}

/**
 * Multideal Pagination primitive.
 *
 * Renders prev/next buttons and numbered page buttons.
 * Fully accessible, RTL-aware (logical properties), token-only styling.
 */
export function Pagination({
  page,
  totalPages,
  onPageChange,
  isLoading = false,
  className,
}: PaginationProps) {
  const t = useT('pagination');
  const tCommon = useT('common');

  if (totalPages <= 1) return null;

  const pageNumbers = getPageNumbers(page, totalPages);

  return (
    <nav aria-label={t('nav')} className={cn('flex items-center justify-center gap-1', className)}>
      {/* Prev button */}
      <button
        type="button"
        className={navButtonVariants()}
        onClick={() => onPageChange(page - 1)}
        disabled={page === 1 || isLoading}
        aria-label={t('prev')}
      >
        <Icon name="ChevronLeft" size="sm" mirror />
      </button>

      {/* Page buttons */}
      {pageNumbers.map((item, idx) =>
        item === 'ellipsis' ? (
          <span
            key={`ellipsis-${idx}`}
            className="text-text-secondary inline-flex h-8 w-8 items-center justify-center text-sm"
            aria-hidden="true"
          >
            ...
          </span>
        ) : (
          <button
            key={item}
            type="button"
            className={pageButtonVariants({ active: item === page })}
            onClick={() => onPageChange(item)}
            disabled={isLoading}
            aria-label={t('page_n').replace('{n}', String(item))}
            aria-current={item === page ? 'page' : undefined}
          >
            {item}
          </button>
        ),
      )}

      {/* Next button */}
      <button
        type="button"
        className={navButtonVariants()}
        onClick={() => onPageChange(page + 1)}
        disabled={page === totalPages || isLoading}
        aria-label={t('next')}
      >
        <Icon name="ChevronRight" size="sm" mirror />
      </button>

      {/* Page summary */}
      <span className="text-text-secondary ms-3 text-sm">
        {page} {tCommon('of')} {totalPages}
      </span>
    </nav>
  );
}