import React, { useState } from "react";
import { Menu, X } from "lucide-react";
import { useNavigate } from "react-router-dom";

interface NavbarProps {
  onNavigate: (view: string) => void;
  currentView: string;
}

export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentView }) => {
  const [isOpen, setIsOpen] = useState(false);
  const navigate = useNavigate();

  const handleNavClick = (sectionId: string) => {
    if (currentView !== "HOME") {
      onNavigate("HOME");
      // Allow time for render then scroll
      setTimeout(() => {
        const el = document.getElementById(sectionId);
        if (el) el.scrollIntoView({ behavior: "smooth" });
      }, 100);
    } else {
      const el = document.getElementById(sectionId);
      if (el) el.scrollIntoView({ behavior: "smooth" });
    }
    setIsOpen(false);
  };

  return (
    <nav className="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20 items-center">
          <div
            className="flex-shrink-0 flex items-end cursor-pointer gap-2"
            onClick={() => navigate("/landing")}
          >
            <img src="/logo_horizantal.png" alt="logo" className="h-10" />
            {/* <p className="text-[24px] font-[800] text-brand-green">
              Top<span className="text-brand-navy">MCQ</span>
            </p> */}
          </div>

          <div className="hidden md:flex items-center space-x-8">
            <button
              onClick={() => handleNavClick("features")}
              className="text-gray-600 hover:text-brand-navy font-medium transition-colors"
            >
              Features
            </button>
            <button
              onClick={() => handleNavClick("pricing")}
              className="text-gray-600 hover:text-brand-navy font-medium transition-colors"
            >
              Pricing
            </button>
            <button
              onClick={() => handleNavClick("testimonials")}
              className="text-gray-600 hover:text-brand-navy font-medium transition-colors"
            >
              Success Stories
            </button>
            <button
              onClick={() => navigate("/login")}
              className="bg-brand-orange text-white px-5 py-2.5 rounded-full font-semibold hover:bg-orange-600 transition-colors shadow-sm hover:shadow-md"
            >
              Login / Sign Up
            </button>
          </div>

          <div className="md:hidden flex items-center">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="text-gray-600 hover:text-gray-900 focus:outline-none"
            >
              {isOpen ? (
                <X className="h-6 w-6" />
              ) : (
                <Menu className="h-6 w-6" />
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {isOpen && (
        <div className="md:hidden bg-white border-b border-gray-100 px-4 py-4 space-y-4">
          <button
            onClick={() => handleNavClick("features")}
            className="block w-full text-left font-medium text-gray-600"
          >
            Features
          </button>
          <button
            onClick={() => handleNavClick("pricing")}
            className="block w-full text-left font-medium text-gray-600"
          >
            Pricing
          </button>
          <button
            onClick={() => handleNavClick("testimonials")}
            className="block w-full text-left font-medium text-gray-600"
          >
            Success Stories
          </button>
          <button
            onClick={() => {
              navigate("/login");
              setIsOpen(false);
            }}
            className="block w-full text-center bg-brand-orange text-white py-3 rounded-xl font-bold"
          >
            Login / Sign Up
          </button>
        </div>
      )}
    </nav>
  );
};