'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Users, Calendar, Settings, BarChart3, Bell, Shield, Clock, MapPin, Activity, LogOut } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { AdminUserManagement } from './AdminUserManagement';
import { AdminAnnouncementManagement } from './AdminAnnouncementManagement';
import { AdminLogs } from './AdminLogs';
import { AdminRecentBookings } from './AdminRecentBookings';
import { AdminCourtManagement } from './AdminCourtManagement';
import { AdminSettingsManagement } from './AdminSettingsManagement';
import { AdminTimeSlotManagement } from './AdminTimeSlotManagement';

export function AdminDashboard() {
	const router = useRouter();
	const [stats] = useState({
		totalUsers: 125,
		todayBookings: 18,
		totalCourts: 2,
		weeklyRevenue: 850,
	});

	const handleLogout = async () => {
		try {
			await fetch('/api/auth/logout', {
				method: 'POST',
			});
			router.push('/');
		} catch (error) {
			console.error('Logout error:', error);
		}
	};

	return (
		<div className='min-h-screen bg-gray-50'>
			{/* Header */}
			<header className='bg-white border-b border-gray-200'>
				<div className='container mx-auto px-4'>
					<div className='flex items-center justify-between h-16'>
						<div className='flex items-center space-x-4'>
							<Shield className='h-6 w-6 text-blue-600' />
							<h1 className='text-xl font-semibold text-gray-900'>Admin Dashboard</h1>
						</div>

						<div className='flex items-center space-x-4'>
							<Badge variant='secondary' className='bg-blue-100 text-blue-800'>
								Administrator
							</Badge>
							<Button variant='ghost' size='sm' onClick={handleLogout}>
								<LogOut className='h-4 w-4' />
								Logout
							</Button>
						</div>
					</div>
				</div>
			</header>

			<main className='container mx-auto px-4 py-8'>
				{/* Stats Cards */}
				<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
					<Card>
						<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
							<CardTitle className='text-sm font-medium'>Total Users</CardTitle>
							<Users className='h-4 w-4 text-muted-foreground' />
						</CardHeader>
						<CardContent>
							<div className='text-2xl font-bold'>{stats.totalUsers}</div>
							<p className='text-xs text-muted-foreground'>+12% from last month</p>
						</CardContent>
					</Card>

					<Card>
						<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
							<CardTitle className='text-sm font-medium'>Today's Bookings</CardTitle>
							<Calendar className='h-4 w-4 text-muted-foreground' />
						</CardHeader>
						<CardContent>
							<div className='text-2xl font-bold'>{stats.todayBookings}</div>
							<p className='text-xs text-muted-foreground'>+5% from yesterday</p>
						</CardContent>
					</Card>

					<Card>
						<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
							<CardTitle className='text-sm font-medium'>Active Courts</CardTitle>
							<MapPin className='h-4 w-4 text-muted-foreground' />
						</CardHeader>
						<CardContent>
							<div className='text-2xl font-bold'>{stats.totalCourts}</div>
							<p className='text-xs text-muted-foreground'>All courts operational</p>
						</CardContent>
					</Card>

					<Card>
						<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
							<CardTitle className='text-sm font-medium'>Weekly Revenue</CardTitle>
							<BarChart3 className='h-4 w-4 text-muted-foreground' />
						</CardHeader>
						<CardContent>
							<div className='text-2xl font-bold'>${stats.weeklyRevenue}</div>
							<p className='text-xs text-muted-foreground'>+8% from last week</p>
						</CardContent>
					</Card>
				</div>

				{/* Admin Tabs */}
				<Tabs defaultValue='bookings' className='space-y-6'>
					<TabsList className='grid w-full grid-cols-6'>
						<TabsTrigger value='bookings'>Bookings</TabsTrigger>
						<TabsTrigger value='users'>Users</TabsTrigger>
						<TabsTrigger value='courts'>Courts</TabsTrigger>
						<TabsTrigger value='settings'>Settings</TabsTrigger>
						<TabsTrigger value='announcements'>Announcements</TabsTrigger>
						<TabsTrigger value='logs'>Logs</TabsTrigger>
					</TabsList>
					<TabsContent value='bookings'>
						<AdminRecentBookings />
					</TabsContent>
					<TabsContent value='users'>
						<AdminUserManagement />
					</TabsContent>
					<TabsContent value='courts'>
						<AdminCourtManagement />
					</TabsContent>{' '}
					<TabsContent value='settings'>
						<div className="space-y-6">
							<AdminSettingsManagement />
							<AdminTimeSlotManagement />
						</div>
					</TabsContent>
					<TabsContent value='announcements'>
						<AdminAnnouncementManagement />
					</TabsContent>{' '}
					<TabsContent value='logs'>
						<AdminLogs />
					</TabsContent>
				</Tabs>
			</main>
		</div>
	);
}