'use client';

import { MessageSquare, Clock, Activity, AlertCircle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { TabsContent } from '@/components/ui/tabs';

import StatCard from './StatCard';
import type { DashboardStats, MessageStatus } from '../_type/type';

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

const MessagesTab: React.FC<MessagesTabProps> = ({ stats, isLoading }) => {
	return (
		<TabsContent value="messages" className="space-y-4">
			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
				{/* Message Stats Cards */}
				<StatCard
					title="Total Messages"
					value={stats?.messages.total ?? 0}
					icon={MessageSquare}
					isLoading={isLoading}
					description="All time total"
				/>
				<StatCard
					title="Unread"
					value={stats?.messages.unread ?? 0}
					icon={AlertCircle}
					isLoading={isLoading}
					description="Awaiting response"
					alert={true}
				/>
				<StatCard
					title="Avg Response Time"
					value={stats?.messages.avgResponseTime ?? '-'}
					icon={Clock}
					isLoading={isLoading}
					description="Average response time"
				/>
				<StatCard
					title="In Progress"
					value={stats?.messages.byStatus?.IN_PROGRESS ?? 0}
					icon={Activity}
					isLoading={isLoading}
					description="Being handled"
				/>
			</div>

			{/* Message Status Breakdown */}
			<Card>
				<CardHeader>
					<CardTitle>Message Status Distribution</CardTitle>
				</CardHeader>
				<CardContent>
					{isLoading || !stats ? (
						<Skeleton className="h-32 w-full" />
					) : (
						<div className="grid grid-cols-4 gap-4">
							{(
								[
									'NEW',
									'IN_PROGRESS',
									'RESPONDED',
									'ARCHIVED',
								] as MessageStatus[]
							).map((status) => (
								<div
									key={status}
									className="text-center p-4 bg-muted rounded-lg"
								>
									<p className="text-2xl font-bold">
										{stats.messages.byStatus[status] ?? 0}
									</p>
									<p className="text-sm text-muted-foreground">
										{status}
									</p>
								</div>
							))}
						</div>
					)}
				</CardContent>
			</Card>
		</TabsContent>
	);
};

export default MessagesTab;