import {
    AppBar,
    Toolbar,
    Typography,
    Button,
    Menu,
    MenuItem,
    IconButton,
} from '@mui/material'
import { AccountCircle } from '@mui/icons-material'
import { Link, useNavigate, useLocation } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { useState } from 'react'

export default function Layout({ children }: { children: React.ReactNode }) {
    const location = useLocation()
    const navigate = useNavigate()
    const { isLoggedIn, logout } = useAuth()

    const [anchorElCharacter, setAnchorElCharacter] = useState<null | HTMLElement>(null)
    const [anchorElHomework, setAnchorElHomework] = useState<null | HTMLElement>(null)
    const [anchorElFriend, setAnchorElFriend] = useState<null | HTMLElement>(null)
    const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)

    const handleMenuOpen = (
        setter: React.Dispatch<React.SetStateAction<null | HTMLElement>>
    ) => (event: React.MouseEvent<HTMLElement>) => {
        setter(event.currentTarget)
    }

    const handleMenuClose = (
        setter: React.Dispatch<React.SetStateAction<null | HTMLElement>>
    ) => () => {
        setter(null)
    }

    const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorElUser(event.currentTarget)
    }

    const handleUserMenuClose = () => {
        setAnchorElUser(null)
    }

    const handleLogout = () => {
        logout()
        navigate('/login')
    }

    const menuItems = isLoggedIn ? (
        <>
            <Button component={Link} to="/guide">사용법 안내</Button>

            <Button component={Link} to="/dashboard" color="inherit">대시보드</Button>

            <Button color="inherit" onClick={handleMenuOpen(setAnchorElCharacter)}>캐릭터</Button>
            <Menu
                anchorEl={anchorElCharacter}
                open={Boolean(anchorElCharacter)}
                onClose={handleMenuClose(setAnchorElCharacter)}
            >
                <MenuItem component={Link} to="/characters" onClick={handleMenuClose(setAnchorElCharacter)}>캐릭터 목록</MenuItem>
                <MenuItem component={Link} to="/characters/me/homeworks" onClick={handleMenuClose(setAnchorElCharacter)}>내 숙제</MenuItem>
            </Menu>

            <Button color="inherit" onClick={handleMenuOpen(setAnchorElHomework)}>숙제</Button>
            <Menu
                anchorEl={anchorElHomework}
                open={Boolean(anchorElHomework)}
                onClose={handleMenuClose(setAnchorElHomework)}
            >
                <MenuItem component={Link} to="/homeworks" onClick={handleMenuClose(setAnchorElHomework)}>숙제 목록</MenuItem>
            </Menu>

            <Button color="inherit" onClick={handleMenuOpen(setAnchorElFriend)}>친구</Button>
            <Menu
                anchorEl={anchorElFriend}
                open={Boolean(anchorElFriend)}
                onClose={handleMenuClose(setAnchorElFriend)}
            >
                <MenuItem component={Link} to="/friends" onClick={handleMenuClose(setAnchorElFriend)}>친구목록</MenuItem>
                <MenuItem component={Link} to="/friends/requests" onClick={handleMenuClose(setAnchorElFriend)}>요청관리</MenuItem>
            </Menu>

            <IconButton color="inherit" onClick={handleUserMenuOpen} size="large">
                <AccountCircle />
            </IconButton>
            <Menu
                anchorEl={anchorElUser}
                open={Boolean(anchorElUser)}
                onClose={handleUserMenuClose}
            >
                <MenuItem onClick={() => { handleUserMenuClose(); navigate('/me') }}>
                    내 정보
                </MenuItem>
                <MenuItem onClick={() => { handleUserMenuClose(); handleLogout() }}>
                    로그아웃
                </MenuItem>
            </Menu>
        </>
    ) : (
        <>
            <Button component={Link} to="/guide">사용법 안내</Button>

            <Button component={Link} to="/signup" color="inherit">회원가입</Button>
            <Button component={Link} to="/login" color="inherit">로그인</Button>
        </>
    )

    return (
        <>
            <AppBar position="static" key={location.pathname}>
                <Toolbar>
                    <Typography variant="h6" sx={{ flexGrow: 1 }}>
                        <Button component={Link} to="/" color="inherit">
                            숙제노기
                        </Button>
                    </Typography>
                    {menuItems}
                </Toolbar>
            </AppBar>

            {children}
        </>
    )
}