import React from 'react';
import { COLORS, RADII, SHADOWS } from './chartTokens';

// ─────────────────────────────────────────────────────────────
// ChartPagination – Shared paginator for all chart components
// Props:
//   currentPage: number
//   totalPages:  number
//   onPage:      (page: number) => void
//   startIndex:  number  (for display)
//   endIndex:    number  (for display)
//   totalItems:  number  (for display)
//   itemLabel:   string  (e.g. 'modules', 'periods')
// ─────────────────────────────────────────────────────────────

const btnBase = {
  padding: '6px 14px',
  borderRadius: '8px',
  border: `1px solid ${COLORS.borderLight}`,
  fontSize: '13px',
  fontFamily: 'Inter, system-ui, Arial, sans-serif',
  fontWeight: '500',
  cursor: 'pointer',
  transition: 'all 0.15s ease',
  lineHeight: '1.4',
};

const PageBtn = ({ active, disabled, children, onClick }) => {
  const style = {
    ...btnBase,
    minWidth: '36px',
    backgroundColor: active   ? '#6366F1'
                   : disabled ? COLORS.skeletonBg
                   : '#fff',
    color: active   ? '#fff'
         : disabled ? COLORS.textLight
         : COLORS.text,
    cursor: disabled ? 'not-allowed' : 'pointer',
    border: active ? '1px solid #6366F1' : `1px solid ${COLORS.borderLight}`,
    boxShadow: active ? '0 2px 8px rgba(99,102,241,0.25)' : 'none',
  };

  return (
    <button
      style={style}
      disabled={disabled}
      onClick={onClick}
      onMouseEnter={(e) => { if (!active && !disabled) e.currentTarget.style.borderColor = '#6366F1'; }}
      onMouseLeave={(e) => { if (!active && !disabled) e.currentTarget.style.borderColor = COLORS.borderLight; }}
    >
      {children}
    </button>
  );
};

const ChartPagination = ({
  currentPage,
  totalPages,
  onPage,
  startIndex,
  endIndex,
  totalItems,
  itemLabel = 'items',
}) => {
  if (totalPages <= 1) {
    // Still show the "Showing X of Y" info even on single page
    return (
      <div style={{ textAlign: 'center', paddingTop: '8px' }}>
        <span style={{ fontSize: '12px', color: COLORS.textMuted, fontFamily: 'Inter, system-ui, Arial, sans-serif' }}>
          Showing {startIndex + 1}–{endIndex} of {totalItems} {itemLabel}
        </span>
      </div>
    );
  }

  // Clamp visible page range to 5 buttons max
  const maxVisible = 5;
  let pageStart = Math.max(1, currentPage - Math.floor(maxVisible / 2));
  let pageEnd   = Math.min(totalPages, pageStart + maxVisible - 1);
  if (pageEnd - pageStart + 1 < maxVisible) pageStart = Math.max(1, pageEnd - maxVisible + 1);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingTop: '12px' }}>
      {/* Info */}
      <span style={{ fontSize: '12px', color: COLORS.textMuted, fontFamily: 'Inter, system-ui, Arial, sans-serif' }}>
        Showing {startIndex + 1}–{endIndex} of {totalItems} {itemLabel}
      </span>

      {/* Buttons */}
      <div style={{ display: 'flex', gap: '6px', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
        <PageBtn disabled={currentPage === 1} onClick={() => onPage(1)}>«</PageBtn>
        <PageBtn disabled={currentPage === 1} onClick={() => onPage(currentPage - 1)}>‹ Prev</PageBtn>

        {pageStart > 1 && <span style={{ color: COLORS.textLight }}>…</span>}

        {Array.from({ length: pageEnd - pageStart + 1 }, (_, i) => pageStart + i).map((page) => (
          <PageBtn key={page} active={page === currentPage} onClick={() => onPage(page)}>
            {page}
          </PageBtn>
        ))}

        {pageEnd < totalPages && <span style={{ color: COLORS.textLight }}>…</span>}

        <PageBtn disabled={currentPage === totalPages} onClick={() => onPage(currentPage + 1)}>Next ›</PageBtn>
        <PageBtn disabled={currentPage === totalPages} onClick={() => onPage(totalPages)}>»</PageBtn>
      </div>
    </div>
  );
};

export default ChartPagination;