import { useState } from 'react';
import { LegacyLifeApp } from './components/LegacyLifeApp';
import { WorldSandboxApp } from './components/WorldSandboxApp';
import './styles.css';

type AppMode = 'legacy' | 'sandbox';

const MODES: Array<{
  id: AppMode;
  label: string;
  description: string;
}> = [
  {
    id: 'legacy',
    label: 'Legacy Pack',
    description: 'Modern React shell running the original data-driven life simulator.',
  },
  {
    id: 'sandbox',
    label: 'Sandbox Worlds',
    description: 'Experimental world-schema sandbox kept for forward-looking engine work.',
  },
];

export default function App() {
  const [mode, setMode] = useState<AppMode>('legacy');

  return (
    <div className="app-shell">
      <section className="mode-switch">
        <div className="mode-switch-copy">
          <p className="eyebrow">Rewrite Roadmap</p>
          <h2>Bridge the real game first, then expand the engine.</h2>
        </div>
        <div className="mode-tabs">
          {MODES.map((entry) => (
            <button
              aria-pressed={entry.id === mode}
              className={`mode-tab ${entry.id === mode ? 'is-active' : ''}`}
              key={entry.id}
              onClick={() => setMode(entry.id)}
              type="button"
            >
              <strong>{entry.label}</strong>
              <span>{entry.description}</span>
            </button>
          ))}
        </div>
      </section>

      {mode === 'legacy' ? <LegacyLifeApp /> : <WorldSandboxApp />}
    </div>
  );
}
