import React from 'react'
import { Box, Paper, Stack } from '@mantine/core'
import { XRDProvider } from './context/XRDContext'
import Header from './components/Header'
import ResultsHero from './components/ResultsHero'
import XRDGraph from './components/XRDGraph'
import Controls from './components/Controls'
import LogitDrawer from './components/LogitDrawer'

function App() {
  return (
    <XRDProvider>
      <Box style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
        {/* Header - Full Width */}
        <Header />
        
        {/* Main Content Area - T-Shape Layout */}
        <Box style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
          {/* Sidebar - Controls Only */}
          <Box
            style={{
              width: '350px',
              flexShrink: 0,
              borderRight: '1px solid #e9ecef',
              overflowY: 'auto',
              backgroundColor: 'white',
            }}
          >
            <Box p="lg" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
              <Controls />
            </Box>
          </Box>
          
          {/* Main Panel - Results + Visualization */}
          <Box
            style={{
              flex: 1,
              overflowY: 'auto',
              background: 'linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%)',
              padding: '2rem',
            }}
          >
            <Stack gap="xl">
              {/* Results Hero Section */}
              <ResultsHero />
              
              {/* Visualization Section */}
              <Paper shadow="lg" p="lg" withBorder radius="md" style={{ backgroundColor: 'white' }}>
                <XRDGraph />
              </Paper>
            </Stack>
          </Box>
        </Box>
        
        {/* Logit Inspector Drawer */}
        <LogitDrawer />
      </Box>
    </XRDProvider>
  )
}

export default App