import { useState } from 'react'
import { ThemeProvider } from './contexts/ThemeContext.jsx'
import { SpotifyProvider } from './contexts/SpotifyContext.jsx'
import TopBar from './components/layout/TopBar.jsx'
import TabNav from './components/layout/TabNav.jsx'
import Overview from './pages/Overview.jsx'
import Navigation from './pages/Navigation.jsx'
import Audio from './pages/Audio.jsx'
import Systems from './pages/Systems.jsx'

const PAGES = {
  overview:   Overview,
  navigation: Navigation,
  audio:      Audio,
  systems:    Systems,
}

export default function App() {
  const [tab, setTab] = useState('overview')
  const Page = PAGES[tab] || Overview

  return (
    <ThemeProvider>
      <SpotifyProvider>
        <div style={styles.app}>
          <TopBar />
          <TabNav activeTab={tab} onTabChange={setTab} />
          <main style={styles.main}>
            <Page />
          </main>
        </div>
      </SpotifyProvider>
    </ThemeProvider>
  )
}

const styles = {
  app: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
    overflow: 'hidden',
    background: 'var(--bg)',
  },
  main: {
    flex: 1,
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,
  },
}