'use client'

import React, { useEffect, useState } 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'

const Dashboard: React.FC = () => {
  const router = useRouter()
  const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
  const objectId = currentObject?.id
  const objectTitle = currentObject?.title

  const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
  const [chartData, setChartData] = useState<{ timestamp: string; value: number }[]>([])

  useEffect(() => {
    const loadDashboard = async () => {
      try {
        const res = await fetch('/api/get-dashboard', { cache: 'no-store' })
        if (!res.ok) return
        const payload = await res.json()
        console.log('[Dashboard] GET /api/get-dashboard', { status: res.status, payload })
        const tableData = payload?.data?.table_data ?? []
        const arr = (Array.isArray(tableData) ? tableData : [])
          .filter((a: any) => (objectTitle ? a.object === objectTitle : true))
        setDashboardAlerts(arr as any[])

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

  const handleBackClick = () => {
    router.push('/objects')
  }
  
  // Статусы
  const statusCounts = dashboardAlerts.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')
  }
 
  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 data={chartData} />
               </ChartCard>
               
               <ChartCard 
                 title="Статистика" 
                 subtitle="Данные за период"
               >
                 <BarChart data={chartData?.map((d: any) => ({ value: d.value }))} />
               </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>
                        <th className="text-left text-white font-medium py-3">Решен</th>
                      </tr>
                    </thead>
                    <tbody>
                      {dashboardAlerts.map((alert: any) => (
                        <tr key={alert.id} className="border-b border-gray-800">
                          <td className="py-3 text-white text-sm">{alert.name}</td>
                          <td className="py-3 text-gray-300 text-sm">{alert.message}</td>
                          <td className="py-3">
                            <span 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 className="py-3 text-gray-400 text-sm">{new Date(alert.created_at).toLocaleString()}</td>
                          <td className="py-3">
                            {alert.resolved ? (
                              <span className="text-sm text-green-500">Да</span>
                            ) : (
                              <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">{dashboardAlerts.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" data={chartData?.map((d: any) => ({ value: d.value }))} />
                  </ChartCard>
                  
                  <ChartCard 
                    title="Статистика по месяцам" 
                    subtitle="Активность детекторов"
                  >
                    <DetectorChart type="bar" data={chartData?.map((d: any) => ({ value: d.value }))} />
                  </ChartCard>
                  
                  <ChartCard 
                    title="Анализ производительности" 
                    subtitle="Эффективность работы"
                  >
                    <DetectorChart type="line" data={chartData?.map((d: any) => ({ value: d.value }))} />
                  </ChartCard>
                  
                  <ChartCard 
                    title="Сводка по статусам" 
                    subtitle="Распределение состояний"
                  >
                    <DetectorChart type="bar" data={chartData?.map((d: any) => ({ value: d.value }))} />
                  </ChartCard>
                </div>
             </div>
           </div>
        </div>
      </div>
    </div>
  )
}

export default Dashboard