import React from 'react';
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';

export interface PaginationProps {
  currentPage: number;
  totalItems: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
  onItemsPerPageChange?: (itemsPerPage: number) => void;
  itemsPerPageOptions?: number[];
  itemsLabel?: string;
  simpleMode?: boolean;
}

export const Pagination: React.FC<PaginationProps> = ({
  currentPage,
  totalItems,
  itemsPerPage,
  onPageChange,
  onItemsPerPageChange,
  itemsPerPageOptions = [5, 10, 20, 50],
  itemsLabel = 'items',
  simpleMode = false
}) => {
  const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
  const safePage = Math.min(currentPage, totalPages);

  if (simpleMode) {
    const indexOfFirstItem = (safePage - 1) * itemsPerPage;
    const indexOfLastItem = safePage * itemsPerPage;

    return (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px', borderTop: '1px solid rgba(15, 23, 42, 0.08)', marginTop: '8px' }}>
        <div style={{ fontSize: '0.8125rem', color: '#64748B' }}>
          Showing <strong style={{ color: '#0F172A' }}>{totalItems === 0 ? 0 : indexOfFirstItem + 1}</strong> to <strong style={{ color: '#0F172A' }}>{Math.min(indexOfLastItem, totalItems)}</strong> of <strong style={{ color: '#0F172A' }}>{totalItems}</strong> {itemsLabel}
        </div>
        <div style={{ display: 'flex', gap: '8px' }}>
          <button 
            onClick={() => onPageChange(Math.max(1, safePage - 1))}
            disabled={safePage === 1}
            style={{ 
              padding: '6px 12px', background: 'transparent', border: '1px solid #CBD5E1', borderRadius: '6px', 
              color: safePage === 1 ? '#94A3B8' : '#475569', cursor: safePage === 1 ? 'not-allowed' : 'pointer',
              display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.8125rem', fontWeight: 600, transition: 'all 0.2s' 
            }}
          >
            <ChevronLeft size={14} /> Prev
          </button>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 8px', fontSize: '0.8125rem', fontWeight: 700, color: '#0F172A' }}>
            {safePage} / {totalPages}
          </div>
          <button 
            onClick={() => onPageChange(Math.min(totalPages, safePage + 1))}
            disabled={safePage === totalPages}
            style={{ 
              padding: '6px 12px', background: 'transparent', border: '1px solid #CBD5E1', borderRadius: '6px', 
              color: safePage === totalPages ? '#94A3B8' : '#475569', cursor: safePage === totalPages ? 'not-allowed' : 'pointer',
              display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.8125rem', fontWeight: 600, transition: 'all 0.2s' 
            }}
          >
            Next <ChevronRight size={14} />
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 20px', borderTop: '1px solid rgba(15, 23, 42, 0.08)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <span style={{ fontSize: '0.78rem', color: '#475569' }}>
          Showing <strong style={{ color: '#0F172A' }}>{totalItems === 0 ? 0 : (safePage - 1) * itemsPerPage + 1}–{Math.min(safePage * itemsPerPage, totalItems)}</strong> of <strong style={{ color: '#0F172A' }}>{totalItems}</strong> {itemsLabel}
        </span>
        {onItemsPerPageChange && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: '0.75rem', color: '#64748B' }}>Rows per page:</span>
            <select 
              value={itemsPerPage} 
              onChange={e => {
                onItemsPerPageChange(Number(e.target.value));
                onPageChange(1);
              }}
              style={{ padding: '4px 8px', borderRadius: 6, border: '1px solid #CBD5E1', background: '#FFFFFF', color: '#0F172A', fontSize: '0.75rem', outline: 'none', cursor: 'pointer' }}
            >
              {itemsPerPageOptions.map(option => (
                <option key={option} value={option}>{option}</option>
              ))}
            </select>
          </div>
        )}
      </div>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        <button 
          onClick={() => onPageChange(1)} 
          disabled={safePage === 1} 
          style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === 1 ? '#94A3B8' : '#475569', cursor: safePage === 1 ? 'not-allowed' : 'pointer' }}
        >
          <ChevronsLeft size={15} />
        </button>
        <button 
          onClick={() => onPageChange(Math.max(1, safePage - 1))} 
          disabled={safePage === 1} 
          style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === 1 ? '#94A3B8' : '#475569', cursor: safePage === 1 ? 'not-allowed' : 'pointer' }}
        >
          <ChevronLeft size={15} />
        </button>
        
        {Array.from({ length: totalPages }, (_, i) => i + 1)
          .filter(p => p === 1 || p === totalPages || Math.abs(p - safePage) <= 1)
          .map((p, i, arr) => (
            <React.Fragment key={p}>
              {i > 0 && arr[i - 1] !== p - 1 && <span style={{ padding: '0 4px', color: '#94A3B8' }}>...</span>}
              <button 
                onClick={() => onPageChange(p)} 
                style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: 'none', background: p === safePage ? 'linear-gradient(135deg,#06B6D4,#3B82F6)' : '#F1F5F9', color: p === safePage ? '#fff' : '#475569', fontWeight: p === safePage ? 700 : 500, cursor: 'pointer', fontSize: '0.82rem' }}
              >
                {p}
              </button>
            </React.Fragment>
        ))}

        <button 
          onClick={() => onPageChange(Math.min(totalPages, safePage + 1))} 
          disabled={safePage === totalPages} 
          style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === totalPages ? '#94A3B8' : '#475569', cursor: safePage === totalPages ? 'not-allowed' : 'pointer' }}
        >
          <ChevronRight size={15} />
        </button>
        <button 
          onClick={() => onPageChange(totalPages)} 
          disabled={safePage === totalPages} 
          style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === totalPages ? '#94A3B8' : '#475569', cursor: safePage === totalPages ? 'not-allowed' : 'pointer' }}
        >
          <ChevronsRight size={15} />
        </button>
      </div>
    </div>
  );
};
