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

export interface MenuItemData {
  id: string;
  label: string;
  href?: string;
  children?: React.ReactNode;
}

export interface ProductItemData {
  title: string;
  description: string;
  href: string;
  src: string;
}

export interface HoverMenuProps extends BaseComponentProps {
  items: MenuItemData[];
  variant?: 'default' | 'glass' | 'gradient';
  size?: 'sm' | 'md' | 'lg';
  position?: 'center' | 'left' | 'right';
  showBorder?: boolean;
}

export interface MenuItemProps extends BaseComponentProps {
  item: MenuItemData;
  isActive: boolean;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
  children?: React.ReactNode;
}

export interface ProductItemProps extends BaseComponentProps {
  title: string;
  description: string;
  href: string;
  src: string;
}

export interface HoveredLinkProps extends BaseComponentProps {
  href: string;
  children: React.ReactNode;
  className?: string;
}

// Animation configuration
const transition = {
  type: "spring",
  mass: 0.5,
  damping: 11.5,
  stiffness: 100,
  restDelta: 0.001,
  restSpeed: 0.001,
};

// Main HoverMenu component
export const HoverMenu: React.FC<HoverMenuProps> = ({
  items,
  variant = 'default',
  size = 'md',
  position = 'center',
  showBorder = true,
  className,
  ...props
}) => {
  const [activeItem, setActiveItem] = useState<string | null>(null);

  const sizeClasses = {
    sm: 'px-6 py-4 space-x-3',
    md: 'px-8 py-6 space-x-4',
    lg: 'px-10 py-8 space-x-6'
  };

  const variantClasses = {
    default: 'bg-white dark:bg-black',
    glass: 'bg-white/80 dark:bg-black/80 backdrop-blur-md',
    gradient: 'bg-gradient-to-r from-white/90 to-gray-50/90 dark:from-black/90 dark:to-gray-900/90'
  };

  const positionClasses = {
    center: 'justify-center',
    left: 'justify-start',
    right: 'justify-end'
  };

  const borderClasses = showBorder 
    ? 'border border-transparent dark:border-white/[0.2]' 
    : '';

  return (
    <nav
      onMouseLeave={() => setActiveItem(null)}
      className={cn(
        "relative rounded-full shadow-input flex",
        variantClasses[variant],
        borderClasses,
        sizeClasses[size],
        positionClasses[position],
        className
      )}
      {...props}
    >
      {items.map((item) => (
        <MenuItem
          key={item.id}
          item={item}
          isActive={activeItem === item.id}
          onMouseEnter={() => setActiveItem(item.id)}
          onMouseLeave={() => setActiveItem(null)}
        >
          {item.children}
        </MenuItem>
      ))}
    </nav>
  );
};

// Individual MenuItem component
export const MenuItem: React.FC<MenuItemProps> = ({
  item,
  isActive,
  onMouseEnter,
  onMouseLeave,
  children,
  className,
  ...props
}) => {
  return (
    <div 
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      className={cn("relative", className)}
      {...props}
    >
      <motion.p
        transition={{ duration: 0.3 }}
        className="cursor-pointer text-black hover:opacity-[0.9] dark:text-white font-medium"
      >
        {item.href ? (
          <a href={item.href}>{item.label}</a>
        ) : (
          item.label
        )}
      </motion.p>
      
      {isActive && children && (
        <motion.div
          initial={{ opacity: 0, scale: 0.85, y: 10 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.85, y: 10 }}
          transition={transition}
          className="absolute top-[calc(100%_+_1.2rem)] left-1/2 transform -translate-x-1/2 pt-4 z-50"
        >
          <motion.div
            transition={transition}
            layoutId="active"
            className="bg-white dark:bg-black backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl"
          >
            <motion.div
              layout
              className="w-max h-full p-4"
            >
              {children}
            </motion.div>
          </motion.div>
        </motion.div>
      )}
    </div>
  );
};

// ProductItem component for showcasing products
export const ProductItem: React.FC<ProductItemProps> = ({
  title,
  description,
  href,
  src,
  className,
  ...props
}) => {
  return (
    <a 
      href={href} 
      className={cn("flex space-x-2 hover:scale-[1.02] transition-transform duration-200", className)}
      {...props}
    >
      <img
        src={src}
        width={140}
        height={70}
        alt={title}
        className="shrink-0 rounded-md shadow-2xl object-cover"
      />
      <div>
        <h4 className="text-xl font-bold mb-1 text-black dark:text-white">
          {title}
        </h4>
        <p className="text-neutral-700 text-sm max-w-[10rem] dark:text-neutral-300">
          {description}
        </p>
      </div>
    </a>
  );
};

// HoveredLink component for simple links
export const HoveredLink: React.FC<HoveredLinkProps> = ({
  href,
  children,
  className,
  ...props
}) => {
  return (
    <a
      href={href}
      className={cn(
        "text-neutral-700 dark:text-neutral-200 hover:text-black dark:hover:text-white transition-colors duration-200",
        className
      )}
      {...props}
    >
      {children}
    </a>
  );
};

// Standalone Menu component for backward compatibility
export const Menu: React.FC<{
  setActive: (item: string | null) => void;
  children: React.ReactNode;
  className?: string;
}> = ({ setActive, children, className }) => {
  return (
    <nav
      onMouseLeave={() => setActive(null)}
      className={cn(
        "relative rounded-full border border-transparent dark:bg-black dark:border-white/[0.2] bg-white shadow-input flex justify-center space-x-4 px-8 py-6",
        className
      )}
    >
      {children}
    </nav>
  );
};

// Standalone MenuItem component for backward compatibility
export const MenuItemLegacy: React.FC<{
  setActive: (item: string) => void;
  active: string | null;
  item: string;
  children?: React.ReactNode;
}> = ({ setActive, active, item, children }) => {
  return (
    <div onMouseEnter={() => setActive(item)} className="relative">
      <motion.p
        transition={{ duration: 0.3 }}
        className="cursor-pointer text-black hover:opacity-[0.9] dark:text-white"
      >
        {item}
      </motion.p>
      {active !== null && (
        <motion.div
          initial={{ opacity: 0, scale: 0.85, y: 10 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          transition={transition}
        >
          {active === item && (
            <div className="absolute top-[calc(100%_+_1.2rem)] left-1/2 transform -translate-x-1/2 pt-4">
              <motion.div
                transition={transition}
                layoutId="active"
                className="bg-white dark:bg-black backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl"
              >
                <motion.div
                  layout
                  className="w-max h-full p-4"
                >
                  {children}
                </motion.div>
              </motion.div>
            </div>
          )}
        </motion.div>
      )}
    </div>
  );
};