'use client';

import { motion } from 'framer-motion';
import { useState, useEffect, useRef } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { renderPageNumbers } from '@/components/table/Pagination';
import { useGetContactMessagesQuery } from '@/store/slice/contactApi';
import ContactDetail from './ContactDetail';
import type { ContactMessage } from '@/types/contact';
import { MessageStatus } from '@/app/generated/prisma/enums';
import StatsCards from './StatsCards';
import { ArrowUpRight } from 'lucide-react';
type FilterStatus = 'all' | 'new' | 'in_progress' | 'responded' | 'archived';

const statusConfig: Record<MessageStatus, { color: string; label: string }> = {
	[MessageStatus.NEW]: {
		color: '#CBB26A',
		label: 'New',
	},
	[MessageStatus.IN_PROGRESS]: {
		color: '#B8B2A8',
		label: 'In Progress',
	},
	[MessageStatus.RESPONDED]: {
		color: '#86B26A',
		label: 'Responded',
	},
	[MessageStatus.ARCHIVED]: {
		color: '#A89A72',
		label: 'Archived',
	},
};

const ContactsGrid = () => {
	const router = useRouter();
	const searchParams = useSearchParams();
	const isInitialMount = useRef(true);

	const [isOpen, setIsOpen] = useState(false);
	const [selectedContact, setSelectedContact] =
		useState<ContactMessage | null>(null);

	// Initialize from URL
	const [currentPage, setCurrentPage] = useState(() => {
		const page = searchParams.get('page');
		return page ? parseInt(page) : 1;
	});

	const [filterStatus, setFilterStatus] = useState<FilterStatus>(() => {
		const filter = searchParams.get('filter') as FilterStatus | null;
		return filter ?? 'all';
	});

	// Sync URL with state
	useEffect(() => {
		if (isInitialMount.current) {
			isInitialMount.current = false;
			return;
		}

		const params = new URLSearchParams(searchParams.toString());

		if (currentPage > 1) {
			params.set('page', currentPage.toString());
		} else {
			params.delete('page');
		}

		if (filterStatus !== 'all') {
			params.set('filter', filterStatus);
		} else {
			params.delete('filter');
		}

		const queryString = params.toString();
		router.push(queryString ? `?${queryString}` : window.location.pathname, {
			scroll: false,
		});
	}, [currentPage, filterStatus]);

	// Fetch Data
	const { data: contactsData, isLoading } = useGetContactMessagesQuery();

	const handleFilterChange = (status: FilterStatus) => {
		setFilterStatus(status);
		setCurrentPage(1);
	};

	const handlePageChange = (page: number) => {
		setCurrentPage(page);
		window.scrollTo({ top: 0, behavior: 'smooth' });
	};

	return (
		<>
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				className="mb-10"
			>
				{/* Top Row */}
				<div className="flex items-center justify-between flex-wrap gap-4">
					<div>
						<h1 className="text-3xl font-playfair font-semibold text-[#EDEBE6]">
							Contact Management
						</h1>

						<div className="w-12 h-[2] mt-3 bg-[#CBB26A]" />
					</div>

					{/* Optional small badge */}
					<div
						className="px-3 py-1 rounded-full text-xs font-medium  bg-[#CBB26A]/10 text-[#CBB26A] border border-[#CBB26A]/20"
					>
						Messages Dashboard
					</div>
				</div>

				{/* Short Description */}
				<p className="mt-4 text-sm text-[#A89A72] max-w-xl leading-relaxed">
					Manage inquiries, track status, and respond efficiently.
				</p>
			</motion.div>
			<StatsCards stats={contactsData?.stats} />

			{/* Filter Buttons */}
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.6 }}
				className="flex flex-wrap gap-3 mb-12"
			>
				{['all', 'new', 'in_progress', 'responded', 'archived'].map(
					(status) => (
						<motion.button
							key={status}
							onClick={() => handleFilterChange(status as FilterStatus)}
							whileHover={{ scale: 1.05 }}
							whileTap={{ scale: 0.95 }}
							className="px-4 py-2 rounded-lg font-inter font-medium transition-all"
							style={{
								backgroundColor:
									filterStatus === status ? '#CBB26A' : '#1A1612',
								color: filterStatus === status ? '#110D09' : '#B8B2A8',
								border:
									filterStatus === status
										? 'none'
										: '1px solid #2A2520',
							}}
						>
							{status
								.replace('_', ' ')
								.replace(/\b\w/g, (c) => c.toUpperCase())}
						</motion.button>
					)
				)}
			</motion.div>

			{/* Loading */}
			{isLoading ? (
				<div className="flex justify-center items-center h-64">
					<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#CBB26A]" />
				</div>
			) : (
				<>
					{/* Grid */}
					<motion.div
						initial={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						transition={{ duration: 0.6 }}
						className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"
					>
						{contactsData?.messages?.map(
							(contact: ContactMessage, index: number) => (
								<motion.div
									key={contact.id}
									initial={{ opacity: 0, y: 20 }}
									animate={{ opacity: 1, y: 0 }}
									transition={{ duration: 0.4, delay: index * 0.05 }}
									whileHover={{ y: -6 }}
									className="relative group p-6 rounded-2xl overflow-hidden"
									style={{
										background:
											'linear-gradient(145deg,#1F1B16,#17130F)',
										border: '1px solid rgba(203,178,106,0.15)',
										boxShadow:
											'0 10px 30px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(203,178,106,0.05)',
									}}
								>
									{/* Gold hover line */}
									<div className="absolute top-0 left-0 w-full h-[2] bg-linear-to-r from-transparent via-[#CBB26A]/40 to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-700" />

									{/* Header */}
									<div className="flex justify-between items-start mb-4">
										<div>
											<h3 className="font-playfair text-lg font-semibold text-[#EDEBE6]">
												{contact.name}
											</h3>

											<p className="text-xs text-[#A89A72] mt-1">
												{new Date(
													contact.createdAt
												).toLocaleDateString()}
											</p>
										</div>

										<div
											className="px-3 py-1 rounded-full text-xs font-semibold"
											style={{
												background: `${statusConfig[contact.status].color}20`,
												color: statusConfig[contact.status].color,
												border: `1px solid ${statusConfig[contact.status].color}40`,
											}}
										>
											{statusConfig[contact.status].label}
										</div>
									</div>

									{/* Contact Info */}
									<div className="space-y-1 text-sm mb-4">
										<p className="text-[#CBB26A]">{contact.email}</p>

										<p className="text-[#B8B2A8] text-xs">
											{contact.phone || 'No phone provided'}
										</p>
									</div>

									{/* Message */}
									<div className="relative mb-5">
										<p className="text-sm text-[#A89A72] line-clamp-3 leading-relaxed">
											{contact.message}
										</p>
									</div>

									<div className="flex justify-end">
										<button
											onClick={() => {
												setSelectedContact(contact);
												setIsOpen(true);
											}}
											className="flex items-center cursor-pointer gap-1 text-xs text-[#CBB26A] opacity-80 hover:opacity-100 transition-all  group-hover:translate-x-1"
										>
											View
											<ArrowUpRight
												className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1 group-hover:-translate-y-1"
											/>
										</button>
									</div>
								</motion.div>
							)
						)}
					</motion.div>

					{/* Pagination */}
					{contactsData &&
						contactsData?.pagination &&
						renderPageNumbers(
							contactsData.pagination.currentPage,
							contactsData.pagination.totalPages,
							handlePageChange
						)}
				</>
			)}

			{/* Modal */}
			{isOpen && selectedContact && (
				<ContactDetail
					isOpen={isOpen}
					handleClose={() => setIsOpen(false)}
					selectedContact={selectedContact}
				/>
			)}
		</>
	);
};

export default ContactsGrid;