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

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { cn } from '@/lib/utils';
import {
	ChevronLeft,
	ChevronRight,
	LogOut,
	User,
	Settings,
	Shield,
	Clock,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { type DashbordNavigationLink } from '@/constant/sidebar-nav';
import { motion, AnimatePresence } from 'framer-motion';
import { useSelector, useDispatch } from 'react-redux';
import { userSelector } from '@/store/authSlice';
import Image from 'next/image';
import { formatDistanceToNow } from 'date-fns';
import { useState } from 'react';
import { useLogoutAdminMutation } from '@/store/slice/authApi';
import { logout } from '@/store/authSlice';
import { AppDispatch } from '@/store/app';
import LogoutConfirmDialog from './LogoutConfirmDialog';
import { toast } from 'sonner';
import { toastColor } from '@/constant/toast-color';

interface SidebarProps {
	isOpen: boolean;
	onToggle: () => void;
	navigation: DashbordNavigationLink[];
}

function Sidebar({ isOpen, onToggle, navigation }: SidebarProps) {
	const dispatch: AppDispatch = useDispatch();
	const router = useRouter();
	const user = useSelector(userSelector);
	const pathname = usePathname();

	const [showLogoutDialog, setShowLogoutDialog] = useState(false);
	const [logOut, { isLoading }] = useLogoutAdminMutation();

	// Format last login
	const lastLogin = user?.lastLogin
		? formatDistanceToNow(new Date(user.lastLogin), { addSuffix: true })
		: 'Never';

	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 (
		<>
			<div
				className={cn(
					'relative left-0 top-0 z-40 h-screen flex flex-col transition-all duration-500 ease-in-out',
					'bg-linear-to-b from-[#0F0B07] to-[#1A1510]',
					'border-r border-[#2A2520]/50 shadow-2xl shadow-black/50',
					'backdrop-blur-sm bg-opacity-95',
					isOpen ? 'w-72' : 'w-20'
				)}
			>
				{/* Decorative Elements */}
				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(203,178,106,0.08)_0%,transparent_70%)] pointer-events-none" />
				<div className="absolute inset-0 bg-[url('/noise.png')] opacity-5 mix-blend-overlay pointer-events-none" />

				{/* User Profile Section */}
				{user && (
					<div
						className={cn(
							'relative px-3 py-4 border-b border-[#2A2520]/30',
							!isOpen && 'flex justify-center'
						)}
					>
						{isOpen ? (
							<motion.div
								initial={{ opacity: 0, y: -10 }}
								animate={{ opacity: 1, y: 0 }}
								className="flex items-center gap-3"
							>
								{/* Profile Image */}
								<div className="relative shrink-0">
									<div className="absolute inset-0 bg-[#CBB26A]/30 blur-md rounded-full" />
									<div className="relative w-12 h-12 rounded-full border-2 border-[#CBB26A]/50 overflow-hidden bg-[#1A1510]">
										{user.profileImage ? (
											<Image
												src={user.profileImage}
												alt={user.fullName}
												fill
												className="object-cover"
											/>
										) : (
											<div className="w-full h-full flex items-center justify-center bg-linear-to-br from-[#CBB26A]/20 to-[#A58D4F]/20">
												<User className="w-6 h-6 text-[#CBB26A]" />
											</div>
										)}
									</div>
									{/* Online Status Indicator */}
									<div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-[#1A1510]" />
								</div>

								{/* User Info */}
								<div className="flex-1 min-w-0">
									<h3 className="text-sm font-semibold text-white truncate">
										{user.fullName || 'Super Admin'}
									</h3>
									<div className="flex items-center gap-1 mt-0.5">
										<Shield className="w-3 h-3 text-[#CBB26A]" />
										<span className="text-xs text-[#B8B2A8]">
											{user.role || 'Admin'}
										</span>
									</div>
									<div className="flex items-center gap-1 mt-1">
										<Clock className="w-2.5 h-2.5 text-[#B8B2A8]/50" />
										<span className="text-[9px] text-[#B8B2A8]/50">
											Last login {lastLogin}
										</span>
									</div>
								</div>
							</motion.div>
						) : (
							/* Collapsed state - show only avatar */
							<div className="relative group cursor-pointer">
								<div className="absolute inset-0 bg-[#CBB26A]/30 blur-md rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
								<div className="relative w-10 h-10 rounded-full border-2 border-[#CBB26A]/50 overflow-hidden bg-[#1A1510]">
									{user.profileImage ? (
										<Image
											src={user.profileImage}
											alt={user.fullName}
											fill
											className="object-cover"
										/>
									) : (
										<div className="w-full h-full flex items-center justify-center bg-linear-to-br from-[#CBB26A]/20 to-[#A58D4F]/20">
											<User className="w-5 h-5 text-[#CBB26A]" />
										</div>
									)}
								</div>
								{/* Tooltip for collapsed state */}
								<div className="absolute left-full ml-2 px-3 py-1.5 bg-[#1A1510]/95 backdrop-blur-sm text-white text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 shadow-2xl border border-[#2A2520] whitespace-nowrap">
									{user.fullName || 'Super Admin'} (
									{user.role || 'Admin'})
									<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-[#1A1510]" />
								</div>
							</div>
						)}
					</div>
				)}

				{/* Toggle Button */}
				<div className="absolute -right-3 top-24 z-50">
					<Button
						variant="secondary"
						size="icon"
						onClick={onToggle}
						className="h-7 w-7 rounded-full border border-[#2A2520] bg-[#1F1A15] shadow-xl hover:bg-[#2A221C] transition-all duration-300 hover:scale-110 hover:border-[#CBB26A]/50 group"
					>
						{isOpen ? (
							<ChevronLeft className="h-3.5 w-3.5 text-[#CBB26A] transition-transform group-hover:-translate-x-0.5" />
						) : (
							<ChevronRight className="h-3.5 w-3.5 text-[#CBB26A] transition-transform group-hover:translate-x-0.5" />
						)}
					</Button>
				</div>

				{/* Navigation */}
				<nav className="flex-1 px-3 py-6 overflow-y-auto scrollbar-thin scrollbar-thumb-[#2A2520] scrollbar-track-transparent">
					<ul className="space-y-1.5">
						{navigation.map((item) => {
							const normalize = (path: string) =>
								path.replace(/\/+$/, '');
							const isActive =
								normalize(pathname) === normalize(item.href);

							return (
								<li key={item.title}>
									<Link
										href={item.href}
										className={cn(
											'group flex items-center rounded-xl px-3 py-2.5 text-sm font-medium relative overflow-hidden transition-all duration-300',
											isActive
												? 'bg-linear-to-r from-[#CBB26A]/20 via-[#CBB26A]/10 to-transparent text-[#CBB26A] shadow-lg shadow-black/20'
												: 'text-[#B8B2A8] hover:bg-white/5 hover:text-white',
											!isOpen && 'justify-center'
										)}
									>
										{/* Hover Glow Effect */}
										<div
											className={cn(
												'absolute inset-0 bg-linear-to-r from-[#CBB26A]/0 via-[#CBB26A]/5 to-[#CBB26A]/0 -translate-x-full group-hover:translate-x-full transition-transform duration-700',
												isActive && 'via-[#CBB26A]/10'
											)}
										/>

										{/* Active indicator with animation */}
										{isActive && (
											<motion.div
												layoutId="activeIndicator"
												className="absolute left-0 top-1/2 -translate-y-1/2 h-8 w-1 bg-linear-to-b from-[#CBB26A] to-[#E5D49A] rounded-r-full shadow-lg shadow-[#CBB26A]/30"
												transition={{
													type: 'spring',
													stiffness: 300,
													damping: 30,
												}}
											/>
										)}

										{/* Icon with glow on active */}
										<div
											className={cn(
												'relative z-10 transition-all duration-300',
												isOpen ? 'mr-3' : 'mx-auto',
												isActive &&
													'drop-shadow-[0_0_8px_rgba(203,178,106,0.5)]'
											)}
										>
											<item.icon
												className={cn(
													'h-5 w-5 transition-all duration-300',
													isActive
														? 'text-[#CBB26A] scale-110'
														: 'text-current group-hover:scale-105 group-hover:text-[#CBB26A]'
												)}
											/>
										</div>

										{/* Title with animation */}
										<AnimatePresence mode="wait">
											{isOpen && (
												<motion.span
													initial={{ opacity: 0, x: -10 }}
													animate={{ opacity: 1, x: 0 }}
													exit={{ opacity: 0, x: -10 }}
													transition={{ duration: 0.2 }}
													className={cn(
														'relative z-10 font-medium tracking-wide',
														isActive
															? 'text-[#CBB26A]'
															: 'text-inherit'
													)}
												>
													{item.title}
												</motion.span>
											)}
										</AnimatePresence>

										{/* Modern Tooltip for collapsed */}
										{!isOpen && (
											<div className="absolute left-full ml-2 px-3 py-1.5 bg-[#1A1510]/95 backdrop-blur-sm text-[#EDEBE6] text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 shadow-2xl border border-[#2A2520] whitespace-nowrap">
												{item.title}
												<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-[#1A1510]" />
											</div>
										)}
									</Link>
								</li>
							);
						})}
					</ul>

					{/* Admin Section Separator */}
					{navigation.some((i) => i.isAdminOnly) && isOpen && (
						<motion.div
							initial={{ opacity: 0 }}
							animate={{ opacity: 1 }}
							exit={{ opacity: 0 }}
							className="mt-6 mb-2 px-3"
						>
							<div className="flex items-center gap-2">
								<div className="h-px flex-1 bg-linear-to-r from-transparent via-[#2A2520] to-transparent" />
								<span className="text-[10px] uppercase text-[#B8B2A8]/50 font-semibold tracking-[0.2em]">
									Admin
								</span>
								<div className="h-px flex-1 bg-linear-to-r from-transparent via-[#2A2520] to-transparent" />
							</div>
						</motion.div>
					)}
				</nav>

				{/* Footer with User Actions */}
				<div className="mt-auto px-3 py-4 border-t border-[#2A2520]/30 space-y-2">
					{/* Settings Button */}
					<Link
						href="/admin/settings"
						className={cn(
							'flex items-center w-full rounded-xl px-3 py-2.5 text-sm text-[#B8B2A8] hover:text-white hover:bg-white/5 transition-all duration-300 group',
							!isOpen && 'justify-center'
						)}
					>
						<Settings
							className={cn(
								'h-4 w-4 transition-all duration-300',
								isOpen ? 'mr-3' : 'mx-auto',
								'group-hover:scale-105 group-hover:text-[#CBB26A]'
							)}
						/>
						{isOpen && <span className="font-medium">Settings</span>}
					</Link>

					{/* Logout Button */}
					<button
						onClick={() => setShowLogoutDialog(true)}
						className={cn(
							'flex items-center w-full rounded-xl px-3 py-2.5 text-sm text-[#B8B2A8] hover:text-white hover:bg-white/5 transition-all duration-300 group',
							!isOpen && 'justify-center'
						)}
					>
						<LogOut
							className={cn(
								'h-4 w-4 transition-all duration-300',
								isOpen ? 'mr-3' : 'mx-auto',
								'group-hover:scale-105 group-hover:text-[#CBB26A]'
							)}
						/>
						{isOpen && <span className="font-medium">Sign Out</span>}
					</button>

					{/* Brand Mark */}
					{isOpen ? (
						<motion.div
							initial={{ opacity: 0 }}
							animate={{ opacity: 1 }}
							className="mt-4 pt-2 text-center border-t border-[#2A2520]/20"
						>
							<span className="text-[10px] text-[#B8B2A8]/40 font-light tracking-wider block">
								© 2026 Trust Luxury Transportation
							</span>
							<span className="text-[8px] text-[#B8B2A8]/30 mt-1 block">
								v2.0.0 • Super Admin Access
							</span>
						</motion.div>
					) : (
						<div className="mt-4 text-center">
							<span className="text-[#CBB26A] text-xs font-bold opacity-50">
								T
							</span>
						</div>
					)}
				</div>
			</div>

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

export default Sidebar;