'use client'

import React from 'react'
import { useRouter } from 'next/navigation'
import Sidebar from '../ui/Sidebar'
import useNavigationStore from '../../app/store/navigationStore'
import ChartCard from './ChartCard'
import AreaChart from './AreaChart'
import BarChart from './BarChart'
import DetectorChart from './DetectorChart'
import detectorsData from '../../data/detectors.json'
 
const Dashboard: React.FC = () => {
  const router = useRouter()
  const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
  const objectId = currentObject?.id
  const objectTitle = currentObject?.title

  const handleBackClick = () => {
    router.push('/objects')
  }
  
  interface DetectorData {
    detector_id: number
    name: string
    object: string
    status: string
    type: string
    location: string
    floor: number
    checked?: boolean
    notifications: Array<{
      id: number
      type: string
      message: string
      timestamp: string
      acknowledged: boolean
      priority: string
    }>
  }

  const detectorsArray = Object.values(detectorsData.detectors).filter(
    (detector: DetectorData) => objectId ? detector.object === objectId : true
  )

  // Статусы
  const statusCounts = detectorsArray.reduce((acc: { critical: number; warning: number; normal: number }, detector: DetectorData) => {
    if (detector.status === '#b3261e') acc.critical++
    else if (detector.status === '#fd7c22') acc.warning++
    else if (detector.status === '#00ff00') acc.normal++
    return acc
  }, { critical: 0, warning: 0, normal: 0 })
  
  const handleNavigationClick = () => { 
    closeMonitoring()
    closeFloorNavigation()
    closeNotifications()
    setCurrentSubmenu(null)
    router.push('/navigation')
  }
 
  return (
    <div className="flex h-screen bg-[#0e111a]"> 
      <Sidebar 
        activeItem={1} // Dashboard  
      />
       
      <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>
            </nav>
          </div>
        </header>
         
        <div className="flex-1 p-6 overflow-auto"> 
           <div className="mb-6">
             <h1 className="text-white text-2xl font-semibold mb-6">Объект {objectId?.replace('object_', '')}</h1>
              
             <div className="flex items-center gap-3 mb-6">
               <button 
                 className="flex items-center gap-6 rounded-[10px] px-4 py-[18px] bg-[rgb(22,24,36)] text-white"
               >
                 <span className="text-sm font-medium">Датчики : все</span>
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                 </svg>
               </button>
               
               <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="flex items-center gap-2 bg-[rgb(22,24,36)] rounded-lg px-3 py-2">
                   <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                   </svg>
                   <span className="text-white text-sm font-medium">Период</span>
                   <div className="w-2 h-2 bg-white rounded-full"></div>
                 </div>
               </div>
             </div>
             
             {/* Карты-графики */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
               <ChartCard 
                 title="Показатель" 
                 subtitle="За последние 6 месяцев"
               >
                 <AreaChart />
               </ChartCard>
               
               <ChartCard 
                 title="Статистика" 
                 subtitle="Данные за период"
               >
                 <BarChart />
               </ChartCard>
             </div>
           </div>
          
          {/* Список детекторов */}
          <div>
            <div>
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-white text-2xl font-semibold">Тренды</h2>
                <div className="bg-[#161824] rounded-lg px-3 py-2 flex items-center gap-2">
                  <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clipRule="evenodd" />
                  </svg>
                  <span className="text-white text-sm font-medium">Месяц</span>
                  <svg className="w-4 h-4 text-gray-400" 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 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>
                      {detectorsArray.map((detector: DetectorData) => (
                        <tr key={detector.detector_id} className="border-b border-gray-800">
                          <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 === '#b3261e' ? 'Критическое' : 
                                 detector.status === '#fd7c22' ? 'Предупреждение' : 'Норма'}
                              </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>
                
                {/* Статы */}
                 <div className="mt-6 grid grid-cols-4 gap-4">
                   <div className="text-center">
                     <div className="text-2xl font-bold text-white">{detectorsArray.length}</div>
                     <div className="text-sm text-gray-400">Всего</div>
                   </div>
                   <div className="text-center">
                     <div className="text-2xl font-bold text-green-500">{statusCounts.normal}</div>
                     <div className="text-sm text-gray-400">Норма</div>
                   </div>
                   <div className="text-center">
                     <div className="text-2xl font-bold text-orange-500">{statusCounts.warning}</div>
                     <div className="text-sm text-gray-400">Предупреждения</div>
                   </div>
                   <div className="text-center">
                     <div className="text-2xl font-bold text-red-500">{statusCounts.critical}</div>
                     <div className="text-sm text-gray-400">Критические</div>
                   </div>
                 </div>
               </div>
               
               {/* Графики с аналитикой */}
                 <div className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-[18px]">
                  <ChartCard 
                    title="Тренды детекторов" 
                    subtitle="За последний месяц"
                  >
                    <DetectorChart type="line" />
                  </ChartCard>
                  
                  <ChartCard 
                    title="Статистика по месяцам" 
                    subtitle="Активность детекторов"
                  >
                    <DetectorChart type="bar" />
                  </ChartCard>
                  
                  <ChartCard 
                    title="Анализ производительности" 
                    subtitle="Эффективность работы"
                  >
                    <DetectorChart type="line" />
                  </ChartCard>
                  
                  <ChartCard 
                    title="Сводка по статусам" 
                    subtitle="Распределение состояний"
                  >
                    <DetectorChart type="bar" />
                  </ChartCard>
                </div>
             </div>
           </div>
        </div>
      </div>
    </div>
  )
}

export default Dashboard