import { useLocation, useNavigate } from 'react-router-dom';
import { NAV_ITEMS, normalizeWorkspacePath } from '../../router/routes';

const MENU_MARKS: Record<string, string> = {
  '/home': '首',
  '/knowledge': '知',
  '/agents': '模',
  '/skills': '技',
  '/cron': '时',
  '/scripts': '脚',
  '/setting': '设',
};

export default function Sidebar() {
  const location = useLocation();
  const navigate = useNavigate();
  const currentId = normalizeWorkspacePath(location.pathname);

  return (
    <aside className="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
      <div className="flex flex-col gap-[16px] w-full">
        {NAV_ITEMS.map((item) => {
          const active = currentId === item.path;
          const isSetting = item.path === '/setting';

          return (
            <div
              key={item.path}
              className={['flex flex-col gap-[16px]', isSetting ? 'mt-auto mb-[8px] shrink-1' : ''].join(' ')}
            >
              <button
                type="button"
                className="cursor-pointer flex flex-col items-center justify-center"
                onClick={() => navigate(item.path)}
              >
                <div
                  className={[
                    'box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white dark:hover:bg-[#222225]',
                    active ? 'bg-white dark:bg-[#222225]' : '',
                  ].join(' ')}
                >
                  <span
                    className="text-[18px] font-semibold leading-none"
                    style={{ color: active ? '#2B7FFF' : '#525866' }}
                  >
                    {MENU_MARKS[item.path]}
                  </span>
                </div>

                <div
                  className="text-[14px] mt-[4px] mb-[8px] hover:text-[#2B7FFF]"
                  style={{ color: active ? '#2B7FFF' : '#525866' }}
                >
                  {item.label}
                </div>
              </button>
            </div>
          );
        })}
      </div>

      <div className="w-[48px] h-[48px] rounded-full overflow-hidden mt-auto bg-white dark:bg-[#222225] flex items-center justify-center border border-black/10 dark:border-[#2a2a2d]">
        <span className="text-[16px] font-bold text-[#2B7FFF]">Z</span>
      </div>
    </aside>
  );
}