'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { RefreshCw, User, Clock, Globe } from 'lucide-react';
import { format } from 'date-fns';

interface ActivityLog {
	id: string;
	action: string;
	entityType: string;
	entityId?: string;
	details?: string;
	ipAddress?: string;
	userAgent?: string;
	createdAt: Date;
	user?: {
		id: string;
		name: string;
		surname: string;
		email: string;
	} | null;
}

export function AdminLogs() {
	const [logs, setLogs] = useState<ActivityLog[]>([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		fetchLogs();
	}, []);

	const fetchLogs = async () => {
		try {
			setLoading(true);
			const response = await fetch('/api/admin/logs?limit=50');
			if (response.ok) {
				const data = await response.json();
				setLogs(data.logs || []);
			} else {
				console.error('Failed to fetch logs');
			}
		} catch (error) {
			console.error('Error fetching logs:', error);
		} finally {
			setLoading(false);
		}
	};

	const getActionBadgeColor = (action: string) => {
		switch (action.toLowerCase()) {
			case 'create':
			case 'created':
				return 'bg-green-100 text-green-800';
			case 'update':
			case 'updated':
				return 'bg-blue-100 text-blue-800';
			case 'delete':
			case 'deleted':
				return 'bg-red-100 text-red-800';
			case 'login':
				return 'bg-purple-100 text-purple-800';
			case 'logout':
				return 'bg-gray-100 text-gray-800';
			default:
				return 'bg-gray-100 text-gray-800';
		}
	};

	const formatUserAgent = (userAgent?: string) => {
		if (!userAgent) return 'Unknown';
		if (userAgent.includes('Chrome')) return 'Chrome';
		if (userAgent.includes('Firefox')) return 'Firefox';
		if (userAgent.includes('Safari')) return 'Safari';
		if (userAgent.includes('Edge')) return 'Edge';
		return 'Unknown Browser';
	};

	if (loading) {
		return (
			<Card>
				<CardHeader className='flex flex-row items-center justify-between'>
					<CardTitle>Activity Logs</CardTitle>
					<Button size='sm' disabled>
						<RefreshCw className='h-4 w-4 animate-spin mr-2' />
						Loading...
					</Button>
				</CardHeader>
				<CardContent>
					<div className='space-y-4'>
						{[1, 2, 3, 4, 5].map((i) => (
							<div key={i} className='animate-pulse border rounded-lg p-4'>
								<div className='h-4 bg-gray-200 rounded w-3/4 mb-2'></div>
								<div className='h-3 bg-gray-200 rounded w-1/2'></div>
							</div>
						))}
					</div>
				</CardContent>
			</Card>
		);
	}

	return (
		<Card>
			<CardHeader className='flex flex-row items-center justify-between'>
				<CardTitle>Activity Logs</CardTitle>
				<Button size='sm' onClick={fetchLogs}>
					<RefreshCw className='h-4 w-4 mr-2' />
					Refresh
				</Button>
			</CardHeader>
			<CardContent>
				{logs.length === 0 ? (
					<div className='text-center py-8 text-gray-500'>No activity logs found.</div>
				) : (
					<div className='space-y-4 max-h-96 overflow-y-auto'>
						{logs.map((log) => (
							<div key={log.id} className='border rounded-lg p-4 space-y-3'>
								<div className='flex items-center justify-between'>
									<div className='flex items-center gap-3'>
										<Badge className={getActionBadgeColor(log.action)}>{log.action}</Badge>
										<span className='text-sm font-medium'>
											{log.entityType}
											{log.entityId && (
												<span className='text-gray-500 ml-1'>
													({log.entityId.substring(0, 8)}...)
												</span>
											)}
										</span>
									</div>
									<div className='flex items-center gap-1 text-xs text-gray-500'>
										<Clock className='h-3 w-3' />
										{format(new Date(log.createdAt), 'MMM dd, HH:mm')}
									</div>
								</div>

								<div className='flex items-center justify-between text-sm'>
									<div className='flex items-center gap-2'>
										<User className='h-4 w-4 text-gray-400' />
										{log.user ? (
											<span>
												{log.user.name} {log.user.surname} ({log.user.email})
											</span>
										) : (
											<span className='text-gray-500'>System/Anonymous</span>
										)}
									</div>

									{log.ipAddress && (
										<div className='flex items-center gap-2 text-xs text-gray-500'>
											<Globe className='h-3 w-3' />
											<span>{log.ipAddress}</span>
											<span>•</span>
											<span>{formatUserAgent(log.userAgent)}</span>
										</div>
									)}
								</div>

								{log.details && (
									<div className='text-xs text-gray-600 bg-gray-50 rounded p-2'>
										<pre className='whitespace-pre-wrap break-words'>
											{JSON.stringify(JSON.parse(log.details), null, 2)}
										</pre>
									</div>
								)}
							</div>
						))}
					</div>
				)}
			</CardContent>
		</Card>
	);
}