import React from 'react';
import { NavLink, useParams, useLocation } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { CheckSquare, GalleryHorizontal, Home, Trophy } from 'lucide-react';
import { useEventData } from '../hooks/useEventData';

function TabLink({
  to,
  children,
  isActive
}: {
  to: string;
  children: React.ReactNode;
  isActive: boolean;
}) {
  return (
    <NavLink
      to={to}
      className={`
        flex flex-col items-center gap-1 h-14 p-2 transition-all duration-200 rounded-lg backdrop-blur-md
        ${isActive
          ? 'bg-gradient-to-t from-pink-500/90 to-pink-400/90 text-white shadow-lg scale-105 border border-white/30'
          : 'text-gray-300 hover:bg-white/10 hover:text-pink-300 hover:scale-105 hover:border-white/20 border border-transparent'
        }`}
    >
      {children}
    </NavLink>
  );
}

export default function BottomNav() {
  const { slug } = useParams();
  const location = useLocation();
  const { event } = useEventData();
  
  if (!slug) return null; // Only show bottom nav within event context
  const base = `/e/${encodeURIComponent(slug)}`;
  const currentPath = location.pathname;
  const locale = event?.default_locale || 'de';

  // Translations
  const translations = {
    de: {
      home: 'Start',
      tasks: 'Aufgaben',
      achievements: 'Erfolge',
      gallery: 'Galerie'
    },
    en: {
      home: 'Home',
      tasks: 'Tasks',
      achievements: 'Achievements',
      gallery: 'Gallery'
    }
  };

  const t = translations[locale as keyof typeof translations] || translations.de;

  // Improved active state logic
  const isHomeActive = currentPath === base || currentPath === `/${slug}`;
  const isTasksActive = currentPath.startsWith(`${base}/tasks`) || currentPath === `${base}/upload`;
  const isAchievementsActive = currentPath.startsWith(`${base}/achievements`);
  const isGalleryActive = currentPath.startsWith(`${base}/gallery`) || currentPath.startsWith(`${base}/photos`);

  return (
    <div className="fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-black/30 px-2 py-2 backdrop-blur-xl shadow-xl dark:bg-black/40 dark:border-gray-800/50">
      <div className="mx-auto flex max-w-sm items-center justify-around">
        <TabLink to={`${base}`} isActive={isHomeActive}>
          <div className="flex flex-col items-center gap-1">
            <Home className="h-5 w-5" /> <span className="text-xs">{t.home}</span>
          </div>
        </TabLink>
        <TabLink to={`${base}/tasks`} isActive={isTasksActive}>
          <div className="flex flex-col items-center gap-1">
            <CheckSquare className="h-5 w-5" /> <span className="text-xs">{t.tasks}</span>
          </div>
        </TabLink>
        <TabLink to={`${base}/achievements`} isActive={isAchievementsActive}>
          <div className="flex flex-col items-center gap-1">
            <Trophy className="h-5 w-5" /> <span className="text-xs">{t.achievements}</span>
          </div>
        </TabLink>
        <TabLink to={`${base}/gallery`} isActive={isGalleryActive}>
          <div className="flex flex-col items-center gap-1">
            <GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">{t.gallery}</span>
          </div>
        </TabLink>
      </div>
    </div>
  );
}