// frontend/src/pages/bellcloud/devices/DeviceMapPage.jsx
//
// Standalone route for the map view while it's under construction.
// Access via /devices/map-preview — not linked from the main UI.

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '@/lib/api'
import DeviceListMapView from './DeviceListMapView'

export default function DeviceMapPage() {
  const navigate = useNavigate()
  const [devices, setDevices] = useState([])
  const [mqttStatusMap, setMqttStatusMap] = useState({})
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    api.get('/devices').then((data) => {
      setDevices(data.devices ?? [])
      api.get('/mqtt/status').then((mqttData) => {
        if (mqttData?.devices) {
          const map = {}
          for (const s of mqttData.devices) map[s.device_serial] = s
          setMqttStatusMap(map)
        }
        setLoading(false)
      }).catch(() => setLoading(false))
    }).catch(() => setLoading(false))
  }, [])

  return (
    <DeviceListMapView
      devices={devices}
      loading={loading}
      mqttStatusMap={mqttStatusMap}
      onView={(device) => navigate(`/devices/${device.id}`)}
    />
  )
}
