'use client';

import dynamic from 'next/dynamic';
import { useEffect, useRef, useState } from 'react';
import LeftPane from '@/components/LeftPane';
import RightPane from '@/components/RightPane';
import ToastStack from '@/components/Toasts';
import type { HoverTarget } from '@/components/hoverTypes';
import { useGameState } from '@/lib/useGameState';
import { useToasts } from '@/lib/useToasts';
import { diffSnapshots } from '@/lib/deriveEvents';

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);

  // ISS-008 (v0.17.0): bottom-right toasts — action errors from both panes plus game events
  // derived by diffing consecutive snapshots (no server event feed exists).
  const { toasts, push, dismiss } = useToasts();
  const onError = (message: string) => push('error', message);

  // Diff each new snapshot against the previous one → info toasts. When the window is hidden
  // and notifications are granted, mirror them as browser notifications too.
  const prevSnapshotRef = useRef<typeof state>(null);
  useEffect(() => {
    if (state === null) return;
    for (const event of diffSnapshots(prevSnapshotRef.current, state)) {
      push('info', event.message);
      if (document.hidden && 'Notification' in window && Notification.permission === 'granted') {
        new Notification('Flight Ops', { body: event.message });
      }
    }
    prevSnapshotRef.current = state;
  }, [state, push]);

  return (
    <div className="app-shell">
      {/* ISS-021 (v0.20.0) — applySnapshot also reaches the left pane: its On board section's
          refuel/fly/abandon actions push their response snapshot into the shared state */}
      <LeftPane state={state} loading={loading} error={error} onRefresh={refresh} applySnapshot={applySnapshot} onHover={setHovered} onError={onError} />
      {/* v0.11.0 — the same polled snapshot drives the map's plane markers + route lines;
          ISS-010 (v0.18.0) — applySnapshot lets the airport popup's Relocate row push its
          action response into the shared state, exactly like RightPane does */}
      <Map state={state} hovered={hovered} applySnapshot={applySnapshot} />
      <RightPane state={state} loading={loading} applySnapshot={applySnapshot} onHover={setHovered} onError={onError} />
      <ToastStack toasts={toasts} onDismiss={dismiss} />
    </div>
  );
}