'use client';

import { useAppStore, type AppSection } from '@/lib/store';
import { t } from '@/lib/i18n';
import { Home, Compass, MessageCircle, Heart, User, Upload } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

interface NavItem {
  id: AppSection;
  icon: React.ElementType;
  labelKey: string;
  showBadge?: boolean;
  badgeCount?: number;
  ownerOnly?: boolean;
}

export default function BottomNav() {
  const { currentSection, setCurrentSection, language, unreadMessages, isLoggedIn, user } =
    useAppStore();

  const isOwner = isLoggedIn && user?.roles?.some(r => r === 'houseOwner' || r === 'shopOwner');

  const navItems: NavItem[] = [
    {
      id: 'home',
      icon: Home,
      labelKey: 'nav.home',
    },
    {
      id: 'explore',
      icon: Compass,
      labelKey: 'nav.explore',
    },
    ...(isOwner
      ? [{
          id: 'owner-dashboard' as AppSection,
          icon: Upload,
          labelKey: 'owner.uploadNew',
          ownerOnly: true,
        }]
      : []),
    {
      id: 'messages',
      icon: MessageCircle,
      labelKey: 'nav.messages',
      showBadge: true,
      badgeCount: unreadMessages,
    },
    {
      id: 'profile',
      icon: User,
      labelKey: 'nav.profile',
    },
  ];

  return (
    <nav className="sticky bottom-0 z-40 w-full border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="mx-auto flex h-16 max-w-lg items-center justify-around px-2">
        {navItems.map((item) => {
          const isActive = currentSection === item.id;
          const Icon = item.icon;

          return (
            <button
              key={item.id}
              onClick={() => setCurrentSection(item.id)}
              className={`nav-indicator relative flex min-w-[3.5rem] flex-col items-center justify-center gap-0.5 rounded-lg px-2 py-1.5 transition-colors duration-200 ${
                isActive
                  ? 'text-primary'
                  : 'text-muted-foreground hover:text-foreground'
              }`}
              aria-label={t(item.labelKey, language)}
              aria-current={isActive ? 'page' : undefined}
            >
              <div className="relative">
                <Icon
                  className={`h-5 w-5 transition-transform duration-200 ${
                    isActive ? 'scale-110' : ''
                  }`}
                  strokeWidth={isActive ? 2.5 : 2}
                />
                {item.showBadge && item.badgeCount && item.badgeCount > 0 && (
                  <Badge
                    variant="destructive"
                    className="absolute -right-2.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[9px] font-bold"
                  >
                    {item.badgeCount > 99 ? '99+' : item.badgeCount}
                  </Badge>
                )}
                {item.ownerOnly && !isActive && (
                  <span className="absolute -right-1.5 -top-1 flex h-3 w-3 items-center justify-center rounded-full bg-primary">
                    <span className="text-[6px] font-bold text-primary-foreground">N</span>
                  </span>
                )}
              </div>
              <span
                className={`text-[10px] leading-tight ${
                  isActive ? 'font-semibold' : 'font-medium'
                }`}
              >
                {item.ownerOnly
                  ? (language === 'en' ? 'Upload' : 'আপলোড')
                  : t(item.labelKey, language)}
              </span>
              {isActive && (
                <span className="nav-indicator absolute -bottom-1.5 left-1/2 h-0.5 w-5 -translate-x-1/2 rounded-full bg-primary" />
              )}
            </button>
          );
        })}
      </div>
    </nav>
  );
}