'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { containerVariants, itemVariants } from '@/constant/variants';
import {
	useGetPublicContactQuery,
	useGetPublicSocialMediaClientsQuery,
} from '@/store/slice/publicApi';
import { Mail, Phone, MapPin } from 'lucide-react';
import { socialColorMap, socialIconMap } from '@/constant/social-media';
import { GallerySection } from '@/app/generated/prisma/enums';
import { BOTTON_NAV_LINKS } from '@/constant/navigation';

const Footer = () => {
	const { data: socialMediaData } = useGetPublicSocialMediaClientsQuery();
	const { data: contactData } = useGetPublicContactQuery();
	const aboutContacts = contactData?.filter(
		(contact) => contact.section === GallerySection.ABOUT_US
	);
	const phone =
		(aboutContacts && aboutContacts.length > 0 && aboutContacts[0].phone) ||
		undefined;
	const email =
		(aboutContacts && aboutContacts.length > 0 && aboutContacts[0].email) ||
		undefined;
	const location =
		(aboutContacts &&
			aboutContacts.length > 0 &&
			aboutContacts[0].location) ||
		undefined;

	return (
		<footer className="relative border-t border-border/30 bg-secondary/30 backdrop-blur-sm">
			<motion.div
				className="max-w-7xl mx-auto px-6 md:px-12 py-16"
				variants={containerVariants}
				initial="hidden"
				whileInView="visible"
				viewport={{ once: true }}
			>
				<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
					{/* Brand */}
					<motion.div variants={itemVariants}>
						<div className="mb-6">
							<Link href="/" className="inline-block">
								<div className="relative w-40 h-18">
									<Image
										src="/default/logo.png"
										alt="Trust Luxury Transportation"
										fill
										className="object-contain"
									/>
								</div>
							</Link>
						</div>
						<div>
							<div className="text-sm text-muted-foreground leading-relaxed">
								<p>Premium transportation services since 2014</p>
								<Link
									className="text-sm text-muted-foreground hover:text-primary transition-colors duration-200 "
									href={'auth/login'}
								>
									Manage
								</Link>
							</div>
						</div>
					</motion.div>

					{/* Quick Links */}
					<motion.div variants={itemVariants}>
						<h3 className="font-serif font-semibold mb-4 text-primary">
							Quick Links
						</h3>
						<ul className="space-y-2">
							{BOTTON_NAV_LINKS.map((item) => (
								<li key={item.label}>
									<Link
										href={item.href}
										className="text-sm text-muted-foreground hover:text-primary transition-colors duration-200"
									>
										{item.label}
									</Link>
								</li>
							))}
						</ul>
					</motion.div>

					{/* Contact Info */}
					{aboutContacts && aboutContacts.length > 0 && (
						<motion.div variants={itemVariants}>
							<h3 className="font-serif font-semibold mb-4 text-primary">
								Contact
							</h3>
							<div className="space-y-3">
								{phone && (
									<Link
										href={`tel:${phone}`}
										className="flex items-center gap-3 text-sm text-muted-foreground hover:text-primary transition-colors duration-200"
									>
										<Phone className="w-4 h-4 text-primary" />
										{phone}
									</Link>
								)}
								{email && (
									<Link
										href={`mailto:${email}`}
										className="flex items-center gap-3 text-sm text-muted-foreground hover:text-primary transition-colors duration-200"
									>
										<Mail className="w-4 h-4 text-primary" />
										{email}
									</Link>
								)}
								{location && (
									<div className="flex items-start gap-3 text-sm text-muted-foreground">
										<MapPin className="w-4 h-4 text-primary mt-1 shrink-0" />
										<span>{location}</span>
									</div>
								)}
							</div>
						</motion.div>
					)}

					{/* Social Links */}
					<motion.div variants={itemVariants}>
						<h3 className="font-serif font-semibold mb-4 text-primary">
							Follow Us
						</h3>

						<div className="flex flex-row flex-wrap items-center gap-3 w-2/3">
							{socialMediaData
								?.filter((item: any) => item.isActive)
								.map((social: any) => {
									const Icon = socialIconMap[social.platform];
									const color = socialColorMap[social.platform];

									// safety guard
									if (!Icon || !color) return null;

									return (
										<motion.a
											key={social.id}
											href={social.url}
											target="_blank"
											rel="noopener noreferrer"
											whileHover={{ scale: 1.15 }}
											whileTap={{ scale: 0.95 }}
											className={`p-2 rounded-lg bg-secondary flex items-center justify-center transition-all duration-300 ${color}`}
											aria-label={social.platform}
										>
											<Icon className="w-4 h-4" />
										</motion.a>
									);
								})}
						</div>
					</motion.div>
				</div>

				{/* Divider */}
				<motion.div
					variants={itemVariants}
					className="h-px bg-linear-to-r from-transparent via-primary/30 to-transparent mb-8"
				/>

				{/* Copyright */}
				<motion.div variants={itemVariants} className="text-center">
					<p className="text-xs text-muted-foreground">
						© 2026 Trust Luxury Transportation. All Rights Reserved.
					</p>
				</motion.div>
			</motion.div>
		</footer>
	);
};

export default Footer;