// components/TopBar.tsx (updated)
'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Menu, Settings, LogOut, User, Shield } from 'lucide-react';
import Image from 'next/image';
import { logout, userSelector } from '@/store/authSlice';
import { useSelector, useDispatch } from 'react-redux';
import { AppDispatch } from '@/store/app';
import { useLogoutAdminMutation } from '@/store/slice/authApi';
import { useState } from 'react';
import { toast } from 'sonner';
import LogoutConfirmDialog from '../LogoutConfirmDialog';
import { toastColor } from '@/constant/toast-color';

interface TopBarProps {
	sidebarOpen: boolean;
	setSidebarOpen: (open: boolean) => void;
}

const TopBar = ({ sidebarOpen, setSidebarOpen }: TopBarProps) => {
	const dispatch: AppDispatch = useDispatch();
	const router = useRouter();
	const user = useSelector(userSelector);
	const [showLogoutDialog, setShowLogoutDialog] = useState(false);
	const [logOut, { isLoading }] = useLogoutAdminMutation();

	const handleLogout = async () => {
		try {
			await logOut().unwrap();
			dispatch(logout());
			router.replace('/auth/login');
			toast.success('Signed out successfully', toastColor.success);
		} catch (err) {
			console.error('Logout failed', err);
			toast.error('Failed to sign out. Please try again.', toastColor.error);
		} finally {
			setShowLogoutDialog(false);
		}
	};

	return (
		<>
			<header className="sticky top-0 z-30 bg-linear-to-r from-[#0F0B07] to-[#1A1510] border-b border-[#2A2520]/50 shadow-lg flex h-16 items-center px-4">
				<div className="flex items-center gap-2 lg:gap-3 w-full">
					<Button
						variant="outline"
						size="icon"
						className="lg:hidden bg-transparent border-[#2A2520] hover:bg-[#2A2520]/30 text-[#B8B2A8]"
						onClick={() => setSidebarOpen(!sidebarOpen)}
					>
						<Menu className="h-5 w-5" />
						<span className="sr-only">Toggle sidebar</span>
					</Button>

					<div className="hidden lg:block">
						<Link
							href="/admin/dashboard"
							className="flex items-center gap-2 hover:opacity-80 transition-opacity"
						>
							<Image
								src="/default/logo.png"
								alt="Trust Luxury Transportation"
								width={120}
								height={80}
								className="h-12 w-auto"
								priority
							/>
						</Link>
					</div>

					<div className="flex items-center ml-auto gap-3">
						<DropdownMenu>
							<DropdownMenuTrigger asChild>
								<Button
									variant="outline"
									size="icon"
									className="rounded-full border-0 hover:bg-[#2A2520]/30 transition-all duration-300 group"
								>
									<div className="relative">
										<Avatar className="h-9 w-9 border-2 border-transparent group-hover:border-[#CBB26A]/50 transition-all duration-300">
											<AvatarImage
												src={user?.profileImage}
												alt={user?.fullName}
											/>
											<AvatarFallback className="bg-linear-to-br from-[#CBB26A] to-[#A58D4F] text-[#0F0B07]">
												{user?.fullName?.charAt(0) || 'U'}
											</AvatarFallback>
										</Avatar>
										<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-[#1A1510]" />
									</div>
								</Button>
							</DropdownMenuTrigger>

							<DropdownMenuContent
								align="end"
								className="w-56 bg-linear-to-b from-[#1A1510] to-[#0F0B07] border border-[#2A2520] shadow-2xl"
							>
								<div className="px-2 py-1.5">
									<p className="text-sm font-medium text-white">
										{user?.fullName}
									</p>
									<div className="flex items-center gap-1 mt-0.5">
										<Shield className="w-3 h-3 text-[#CBB26A]" />
										<p className="text-xs text-[#B8B2A8]">
											{user?.role || 'Admin'}
										</p>
									</div>
								</div>

								<DropdownMenuSeparator className="bg-[#2A2520]/50" />

								<DropdownMenuItem
									className="cursor-pointer text-[#B8B2A8] hover:text-white hover:bg-[#2A2520]/30 focus:bg-[#2A2520]/30 focus:text-white"
									onClick={() => router.push('/admin/settings')}
								>
									<User className="mr-2 h-4 w-4" />
									<span>Profile</span>
								</DropdownMenuItem>

								<DropdownMenuItem
									className="cursor-pointer text-[#B8B2A8] hover:text-white hover:bg-[#2A2520]/30 focus:bg-[#2A2520]/30 focus:text-white"
									onClick={() => router.push('/admin/settings')}
								>
									<Settings className="mr-2 h-4 w-4" />
									<span>Settings</span>
								</DropdownMenuItem>

								<DropdownMenuSeparator className="bg-[#2A2520]/50" />

								<DropdownMenuItem
									onClick={() => setShowLogoutDialog(true)}
									className="cursor-pointer text-[#B8B2A8] hover:text-white hover:bg-[#2A2520]/30 focus:bg-[#2A2520]/30 focus:text-white"
								>
									<LogOut className="mr-2 h-4 w-4" />
									<span>Sign Out</span>
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
				</div>
			</header>

			{/* Logout Confirmation Dialog */}
			<LogoutConfirmDialog
				open={showLogoutDialog}
				onOpenChange={setShowLogoutDialog}
				onConfirm={handleLogout}
				isLoading={isLoading}
			/>
		</>
	);
};

export default TopBar;