'use client'
 
import React, { useState, useEffect } from 'react'
import * as statusColors from '../../lib/statusColors'
 
interface Detector {
  detector_id: number
  name: string
  location: string
  status: string
  object: string
  floor: number
  checked: boolean
}
 
interface RawDetector {
  detector_id: number
  name: string
  object: string
  status: string
  type: string
  detector_type: string
  location: string
  floor: number
  notifications: Array<{
    id: number
    type: string
    message: string
    timestamp: string
    acknowledged: boolean
    priority: string
  }>
}
 
interface DetectorListProps {
  objectId?: string
  selectedDetectors: number[]
  onDetectorSelect: (detectorId: number, selected: boolean) => void
  initialSearchTerm?: string
}

// Функция для генерации умного диапазона страниц
function getPaginationRange(currentPage: number, totalPages: number): (number | string)[] {
  if (totalPages <= 7) {
    // Если страниц мало - показываем все
    return Array.from({ length: totalPages }, (_, i) => i + 1)
  }

  // Всегда показываем первые 3 и последние 3
  const start = [1, 2, 3]
  const end = [totalPages - 2, totalPages - 1, totalPages]
  
  if (currentPage <= 4) {
    // Начало: 1 2 3 4 5 ... 11 12 13
    return [1, 2, 3, 4, 5, '...', ...end]
  }
  
  if (currentPage >= totalPages - 3) {
    // Конец: 1 2 3 ... 9 10 11 12 13
    return [...start, '...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages]
  }
  
  // Середина: 1 2 3 ... 6 7 8 ... 11 12 13
  return [...start, '...', currentPage - 1, currentPage, currentPage + 1, '...', ...end]
}
 
const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors, onDetectorSelect, initialSearchTerm = '' }) => {
  const [detectors, setDetectors] = useState<Detector[]>([])
  const [searchTerm, setSearchTerm] = useState<string>(initialSearchTerm)
  const [currentPage, setCurrentPage] = useState(1)
  const itemsPerPage = 20

  useEffect(() => {
    const loadDetectors = async () => {
      try {
        const res = await fetch('/api/get-detectors', { cache: 'no-store' })
        if (!res.ok) return
        const payload = await res.json()
        const detectorsData: Record<string, RawDetector> = payload?.data?.detectors ?? {}
        const rawArray: RawDetector[] = Object.values(detectorsData).filter(
          (detector) => (objectId ? detector.object === objectId : true)
        )
        const normalized: Detector[] = rawArray.map((d) => ({
          detector_id: d.detector_id,
          name: d.name,
          location: d.location,
          status: d.status,
          object: d.object,
          floor: d.floor,
          checked: false,
        }))
        console.log('[DetectorList] Payload:', payload) 
        setDetectors(normalized)
      } catch (e) {
        console.error('Failed to load detectors:', e)
      }
    }
    loadDetectors()
  }, [objectId])
 
  const filteredDetectors = detectors.filter(detector => { 
    const matchesSearch = searchTerm === '' || detector.detector_id.toString() === searchTerm
    
    return matchesSearch
  })

  // Сброс на первую страницу при изменении поиска
  useEffect(() => {
    setCurrentPage(1)
  }, [searchTerm])

  // Пагинация
  const totalPages = Math.ceil(filteredDetectors.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const currentDetectors = filteredDetectors.slice(startIndex, endIndex)
  const paginationRange = getPaginationRange(currentPage, totalPages)

  const handlePageChange = (page: number) => {
    setCurrentPage(page)
    // Скролл наверх таблицы
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
 
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
        </div>
        
        <div className="flex items-center gap-3">
          <div className="relative">
            <input
              type="text"
              placeholder="Поиск по ID детектора..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64 text-sm font-medium"
              style={{ fontFamily: 'Inter, sans-serif' }}
            />
            <svg className="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>
      </div>

      {/* Таблица детекторов */}
      <div className="bg-[#161824] rounded-[20px] p-6">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-700">
                <th className="text-left text-white font-medium py-3 w-12">
                  <input
                    type="checkbox"
                    checked={selectedDetectors.length === currentDetectors.length && currentDetectors.length > 0}
                    onChange={(e) => {
                      if (e.target.checked) {
                        currentDetectors.forEach(detector => {
                          if (!selectedDetectors.includes(detector.detector_id)) {
                            onDetectorSelect(detector.detector_id, true)
                          }
                        })
                      } else {
                        currentDetectors.forEach(detector => {
                          if (selectedDetectors.includes(detector.detector_id)) {
                            onDetectorSelect(detector.detector_id, false)
                          }
                        })
                      }
                    }}
                    className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
                  />
                </th>
                <th className="text-left text-white font-medium py-3">Детектор</th>
                <th className="text-left text-white font-medium py-3">Статус</th>
                <th className="text-left text-white font-medium py-3">Местоположение</th>
                <th className="text-left text-white font-medium py-3">Проверен</th>
              </tr>
            </thead>
            <tbody>
              {currentDetectors.map((detector) => {
                const isSelected = selectedDetectors.includes(detector.detector_id)
                
                return (
                  <tr key={detector.detector_id} className="border-b border-gray-800">
                    <td className="py-3">
                      <input
                        type="checkbox"
                        checked={isSelected}
                        onChange={(e) => onDetectorSelect(detector.detector_id, e.target.checked)}
                        className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
                      />
                    </td>
                    <td className="py-3 text-white text-sm">{detector.name}</td>
                    <td className="py-3">
                      <div className="flex items-center gap-2">
                        <div 
                          className="w-3 h-3 rounded-full"
                          style={{ backgroundColor: detector.status }}
                        ></div>
                        <span className="text-sm text-gray-300">
                          {detector.status === statusColors.STATUS_COLOR_CRITICAL
                            ? 'Критическое'
                            : detector.status === statusColors.STATUS_COLOR_WARNING
                              ? 'Предупреждение'
                              : 'Норма'}
                        </span>
                      </div>
                    </td>
                    <td className="py-3 text-gray-400 text-sm">{detector.location}</td>
                    <td className="py-3">
                      {detector.checked ? (
                        <div className="flex items-center gap-1">
                          <svg className="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                          <span className="text-sm text-green-500">Да</span>
                        </div>
                      ) : (
                        <span className="text-sm text-gray-500">Нет</span>
                      )}
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>

        {/* Пагинация */}
        {totalPages > 1 && (
          <div className="mt-6 flex flex-col items-center gap-4">
            {/* Кнопки пагинации */}
            <div className="flex items-center gap-2">
              {/* Кнопка "Предыдущая" */}
              <button
                onClick={() => handlePageChange(currentPage - 1)}
                disabled={currentPage === 1}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  currentPage === 1
                    ? 'text-gray-600 cursor-not-allowed'
                    : 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
                }`}
              >
                ← Предыдущая
              </button>

              {/* Номера страниц */}
              {paginationRange.map((page, index) => {
                if (page === '...') {
                  return (
                    <span key={`ellipsis-${index}`} className="px-3 py-2 text-gray-500">
                      ...
                    </span>
                  )
                }

                const pageNumber = page as number
                const isActive = pageNumber === currentPage

                return (
                  <button
                    key={pageNumber}
                    onClick={() => handlePageChange(pageNumber)}
                    className={`min-w-[40px] px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                      isActive
                        ? 'bg-blue-500 text-white'
                        : 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
                    }`}
                  >
                    {pageNumber}
                  </button>
                )
              })}

              {/* Кнопка "Следующая" */}
              <button
                onClick={() => handlePageChange(currentPage + 1)}
                disabled={currentPage === totalPages}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  currentPage === totalPages
                    ? 'text-gray-600 cursor-not-allowed'
                    : 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
                }`}
              >
                Следующая →
              </button>
            </div>

            {/* Счётчик */}
            <div className="text-sm text-gray-400">
              Показано {startIndex + 1}-{Math.min(endIndex, filteredDetectors.length)} из {filteredDetectors.length} датчиков
            </div>
          </div>
        )}
      </div>
      
      {/* Статы детекторов */}
      <div className="mt-6 grid grid-cols-4 gap-4">
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-white">{filteredDetectors.length}</div>
          <div className="text-sm text-gray-400">Всего</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-green-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_NORMAL).length}</div>
          <div className="text-sm text-gray-400">Норма</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-orange-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_WARNING).length}</div>
          <div className="text-sm text-gray-400">Предупреждения</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-red-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_CRITICAL).length}</div>
          <div className="text-sm text-gray-400">Критические</div>
        </div>
      </div>
      
      {filteredDetectors.length === 0 && (
        <div className="text-center py-8">
          <p className="text-gray-400">Детекторы не найдены</p>
        </div>
      )}
    </div>
  )
}

export default DetectorList