'use client';

import React from 'react';
import { motion } from 'framer-motion';
import {
	CalendarCheck,
	Clock,
	CheckCircle2,
	CalendarDays,
	ArrowUp,
} from 'lucide-react';

interface ReservationStats {
	totalReservations: number;
	pendingReservations: number;
	confirmedReservations: number;
	todayTrips: number;
}

interface ReservationStatsCardsProps {
	stats: ReservationStats;
}

export const ReservationStatsCards: React.FC<ReservationStatsCardsProps> = ({
	stats,
}) => {
	const {
		totalReservations,
		pendingReservations,
		confirmedReservations,
		todayTrips,
	} = stats;

	return (
		<div className="grid grid-cols-2 md:grid-cols-4 gap-5">
			{/* Total Reservations */}
			<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="text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Total Reservations
						</p>
						<p className="text-3xl font-bold mt-2 text-[#E5D9C6]">
							{totalReservations}
						</p>
					</div>

					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<CalendarCheck 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">All bookings</span>
				</div>
			</motion.div>

			{/* Pending */}
			<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="text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Pending
						</p>
						<p className="text-3xl font-bold mt-2 text-[#CBB26A]">
							{pendingReservations}
						</p>
					</div>

					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<Clock className="w-5 h-5 text-[#CBB26A]" />
					</div>
				</div>

				<div className="flex items-center mt-3">
					<span className="text-xs text-[#CBB26A]/60">
						Awaiting confirmation
					</span>
				</div>
			</motion.div>

			{/* Confirmed */}
			<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="text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Confirmed
						</p>
						<p className="text-3xl font-bold mt-2 text-[#E5D9C6]">
							{confirmedReservations}
						</p>
					</div>

					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<CheckCircle2 className="w-5 h-5 text-[#CBB26A]" />
					</div>
				</div>

				<div className="flex items-center mt-3">
					<span className="text-xs text-[#CBB26A]/60">
						Approved bookings
					</span>
				</div>
			</motion.div>

			{/* Today Trips */}
			<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="text-xs uppercase tracking-wider text-[#CBB26A]/70">
							Today's Trips
						</p>
						<p className="text-3xl font-bold mt-2 text-[#CBB26A]">
							{todayTrips}
						</p>
					</div>

					<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<CalendarDays className="w-5 h-5 text-[#CBB26A]" />
					</div>
				</div>

				<div className="flex items-center mt-3">
					<span className="text-xs text-[#CBB26A]/60">
						Scheduled today
					</span>
				</div>
			</motion.div>
		</div>
	);
};

export default ReservationStatsCards;