import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import Drawer from '@mui/material/Drawer'
import Typography from '@mui/material/Typography'
import { STORE_NAME } from '@/shared/config'
import type { AuthUser } from '@/shared/model/auth'
import type { ColorScheme, ThemeModePreference } from '@/shared/model/theme'
import { BearLogo } from '@/shared/ui/BearLogo'
import { ModeSwitcher } from '@/shared/ui/ModeSwitcher'
import { SchemeSwitcher } from '@/shared/ui/SchemeSwitcher'

type Props = {
  open: boolean
  onClose: () => void
  user: AuthUser | null
  isAdmin: boolean
  navItems: { label: string; to: string }[]
  scheme: ColorScheme
  mode: ThemeModePreference
  resolvedMode: 'light' | 'dark'
  onSchemeChange: (scheme: ColorScheme) => void
  onCycleMode: () => void
  onNavigate: (to: string) => void
  onLogout: () => void
}

export function NavigationDrawer({
  open,
  onClose,
  user,
  isAdmin,
  navItems,
  scheme,
  mode,
  resolvedMode,
  onSchemeChange,
  onCycleMode,
  onNavigate,
  onLogout,
}: Props) {
  const go = (to: string) => {
    onClose()
    onNavigate(to)
  }

  return (
    <Drawer
      open={open}
      onClose={onClose}
      slotProps={{ paper: { sx: { width: 320, maxWidth: '85vw' } } }}
      ModalProps={{ keepMounted: true }}
    >
      <Box sx={{ p: 2 }}>
        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
          <BearLogo sx={{ width: 28, height: 28 }} />
          <Typography variant="h6">{STORE_NAME}</Typography>
        </Box>

        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {navItems.map((i) => (
            <Button key={i.to} variant="text" onClick={() => go(i.to)} sx={{ justifyContent: 'flex-start' }}>
              {i.label}
            </Button>
          ))}
          {!isAdmin && (
            <Button variant="text" onClick={() => go(user ? '/cart' : '/auth')} sx={{ justifyContent: 'flex-start' }}>
              Корзина
            </Button>
          )}
          {user && !isAdmin && (
            <Button variant="text" onClick={() => go('/me/orders')} sx={{ justifyContent: 'flex-start' }}>
              Заказы
            </Button>
          )}
          {!isAdmin && (
            <Button variant="text" onClick={() => go(user ? '/me' : '/auth')} sx={{ justifyContent: 'flex-start' }}>
              {user ? 'Профиль' : 'Вход / регистрация'}
            </Button>
          )}
          {!user && isAdmin && (
            <Button variant="text" onClick={() => go('/auth')} sx={{ justifyContent: 'flex-start' }}>
              Вход / регистрация
            </Button>
          )}
          {user && (
            <Button variant="text" color="error" onClick={onLogout} sx={{ justifyContent: 'flex-start' }}>
              Выход
            </Button>
          )}
        </Box>

        <Divider sx={{ my: 2 }} />

        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
          <SchemeSwitcher value={scheme} onChange={onSchemeChange} orientation="horizontal" />
          <ModeSwitcher mode={mode} resolvedMode={resolvedMode} onCycleMode={onCycleMode} />
        </Box>
      </Box>
    </Drawer>
  )
}