'use client'

import React, { useEffect, useState, useMemo } from 'react'
import { useRouter } from 'next/navigation'
import Sidebar from '../ui/Sidebar'
import AnimatedBackground from '../ui/AnimatedBackground'
import useNavigationStore from '../../app/store/navigationStore'
import ChartCard from './ChartCard'
import AreaChart from './AreaChart'
import BarChart from './BarChart'
import { aggregateChartDataByDays, aggregateAlertsBySeverity } from '../../lib/chartDataAggregator'
 
const Dashboard: React.FC = () => {
  const router = useRouter()
  const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications, navigateToSensor } = useNavigationStore()
  const objectTitle = currentObject?.title

  const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
  const [rawChartData, setRawChartData] = useState<{ timestamp: string; value: number }[]>([])
  const [sensorTypes] = useState<Array<{code: string, name: string}>>([
    { code: '', name: 'Все датчики' },
    { code: 'GA', name: 'Инклинометр' },
    { code: 'PE', name: 'Танзометр' },
    { code: 'GLE', name: 'Гидроуровень' }
  ])
  const [selectedSensorType, setSelectedSensorType] = useState<string>('')
  const [selectedChartPeriod, setSelectedChartPeriod] = useState<string>('168')
  const [selectedTablePeriod, setSelectedTablePeriod] = useState<string>('168')  

  useEffect(() => {
    const loadDashboard = async () => {
      try {
        const params = new URLSearchParams()
        params.append('time_period', selectedChartPeriod)
        
        const res = await fetch(`/api/get-dashboard?${params.toString()}`, { cache: 'no-store' })
        if (!res.ok) return
        const payload = await res.json()
        console.log('[Dashboard] GET /api/get-dashboard', { status: res.status, payload })
        
        let tableData = payload?.data?.table_data ?? []
        tableData = Array.isArray(tableData) ? tableData : []
 
        if (objectTitle) {
          tableData = tableData.filter((a: any) => a.object === objectTitle)
        }
         
        if (selectedSensorType && selectedSensorType !== '') {
          tableData = tableData.filter((a: any) => { 
            return a.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
          })
        }
        
        setDashboardAlerts(tableData as any[])

        const cd = Array.isArray(payload?.data?.chart_data) ? payload.data.chart_data : []
        setRawChartData(cd as any[])
      } catch (e) {
        console.error('Failed to load dashboard:', e)
      }
    }
    loadDashboard()
  }, [objectTitle, selectedChartPeriod, selectedSensorType])

  // Отдельный эффект для загрузки таблицы по выбранному периоду
  useEffect(() => {
    const loadTableData = async () => {
      try {
        const params = new URLSearchParams()
        params.append('time_period', selectedTablePeriod)
        
        const res = await fetch(`/api/get-dashboard?${params.toString()}`, { cache: 'no-store' })
        if (!res.ok) return
        const payload = await res.json()
        console.log('[Dashboard] GET /api/get-dashboard (table)', { status: res.status, payload })
        
        let tableData = payload?.data?.table_data ?? []
        tableData = Array.isArray(tableData) ? tableData : []
 
        if (objectTitle) {
          tableData = tableData.filter((a: any) => a.object === objectTitle)
        }
         
        if (selectedSensorType && selectedSensorType !== '') {
          tableData = tableData.filter((a: any) => { 
            return a.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
          })
        }
        
        setDashboardAlerts(tableData as any[])
      } catch (e) {
        console.error('Failed to load table data:', e)
      }
    }
    loadTableData()
  }, [objectTitle, selectedTablePeriod, selectedSensorType])

  const handleBackClick = () => {
    router.push('/objects')
  }
   
  const filteredAlerts = dashboardAlerts.filter((alert: any) => {
    if (selectedSensorType === '') return true
    return alert.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
  })

  // Статусы
  const statusCounts = filteredAlerts.reduce((acc: { critical: number; warning: number; normal: number }, a: any) => {
    if (a.severity === 'critical') acc.critical++
    else if (a.severity === 'warning') acc.warning++
    else acc.normal++
    return acc
  }, { critical: 0, warning: 0, normal: 0 })
  
  const handleNavigationClick = () => { 
    closeMonitoring()
    closeFloorNavigation()
    closeNotifications()
    setCurrentSubmenu(null)
    router.push('/navigation')
  }
  
  const handleGoTo3D = async (alert: any, viewType: 'building' | 'floor') => {
    // Используем alert.name как идентификатор датчика (например, "GA-11")
    const sensorId = alert.serial_number || alert.name
    
    if (!sensorId) {
      console.warn('[Dashboard] Alert missing sensor identifier:', alert)
      return
    }
    
    const result = await navigateToSensor(
      sensorId,
      alert.floor || null,
      viewType
    )
    
    if (result) {
      // Переходим на страницу навигации с параметрами focusSensorId и modelPath
      router.push(`/navigation?focusSensorId=${encodeURIComponent(result.sensorSerialNumber)}&modelPath=${encodeURIComponent(result.modelPath)}`)
    }
  }

  const handleSensorTypeChange = (sensorType: string) => {
    setSelectedSensorType(sensorType)
  }

  const handleChartPeriodChange = (period: string) => {
    setSelectedChartPeriod(period)
  }

  const handleTablePeriodChange = (period: string) => {
    setSelectedTablePeriod(period)
  }

  // Агрегируем данные графика в зависимости от периода с разделением по severity
  const chartData = useMemo(() => {
    return aggregateAlertsBySeverity(dashboardAlerts, selectedChartPeriod)
  }, [dashboardAlerts, selectedChartPeriod])

  const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
  const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }
 
  return (
    <div className="relative flex h-screen bg-[#0e111a] overflow-hidden"> 
      <AnimatedBackground />
      <div className="relative z-20">
        <Sidebar 
          activeItem={1} // Dashboard  
        />
      </div>
       
      <div className="relative z-10 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>
            </nav>
          </div>
        </header>
         
        <div className="flex-1 p-6 overflow-auto"> 
           <div className="mb-6">
             <h1 style={interSemiboldStyle} className="text-white text-2xl mb-6">{objectTitle || 'Объект'}</h1>
              
             <div className="flex items-center gap-3 mb-6">
               <div className="relative">
                 <select 
                   value={selectedSensorType}
                   onChange={(e) => handleSensorTypeChange(e.target.value)}
                   className="flex items-center gap-6 rounded-[10px] px-4 py-[18px] bg-[rgb(22,24,36)] text-white appearance-none pr-8"
                 >
                   {sensorTypes.map((type) => (
                     <option key={type.code} value={type.code}>
                       {type.name}
                     </option>
                   ))}
                 </select>
                 <svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                 </svg>
               </div>
               
               <div className="flex items-center gap-3 ml-auto">
                 <button 
                   onClick={handleNavigationClick}
                   className="rounded-[10px] px-4 py-[18px] bg-gray-600 text-gray-300 hover:bg-[rgb(22,24,36)] hover:text-white transition-colors"
                 >
                   <span className="text-sm font-medium">Навигация</span>
                 </button>
                 
                 <div className="relative">
                   <select 
                     value={selectedChartPeriod}
                     onChange={(e) => handleChartPeriodChange(e.target.value)}
                     className="flex items-center gap-2 bg-[rgb(22,24,36)] rounded-lg px-3 py-2 text-white appearance-none pr-8"
                   >
                     <option value="24">День</option>
                     <option value="72">3 дня</option>
                     <option value="168">Неделя</option>
                     <option value="720">Месяц</option> 
                   </select>
                   <svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                   </svg>
                 </div>
               </div>
             </div>
             
             {/* Карты-графики */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
               <ChartCard 
                 title="Показатель"  
               >
                 <AreaChart data={chartData} />
               </ChartCard>
               
               <ChartCard 
                 title="Статистика"  
               >
                 <BarChart data={chartData} />
               </ChartCard>
             </div>
           </div>
          
          {/* Список детекторов */}
          <div>
            <div>
              <div className="flex items-center justify-between mb-6">
                <h2 style={interSemiboldStyle} className="text-white text-2xl">Тренды</h2>
                <div className="relative">
                  <select 
                    value={selectedTablePeriod}
                    onChange={(e) => handleTablePeriodChange(e.target.value)}
                    className="bg-[#161824] rounded-lg px-3 py-2 flex items-center gap-2 text-white appearance-none pr-8"
                  >
                    <option value="24">День</option>
                    <option value="72">3 дня</option>
                    <option value="168">Неделя</option>
                    <option value="720">Месяц</option> 
                  </select>
                  <svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                  </svg>
                </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 style={interSemiboldStyle} className="text-left text-white text-sm py-3">Детектор</th>
                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Сообщение</th>
                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Серьезность</th>
                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Дата</th>
                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Решен</th>
                        <th style={interSemiboldStyle} className="text-center text-white text-sm py-3">3D Вид</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredAlerts.map((alert: any) => (
                        <tr key={alert.id} className="border-b border-gray-800">
                          <td style={interRegularStyle} className="py-3 text-white text-sm">{alert.name}</td>
                          <td style={interRegularStyle} className="py-3 text-gray-300 text-sm">{alert.message}</td>
                          <td className="py-3">
                            <span style={interRegularStyle} className={`text-sm ${alert.severity === 'critical' ? 'text-red-500' : alert.severity === 'warning' ? 'text-orange-500' : 'text-green-500'}`}>
                              {alert.severity === 'critical' ? 'Критическое' : alert.severity === 'warning' ? 'Предупреждение' : 'Норма'}
                            </span>
                          </td>
                          <td style={interRegularStyle} className="py-3 text-gray-400 text-sm">{new Date(alert.created_at).toLocaleString()}</td>
                          <td className="py-3">
                            {alert.resolved ? (
                              <span style={interRegularStyle} className="text-sm text-green-500">Да</span>
                            ) : (
                              <span style={interRegularStyle} className="text-sm text-gray-500">Нет</span>
                            )
                            }
                          </td>
                          <td className="py-3">
                            <div className="flex items-center justify-center gap-2">
                              <button
                                onClick={() => handleGoTo3D(alert, 'building')}
                                className="p-1.5 rounded hover:bg-blue-600/20 transition-colors group"
                                title="Показать на общей модели"
                              >
                                <img src="/icons/Building3D.png" alt="Здание" className="w-5 h-5 opacity-70 group-hover:opacity-100" />
                              </button>
                              <button
                                onClick={() => handleGoTo3D(alert, 'floor')}
                                className="p-1.5 rounded hover:bg-blue-600/20 transition-colors group"
                                title="Показать на этаже"
                              >
                                <img 
                                  src="/icons/Floor3D.png" 
                                  alt="Этаж" 
                                  className="w-5 h-5 opacity-70 group-hover:opacity-100" 
                                />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
              
              {/* Статистика */}
              <div className="mt-6 grid grid-cols-4 gap-4">
                <div className="text-center">
                  <div style={interSemiboldStyle} className="text-2xl text-white">{filteredAlerts.length}</div>
                  <div style={interRegularStyle} className="text-sm text-gray-400">Всего</div>
                </div>
                <div className="text-center">
                  <div style={interSemiboldStyle} className="text-2xl text-green-500">{statusCounts.normal}</div>
                  <div style={interRegularStyle} className="text-sm text-gray-400">Норма</div>
                </div>
                <div className="text-center">
                  <div style={interSemiboldStyle} className="text-2xl text-orange-500">{statusCounts.warning}</div>
                  <div style={interRegularStyle} className="text-sm text-gray-400">Предупреждения</div>
                </div>
                <div className="text-center">
                  <div style={interSemiboldStyle} className="text-2xl text-red-500">{statusCounts.critical}</div>
                  <div style={interRegularStyle} className="text-sm text-gray-400">Критические</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Dashboard