'use client'

import React, { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import Sidebar from '../../../components/ui/Sidebar'
import useNavigationStore from '../../store/navigationStore'
import DetectorList from '../../../components/alerts/DetectorList'
import ExportMenu from '../../../components/ui/ExportMenu'

const AlertsPage: React.FC = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { currentObject, setCurrentObject } = useNavigationStore()
  const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])

  const urlObjectId = searchParams.get('objectId')
  const urlObjectTitle = searchParams.get('objectTitle')
  const objectId = currentObject.id || urlObjectId
  const objectTitle = currentObject.title || urlObjectTitle
  
  useEffect(() => {
    if (urlObjectId && urlObjectTitle && (!currentObject.id || currentObject.id !== urlObjectId)) {
      setCurrentObject(urlObjectId, urlObjectTitle)
    }
  }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])

  const handleBackClick = () => {
    router.push('/dashboard')
  }

  const handleDetectorSelect = (detectorId: number, selected: boolean) => {
    if (selected) {
      setSelectedDetectors(prev => [...prev, detectorId])
    } else {
      setSelectedDetectors(prev => prev.filter(id => id !== detectorId))
    }
  }

  const handleExport = (format: 'csv' | 'pdf') => {
    // TODO: добавить функционал по экспорту
    console.log(`Exporting ${selectedDetectors.length} items as ${format}`)
  }



  return (
    <div className="flex h-screen bg-[#0e111a]"> 
      <Sidebar 
        activeItem={8} // История тревог 
      />
      
      <div className="flex-1 flex flex-col">
        <header className="bg-[#161824] border-b border-gray-700 px-6 py-4">
          <div className="flex items-center gap-4">
            <button 
              onClick={handleBackClick}
              className="text-gray-400 hover:text-white transition-colors"
              aria-label="Назад к дашборду"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <nav className="flex items-center gap-2 text-sm">
              <span className="text-gray-400">Дашборд</span>
              <span className="text-gray-600">/</span>
              <span className="text-white">{objectTitle || 'Объект'}</span>
              <span className="text-gray-600">/</span>
              <span className="text-white">Уведомления</span>
            </nav>
          </div>
        </header>
        
        <div className="flex-1 p-6 overflow-auto">
          <div className="mb-6">
            <div className="flex items-center justify-between mb-6">
              <h1 className="text-white text-2xl font-semibold">Уведомления и тревоги</h1>
              
              <div className="flex items-center gap-4">
                {/* Кол-во выбранных объектов */}
                {selectedDetectors.length > 0 && (
                  <span className="text-gray-300 text-sm">
                    Выбрано: <span className="text-white font-medium">{selectedDetectors.length}</span>
                  </span>
                )}
                
                <ExportMenu onExport={handleExport} />
              </div>
            </div>
            
            <DetectorList 
              objectId={objectId || undefined} 
              selectedDetectors={selectedDetectors}
              onDetectorSelect={handleDetectorSelect}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default AlertsPage