"use client";
import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { cn } from "../shared/utils";
import { BaseComponentProps } from "../shared/types";

export interface FloatingNavItem {
  name: string;
  link: string;
  icon?: JSX.Element;
}

export interface FloatingNavProps extends BaseComponentProps {
  navItems: FloatingNavItem[];
  variant?: 'default' | 'glowing' | 'gradient';
  size?: 'sm' | 'md' | 'lg';
}

export const FloatingNav: React.FC<FloatingNavProps> = ({
  navItems,
  className,
  variant = 'default',
  size = 'md',
  ...props
}) => {
  const [visible, setVisible] = useState(false);
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      const scrollThreshold = 100;
      
      if (currentScrollY < scrollThreshold) {
        setVisible(false);
      } else {
        setVisible(true);
      }
      
      setScrollY(currentScrollY);
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const sizeClasses = {
    sm: 'px-3 py-1.5 text-xs',
    md: 'px-4 py-2 text-sm',
    lg: 'px-6 py-3 text-base'
  };

  const variantClasses = {
    default: 'border border-transparent dark:border-white/[0.2]',
    glowing: 'border border-blue-500/50 shadow-[0_0_20px_rgba(59,130,246,0.3)]',
    gradient: 'border border-transparent bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20'
  };

  return (
    <AnimatePresence mode="wait">
      <motion.div
        initial={{
          opacity: 0,
          y: -100,
          scale: 0.8,
        }}
        animate={{
          y: visible ? 0 : -100,
          opacity: visible ? 1 : 0,
          scale: visible ? 1 : 0.8,
        }}
        exit={{
          y: -100,
          opacity: 0,
          scale: 0.8,
        }}
        transition={{
          duration: 0.3,
          ease: [0.4, 0, 0.2, 1],
        }}
        className={cn(
          "flex max-w-fit fixed top-10 inset-x-0 mx-auto rounded-full",
          "dark:bg-black/80 bg-white/80 backdrop-blur-md",
          "shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]",
          "z-[5000] pr-2 pl-8 py-2 items-center justify-center space-x-4",
          variantClasses[variant],
          sizeClasses[size],
          className
        )}
        {...props}
      >
        {navItems.map((navItem, idx) => (
          <motion.a
            key={`nav-item-${idx}`}
            href={navItem.link}
            whileHover={{ 
              scale: 1.05,
              y: -2,
            }}
            whileTap={{ scale: 0.95 }}
            className={cn(
              "relative dark:text-neutral-50 items-center flex space-x-1",
              "text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500",
              "transition-colors duration-200"
            )}
          >
            <span className="block sm:hidden">{navItem.icon}</span>
            <span className="hidden sm:block font-medium">{navItem.name}</span>
          </motion.a>
        ))}
        
        <motion.button
          whileHover={{ 
            scale: 1.05,
            y: -2,
          }}
          whileTap={{ scale: 0.95 }}
          className={cn(
            "relative text-sm font-medium px-4 py-2 rounded-full",
            "border border-neutral-200 dark:border-white/[0.2]",
            "text-black dark:text-white",
            "transition-all duration-200",
            "hover:shadow-lg hover:shadow-blue-500/25"
          )}
        >
          <span>Login</span>
          <motion.span
            className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px"
            animate={{
              scaleX: [1, 1.2, 1],
              opacity: [0.5, 1, 0.5],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </motion.button>
      </motion.div>
    </AnimatePresence>
  );
};