import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import AuthModal from './AuthModal';

const Navbar: React.FC = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [authModalMode, setAuthModalMode] = useState<'login' | 'signup'>('login');

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

  const openAuthModal = (mode: 'login' | 'signup') => {
    setAuthModalMode(mode);
    setShowAuthModal(true);
  };

  return (
    <>
    <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
      <div className="container-fluid" style={{ maxWidth: '1800px' }}>
        <Link className="navbar-brand fw-bold" to="/">
          <i className="bi bi-box-seam me-2"></i>
          CommunityRentals.App
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <div className="d-flex align-items-center w-100">
            <div className="position-absolute start-50 translate-middle-x">
              <div className="input-group" style={{ width: '400px' }}>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Search for items to rent..."
                  aria-label="Search"
                />
                <button className="btn btn-outline-secondary" type="button">
                  <i className="bi bi-search"></i>
                </button>
              </div>
            </div>
            <div className="ms-auto d-flex align-items-center">
              <Link className="btn btn-outline-primary btn-sm me-3 text-nowrap" to="/create-item">
                Start Earning
              </Link>
              <ul className="navbar-nav flex-row">
                {user ? (
                  <>
                    <li className="nav-item dropdown">
                      <a
                        className="nav-link dropdown-toggle"
                        href="#"
                        id="navbarDropdown"
                        role="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                      >
                        <i className="bi bi-person-circle me-1"></i>
                        {user.firstName}
                      </a>
                      <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li>
                          <Link className="dropdown-item" to="/profile">
                            <i className="bi bi-person me-2"></i>Profile
                          </Link>
                        </li>
                        <li>
                          <Link className="dropdown-item" to="/my-rentals">
                            <i className="bi bi-calendar-check me-2"></i>My Rentals
                          </Link>
                        </li>
                        <li>
                          <Link className="dropdown-item" to="/my-listings">
                            <i className="bi bi-list-ul me-2"></i>My Listings
                          </Link>
                        </li>
                        <li>
                          <Link className="dropdown-item" to="/messages">
                            <i className="bi bi-envelope me-2"></i>Messages
                          </Link>
                        </li>
                        <li>
                          <hr className="dropdown-divider" />
                        </li>
                        <li>
                          <button className="dropdown-item" onClick={handleLogout}>
                            <i className="bi bi-box-arrow-right me-2"></i>Logout
                          </button>
                        </li>
                      </ul>
                    </li>
                  </>
                ) : (
                  <li className="nav-item">
                    <button 
                      className="btn btn-primary btn-sm text-nowrap" 
                      onClick={() => openAuthModal('login')}
                    >
                      Login or Sign Up
                    </button>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </nav>
    
    <AuthModal 
      show={showAuthModal} 
      onHide={() => setShowAuthModal(false)}
      initialMode={authModalMode}
    />
  </>
  );
};

export default Navbar;