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

interface NavbarProps {
  currentTab: TabView;
  onTabChange: (tab: TabView) => void;
  lang: Language;
}

const Navbar: React.FC<NavbarProps> = ({ currentTab, onTabChange, lang }) => {
  const navItems = [
    { id: 'TRACK' as TabView, icon: Dumbbell, label: t('tab_tracker', lang) },
    { id: 'PLANS' as TabView, icon: ClipboardList, label: t('tab_plans', lang) },
    { id: 'HISTORY' as TabView, icon: HistoryIcon, label: t('tab_history', lang) },
    { id: 'STATS' as TabView, icon: BarChart2, label: t('tab_stats', lang) },
    { id: 'AI_COACH' as TabView, icon: MessageSquare, label: t('tab_ai', lang) },
    { id: 'PROFILE' as TabView, icon: User, label: t('tab_profile', lang) },
  ];

  return (
    <>
      {/* MOBILE: Bottom Navigation Bar (MD3) */}
      <div 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 = currentTab === item.id;
            return (
              <button
                key={item.id}
                onClick={() => onTabChange(item.id)}
                className="flex flex-col items-center justify-center w-full h-full gap-1 group min-w-0"
              >
                <div className={`px-4 py-1 rounded-full 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={22} strokeWidth={isActive ? 2.5 : 2} />
                </div>
                <span className={`text-[10px] 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 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 = currentTab === item.id;
                return (
                <button
                    key={item.id}
                    onClick={() => onTabChange(item.id)}
                    className="flex flex-col items-center gap-1 group w-full"
                >
                    <div className={`w-14 h-8 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} />
                    </div>
                    <span className={`text-[11px] font-medium text-center ${
                         isActive ? 'text-on-surface' : 'text-on-surface-variant'
                    }`}>
                        {item.label}
                    </span>
                </button>
                );
            })}
          </div>
      </div>
    </>
  );
};

export default Navbar;