import { ReactNode } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import {
  Box,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  AppBar,
  Toolbar,
  Typography,
  Container,
} from '@mui/material'
import {
  Dashboard,
  AccountBalance,
  Assessment,
  Settings,
  Psychology,
  ShoppingCart,
} from '@mui/icons-material'
import logo from '../assets/logo.png'

const Logo = () => (
  <Box
    sx={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      p: 2,
      mt: 'auto',
    }}
  >
    <Box
      component="img"
      src={logo}
      alt="FXQ One Logo"
      sx={{
        height: 120,
        width: 'auto',
        maxWidth: '90%',
        filter: 'drop-shadow(0 0 12px rgba(255, 152, 0, 0.7)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))',
        transition: 'filter 0.3s ease, transform 0.3s ease',
        '&:hover': {
          filter: 'drop-shadow(0 0 20px rgba(255, 152, 0, 0.9)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7))',
          transform: 'scale(1.08)',
        },
      }}
    />
  </Box>
)

const drawerWidth = 200

interface LayoutProps {
  children: ReactNode
}

const menuItems = [
  { text: 'Dashboard', icon: <Dashboard />, path: '/' },
  { text: 'Strategies', icon: <Psychology />, path: '/strategies' },
  { text: 'Trading', icon: <ShoppingCart />, path: '/trading' },
  { text: 'Portfolio', icon: <AccountBalance />, path: '/portfolio' },
  { text: 'Backtesting', icon: <Assessment />, path: '/backtesting' },
  { text: 'Settings', icon: <Settings />, path: '/settings' },
]

export default function Layout({ children }: LayoutProps) {
  const navigate = useNavigate()
  const location = useLocation()

  return (
    <Box sx={{ display: 'flex' }}>
      <AppBar
        position="fixed"
        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
      >
        <Toolbar>
          <Typography variant="h6" noWrap component="div" sx={{ fontWeight: 'bold' }}>
            FXQ One
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
            display: 'flex',
            flexDirection: 'column',
          },
        }}
      >
        <Toolbar />
        <Box sx={{ overflow: 'auto', flexGrow: 1 }}>
          <List>
            {menuItems.map((item) => (
              <ListItem key={item.text} disablePadding>
                <ListItemButton
                  selected={location.pathname === item.path}
                  onClick={() => navigate(item.path)}
                >
                  <ListItemIcon sx={{ color: 'inherit', minWidth: 40 }}>{item.icon}</ListItemIcon>
                  <ListItemText primary={item.text} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        </Box>
        <Logo />
      </Drawer>
      <Box
        component="main"
        sx={{
          flexGrow: 1,
          bgcolor: 'background.default',
          minHeight: '100vh',
        }}
      >
        <Toolbar />
        <Container maxWidth="xl" sx={{ py: 3 }}>
          {children}
        </Container>
      </Box>
    </Box>
  )
}
