"use client";

import { Home, PlusCircle, Search, TrendingUp, User } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";
import { useAuth } from "@/providers/auth-provider";

export function MobileFooter() {
	const pathname = usePathname();
	const { user, isAuthenticated } = useAuth();

	const navItems = [
		{
			title: "Accueil",
			url: "/",
			icon: Home,
		},
		{
			title: "Explorer",
			url: "/trends?openSearch=true",
			icon: Search,
		},
		{
			title: "Publier",
			url: "/upload",
			icon: PlusCircle,
		},
		{
			title: "Tendances",
			url: "/trends",
			icon: TrendingUp,
		},
		{
			title: "Profil",
			url: "/profile",
			icon: User,
		},
	];

	return (
		<footer className="lg:hidden fixed bottom-0 left-0 right-0 border-t bg-background z-40 h-16">
			<nav className="flex h-full items-center justify-around px-2">
				{navItems.map((item) => {
					const isActive = pathname === item.url.split("?")[0];
					const isProfile = item.title === "Profil";

					return (
						<Link
							key={item.url}
							href={item.url}
							className={cn(
								"flex flex-1 flex-col items-center justify-center gap-1 transition-colors min-h-[44px]",
								isActive ? "text-primary" : "text-muted-foreground hover:text-primary",
							)}
						>
							{isProfile && isAuthenticated && user ? (
								<Avatar
									className={cn(
										"h-6 w-6 border",
										isActive && "ring-2 ring-primary ring-offset-2",
									)}
								>
									<AvatarImage src={user.avatarUrl} alt={user.username} />
									<AvatarFallback className="text-[8px]">
										{user.username.slice(0, 2).toUpperCase()}
									</AvatarFallback>
								</Avatar>
							) : (
								<item.icon className={cn("h-6 w-6", isActive && "fill-current")} />
							)}
							<span className="text-[10px] font-medium">{item.title}</span>
						</Link>
					);
				})}
			</nav>
		</footer>
	);
}