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

const tabs = [
  {
    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: '/flow',
    labelKey: 'nav.flow',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M3 8c3 0 3-3 6-3s3 3 6 3 3-3 6-3" />
        <path d="M3 16c3 0 3-3 6-3s3 3 6 3 3-3 6-3" />
      </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 BottomNav() {
  const location = useLocation();
  const navigate = useNavigate();
  const { triggeredCount } = useAlerts();
  const { t } = useT();

  return (
    <nav className="bottom-nav">
      {tabs.map((tab) => {
        const isActive =
          tab.path === '/'
            ? location.pathname === '/'
            : location.pathname.startsWith(tab.path);

        return (
          <button
            key={tab.path}
            className={`nav-item ${isActive ? 'active' : ''}`}
            onClick={() => navigate(tab.path)}
          >
            <span className="nav-icon-wrap">
              {tab.icon}
              {tab.path === '/more' && triggeredCount > 0 && (
                <span className="nav-badge">{triggeredCount}</span>
              )}
            </span>
            <span>{t(tab.labelKey)}</span>
          </button>
        );
      })}
    </nav>
  );
}