import React from 'react'
import { AppBar, Toolbar, Typography, IconButton, Box, Container, Badge } from '@mui/material'
import { Brightness4, Brightness7, FiberManualRecord } from '@mui/icons-material'
import { useUIStore } from '../stores/uiStore'

interface LayoutProps {
  children: React.ReactNode
}

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  const { theme, toggleTheme, wsConnected } = useUIStore()

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <AppBar position="static" color="default" elevation={1}>
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1, fontWeight: 600 }}>
            🎵 Audio Splitter
          </Typography>

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Badge
              color={wsConnected ? 'success' : 'error'}
              variant="dot"
              sx={{ mr: 1 }}
            >
              <FiberManualRecord
                sx={{
                  fontSize: 12,
                  color: wsConnected ? 'green' : 'red',
                  visibility: 'hidden',
                }}
              />
            </Badge>
            <Typography variant="caption" color="text.secondary">
              {wsConnected ? 'Connected' : 'Disconnected'}
            </Typography>

            <IconButton onClick={toggleTheme} color="inherit">
              {theme === 'light' ? <Brightness4 /> : <Brightness7 />}
            </IconButton>
          </Box>
        </Toolbar>
      </AppBar>

      <Container maxWidth="lg" sx={{ flex: 1, py: 4 }}>
        {children}
      </Container>

      <Box component="footer" sx={{ py: 2, textAlign: 'center', borderTop: 1, borderColor: 'divider' }}>
        <Typography variant="body2" color="text.secondary">
          Audio Splitter v0.1.0 • Built with ❤️
        </Typography>
      </Box>
    </Box>
  )
}