src/components/mobile-bottom-nav.tsx

"use client";

import Link from 'next/link';
import { cn } from '@/lib/utils';
import { MessageSquare, Settings, Sparkles, Loader2 } from 'lucide-react';
import { useSettings } from '@/contexts/settings-context';
import { Button } from './ui/button';
import { useState } from 'react';
import { usePathname } from 'next/navigation';

export function MobileBottomNav({ onOpenSettings }: { onOpenSettings: () => void }) {
    const { playSound, t } = useSettings();
    const [isRotating, setIsRotating] = useState(false);
    const [isLoading, setIsLoading] = useState<string | null>(null);
    const pathname = usePathname();

    const handleSettingsClick = () => {
        playSound('touch');
        setIsRotating(true);
        onOpenSettings();
        setTimeout(() => setIsRotating(false), 500); // Duration of the animation
    };

    const handleNavClick = (href: string) => {
        if (pathname !== href) {
            setIsLoading(href);
        }
        playSound('touch');
    }

    const NavItem = ({ href, icon: Icon, label, isActive }: { href: string; icon: React.ElementType; label: string; isActive?: boolean }) => {
        const loading = isLoading === href;
        return (
            <Link href={href} legacyBehavior passHref>
                <a onClick={() => handleNavClick(href)} className={cn(
                    "flex flex-col items-center justify-center gap-1 text-xs font-medium transition-colors w-full h-full",
                    isActive && !loading ? "text-primary" : "text-muted-foreground",
                    loading && "text-primary animate-pulse"
                )}>
                    {loading ? <Loader2 className="h-6 w-6 animate-spin" /> : <Icon className="h-6 w-6" />}
                    <span className="font-bold">{label}</span>
                </a>
            </Link>
        );
    }

    return (
        <div className="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-card border-t z-[100]">
            <div className="grid h-full grid-cols-2">
                <div className="flex items-center justify-center">
                   <NavItem href="/" icon={MessageSquare} label={t('chatsTab')} isActive={pathname === '/'} />
                </div>
                 <div className="relative flex items-center justify-center">
                    <div className="absolute -top-6">
                        <Button
                            variant="default"
                            size="icon"
                            className={`w-14 h-14 rounded-full shadow-lg transition-transform duration-500 btn-gradient ${isRotating ? 'rotate-[360deg]' : ''}`}
                            onClick={handleSettingsClick}
                        >
                            <Settings />
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}