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

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
  const [inputPage, setInputPage] = useState('');

  const generatePages = (): (number | 'ellipsis')[] => {
    const pages: (number | 'ellipsis')[] = [];

    if (totalPages <= 7) {
      for (let i = 1; i <= totalPages; i++) pages.push(i);
      return pages;
    }

    pages.push(1);

    if (currentPage > 4) pages.push('ellipsis');

    const start = Math.max(2, currentPage - 1);
    const end = Math.min(totalPages - 1, currentPage + 1);
    for (let i = start; i <= end; i++) pages.push(i);

    if (currentPage < totalPages - 3) pages.push('ellipsis');

    pages.push(totalPages);

    return pages;
  };

  const handleInputSubmit = () => {
    const pageNum = parseInt(inputPage, 10);
    if (!isNaN(pageNum) && pageNum >= 1 && pageNum <= totalPages) {
      onPageChange(pageNum);
      setInputPage('');
    }
  };

  return (
      <div className="mt-12 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="flex-1 hidden sm:block" />

        <nav className="flex justify-center items-center space-x-1 flex-wrap">
          {/* В начало */}
          <button
              onClick={() => onPageChange(1)}
              disabled={currentPage === 1}
              className="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 disabled:opacity-50"
              title="Первая страница"
          >
            <ChevronsLeft size={20} />
          </button>

          {/* Назад */}
          <button
              onClick={() => onPageChange(currentPage - 1)}
              disabled={currentPage === 1}
              className="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 disabled:opacity-50"
              title="Предыдущая страница"
          >
            <ChevronLeft size={20} />
          </button>

          {/* Номера страниц */}
          {generatePages().map((page, index) =>
              page === 'ellipsis' ? (
                  <span key={`ellipsis-${index}`} className="px-3 py-2 text-gray-400">...</span>
              ) : (
                  <button
                      key={page}
                      onClick={() => onPageChange(page)}
                      className={`px-4 py-2 rounded-md text-sm font-medium ${
                          currentPage === page
                              ? 'bg-blue-600 text-white'
                              : 'text-gray-700 hover:bg-gray-100'
                      }`}
                  >
                    {page}
                  </button>
              )
          )}

          {/* Вперёд */}
          <button
              onClick={() => onPageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              className="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 disabled:opacity-50"
              title="Следующая страница"
          >
            <ChevronRight size={20} />
          </button>

          {/* В конец */}
          <button
              onClick={() => onPageChange(totalPages)}
              disabled={currentPage === totalPages}
              className="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 disabled:opacity-50"
              title="Последняя страница"
          >
            <ChevronsRight size={20} />
          </button>
        </nav>

        {/* Поле быстрого перехода */}
        <div className="flex items-center space-x-2 justify-center sm:justify-end flex-1 px-2">
          <span className="text-sm text-gray-600">Страница:</span>
          <input
              type="number"
              min={1}
              max={totalPages}
              value={inputPage}
              onChange={(e) => setInputPage(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleInputSubmit()}
              className="w-20 px-2 py-1 border rounded-md text-sm"
          />
          <button
              onClick={handleInputSubmit}
              className="px-3 py-1 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700"
          >
            OK
          </button>
        </div>
      </div>
  );
}
