'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Bell, LogOut, Settings, User, Calendar } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';

interface DashboardHeaderProps {
	user: {
		userId: string;
		email: string;
		role: 'user' | 'admin';
	};
}

export function DashboardHeader({ user }: DashboardHeaderProps) {
	const router = useRouter();
	const { toast } = useToast();
	const [isLoggingOut, setIsLoggingOut] = useState(false);

	const handleLogout = async () => {
		setIsLoggingOut(true);
		try {
			await fetch('/api/auth/logout', {
				method: 'POST',
			});

			toast({
				title: 'Logged out successfully',
				description: 'See you next time!',
			});

			router.push('/login');
			router.refresh();
		} catch (error) {
			toast({
				title: 'Logout failed',
				description: 'Please try again',
				variant: 'destructive',
			});
		} finally {
			setIsLoggingOut(false);
		}
	};

	return (
		<header className='bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50'>
			<div className='container mx-auto px-4'>
				<div className='flex items-center justify-between h-16'>
					<div className='flex items-center space-x-4'>
						<div className='flex items-center space-x-2'>
							<Calendar className='h-6 w-6 text-blue-600' />
							<h1 className='text-xl font-bold text-gray-900'>TT Booking</h1>
						</div>
						{user.role === 'admin' && (
							<Badge variant='secondary' className='bg-purple-100 text-purple-800'>
								Admin
							</Badge>
						)}
					</div>

					<div className='flex items-center space-x-4'>
						<Button variant='ghost' size='sm'>
							<Bell className='h-4 w-4' />
						</Button>

						{user.role === 'admin' && (
							<Button variant='ghost' size='sm' onClick={() => router.push('/admin')}>
								<Settings className='h-4 w-4 mr-2' />
								Admin Panel
							</Button>
						)}

						<div className='flex items-center space-x-2'>
							<User className='h-4 w-4 text-gray-600' />
							<span className='text-sm text-gray-700'>{user.email.split('@')[0]}</span>
						</div>

						<Button variant='outline' size='sm' onClick={handleLogout} disabled={isLoggingOut}>
							<LogOut className='h-4 w-4 mr-2' />
							{isLoggingOut ? 'Logging out...' : 'Logout'}
						</Button>
					</div>
				</div>
			</div>
		</header>
	);
}