import React, { useState } from 'react';
import { AppBar, Toolbar, Button, Box, IconButton, Collapse } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import { useNavigate, useLocation, useParams } from 'react-router-dom';

const NavBar = () => {
  const [open, setOpen] = useState(true);
  const navigate = useNavigate();
  const location = useLocation();
  // Pull guildId from URL if present
  const guildIdMatch = location.pathname.match(/\/server\/(\d+)/);
  const guildId = guildIdMatch ? guildIdMatch[1] : null;

  return (
    <AppBar position="static" color="transparent" elevation={0} sx={{ mb: 2 }}>
      <Toolbar>
        <IconButton onClick={() => setOpen(prev => !prev)} aria-label="toggle menu"><MenuIcon /></IconButton>
        <Collapse in={open} orientation="horizontal">
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Button onClick={() => navigate('/dashboard')} color="inherit">Dashboard</Button>
            <Button onClick={() => navigate('/discord')} color="inherit">Discord!</Button>
            <Button onClick={() => navigate('/contact')} color="inherit">Contact</Button>
            {guildId && (
              <Button startIcon={<HelpOutlineIcon />} onClick={() => navigate(`/server/${guildId}/help`)} color="inherit">Help</Button>
            )}
          </Box>
        </Collapse>
      </Toolbar>
    </AppBar>
  );
};

export default NavBar;