'use client';

import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
	CardFooter,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Badge } from '@/components/ui/badge';
import { TabsContent } from '@/components/ui/tabs';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import type { DashboardStats } from '../_type/type';

interface AnalyticsTabProps {
	stats: DashboardStats | null;
	isLoading: boolean;
}

const AnalyticsTab: React.FC<AnalyticsTabProps> = ({ stats, isLoading }) => {
	return (
		<TabsContent value="analytics" className="space-y-4">
			{/* Admin Activity */}
			<Card>
				<CardHeader>
					<CardTitle>Recent Admin Activity</CardTitle>
				</CardHeader>
				<CardContent>
					{isLoading || !stats ? (
						<Skeleton className="h-40 w-full" />
					) : (
						<div className="space-y-4">
							{stats.adminActivity.recent.map((activity) => (
								<div
									key={activity.id}
									className="flex items-center justify-between p-2 hover:bg-muted/50 rounded-lg"
								>
									<div className="flex items-center gap-3">
										<Avatar className="h-8 w-8">
											<AvatarFallback>
												{activity.admin[0].toUpperCase()}
											</AvatarFallback>
										</Avatar>
										<div>
											<p className="text-sm font-medium">
												{activity.action}
											</p>
											<p className="text-xs text-muted-foreground">
												{activity.entity} •{' '}
												{new Date(
													activity.createdAt
												).toLocaleString()}
											</p>
										</div>
									</div>
									<Badge variant="outline">{activity.admin}</Badge>
								</div>
							))}
						</div>
					)}
				</CardContent>
				<CardFooter className="border-t pt-4">
					<div className="flex items-center justify-between w-full">
						<p className="text-sm text-muted-foreground">
							Active Sessions: {stats?.adminActivity.activeSessions ?? 0}
						</p>
						<Button variant="outline" size="sm">
							View Audit Log
						</Button>
					</div>
				</CardFooter>
			</Card>

			{/* Service Popularity */}
			<Card>
				<CardHeader>
					<CardTitle>Service Popularity</CardTitle>
					<CardDescription>Based on reservation count</CardDescription>
				</CardHeader>
				<CardContent>
					{isLoading || !stats ? (
						<Skeleton className="h-40 w-full" />
					) : (
						<div className="space-y-4">
							{stats.services.map((service) => (
								<div key={service.slug} className="space-y-1">
									<div className="flex items-center justify-between text-sm">
										<span>{service.name}</span>
										<div className="flex items-center gap-4">
											<span className="font-medium">
												{service.reservations}
											</span>
											<span className="text-xs text-muted-foreground w-12">
												{service.popularity}%
											</span>
										</div>
									</div>
									<div className="relative h-2 bg-muted rounded-full overflow-hidden">
										<div
											className="absolute left-0 top-0 h-full bg-primary rounded-full"
											style={{ width: `${service.popularity}%` }}
										/>
									</div>
								</div>
							))}
						</div>
					)}
				</CardContent>
			</Card>
		</TabsContent>
	);
};

export default AnalyticsTab;