"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X, Activity, Home,Brain, Mic, ShieldCheck, ChevronDown, Sparkles } from "lucide-react";

const navItems = [
    { name: "Home", icon: Home, href: "/" },
  { name: "Devices", icon: Activity, href: "/devices" },
  { name: "Voice-to-SOAP", icon: Mic, href: "/#voice-soap" },
  { name: "AI Diagnosis", icon: Brain, href: "/#diagnosis" },
  { name: "Apps & Security", icon: ShieldCheck, href: "/apps" },
] as const;

export default function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [activeItem, setActiveItem] = useState<number | null>(null);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      <nav
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
          isScrolled ? "py-3" : "py-6"
        }`}
      >
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ y: -100 }}
            animate={{ y: 0 }}
            transition={{ duration: 0.6, ease: "easeOut" }}
            className={`relative rounded-2xl lg:rounded-3xl px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex items-center justify-between transition-all duration-500 ${
              isScrolled
                ? "bg-black/90 backdrop-blur-xl shadow-2xl border border-white/10"
                : "bg-gradient-to-r from-white/5 via-white/10 to-white/5 backdrop-blur-lg border border-white/5"
            }`}
          >
            {/* Animated background gradient */}
            <div className="absolute inset-0 rounded-2xl lg:rounded-3xl overflow-hidden pointer-events-none">
              <motion.div
                animate={{
                  background: [
                    "radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
                    "radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)",
                    "radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
                  ],
                }}
                transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
                className="absolute inset-0"
              />
            </div>

            {/* Logo */}
            <a href="/" className="flex items-center gap-2 sm:gap-3 group relative z-10">
              <div className="relative">
                <div className="absolute inset-0 bg-cyan-500/20 blur-xl rounded-full group-hover:bg-cyan-500/30 transition-all" />
                <Activity className="w-7 h-7 sm:w-9 sm:h-9 text-white relative z-10 transition-transform group-hover:scale-110 group-hover:rotate-180 duration-500" />
              </div>
              <span className="text-xl sm:text-2xl lg:text-3xl font-bold tracking-tight text-white relative">
                Skyheal
                <span className="absolute -top-1 -right-6 text-[8px] text-cyan-400 font-semibold">AI</span>
              </span>
            </a>

            {/* Desktop Menu */}
            <div className="hidden lg:flex items-center gap-1 xl:gap-2 relative z-10">
              {navItems.map((item, index) => (
                <motion.a
                  key={item.name}
                  href={item.href}
                  onHoverStart={() => setActiveItem(index)}
                  onHoverEnd={() => setActiveItem(null)}
                  className="relative px-4 py-2.5 rounded-xl text-sm font-semibold text-zinc-300 hover:text-white transition-colors group"
                >
                  <span className="relative z-10 flex items-center gap-2">
                    <item.icon className="w-4 h-4 transition-transform group-hover:scale-110" />
                    {item.name}
                  </span>

                  {activeItem === index && (
                    <motion.div
                      layoutId="navbar-indicator"
                      className="absolute inset-0 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 pointer-events-none"
                      transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                    />
                  )}
                </motion.a>
              ))}

              {/* CTA Button */}
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="ml-4 relative group overflow-hidden bg-gradient-to-r from-cyan-600 to-cyan-200 text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40 transition-all"
              >
                <span className="relative z-10 flex items-center gap-2">
                  <Sparkles className="w-4 h-4" />
                  Get Started
                </span>
                <motion.div
                  className="absolute inset-0 bg-gradient-to-r from-cyan-200 to-cyan-600"
                  initial={{ x: "100%" }}
                  whileHover={{ x: 0 }}
                  transition={{ duration: 0.3 }}
                />
              </motion.button>
            </div>

            {/* Mobile Toggle */}
            <motion.button
              whileTap={{ scale: 0.9 }}
              className="lg:hidden relative z-10 text-white p-2 rounded-lg hover:bg-white/10 transition-colors"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              <AnimatePresence mode="wait">
                {isMobileMenuOpen ? (
                  <motion.div
                    key="close"
                    initial={{ rotate: -90, opacity: 0 }}
                    animate={{ rotate: 0, opacity: 1 }}
                    exit={{ rotate: 90, opacity: 0 }}
                    transition={{ duration: 0.2 }}
                  >
                    <X className="w-6 h-6" />
                  </motion.div>
                ) : (
                  <motion.div
                    key="menu"
                    initial={{ rotate: 90, opacity: 0 }}
                    animate={{ rotate: 0, opacity: 1 }}
                    exit={{ rotate: -90, opacity: 0 }}
                    transition={{ duration: 0.2 }}
                  >
                    <Menu className="w-6 h-6" />
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.button>
          </motion.div>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <>
            {/* Backdrop */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.3 }}
              className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden"
              onClick={() => setIsMobileMenuOpen(false)}
            />

            {/* Mobile Menu Content */}
            <motion.div
              initial={{ opacity: 0, y: -20, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -20, scale: 0.95 }}
              transition={{ duration: 0.3, ease: "easeOut" }}
              className="fixed top-20 sm:top-24 left-4 right-4 z-50 lg:hidden"
            >
              <div className="bg-black/95 backdrop-blur-2xl rounded-2xl border border-white/10 shadow-2xl overflow-hidden">
                {/* Menu Header */}
                <div className="p-6 border-b border-white/10 bg-gradient-to-r from-cyan-500/10 to-purple-500/10">
                  <h3 className="text-sm font-semibold text-zinc-400 uppercase tracking-wider">
                    Navigation
                  </h3>
                </div>

                {/* Menu Items */}
                <div className="p-4">
                  {navItems.map((item, index) => (
                    <motion.a
                      key={item.name}
                      href={item.href}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: index * 0.1 }}
                      onClick={() => setIsMobileMenuOpen(false)}
                      className="flex items-center gap-4 p-4 rounded-xl hover:bg-white/5 transition-all group mb-2"
                    >
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-white/10 to-white/5 flex items-center justify-center border border-white/10 group-hover:border-white/20 transition-all">
                        <item.icon className="w-5 h-5 text-white group-hover:scale-110 transition-transform" />
                      </div>
                      <div className="flex-1">
                        <span className="text-base font-semibold text-white group-hover:text-cyan-400 transition-colors">
                          {item.name}
                        </span>
                      </div>
                      <ChevronDown className="w-4 h-4 text-zinc-500 -rotate-90 group-hover:translate-x-1 transition-transform" />
                    </motion.a>
                  ))}
                </div>

                {/* Mobile CTA */}
                <div className="p-4 border-t border-white/10">
                  <motion.button
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.4 }}
                    whileTap={{ scale: 0.98 }}
                    className="w-full bg-gradient-to-r from-cyan-600 to-cyan-200 text-white py-4 rounded-xl font-bold text-base shadow-lg shadow-cyan-500/25 flex items-center justify-center gap-2 hover:shadow-cyan-500/40 transition-all"
                  >
                    <Sparkles className="w-5 h-5" />
                    Get Started Free
                  </motion.button>
                </div>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  );
}