'use client'

import React, { useState, useEffect } from 'react'
import ObjectGallery from '../../../components/objects/ObjectGallery'
import { ObjectData } from '../../../components/objects/ObjectCard'
import Sidebar from '../../../components/ui/Sidebar'
import detectorsData from '../../../data/detectors.json'

// Интерфейс для данных объекта из JSON
interface RawObjectData {
  name: string
  title: string
  description: string
  image?: string
  location: string
  address: string
  floors: number
  area: number
  type?: string
  status?: string
  zones: Array<{
    zone_id: string
    name: string
    detectors: number[]
  }>
}

// Функция для преобразования данных объекта из JSON
const transformObjectToObjectData = (objectId: string, objectData: RawObjectData): ObjectData => {
  return {
    object_id: objectId,
    title: objectData.title || `Объект ${objectId}`,
    description: objectData.description || `Описание объекта ${objectData.title || objectId}`,
    image: objectData.image || '/images/default-object.jpg',
    location: objectData.location || 'Не указано',
    floors: objectData.floors,
    area: objectData.area.toString(),
    type: objectData.type || 'object',
    status: objectData.status || 'active'
  }
}

const ObjectsPage: React.FC = () => {
  const [objects, setObjects] = useState<ObjectData[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null)

  useEffect(() => {
    const loadData = () => {
      try {
        setLoading(true)
        
        if (detectorsData.objects) {
          const transformedObjects = Object.entries(detectorsData.objects).map(
            ([objectId, objectData]) => transformObjectToObjectData(objectId, objectData)
          )
          setObjects(transformedObjects)
        } else {
          throw new Error('Не удалось получить данные объектов')
        }
      } catch (err) {
        console.error('Ошибка при загрузке данных:', err)
        setError(err instanceof Error ? err.message : 'Произошла неизвестная ошибка')
      } finally {
        setLoading(false)
      }
    }

    loadData()
  }, [])

  const handleObjectSelect = (objectId: string) => {
    console.log('Object selected:', objectId)
    setSelectedObjectId(objectId) 
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-[#0e111a]">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
          <p className="text-white">Загрузка объектов...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-[#0e111a]">
        <div className="text-center">
          <div className="text-red-500 mb-4">
            <svg className="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
            </svg>
          </div>
          <h3 className="text-lg font-medium text-white mb-2">Ошибка загрузки</h3>
          <p className="text-[#71717a] mb-4">{error}</p>
          <button
            onClick={() => window.location.reload()}
            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-[#3193f5] hover:bg-[#2563eb] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200"
          >
            Попробовать снова
          </button>
        </div>
      </div>
    )
  }
  return (
    <div className="flex h-screen bg-[#0e111a]">
      <Sidebar activeItem={null} />
      <div className="flex-1 overflow-hidden">
        <ObjectGallery
          objects={objects}
          title="Объекты"
          onObjectSelect={handleObjectSelect}
          selectedObjectId={selectedObjectId}
        />
      </div>
    </div>
  )
}

export default ObjectsPage