import React, { useState, useEffect } from 'react';
import { View } from '../../types/common.ts';

export interface NavItem {
  view: View;
  label: string;
  icon: React.ReactNode;
  permissionId?: string;
  href?: string;
  subItems?: NavItem[];
  disabled?: boolean;
}

interface NavLinkProps {
  item: NavItem;
  isActive: boolean;
  isCollapsed: boolean;
  setView: (view: View) => void;
  view: View;
}

const NavLink: React.FC<NavLinkProps> = ({ item, isActive, isCollapsed, setView, view }) => {
  const [isOpen, setIsOpen] = useState(isActive);

  useEffect(() => {
    if (isActive) {
      setIsOpen(true);
    }
  }, [isActive]);

  useEffect(() => {
    if (isCollapsed) {
      setIsOpen(false);
    }
  }, [isCollapsed]);

  if (item.subItems) {
    return (
      <li className="w-full">
        <button
          onClick={() => !isCollapsed && setIsOpen(!isOpen)}
          title={isCollapsed ? item.label : undefined}
          className={`w-full flex items-center h-11 px-4 rounded-lg transition-colors duration-200 group ${
            isActive
              ? 'bg-red-50 text-red-700'
              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
          }`}
        >
          <div className="w-8 text-lg flex items-center justify-center -ml-1">{item.icon}</div>
          {!isCollapsed && (
            <span className="ml-2 text-sm font-semibold whitespace-nowrap flex-grow text-left">
              {item.label}
            </span>
          )}
          {!isCollapsed && (
            <i
              className={`fa-solid fa-chevron-right text-xs transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
            ></i>
          )}
        </button>
        {!isCollapsed && isOpen && (
          <ul className="pl-8 mt-1 space-y-1">
            {item.subItems.map((subItem) => (
              <li key={subItem.href ?? subItem.view}>
                {subItem.href ? (
                  <a
                    href={subItem.href}
                    className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left text-gray-500 hover:bg-gray-100 hover:text-gray-800`}
                  >
                    <div className="w-6 text-base flex items-center justify-center -ml-1">
                      {subItem.icon}
                    </div>
                    <span className="ml-2 text-sm font-medium whitespace-nowrap">
                      {subItem.label}
                    </span>
                  </a>
                ) : (
                  <button
                    onClick={() => !subItem.disabled && setView(subItem.view)}
                    disabled={subItem.disabled}
                    className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left ${
                      subItem.disabled
                        ? 'opacity-40 cursor-not-allowed text-gray-400'
                        : view === subItem.view
                          ? 'bg-red-600 text-white shadow-sm'
                          : 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'
                    }`}
                  >
                    <div className="w-6 text-base flex items-center justify-center -ml-1">
                      {subItem.icon}
                    </div>
                    <span className="ml-2 text-sm font-medium whitespace-nowrap">
                      {subItem.label}
                    </span>
                    {subItem.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
                  </button>
                )}
              </li>
            ))}
          </ul>
        )}
      </li>
    );
  }

  return (
    <li className="w-full">
      <button
        onClick={() => !item.disabled && setView(item.view)}
        disabled={item.disabled}
        title={isCollapsed ? item.label : undefined}
        className={`w-full flex items-center h-11 px-4 rounded-lg transition-colors duration-200 group ${
          item.disabled
            ? 'opacity-40 cursor-not-allowed text-gray-400'
            : isActive
              ? 'bg-red-600 text-white shadow-md'
              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
        }`}
      >
        <div className="w-8 text-lg flex items-center justify-center -ml-1">{item.icon}</div>
        {!isCollapsed && (
          <span className="ml-2 text-sm font-semibold whitespace-nowrap">{item.label}</span>
        )}
        {!isCollapsed && item.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
      </button>
    </li>
  );
};

export default NavLink;