import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
import React, { memo } from 'react'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

import type { PaginationBlockProps } from '../types'

export const PaginationBlock = memo<PaginationBlockProps>(function PaginationBlock({
  currentPage,
  totalPages,
  pageSize,
  onPageChange,
  onPageSizeChange,
}) {
  const generatePageNumbers = (current: number, total: number) => {
    const pages: (number | 'ellipsis')[] = []
    const showEllipsis = total > 7

    if (!showEllipsis) {
      for (let i = 1; i <= total; i++) {
        pages.push(i)
      }
      return pages
    }

    // Always show first page
    pages.push(1)

    if (current <= 4) {
      // Show pages 2, 3, 4, 5, ellipsis, last
      for (let i = 2; i <= Math.min(5, total - 1); i++) {
        pages.push(i)
      }
      if (total > 5) {
        pages.push('ellipsis')
        pages.push(total)
      }
    } else if (current >= total - 3) {
      // Show first, ellipsis, then last 4 pages
      pages.push('ellipsis')
      for (let i = Math.max(2, total - 4); i <= total; i++) {
        pages.push(i)
      }
    } else {
      // Show first, ellipsis, current-1, current, current+1, ellipsis, last
      pages.push('ellipsis')
      for (let i = current - 1; i <= current + 1; i++) {
        pages.push(i)
      }
      pages.push('ellipsis')
      pages.push(total)
    }

    return pages
  }

  const pageNumbers = generatePageNumbers(currentPage, totalPages)

  return (
    <Card className="glass-card border-white/10">
      <CardHeader>
        <CardTitle className="text-white">Пагинация</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Standard Pagination */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Стандартная пагинация</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => onPageChange(Math.max(1, currentPage - 1))}
                  disabled={currentPage === 1}
                  className="h-8 px-3 text-white/70 hover:text-white disabled:opacity-50"
                >
                  <ChevronLeft className="h-4 w-4 mr-1" />
                  Назад
                </Button>

                <div className="flex items-center space-x-1">
                  {pageNumbers.map((page, index) => (
                    <React.Fragment key={index}>
                      {page === 'ellipsis' ? (
                        <div className="px-3 py-1">
                          <MoreHorizontal className="h-4 w-4 text-white/40" />
                        </div>
                      ) : (
                        <Button
                          variant={currentPage === page ? 'glass' : 'ghost'}
                          size="sm"
                          onClick={() => onPageChange(page as number)}
                          className={`h-8 w-8 p-0 ${
                            currentPage === page
                              ? 'text-white bg-white/10'
                              : 'text-white/70 hover:text-white hover:bg-white/5'
                          }`}
                        >
                          {page}
                        </Button>
                      )}
                    </React.Fragment>
                  ))}
                </div>

                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
                  disabled={currentPage === totalPages}
                  className="h-8 px-3 text-white/70 hover:text-white disabled:opacity-50"
                >
                  Далее
                  <ChevronRight className="h-4 w-4 ml-1" />
                </Button>
              </div>

              <div className="flex items-center space-x-2 text-sm text-white/70">
                <span>Показать:</span>
                <Select value={pageSize.toString()} onValueChange={(value) => onPageSizeChange(Number(value))}>
                  <SelectTrigger className="h-8 w-20 bg-white/5 border-white/20 text-white">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-gray-900 border-white/20">
                    <SelectItem value="10">10</SelectItem>
                    <SelectItem value="25">25</SelectItem>
                    <SelectItem value="50">50</SelectItem>
                    <SelectItem value="100">100</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        </div>

        {/* Compact Pagination */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Компактная пагинация</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <div className="flex items-center justify-between">
              <div className="text-sm text-white/70">
                Страница {currentPage} из {totalPages}
              </div>
              
              <div className="flex items-center space-x-2">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => onPageChange(Math.max(1, currentPage - 1))}
                  disabled={currentPage === 1}
                  className="h-8 w-8 text-white/70 hover:text-white disabled:opacity-50"
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                
                <div className="flex items-center space-x-1">
                  <input
                    type="number"
                    min="1"
                    max={totalPages}
                    value={currentPage}
                    onChange={(e) => {
                      const page = Number(e.target.value)
                      if (page >= 1 && page <= totalPages) {
                        onPageChange(page)
                      }
                    }}
                    className="w-12 h-8 px-2 text-center bg-white/5 border border-white/20 rounded text-white text-sm"
                  />
                  <span className="text-white/60 text-sm">/ {totalPages}</span>
                </div>

                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
                  disabled={currentPage === totalPages}
                  className="h-8 w-8 text-white/70 hover:text-white disabled:opacity-50"
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Simple Pagination */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Простая пагинация</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <div className="flex items-center justify-center space-x-4">
              <Button
                variant="ghost"
                onClick={() => onPageChange(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="text-white/70 hover:text-white disabled:opacity-50"
              >
                ← Предыдущая
              </Button>
              
              <div className="text-white/70 text-sm">
                {currentPage} из {totalPages}
              </div>
              
              <Button
                variant="ghost"
                onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="text-white/70 hover:text-white disabled:opacity-50"
              >
                Следующая →
              </Button>
            </div>
          </div>
        </div>

        <div className="text-center text-white/60 text-sm py-2">
          <p className="text-xs">Различные стили пагинации для разных интерфейсов</p>
        </div>
      </CardContent>
    </Card>
  )
})

PaginationBlock.displayName = 'PaginationBlock'