"use client";

import dynamic from "next/dynamic";
import { useNodes } from "@/lib/useNodes";
import { useActiveCalls } from "@/lib/useCalls";

// Leaflet is browser-only — must be dynamically imported with no SSR
const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });

export default function MapPage() {
  const { nodes, loading } = useNodes();
  const activeCalls = useActiveCalls();

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-white font-mono">Map</h1>
        <div className="flex items-center gap-4 text-xs font-mono text-gray-400">
          <span><span className="text-green-400">●</span> Online</span>
          <span><span className="text-orange-400 animate-pulse">●</span> Recording</span>
          <span><span className="text-indigo-400">●</span> Unconfigured</span>
          <span><span className="text-gray-600">●</span> Offline</span>
        </div>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-96 text-gray-600 font-mono text-sm">
          Loading map…
        </div>
      ) : (
        <div style={{ height: "calc(100vh - 160px)" }}>
          <MapView nodes={nodes} activeCalls={activeCalls} />
        </div>
      )}
    </div>
  );
}