'use client';

import dynamic from 'next/dynamic';
import { useState } from 'react';
import LeftPane from '@/components/LeftPane';
import RightPane from '@/components/RightPane';
import type { HoverTarget } from '@/components/hoverTypes';
import { useGameState } from '@/lib/useGameState';

const Map = dynamic(() => import('@/components/Map'), { ssr: false });

export default function Home() {
  // Single polling source for the whole shell (v0.9.0): one /api/state loop, snapshot passed
  // down as props so later panes can share it without extra poll loops. applySnapshot (v0.10.0)
  // lets a pane push an action endpoint's full response snapshot in immediately.
  const { state, loading, error, refresh, applySnapshot } = useGameState(1000);

  // ISS-002 (v0.15.0): the side panels' hover target — shared here so hovering a row in
  // either pane highlights the matching plane/route/airports on the map.
  const [hovered, setHovered] = useState<HoverTarget | null>(null);

  return (
    <div className="app-shell">
      <LeftPane state={state} loading={loading} error={error} onRefresh={refresh} onHover={setHovered} />
      {/* v0.11.0 — the same polled snapshot drives the map's plane markers + route lines */}
      <Map state={state} hovered={hovered} />
      <RightPane state={state} loading={loading} applySnapshot={applySnapshot} onHover={setHovered} />
    </div>
  );
}