'use client';;
import React, { useState, useRef, useEffect, useMemo } from 'react';
import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';
import { cn } from '@/lib/utils';

const defaultItems = [
  { label: 'home', icon: Home },
  { label: 'work', icon: Briefcase },
  { label: 'calendar', icon: Calendar },
  { label: 'security', icon: Shield },
  { label: 'settings', icon: Settings },
];

export const MenuDock = ({
  items,
  className,
  variant = 'default',
  orientation = 'horizontal',
  showLabels = true,
  animated = true,
  showIndicator = true
}) => {

  const finalItems = useMemo(() => {
    const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;
    if (!isValid) {
      console.warn(
        "MenuDock: 'items' prop is invalid or missing. Using default items.",
        items
      );
      return defaultItems;
    }
    return items;
  }, [items]);

  const [activeIndex, setActiveIndex] = useState(0);
  const [underlineWidth, setUnderlineWidth] = useState(0);
  const [underlineLeft, setUnderlineLeft] = useState(0);

  const textRefs = useRef([]);
  const itemRefs = useRef([]);

  useEffect(() => {
    if (activeIndex >= finalItems.length) {
      setActiveIndex(0);
    }
  }, [finalItems, activeIndex]);

  useEffect(() => {
    const updateUnderline = () => {
      const activeButton = itemRefs.current[activeIndex];
      const activeText = textRefs.current[activeIndex];

      if (activeButton && activeText && showLabels && orientation === 'horizontal') {
        const buttonRect = activeButton.getBoundingClientRect();
        const textRect = activeText.getBoundingClientRect();
        const containerRect = activeButton.parentElement?.getBoundingClientRect();

        if (containerRect) {
          setUnderlineWidth(textRect.width);
          setUnderlineLeft(
            buttonRect.left - containerRect.left + (buttonRect.width - textRect.width) / 2
          );
        }
      }
    };

    updateUnderline();
    window.addEventListener('resize', updateUnderline);
    return () => window.removeEventListener('resize', updateUnderline);
  }, [activeIndex, finalItems, showLabels, orientation]);

  const handleItemClick = (index, item) => {
    setActiveIndex(index);
    item.onClick?.();
  };

  const getVariantStyles = () => {
    switch (variant) {
      case 'compact':
        return {
          container: 'p-1 gap-1',
          item: 'px-5 py-3',
          icon: 'h-4 w-4',
          text: 'text-xs'
        };
      case 'large':
        return {
          container: 'p-3 gap-4',
          item: 'px-6 py-4',
          icon: 'h-6 w-6',
          text: 'text-base'
        };
      default:
        return {
          container: 'p-2 gap-3',
          item: 'px-5 py-3.5',
          icon: 'h-5 w-5',
          text: 'text-sm'
        };
    }
  };

  const styles = getVariantStyles();

  return (
    <nav
      className={cn(
        'relative inline-flex items-center rounded-3xl bg-transparent',
        orientation === 'horizontal' ? 'flex-row' : 'flex-col',
        styles.container,
        className
      )}
      role="navigation">
      {finalItems.map((item, index) => {
        const isActive = index === activeIndex;
        const IconComponent = item.icon;

        return (
          <div
            key={`${item.label}-${index}`}
            className="flex flex-col items-center gap-1">
            <button
              ref={(el) => { itemRefs.current[index] = el; }}
              className={cn(
                'relative flex items-center justify-center rounded-full transition-all duration-300',
                'hover:bg-primary/10 focus-visible:outline-none',
                'select-none active:scale-95',
                styles.item,
                isActive && 'text-primary bg-primary/15',
                !isActive && 'text-muted-foreground hover:text-foreground'
              )}
              onClick={() => handleItemClick(index, item)}
              aria-label={item.label}
              type="button">
              <div
                className={cn(
                  'flex items-center justify-center transition-all duration-200',
                  animated && isActive && 'animate-bounce'
                )}>
                <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />
              </div>
            </button>
            {showLabels && (
              <span
                ref={(el) => { textRefs.current[index] = el; }}
                className={cn(
                  'font-medium transition-colors duration-200 capitalize',
                  styles.text,
                  'whitespace-nowrap',
                  isActive ? 'text-primary' : 'text-muted-foreground'
                )}>
                {item.label}
              </span>
            )}
          </div>
        );
      })}
      {/* Animated underline for horizontal orientation with labels */}
      {showIndicator && showLabels && orientation === 'horizontal' && (
        <div
          className={cn(
            'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',
            animated ? 'transition-all duration-300' : ''
          )}
          style={{
            width: `${underlineWidth}px`,
            left: `${underlineLeft}px`,
          }} />
      )}
      {/* Active indicator for vertical orientation or no labels */}
      {showIndicator && (!showLabels || orientation === 'vertical') && (
        <div
          className={cn(
            'absolute bg-primary rounded-full transition-all duration-300',
            orientation === 'vertical'
              ? 'left-1 w-1 h-6'
              : 'bottom-0.5 h-0.5 w-6'
          )}
          style={{
            [orientation === 'vertical' ? 'top' : 'left']:
              orientation === 'vertical'
                ? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`
                : `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`
          }} />
      )}
    </nav>
  );
};