"use client";

import dynamic from "next/dynamic";
import { useCallback, useState } from "react";

import {
  MapPanelSkeleton,
  MapTimelineSkeleton,
} from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";

const Timeline = dynamic(
  () => import("@components/olmap/core/Controls/Timeline"),
  {
    loading: () => <MapTimelineSkeleton />,
  },
);
const SCADADeviceList = dynamic(
  () => import("@components/olmap/SCADA/SCADADeviceList"),
  {
    loading: () => <MapPanelSkeleton variant="network-simulation" />,
  },
);
const SCADADataPanel = dynamic(
  () => import("@components/olmap/SCADA/SCADADataPanel"),
  {
    loading: () => null,
  },
);

export default function Home() {
  const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
  const [panelVisible, setPanelVisible] = useState<boolean>(false);

  const handleSelectionChange = useCallback((ids: string[]) => {
    setSelectedDeviceIds(ids);
    setPanelVisible(ids.length > 0);
  }, []);

  const handleDeviceClick = useCallback(() => {
    setPanelVisible(true);
  }, []);

  return (
    <>
      <MapToolbar queryType="realtime" />
      <Timeline />
      <SCADADeviceList
        onDeviceClick={handleDeviceClick}
        onSelectionChange={handleSelectionChange}
        selectedDeviceIds={selectedDeviceIds}
      />
      <SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
    </>
  );
}
