import { Icon } from '../../Atoms/Icon/Icon';
import {
  VISTA_DATOS_DOCUMENTOS_PAGINATION_BOX_STYLE,
  VISTA_DATOS_DOCUMENTOS_PAGINATION_WRAP_STYLE,
  VISTA_DATOS_DOCUMENTOS_PAGE_NUMBER_ACTIVE_STYLE,
  VISTA_DATOS_DOCUMENTOS_PAGE_NUMBER_STYLE,
  VISTA_DATOS_DOCUMENTOS_PAGINATION_PAGES_STYLE,
} from './vistaDatosDocumentosStyles';

const NAV_BTN_SIZE = 32;

function buildPageItems(currentPage, totalPages) {
  if (totalPages <= 5) {
    return Array.from({ length: totalPages }, (_, i) => i + 1);
  }
  if (currentPage <= 3) {
    return [1, 2, 3, 4, 'ellipsis', totalPages];
  }
  if (currentPage >= totalPages - 2) {
    return [1, 'ellipsis', totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
  }
  return [1, 'ellipsis', currentPage - 1, currentPage, currentPage + 1, 'ellipsis', totalPages];
}

/**
 * Paginado numérico para listado de documentos (1 2 3 4 … + flechas).
 */
export const VistaDatosDocumentosPaginacion = ({
  currentPage = 1,
  totalPages = 1,
  onPageChange,
  className = '',
  wrapStyle,
  boxStyle,
  isNarrow = false,
  ...props
}) => {
  if (totalPages <= 1) return null;

  const safePage = Math.min(Math.max(1, currentPage), totalPages);
  const hasPrev = safePage > 1;
  const hasNext = safePage < totalPages;
  const pageItems = buildPageItems(safePage, totalPages);

  const goToPage = (page) => {
    if (page < 1 || page > totalPages || page === safePage) return;
    onPageChange?.(page);
  };

  return (
    <nav
      className={['anima-vista-datos-documentos-paginacion', className].filter(Boolean).join(' ')}
      aria-label="Paginación de documentos"
      style={{
        ...VISTA_DATOS_DOCUMENTOS_PAGINATION_WRAP_STYLE,
        ...(wrapStyle || {}),
      }}
      {...props}
    >
      <div
        style={{
          ...VISTA_DATOS_DOCUMENTOS_PAGINATION_BOX_STYLE,
          maxWidth: isNarrow ? '100%' : VISTA_DATOS_DOCUMENTOS_PAGINATION_BOX_STYLE.maxWidth,
          ...(boxStyle || {}),
        }}
      >
        <button
          type="button"
          aria-label="Página anterior"
          disabled={!hasPrev}
          onClick={() => goToPage(safePage - 1)}
          style={{
            width: NAV_BTN_SIZE,
            height: NAV_BTN_SIZE,
            borderRadius: 8,
            border: '1px solid #C4C4C4',
            background: '#FFFFFF',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: hasPrev ? 'pointer' : 'default',
            opacity: hasPrev ? 1 : 0.5,
            flexShrink: 0,
            padding: 0,
          }}
        >
          <Icon
            name="ChevronDoubleLeftIcon"
            size={16}
            style={{ color: hasPrev ? '#38656D' : '#84A0A5' }}
          />
        </button>

        <div className="anima-vista-datos-documentos-paginacion__pages" style={VISTA_DATOS_DOCUMENTOS_PAGINATION_PAGES_STYLE}>
          {pageItems.map((item, index) => {
            if (item === 'ellipsis') {
              return (
                <span
                  key={`ellipsis-${index}`}
                  aria-hidden
                  style={{
                    ...VISTA_DATOS_DOCUMENTOS_PAGE_NUMBER_STYLE,
                    cursor: 'default',
                    minWidth: 20,
                  }}
                >
                  …
                </span>
              );
            }
            const isActive = item === safePage;
            return (
              <button
                key={item}
                type="button"
                aria-label={`Página ${item}`}
                aria-current={isActive ? 'page' : undefined}
                onClick={() => goToPage(item)}
                style={
                  isActive
                    ? VISTA_DATOS_DOCUMENTOS_PAGE_NUMBER_ACTIVE_STYLE
                    : VISTA_DATOS_DOCUMENTOS_PAGE_NUMBER_STYLE
                }
              >
                {item}
              </button>
            );
          })}
        </div>

        <button
          type="button"
          aria-label="Página siguiente"
          disabled={!hasNext}
          onClick={() => goToPage(safePage + 1)}
          style={{
            width: NAV_BTN_SIZE,
            height: NAV_BTN_SIZE,
            borderRadius: 8,
            border: 'none',
            background: hasNext ? '#3F6F75' : '#D3DDE0',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: hasNext ? 'pointer' : 'default',
            flexShrink: 0,
            padding: 0,
          }}
        >
          <Icon name="ChevronDoubleRightIcon" size={16} style={{ color: '#FFFFFF' }} />
        </button>
      </div>
    </nav>
  );
};

export default VistaDatosDocumentosPaginacion;
