import React, { useEffect, useRef } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { FiHome, FiActivity, FiGrid, FiTool, FiCpu, FiUser } from 'react-icons/fi';
import clsx from 'clsx';

const navItems = [
  { path: '/', icon: FiHome, text: '首页', exact: true },
  { path: '/60sapi', icon: FiActivity, text: '60sAPI' },
  { path: '/smallgame', icon: FiGrid, text: '休闲游戏' },
  { path: '/toolbox', icon: FiTool, text: '工具箱' },
  { path: '/aimodel', icon: FiCpu, text: 'AI应用' },
  { path: '/profile', icon: FiUser, text: '个人中心' },
];

const Navigation = () => {
  const location = useLocation();
  const activeItemRef = useRef(null);

  useEffect(() => {
    const el = activeItemRef.current;
    if (!el || typeof el.scrollIntoView !== 'function') return;
    el.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
  }, [location.pathname]);

  const isActive = (path, exact = false) =>
    exact ? location.pathname === path : location.pathname.startsWith(path);

  return (
    <nav
      className={[
        'fixed bottom-0 left-0 right-0 z-[1000] md:hidden',
        'bg-[linear-gradient(180deg,#f8fdf9_0%,#ecfdf3_100%)]',
        'border-t border-[rgba(129,199,132,0.45)]',
        'rounded-[18px_18px_0_0]',
        'pt-2 pb-[calc(8px+env(safe-area-inset-bottom))]',
        'shadow-[0_-6px_24px_rgba(15,80,40,0.12)]',
      ].join(' ')}
    >
      <div
        className={[
          'flex flex-row flex-nowrap items-center',
          'gap-1.5 w-full px-2.5 overflow-x-auto overflow-y-hidden',
          '-webkit-overflow-scrolling-touch',
        ].join(' ')}
      >
        {navItems.map((item) => {
          const IconComponent = item.icon;
          const active = isActive(item.path, item.exact);

          return (
            <Link
              key={item.path}
              ref={active ? activeItemRef : undefined}
              to={item.path}
              className={clsx(
                'flex flex-col items-center no-underline flex-shrink-0',
                'px-3 py-2 rounded-[14px] min-w-16 relative overflow-hidden',
                'transition-all duration-300',
                active
                  ? 'text-[#66bb6a] bg-[linear-gradient(135deg,rgba(102,187,106,0.15),rgba(129,199,132,0.1))] shadow-[0_2px_8px_rgba(102,187,106,0.2),inset_0_1px_0_rgba(255,255,255,0.3)] -translate-y-0.5'
                  : 'text-gray-500 hover:text-[#66bb6a] hover:-translate-y-[3px]',
              )}
            >
              <IconComponent
                className={clsx(
                  'text-xl mb-1 relative z-[1] transition-all duration-300',
                  active && '[transform:scale(1.15)_rotate(5deg)]',
                )}
              />
              <span
                className={clsx(
                  'text-[10px] leading-[1.15] whitespace-nowrap relative z-[1]',
                  active ? 'font-semibold' : 'font-medium',
                )}
              >
                {item.text}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
};

export default Navigation;
