// components/Pagination.tsx
import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import ArrowLeft from 'svg/ArrowLeft';
import ArrowRightUnderline from 'svg/ArrowRightUnderline';
import AppText from './AppText';

interface PaginationProps {
  page: number; // current page (0-based)
  totalPages: number;
  setPage: (page: number) => void;
}

const Pagination: React.FC<PaginationProps> = ({
  page,
  totalPages,
  setPage,
}) => {
  if (totalPages <= 1) return null;

  const renderPages = () => {
    const pages: (number | string)[] = [];

    // doim 1-sahifa
    pages.push(0);

    // agar current sahifa 4 dan katta bo‘lsa ... qo‘shamiz
    if (page > 3) {
      pages.push('...');
    }

    // current page atrofidagi 2 ta sahifani ko‘rsatamiz
    for (
      let p = Math.max(1, page - 1);
      p <= Math.min(page + 1, totalPages - 2);
      p++
    ) {
      if (p !== 0 && p !== totalPages - 1) {
        pages.push(p);
      }
    }

    // agar current sahifa oxiriga yaqin bo‘lmasa, ... qo‘shamiz
    if (page < totalPages - 4) {
      pages.push('...');
    }

    // doim oxirgi sahifa
    if (totalPages > 1) {
      pages.push(totalPages - 1);
    }

    return pages.map((p, index) => {
      if (p === '...') {
        return (
          <AppText key={`dots-${index}`} style={{ marginHorizontal: 5 }}>
            ...
          </AppText>
        );
      }
      return (
        <TouchableOpacity
          key={p}
          onPress={() => setPage(p as number)}
          style={{
            backgroundColor: page === p ? '#28A7E8' : '#ccc',
            width: 30,
            height: 30,
            borderRadius: 8,
            justifyContent: 'center',
            alignItems: 'center',
            marginHorizontal: 5,
          }}
        >
          <AppText style={{ color: page === p ? '#fff' : '#000' }}>
            {(p as number) + 1}
          </AppText>
        </TouchableOpacity>
      );
    });
  };

  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 10,
      }}
    >
      {/* prev button */}
      <TouchableOpacity
        disabled={page === 0}
        onPress={() => setPage(page - 1)}
        style={{
          backgroundColor: page === 0 ? '#aaa' : '#28A7E8',
          width: 30,
          height: 30,
          borderRadius: 8,
          justifyContent: 'center',
          alignItems: 'center',
          marginHorizontal: 5,
        }}
      >
        <ArrowLeft color="#fff" />
      </TouchableOpacity>

      {/* pages */}
      {renderPages()}

      {/* next button */}
      <TouchableOpacity
        disabled={page >= totalPages - 1}
        onPress={() => setPage(page + 1)}
        style={{
          backgroundColor: page >= totalPages - 1 ? '#aaa' : '#28A7E8',
          width: 30,
          height: 30,
          borderRadius: 8,
          justifyContent: 'center',
          alignItems: 'center',
          marginHorizontal: 5,
        }}
      >
        <ArrowRightUnderline color="#fff" />
      </TouchableOpacity>
    </View>
  );
};

export default Pagination;
