// pagination-control.jsx — Component reutilizabil de paginare pentru paginile media-admin.
// Expune window.PaginationControl.
//   <window.PaginationControl
//     totalItems={filteredList.length}
//     currentPage={safePage}
//     perPage={perPage}
//     onPageChange={setCurrentPage}
//     onPerPageChange={setPerPage}
//   />
// Slicing-ul listei se face în pagina părinte, DUPĂ filtrare + sortare.

const PER_PAGE_OPTIONS = [10, 20, 50, 100];

function _pcPageNumbers(current, total) {
  if (total <= 7) {
    return Array.from({ length: total }, (_, i) => i + 1);
  }
  const set = new Set([1, total, current, current - 1, current + 1]);
  const sorted = Array.from(set).filter(p => p >= 1 && p <= total).sort((a, b) => a - b);
  const result = [];
  for (let i = 0; i < sorted.length; i++) {
    result.push(sorted[i]);
    if (i < sorted.length - 1 && sorted[i + 1] - sorted[i] > 1) {
      result.push('…');
    }
  }
  return result;
}

function _pcBtnStyle(active, disabled) {
  return {
    minWidth: 32,
    height: 32,
    padding: '0 10px',
    borderRadius: 6,
    border: active ? '1px solid var(--accent-1)' : '.5px solid var(--line)',
    background: active ? 'rgba(82,242,15,.1)' : 'transparent',
    color: active ? 'var(--accent-1)' : (disabled ? 'var(--txt-3)' : 'var(--txt-2)'),
    fontSize: 13,
    fontWeight: 500,
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.5 : 1,
    userSelect: 'none',
  };
}

function PaginationControl({ totalItems, currentPage, perPage, onPageChange, onPerPageChange }) {
  if (!totalItems || totalItems <= 0) return null;

  const totalPages = Math.max(1, Math.ceil(totalItems / perPage));
  const safePage = Math.min(Math.max(1, currentPage || 1), totalPages);

  const handlePerPageChange = (e) => {
    const v = parseInt(e.target.value, 10);
    if (!Number.isNaN(v) && onPerPageChange) onPerPageChange(v);
    if (onPageChange) onPageChange(1);
  };

  const pages = _pcPageNumbers(safePage, totalPages);

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      flexWrap: 'wrap',
      gap: 16,
      marginTop: 16,
      padding: '14px 4px',
      fontSize: 13,
    }}>
      {/* Stânga: contor + selector perPage */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--txt-2)', flexWrap: 'wrap' }}>
        <span>
          <strong style={{ color: 'var(--txt-0)' }}>{totalItems.toLocaleString('ro-RO')}</strong>
          {' '}{totalItems === 1 ? 'rezultat' : 'rezultate'}
        </span>
        <span style={{ color: 'var(--txt-3)' }}>·</span>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <select
            value={perPage}
            onChange={handlePerPageChange}
            className="input"
            style={{ width: 80, padding: '6px 10px', fontSize: 13, color: '#FFFFFF', backgroundColor: '#1a1a1a' }}
          >
            {PER_PAGE_OPTIONS.map(n => (
              <option key={n} value={n} style={{ backgroundColor: '#1a1a1a' }}>{n}</option>
            ))}
          </select>
          <span>pe pagină</span>
        </label>
      </div>

      {/* Dreapta: navigare (doar dacă > 1 pagină) */}
      {totalPages > 1 && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
          <button
            type="button"
            onClick={() => onPageChange && onPageChange(safePage - 1)}
            disabled={safePage <= 1}
            style={_pcBtnStyle(false, safePage <= 1)}
          >
            ← Prev
          </button>
          {pages.map((p, i) => p === '…' ? (
            <span key={'e' + i} style={{ padding: '0 4px', color: 'var(--txt-3)', fontSize: 13 }}>…</span>
          ) : (
            <button
              key={p}
              type="button"
              onClick={() => onPageChange && onPageChange(p)}
              style={_pcBtnStyle(p === safePage, false)}
            >
              {p}
            </button>
          ))}
          <button
            type="button"
            onClick={() => onPageChange && onPageChange(safePage + 1)}
            disabled={safePage >= totalPages}
            style={_pcBtnStyle(false, safePage >= totalPages)}
          >
            Next →
          </button>
        </div>
      )}
    </div>
  );
}

window.PaginationControl = PaginationControl;