import { useAuthStore } from '../../../modules/auth/application/authStore';
import { useLang } from '../../infrastructure/i18n';

interface GlobalNavBarProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
}

export default function GlobalNavBar({ activeTab, onTabChange }: GlobalNavBarProps) {
  const { user } = useAuthStore();
  const { t } = useLang();

  const menuItems = [
    { id: 'chats', icon: 'chat', label: t('chats') },
    { id: 'contacts', icon: 'contacts', label: t('contacts') },
  ];

  return (
    <nav
      className="lg:fixed lg:left-0 lg:top-0 lg:h-[100dvh] lg:w-20 w-full h-16 fixed bottom-0 left-0 bg-surface-container-low border-t lg:border-t-0 lg:border-r border-white/5 flex lg:flex-col flex-row items-center justify-around lg:justify-start lg:pt-8 lg:pb-14 lg:gap-4 z-50 transition-all safe-area-bottom"
    >
      <div className="hidden lg:flex mb-10 flex-col items-center">
        <span className="text-2xl font-black text-primary tracking-tighter italic knot-logo-spin">Knot</span>
      </div>

      <div className="flex flex-row lg:flex-col gap-2 lg:gap-6 w-full lg:px-2 items-center justify-around lg:justify-start">
        {menuItems.map((item) => (
          <button
            key={item.id}
            onClick={() => onTabChange(item.id)}
            className={`flex flex-col items-center justify-center p-2 lg:p-3 rounded-xl transition-all duration-300 scale-95 lg:scale-100 active:scale-90 flex-1 lg:flex-none ${
              activeTab === item.id
                ? 'bg-primary/10 text-primary'
                : 'text-on-surface-variant hover:bg-surface-container-high hover:text-primary'
            }`}
          >
            <span 
              className={`material-symbols-outlined mb-0.5 lg:mb-1 ${activeTab === item.id ? 'fill-1' : ''}`}
              style={{ fontVariationSettings: `'FILL' ${activeTab === item.id ? 1 : 0}` }}
            >
              {item.icon}
            </span>
            <span className="text-[9px] lg:text-[10px] font-bold uppercase tracking-wider">{item.label}</span>
          </button>
        ))}
      </div>

      <div 
        className="lg:mt-auto lg:mb-4 group cursor-pointer relative flex items-center justify-center px-4 lg:px-0"
        onClick={() => onTabChange('settings')}
      >
        <div className="absolute -inset-1 bg-primary/20 rounded-2xl opacity-0 group-hover:opacity-100 blur transition-opacity" />
        <img
          alt="User Profile"
          className="relative w-8 h-8 lg:w-10 lg:h-10 rounded-2xl border-2 border-outline-variant/10 hover:border-primary/50 transition-colors object-cover"
          src={user?.avatar || `https://ui-avatars.com/api/?name=${user?.username || 'user'}&background=3096e5&color=fff`}
        />
      </div>
    </nav>
  );
}
