'use client';

import { Phone, Mail, MapPin } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';
import { TabsContent } from '@/components/ui/tabs';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
import { SocialIcon } from './StatusBadge';

import type { DashboardStats } from '../_type/type';

type ContentTabProps = {
	isLoading: boolean;
	stats?: DashboardStats;
};

const ContentTab = ({ isLoading, stats }: ContentTabProps) => {
	return (
		<TabsContent value="content" className="space-y-4">
			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
				{/* Gallery Progress */}
				<Card>
					<CardHeader>
						<CardTitle>Gallery Completion</CardTitle>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-40 w-full" />
						) : (
							<>
								<div className="text-3xl font-bold mb-4">
									{stats.gallery.completion}%
								</div>

								<Progress
									value={stats.gallery.completion}
									className="h-3 mb-4"
								/>

								<div className="space-y-2">
									{Object.entries(stats.gallery.bySection).map(
										([section, count]) => (
											<div
												key={section}
												className="flex items-center justify-between text-sm"
											>
												<span className="text-muted-foreground">
													{section}
												</span>
												<span className="font-medium">
													{count} images
												</span>
											</div>
										)
									)}
								</div>
							</>
						)}
					</CardContent>
				</Card>

				{/* Social Media */}
				<Card>
					<CardHeader>
						<CardTitle>Social Media</CardTitle>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-40 w-full" />
						) : (
							<div className="space-y-4">
								{stats.socialMedia.platforms.map((social) => (
									<div
										key={social.platform}
										className="flex items-center justify-between"
									>
										<div className="flex items-center gap-2">
											<SocialIcon platform={social.platform} />
											<span className="text-sm">
												{social.platform}
											</span>
										</div>

										<Badge
											variant={
												social.isActive ? 'default' : 'secondary'
											}
										>
											{social.isActive ? 'Active' : 'Inactive'}
										</Badge>
									</div>
								))}

								<Separator />

								<div className="flex items-center justify-between">
									<span className="text-sm">Engagement Rate</span>
									<span className="font-medium">
										{stats.socialMedia.engagement}%
									</span>
								</div>
							</div>
						)}
					</CardContent>
				</Card>

				{/* Trusted Clients */}
				<Card>
					<CardHeader>
						<CardTitle>Trusted Clients</CardTitle>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-40 w-full" />
						) : (
							<>
								<div className="flex items-center justify-between mb-4">
									<div>
										<p className="text-2xl font-bold">
											{stats.trustedClients.active}
										</p>
										<p className="text-sm text-muted-foreground">
											Active Clients
										</p>
									</div>

									<div>
										<p className="text-2xl font-bold">
											{stats.trustedClients.total}
										</p>
										<p className="text-sm text-muted-foreground">
											Total
										</p>
									</div>
								</div>

								<div className="space-y-2">
									{stats.trustedClients.recent.map((client) => (
										<div
											key={client.name}
											className="flex items-center gap-2"
										>
											<Avatar className="h-6 w-6">
												<AvatarFallback>
													{client.name.charAt(0)}
												</AvatarFallback>
											</Avatar>

											<span className="text-sm">{client.name}</span>
										</div>
									))}
								</div>
							</>
						)}
					</CardContent>
				</Card>
			</div>

			{/* Contact Info */}
			<Card>
				<CardHeader>
					<CardTitle>Contact Information</CardTitle>
				</CardHeader>

				<CardContent>
					{isLoading || !stats ? (
						<Skeleton className="h-20 w-full" />
					) : (
						<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
							<div className="flex items-center gap-2">
								<Phone className="h-4 w-4 text-muted-foreground" />
								<span>{stats.contactInfo.phone}</span>
							</div>

							<div className="flex items-center gap-2">
								<Mail className="h-4 w-4 text-muted-foreground" />
								<span>{stats.contactInfo.email}</span>
							</div>

							<div className="flex items-center gap-2">
								<MapPin className="h-4 w-4 text-muted-foreground" />
								<span>{stats.contactInfo.location}</span>
							</div>
						</div>
					)}
				</CardContent>
			</Card>
		</TabsContent>
	);
};

export default ContentTab;