もしもオービット

'use client';

import { useState, useEffect } from 'react';
import { sampleTrace } from '../data/sample-trace';

// NOTE: Types are re-declared here to avoid importing from `source/core`.
// This is a requirement for static trace-replay demos.
interface SimulationOutput {
  summary: string;
  collisionRiskIncrease: number;
}

const containerStyle: React.CSSProperties = {
  fontFamily: 'sans-serif',
  maxWidth: '800px',
  margin: '0 auto',
  padding: '2rem',
  backgroundColor: '#f5f5f5',
  color: '#333'
};

const headerStyle: React.CSSProperties = {
  borderBottom: '1px solid #ddd',
  paddingBottom: '1rem',
  marginBottom: '1rem',
  textAlign: 'center'
};

const mainStyle: React.CSSProperties = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr',
  gap: '2rem',
  alignItems: 'start',
  backgroundColor: '#fff',
  padding: '1.5rem',
  borderRadius: '12px',
  boxShadow: '0 4px 12px rgba(0,0,0,0.08)'
};

const controlsStyle: React.CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  gap: '1rem'
};

const resultsStyle: React.CSSProperties = {
  border: '1px solid #e0e0e0',
  borderRadius: '8px',
  padding: '1.5rem',
  backgroundColor: '#fefefe',
  minHeight: '200px'
};

const DynamicOrbitView = ({ isRunning, collisionRiskIncrease }: { isRunning: boolean, collisionRiskIncrease: number }) => {
  const [numDots, setNumDots] = useState(50); // Initial dots
  const [dotColor, setDotColor] = useState('white');
  const [showRedEffect, setShowRedEffect] = useState(false);

  useEffect(() => {
    let animationInterval: NodeJS.Timeout;

    if (isRunning) {
      setDotColo
...