import React, { useContext } from 'react';
import { BrandingContext } from '../App';
import { NavLink } from 'react-router-dom';
import {
  Home,
  LayoutGrid,
  Key,
} from '../icons/commonIcons';

export type PageId = 'home' | 'models' | 'profile' | 'platform';

const navItems: { id: PageId; icon: any; label: string; path: string }[] = [
  { id: 'home', icon: Home, label: '首页', path: '/' },
  { id: 'models', icon: LayoutGrid, label: '模型广场', path: '/models' },
  { id: 'platform', icon: Key, label: '开放平台', path: '/platform' },
];

const Sidebar: React.FC = () => {
  const branding = useContext(BrandingContext);
  return (
    <>
      {/* 桌面端侧边栏 */}
      <aside className="hidden md:flex w-fit h-[calc(100vh-4rem)] bg-white border-r border-gray-100 flex-col fixed left-0 top-14 sm:top-16">
        <nav className="flex-1 overflow-y-auto pt-4">
          {navItems.map((item) => (
            <NavLink
              key={item.id}
              to={item.path}
              className={({ isActive }) =>
                `flex items-center space-x-3 px-4 lg:px-6 py-3 lg:py-4 cursor-pointer transition-all group ${
                  isActive
                    ? 'bg-blue-50 text-blue-600 border-r-4 border-blue-600 font-bold'
                    : 'text-gray-500 hover:bg-gray-50 hover:text-blue-600'
                }`
              }
            >
              {({ isActive }) => (
                <>
                  <item.icon
                    className={`w-5 h-5 flex-shrink-0 ${
                      isActive
                        ? 'text-blue-600'
                        : 'text-gray-400 group-hover:text-blue-600'
                    }`}
                  />
                  <span className="text-sm font-medium">{item.label}</span>
                </>
              )}
            </NavLink>
          ))}
        </nav>
        
        <div className="p-4 lg:p-6 border-t border-gray-50">
          <p className="text-[10px] text-gray-400 text-center">© 2026 {branding.system_name}</p>
        </div>
      </aside>

      {/* 移动端底部导航栏 */}
      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 z-40 flex items-center justify-around px-1 py-1 safe-pb">
        {navItems.map((item) => (
          <NavLink
            key={item.id}
            to={item.path}
            className={({ isActive }) =>
              `flex flex-col items-center justify-center px-2 py-1.5 rounded-lg transition-all min-w-0 flex-1 ${
                isActive
                  ? 'text-blue-600'
                  : 'text-gray-400 hover:text-blue-600'
              }`
            }
          >
            {({ isActive }) => (
              <>
                <item.icon className={`w-5 h-5 flex-shrink-0 ${isActive ? 'text-blue-600' : 'text-gray-400'}`} />
                <span className="text-[10px] mt-0.5 font-medium truncate w-full text-center">{item.label}</span>
              </>
            )}
          </NavLink>
        ))}
      </nav>
    </>
  );
};

export default Sidebar;