import React from 'react';
import { Dumbbell, History as HistoryIcon, BarChart2, MessageSquare, ClipboardList, User } from 'lucide-react';
import { useLocation, useNavigate } from 'react-router-dom';
import { t } from '../services/i18n';
import { Language } from '../types';

interface NavbarProps {
  lang: Language;
}

const Navbar: React.FC<NavbarProps> = ({ lang }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const navItems = [
    { path: '/', icon: Dumbbell, label: t('tab_tracker', lang) },
    { path: '/plans', icon: ClipboardList, label: t('tab_plans', lang) },
    { path: '/history', icon: HistoryIcon, label: t('tab_history', lang) },
    { path: '/stats', icon: BarChart2, label: t('tab_stats', lang) },
    { path: '/coach', icon: MessageSquare, label: t('tab_ai', lang) },
    { path: '/profile', icon: User, label: t('tab_profile', lang) },
  ];

  const currentPath = location.pathname;

  return (
    <>
      {/* MOBILE: Bottom Navigation Bar (MD3) */}
      <div role="navigation" aria-label="Bottom Navigation" className="md:hidden fixed bottom-0 left-0 w-full bg-surface-container shadow-elevation-2 border-t border-white/5 pb-safe z-50 h-20">
        <div className="flex justify-evenly items-center h-full px-1">
          {navItems.map((item) => {
            const isActive = currentPath === item.path || (item.path !== '/' && currentPath.startsWith(item.path));
            return (
              <button
                key={item.path}
                onClick={() => navigate(item.path)}
                className="flex flex-col items-center justify-center w-full h-full gap-1 group min-w-0"
              >
                <div className={`w-[64px] h-[32px] rounded-full flex items-center justify-center transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
                  }`}>
                  <item.icon
                    size={24}
                    strokeWidth={isActive ? 2.5 : 2}
                    fill="none"
                  />
                </div>
                <span className={`text-label-md font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
                  }`}>
                  {item.label}
                </span>
              </button>
            );
          })}
        </div>
      </div>

      {/* DESKTOP: Navigation Rail (MD3) */}
      <div role="navigation" aria-label="Desktop Navigation" className="hidden md:flex flex-col w-20 h-full bg-surface-container border-r border-outline-variant items-center py-8 gap-8 z-50">
        <div className="flex flex-col gap-6 w-full px-2">
          {navItems.map((item) => {
            const isActive = currentPath === item.path || (item.path !== '/' && currentPath.startsWith(item.path));
            return (
              <button
                key={item.path}
                onClick={() => navigate(item.path)}
                className="flex flex-col items-center gap-1 group w-full"
              >
                <div className={`w-[56px] h-[32px] rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
                  }`}>
                  <item.icon
                    size={24}
                    strokeWidth={isActive ? 2.5 : 2}
                    fill="none"
                  />
                </div>
                <span className={`text-label-md font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
                  }`}>
                  {item.label}
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default Navbar;