import { Routes, Route, Link } from 'react-router-dom';
import { useState } from 'react';
import DatasetExplorer from './pages/DatasetExplorer';
import ArtifactViewer from './pages/ArtifactViewer';
import MissionUpload from './pages/MissionUpload';
import FieldConsole from './pages/FieldConsole';
import HealthDashboard from './pages/HealthDashboard';
import PilotChecklist from './pages/PilotChecklist';
import ReadinessDashboard from './pages/ReadinessDashboard';

function App() {
  const [developerMode, setDeveloperMode] = useState(false);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 20 }}>
      <header style={{ borderBottom: '2px solid #333', paddingBottom: 20, marginBottom: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}>
          <h1 style={{ fontSize: 'clamp(1.2rem, 5vw, 2rem)', margin: 0 }}>LandveX {developerMode ? '(Dev)' : ''}</h1>
          <button
            onClick={() => setDeveloperMode(!developerMode)}
            style={{
              padding: '6px 12px',
              background: developerMode ? '#ffd700' : '#f0f0f0',
              border: '1px solid #ccc',
              borderRadius: 4,
              cursor: 'pointer',
              fontSize: '0.8rem',
            }}
          >
            {developerMode ? '🔓 Dev' : '🔒 Normal'}
          </button>
        </div>
        <nav style={{ display: 'flex', gap: 10, marginTop: 10, flexWrap: 'wrap', fontSize: '0.85rem' }}>
          <Link to="/">Explorer</Link>
          <Link to="/upload">Upload</Link>
          <Link to="/console">Console</Link>
          <Link to="/health">Health</Link>
          <Link to="/pilot">Pilot</Link>
          <Link to="/readiness">Ready</Link>
          {developerMode && (
            <>
              <Link to="/datasets">Data</Link>
              <Link to="/models">Models</Link>
              <Link to="/training">Train</Link>
            </>
          )}
        </nav>
      </header>

      <Routes>
        <Route path="/" element={<DatasetExplorer />} />
        <Route path="/upload" element={<MissionUpload />} />
        <Route path="/artifact/:id" element={<ArtifactViewer />} />
        <Route path="/console" element={<FieldConsole />} />
        <Route path="/health" element={<HealthDashboard />} />
        <Route path="/pilot" element={<PilotChecklist />} />
        <Route path="/readiness" element={<ReadinessDashboard />} />
      </Routes>
    </div>
  );
}

export default App;