rentall-app/frontend/src/components/Navbar.tsx

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 [searchFilters, setSearchFilters] = useState({
    search: "",
    location: "",
  });

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

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

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const params = new URLSearchParams();

    if (searchFilters.search.trim()) {
      params.append("search", searchFilters.search.trim());
    }
    if (searchFilters.location.trim()) {
      // Check if location looks like a zip code (5 digits) or city name
      const location = searchFilters.location.trim();
      if (/^\d{5}(-\d{4})?$/.test(location)) {
        params.append("zipCode", location);
      } else {
        params.append("city", location);
      }
    }

    const queryString = params.toString();
    navigate(`/items${queryString ? `?${queryString}` : ""}`);

    // Clear search after navigating
    setSearchFilters({ search: "", location: "" });
  };

  const handleSearchInputChange = (
    field: "search" | "location",
    value: string
  ) => {
    setSearchFilters((prev) => ({ ...prev, [field]: value }));
  };

  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">
                <form onSubmit={handleSearch}>
                  <div className="input-group" style={{ width: "520px" }}>
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Search items..."
                      value={searchFilters.search}
                      onChange={(e) =>
                        handleSearchInputChange("search", e.target.value)
                      }
                    />
                    <span
                      className="input-group-text bg-white text-muted"
                      style={{
                        borderLeft: "0",
                        borderRight: "1px solid #dee2e6",
                      }}
                    >
                      in
                    </span>
                    <input
                      type="text"
                      className="form-control"
                      placeholder="City or ZIP"
                      value={searchFilters.location}
                      onChange={(e) =>
                        handleSearchInputChange("location", e.target.value)
                      }
                      style={{ borderLeft: "0" }}
                    />
                    <button className="btn btn-outline-secondary" type="submit">
                      <i className="bi bi-search"></i>
                    </button>
                  </div>
                </form>
              </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>
                              Renting
                            </Link>
                          </li>
                          <li>
                            <Link className="dropdown-item" to="/my-listings">
                              <i className="bi bi-list-ul me-2"></i>Owning
                            </Link>
                          </li>
                          <li>
                            <Link className="dropdown-item" to="/my-requests">
                              <i className="bi bi-clipboard-check me-2"></i>
                              Looking For
                            </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;