import { useLocation, useNavigate } from 'react-router-dom';
import { Book, Clock, Code, House, Network, Puzzle, Settings } from 'lucide-react';
import { useI18n } from '../../i18n';
import { NAV_ITEMS, normalizeWorkspacePath } from '../../router/routes';

import blueLogo from '../../assets/images/login/blue_logo.png';

const MENU_MARKS: Record<string, typeof House> = {
  '/home': House,
  '/knowledge': Book,
  '/channels': Network,
  '/skills': Puzzle,
  '/cron': Clock,
  // '/scripts': Code,
  '/setting': Settings,
};

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

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

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

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

      <div className="mt-auto flex h-[48px] w-[48px] items-center justify-center overflow-hidden rounded-full border border-black/10 bg-white dark:border-[#2a2a2d] dark:bg-[#222225]">
        <img className="h-full w-full object-cover" src={blueLogo} alt="Logo" />
      </div>
    </aside>
  );
}