import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import {
  FolderIcon,
  UserGroupIcon,
  CpuChipIcon,
  DocumentDuplicateIcon,
  LinkIcon,
  WrenchScrewdriverIcon,
  SparklesIcon
} from '@heroicons/react/24/outline';

const Navigation: React.FC = () => {
  const location = useLocation();

  const navItems = [
    {
      name: '项目管理',
      href: '/',
      icon: FolderIcon,
      description: '管理项目和素材'
    },
    {
      name: '模特管理',
      href: '/models',
      icon: UserGroupIcon,
      description: '管理模特信息'
    },
    {
      name: '模板管理',
      href: '/templates',
      icon: DocumentDuplicateIcon,
      description: '管理剪映模板'
    },
    {
      name: '素材绑定',
      href: '/material-model-binding',
      icon: LinkIcon,
      description: '管理素材与模特的绑定关系'
    },
    {
      name: 'AI分类设置',
      href: '/ai-classification-settings',
      icon: CpuChipIcon,
      description: '管理AI视频分类规则'
    },
    {
      name: '服装搭配',
      href: '/fashion-chat',
      icon: SparklesIcon,
      description: 'AI智能服装搭配推荐'
    },
    {
      name: '便捷工具',
      href: '/tools',
      icon: WrenchScrewdriverIcon,
      description: 'AI检索图片/数据清洗工具'
    }
  ];

  const isActive = (href: string) => {
    if (href === '/') {
      return location.pathname === '/';
    }
    return location.pathname.startsWith(href);
  };

  return (
    <nav className="bg-white/95 backdrop-blur-sm shadow-sm border-b border-gray-200/50 sticky top-0 z-50 flex-shrink-0">
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* 增强的 Logo */}
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center shadow-sm">
                  <span className="text-white font-bold text-sm">M</span>
                </div>
                <h1 className="text-xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">MixVideo</h1>
              </div>
            </div>
          </div>

          {/* Navigation Links */}
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-4">
              {navItems.map((item) => {
                const Icon = item.icon;
                const active = isActive(item.href);
                
                return (
                  <Link
                    key={item.name}
                    to={item.href}
                    className={`group flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${
                      active
                        ? 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-700 shadow-sm'
                        : 'text-gray-600 hover:text-gray-900 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100'
                    }`}
                    title={item.description}
                  >
                    {active && (
                      <div className="absolute inset-0 bg-gradient-to-r from-primary-500/10 to-primary-600/10"></div>
                    )}
                    <Icon className={`mr-2 h-5 w-5 relative z-10 transition-all duration-200 ${
                      active ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600 group-hover:scale-110'
                    }`} />
                    <span className="relative z-10">{item.name}</span>
                  </Link>
                );
              })}
            </div>
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden">
            <button
              type="button"
              className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
              aria-expanded="false"
            >
              <span className="sr-only">打开主菜单</span>
              <svg
                className="block h-6 w-6"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      <div className="md:hidden">
        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-gray-50">
          {navItems.map((item) => {
            const Icon = item.icon;
            const active = isActive(item.href);
            
            return (
              <Link
                key={item.name}
                to={item.href}
                className={`group flex items-center px-3 py-2 rounded-md text-base font-medium transition-colors ${
                  active
                    ? 'bg-blue-100 text-blue-700'
                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                <Icon className={`mr-3 h-6 w-6 ${
                  active ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
                }`} />
                <div>
                  <div>{item.name}</div>
                  <div className="text-sm text-gray-500">{item.description}</div>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </nav>
  );
};

export default Navigation;
