import { useLocation, useNavigate } from 'react-router-dom';
import { useAlerts } from '../../hooks/useAlerts';
import { useTheme } from '../../hooks/useTheme';
import { useT } from '../../i18n/LanguageContext';

const links = [
  {
    path: '/',
    labelKey: 'nav.leaders',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M3 12c4 0 4-4 8-4s5 4 9 4" />
        <path d="M3 17c4 0 4-3 8-3s5 3 9 3" />
        <path d="M16 6l3-2v4z" />
      </svg>
    ),
  },
  {
    path: '/portfolio',
    labelKey: 'nav.portfolio',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M3 3v18h18" />
        <path d="M7 14l4-4 3 3 5-6" />
      </svg>
    ),
  },
  {
    path: '/wallet',
    labelKey: 'nav.wallet',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5" />
        <path d="M16 12h.01" />
      </svg>
    ),
  },
  {
    path: '/more',
    labelKey: 'nav.more',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <circle cx="12" cy="5" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" />
      </svg>
    ),
  },
];

export default function Sidebar() {
  const location = useLocation();
  const navigate = useNavigate();
  const { triggeredCount } = useAlerts();
  const { theme, toggleTheme } = useTheme();
  const { t } = useT();

  return (
    <aside className="sidebar">
      <nav className="sidebar-nav">
        {links.map(link => {
          const isActive =
            link.path === '/'
              ? location.pathname === '/'
              : location.pathname.startsWith(link.path);

          return (
            <button
              key={link.path}
              className={`sidebar-link ${isActive ? 'sidebar-link-active' : ''}`}
              onClick={() => navigate(link.path)}
            >
              <span className="sidebar-icon-wrap">
                {link.icon}
                {link.path === '/more' && triggeredCount > 0 && (
                  <span className="nav-badge">{triggeredCount}</span>
                )}
              </span>
              <span className="sidebar-label">{t(link.labelKey)}</span>
            </button>
          );
        })}
      </nav>
      <div className="sidebar-footer">
        <button className="sidebar-link" onClick={toggleTheme} title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}>
          <span className="sidebar-icon-wrap">
            {theme === 'dark' ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="12" cy="12" r="5" />
                <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
              </svg>
            )}
          </span>
          <span className="sidebar-label">{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
        </button>
      </div>
    </aside>
  );
}