// components/dashboard/StatsCards.tsx
import React from 'react';
import { motion } from 'framer-motion';
import {
	Users,
	Activity,
	UserMinus,
	TrendingUp,
	ArrowUp,
	ArrowDown,
} from 'lucide-react';
import { TrustedClientStats } from '@/lib/modules/trusted-client/trusted-client.types';

interface StatsCardsProps {
	stats: TrustedClientStats;
}

export const StatsCards: React.FC<StatsCardsProps> = ({ stats }) => {
	const { totalClients, activeClients, inactiveClients, activeRate } = stats;

	return (
		<div className="grid grid-cols-2 md:grid-cols-4 gap-5">
			{/* Total Clients Card */}
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.4 }}
				className="p-5 rounded-xl relative overflow-hidden group"
				style={{
					backgroundColor: '#1F1B16',
					border: '1px solid rgba(203, 178, 106, 0.15)',
					boxShadow:
						'0 8px 20px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(203, 178, 106, 0.05) inset',
				}}
			>
				<div className="absolute top-0 left-0 w-full h-[2px] bg-linear-to-r from-transparent via-[#CBB26A]/40 to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700"></div>

				<div className="flex items-start justify-between">
					<div>
						<p className="font-inter text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Total Clients
						</p>
						<p className="font-playfair text-3xl font-bold mt-2 text-[#E5D9C6]">
							{totalClients}
						</p>
					</div>
					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<Users className="w-5 h-5 text-[#CBB26A]" />
					</div>
				</div>

				<div className="flex items-center mt-3">
					<ArrowUp className="w-3 h-3 text-[#CBB26A]/60 mr-1" />
					<span className="text-xs text-[#CBB26A]/60">
						+12% from last month
					</span>
				</div>
			</motion.div>

			{/* Active Card */}
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ delay: 0.1, duration: 0.4 }}
				className="p-5 rounded-xl relative overflow-hidden group"
				style={{
					backgroundColor: '#1F1B16',
					border: '1px solid rgba(203, 178, 106, 0.15)',
					boxShadow:
						'0 8px 20px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(203, 178, 106, 0.05) inset',
				}}
			>
				<div className="absolute top-0 left-0 w-full h-[2px] bg-linear-to-r from-transparent via-[#CBB26A]/40 to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700"></div>

				<div className="flex items-start justify-between">
					<div>
						<p className="font-inter text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Active
						</p>
						<p className="font-playfair text-3xl font-bold mt-2 text-[#CBB26A]">
							{activeClients}
						</p>
					</div>
					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<Activity className="w-5 h-5 text-[#CBB26A]" />
					</div>
				</div>

				<div className="flex items-center mt-3">
					<ArrowUp className="w-3 h-3 text-[#CBB26A]/60 mr-1" />
					<span className="text-xs text-[#CBB26A]/60">
						+5% from last month
					</span>
				</div>
			</motion.div>

			{/* Inactive Card */}
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ delay: 0.2, duration: 0.4 }}
				className="p-5 rounded-xl relative overflow-hidden group"
				style={{
					backgroundColor: '#1F1B16',
					border: '1px solid rgba(203, 178, 106, 0.15)',
					boxShadow:
						'0 8px 20px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(203, 178, 106, 0.05) inset',
				}}
			>
				<div className="absolute top-0 left-0 w-full h-[2px] bg-linear-to-r from-transparent via-[#CBB26A]/40 to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700"></div>

				<div className="flex items-start justify-between">
					<div>
						<p className="font-inter text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Inactive
						</p>
						<p className="font-playfair text-3xl font-bold mt-2 text-[#E5D9C6]">
							{inactiveClients}
						</p>
					</div>
					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<UserMinus className="w-5 h-5 text-[#CBB26A]" />
					</div>
				</div>

				<div className="flex items-center mt-3">
					<ArrowDown className="w-3 h-3 text-[#CBB26A]/60 mr-1" />
					<span className="text-xs text-[#CBB26A]/60">
						-2% from last month
					</span>
				</div>
			</motion.div>

			{/* Active Rate Card */}
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ delay: 0.3, duration: 0.4 }}
				className="p-5 rounded-xl relative overflow-hidden group"
				style={{
					backgroundColor: '#1F1B16',
					border: '1px solid rgba(203, 178, 106, 0.15)',
					boxShadow:
						'0 8px 20px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(203, 178, 106, 0.05) inset',
				}}
			>
				<div className="absolute top-0 left-0 w-full h-[2px] bg-linear-to-r from-transparent via-[#CBB26A]/40 to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700"></div>

				<div className="flex items-start justify-between">
					<div>
						<p className="font-inter text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Active Rate
						</p>
						<p className="font-playfair text-3xl font-bold mt-2 text-[#CBB26A]">
							{activeRate}%
						</p>
					</div>
					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<TrendingUp className="w-5 h-5 text-[#CBB26A]" />
					</div>
				</div>

				<div className="flex items-center mt-3">
					<ArrowUp className="w-3 h-3 text-[#CBB26A]/60 mr-1" />
					<span className="text-xs text-[#CBB26A]/60">
						+8% from last month
					</span>
				</div>
			</motion.div>
		</div>
	);
};

export default StatsCards;