import React, { useContext } from 'react';
import { Navbar, Nav, Container, Button, Form } from 'react-bootstrap';
import { Link, useNavigate } from 'react-router-dom';
import { FaProjectDiagram, FaSignOutAlt, FaUsers, FaUser, FaMoon, FaSun } from 'react-icons/fa';
import AuthContext from '../../context/AuthContext';
import ThemeContext from '../../context/ThemeContext';

const NavbarComponent = () => {
  const { user, logout, hasRole } = useContext(AuthContext);
  const { darkMode, toggleTheme } = useContext(ThemeContext);
  const navigate = useNavigate();

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

  return (
    <Navbar bg="dark" variant="dark" expand="lg" className="mb-4">
      <Container>
        <Navbar.Brand as={Link} to="/dashboard">
          <FaProjectDiagram className="me-2" />
          Project Progress Tracker
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/dashboard">Dashboard</Nav.Link>
            {(hasRole('super_admin') || hasRole('admin')) && (
              <>
                <Nav.Link as={Link} to="/projects/new">New Project</Nav.Link>
                <Nav.Link as={Link} to="/projects/shareable">Shareable Projects</Nav.Link>
              </>
            )}
            {hasRole('super_admin') && (
              <Nav.Link as={Link} to="/users">Users</Nav.Link>
            )}
          </Nav>
          <Nav>
            {user && (
              <>
                <div className="d-flex align-items-center me-3">
                  <Button
                    variant="outline-light"
                    size="sm"
                    className="me-3"
                    onClick={toggleTheme}
                    title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
                  >
                    {darkMode ? <FaSun className="me-1" /> : <FaMoon className="me-1" />}
                    {darkMode ? 'Light Mode' : 'Dark Mode'}
                  </Button>
                  
                  <Navbar.Text className="me-3">
                    <FaUser className="me-1" />
                    {user.username} ({user.role})
                  </Navbar.Text>
                  
                  <Button 
                    variant="outline-light" 
                    size="sm" 
                    onClick={handleLogout}
                  >
                    <FaSignOutAlt className="me-1" />
                    Logout
                  </Button>
                </div>
              </>
            )}
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default NavbarComponent;
