cosmo/frontend/src/App.tsx

/**
 * Cosmo - Deep Space Explorer
 * Main application component
 */
import { useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSpaceData } from './hooks/useSpaceData';
import { useHistoricalData } from './hooks/useHistoricalData';
import { useTrajectory } from './hooks/useTrajectory';
import { useScreenshot } from './hooks/useScreenshot';
import { Header } from './components/Header';
import { Scene } from './components/Scene';
import { ProbeList } from './components/ProbeList';
import { TimelineController } from './components/TimelineController';
import { Loading } from './components/Loading';
import { InterstellarTicker } from './components/InterstellarTicker';
import { ControlPanel } from './components/ControlPanel';
import type { CelestialBody } from './types';

// Timeline configuration - will be fetched from backend later
const TIMELINE_DAYS = 30; // Total days in timeline range

function App() {
  const navigate = useNavigate();
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const [isTimelineMode, setIsTimelineMode] = useState(false);
  const [showOrbits, setShowOrbits] = useState(true);
  const [isSoundOn, setIsSoundOn] = useState(false);
  const [showDanmaku, setShowDanmaku] = useState(true);
  const { takeScreenshot } = useScreenshot();

  // Use real-time data or historical data based on mode
  const { bodies: realTimeBodies, loading: realTimeLoading, error: realTimeError } = useSpaceData();
  const { bodies: historicalBodies, loading: historicalLoading, error: historicalError } = useHistoricalData(selectedDate);

  const bodies = isTimelineMode ? historicalBodies : realTimeBodies;
  const loading = isTimelineMode ? historicalLoading : realTimeLoading;
  const error = isTimelineMode ? historicalError : realTimeError;

  const [selectedBody, setSelectedBody] = useState<CelestialBody | null>(null);
  const { trajectoryPositions } = useTrajectory(selectedBody);

  // Handle time change from timeline controller
  const handleTimeChange = useCallback((date: Date) => {
    setSelectedDate(date);
  }, []);

  // Toggle timeline mode
  const toggleTimelineMode = useCallback(() => {
    setIsTimelineMode((prev) => !prev);
    if (!isTimelineMode) {
      // Entering timeline mode, set initial date to now (will play backward)
      setSelectedDate(new Date());
    } else {
      setSelectedDate(null);
    }
  }, [isTimelineMode]);

  // Filter probes and planets from all bodies
  const probes = bodies.filter((b) => b.type === 'probe');
  const planets = bodies.filter((b) =>
    b.type === 'planet' || b.type === 'dwarf_planet' || b.type === 'satellite'
  );

  const handleBodySelect = (body: CelestialBody | null) => {
    setSelectedBody(body);
  };

  // Only show full screen loading when we have no data
  // This prevents flashing when timeline is playing and fetching new data
  if (loading && bodies.length === 0) {
    return <Loading />;
  }

  if (error) {
    return (
      <div className="w-full h-full flex items-center justify-center bg-black text-white">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">数据加载失败</h1>
          <p className="text-red-400">{error}</p>
          <p className="mt-4 text-sm text-gray-400">
            请确保后端 API 运行在 http://localhost:8000
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="w-full h-full relative">
      {/* Header with simplified branding */}
      <Header
        bodyCount={bodies.length}
        selectedBodyName={selectedBody?.name}
      />

      {/* Right Control Panel */}
      <ControlPanel
        isTimelineMode={isTimelineMode}
        onToggleTimeline={toggleTimelineMode}
        showOrbits={showOrbits}
        onToggleOrbits={() => setShowOrbits(!showOrbits)}
        isSoundOn={isSoundOn}
        onToggleSound={() => setIsSoundOn(!isSoundOn)}
        showDanmaku={showDanmaku}
        onToggleDanmaku={() => setShowDanmaku(!showDanmaku)}
        onLogin={() => navigate('/login')}
        onScreenshot={takeScreenshot}
      />

      {/* Probe List Sidebar */}
      <ProbeList
        probes={probes}
        planets={planets}
        onBodySelect={handleBodySelect}
        selectedBody={selectedBody}
      />

      {/* 3D Scene */}
      <Scene
        bodies={bodies}
        selectedBody={selectedBody}
        trajectoryPositions={trajectoryPositions}
        showOrbits={showOrbits}
        onBodySelect={handleBodySelect}
      />

      {/* Timeline Controller */}
      {isTimelineMode && (
        <TimelineController
          onTimeChange={handleTimeChange}
          maxDate={new Date()} // Start point (now)
          minDate={new Date(Date.now() - TIMELINE_DAYS * 24 * 60 * 60 * 1000)} // End point (past)
        />
      )}

      {/* Interstellar Ticker Sound (Controlled) */}
      <InterstellarTicker isPlaying={isSoundOn} />

      {/* Instructions overlay (Only show when exploring freely) */}
      {!selectedBody && (
        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 text-white text-xs bg-black/50 backdrop-blur-sm border border-white/10 px-4 py-2 rounded-full flex items-center gap-4 pointer-events-none">
          <div className="flex items-center gap-2">
            <span className="bg-white/20 p-1 rounded text-[10px]">左键</span> 旋转
          </div>
          <div className="flex items-center gap-2">
            <span className="bg-white/20 p-1 rounded text-[10px]">右键</span> 平移
          </div>
          <div className="flex items-center gap-2">
            <span className="bg-white/20 p-1 rounded text-[10px]">滚轮</span> 缩放
          </div>
        </div>
      )}
    </div>
  );
}

export default App;