// components/admin/contact/ContactDisplay.tsx
'use client';
import { motion, AnimatePresence } from 'framer-motion';
import { Phone, Mail, MapPin, Edit2, Trash2, Plus } from 'lucide-react';
import { ContactInfo } from '@/lib/modules/contact-info/contact-info.types';
import { Badge } from '@/components/ui/badge';
import { isAdminSelector } from '@/store/authSlice';
import { useSelector } from 'react-redux';

const sectionLabels: Record<string, string> = {
	HERO: 'Hero Section',
	ABOUT_US: 'About Us',
	ABOUT_BANNER: 'About Banner',
	SERVICES_BANNER: 'Services Banner',
	FLEET_BANNER: 'Fleet Banner',
	BOOK_BANNER: 'Book Banner',
	CONTACT_BANNER: 'Contact Banner',
	SAFETY_SERVICE: 'Safety Service',
	LUXURY_FLEET: 'Luxury Fleet',
};

const sectionColors: Record<string, string> = {
	HERO: 'bg-purple-500/20 text-purple-500',
	ABOUT_US: 'bg-blue-500/20 text-blue-500',
	ABOUT_BANNER: 'bg-indigo-500/20 text-indigo-500',
	SERVICES_BANNER: 'bg-orange-500/20 text-orange-500',
	FLEET_BANNER: 'bg-yellow-500/20 text-yellow-500',
	BOOK_BANNER: 'bg-pink-500/20 text-pink-500',
	CONTACT_BANNER: 'bg-green-500/20 text-green-500',
	SAFETY_SERVICE: 'bg-red-500/20 text-red-500',
	LUXURY_FLEET: 'bg-amber-500/20 text-amber-500',
};

interface ContactDisplayProps {
	contacts: ContactInfo[];
	isLoading?: boolean;
	error?: boolean;
	onEdit: (contact: ContactInfo) => void;
	onDelete?: (contact: ContactInfo) => void;
	onAdd: () => void;
	onRetry?: () => void;
}

export default function ContactDisplay({
	contacts,
	onEdit,
	onDelete = () => {},
	onAdd,
}: ContactDisplayProps) {
	const isAdmin = useSelector(isAdminSelector);
	return (
		<motion.div
			initial={{ opacity: 0 }}
			animate={{ opacity: 1 }}
			className="bg-card border border-primary/10 rounded-2xl overflow-hidden backdrop-blur-sm"
		>
			{/* Card Header */}
			<div className="px-6 py-4 border-b border-primary/10 bg-linear-to-r from-primary/5 to-transparent">
				<div className="flex items-center justify-between">
					<div className="flex items-center gap-3">
						<div className="p-2 bg-primary/10 rounded-lg">
							<Phone className="w-5 h-5 text-primary" />
						</div>
						<div>
							<h2 className="text-lg font-serif font-semibold text-foreground/90">
								Contact Information
							</h2>
							<p className="text-xs text-foreground/40">
								Manage your business contact details across sections
							</p>
						</div>
					</div>
					<button
						onClick={onAdd}
						className="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors inline-flex items-center gap-2 text-sm"
					>
						<Plus className="w-4 h-4" />
						Add
					</button>
				</div>
			</div>

			{/* Card Body */}
			<div className="p-6">
				{contacts.length === 0 ? (
					<div className="text-center py-8">
						<div className="w-16 h-16 mx-auto bg-secondary/50 rounded-full flex items-center justify-center mb-4">
							<Phone className="w-8 h-8 text-foreground/40" />
						</div>
						<h3 className="text-lg font-serif text-foreground/90 mb-2">
							No Contact Information
						</h3>
						<p className="text-sm text-foreground/40 mb-4">
							Add your business contact details to display on the
							website.
						</p>
						<button
							onClick={onAdd}
							className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors inline-flex items-center gap-2"
						>
							<Plus className="w-4 h-4" />
							Add Contact Info
						</button>
					</div>
				) : (
					<div className="space-y-4">
						{/* Summary Stats */}
						<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
							<div className="bg-secondary/30 rounded-lg p-3 text-center">
								<p className="text-xs text-foreground/40">
									Total Contacts
								</p>
								<p className="text-xl font-serif text-primary">
									{contacts.length}
								</p>
							</div>
							<div className="bg-secondary/30 rounded-lg p-3 text-center">
								<p className="text-xs text-foreground/40">Active</p>
								<p className="text-xl font-serif text-green-500">
									{contacts.filter((c) => c.isActive).length}
								</p>
							</div>
							<div className="bg-secondary/30 rounded-lg p-3 text-center">
								<p className="text-xs text-foreground/40">Sections</p>
								<p className="text-xl font-serif text-primary">
									{new Set(contacts.map((c) => c.section)).size}
								</p>
							</div>
						</div>

						{/* Contacts Grid */}
						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
							<AnimatePresence>
								{contacts.map((contact, index) => (
									<motion.div
										key={contact.id}
										initial={{ opacity: 0, y: 20 }}
										animate={{ opacity: 1, y: 0 }}
										exit={{ opacity: 0, scale: 0.9 }}
										transition={{ delay: index * 0.05 }}
										className="bg-secondary/20 border border-primary/10 rounded-xl overflow-hidden hover:border-primary/30 transition-all group"
									>
										{/* Contact Card Header */}
										<div className="px-4 py-3 bg-secondary/30 border-b border-primary/10 flex items-center justify-between">
											<Badge
												className={
													sectionColors[contact.section] ||
													'bg-primary/20 text-primary'
												}
											>
												{sectionLabels[contact.section] ||
													contact.section}
											</Badge>
											<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
												<button
													onClick={() => onEdit(contact)}
													className="p-1.5 hover:bg-primary/10 rounded-lg transition-colors"
												>
													<Edit2 className="w-3.5 h-3.5 text-primary" />
												</button>
												{isAdmin && (
													<button
														onClick={() => onDelete(contact)}
														className="p-1.5 hover:bg-red-500/10 rounded-lg transition-colors"
													>
														<Trash2 className="w-3.5 h-3.5 text-red-500" />
													</button>
												)}
											</div>
										</div>

										{/* Contact Card Body */}
										<div className="p-4 space-y-2">
											<div className="flex items-center gap-2">
												<Phone className="w-3.5 h-3.5 text-primary/60" />
												<span className="text-sm text-foreground/80">
													{contact.phone}
												</span>
											</div>
											<div className="flex items-center gap-2">
												<Mail className="w-3.5 h-3.5 text-primary/60" />
												<span className="text-sm text-foreground/80">
													{contact.email}
												</span>
											</div>
											<div className="flex items-center gap-2">
												<MapPin className="w-3.5 h-3.5 text-primary/60" />
												<span className="text-sm text-foreground/80 truncate">
													{contact.location}
												</span>
											</div>
											<div className="flex items-center justify-between mt-2 pt-2 border-t border-primary/10">
												<span className="text-xs text-foreground/40">
													ID: {contact.id.slice(0, 8)}...
												</span>
												<Badge
													className={
														contact.isActive
															? 'bg-green-500/20 text-green-500'
															: 'bg-gray-500/20 text-gray-500'
													}
												>
													{contact.isActive
														? 'Active'
														: 'Inactive'}
												</Badge>
											</div>
										</div>
									</motion.div>
								))}
							</AnimatePresence>
						</div>
					</div>
				)}
			</div>
		</motion.div>
	);
}