'use client';

import RHFTextField from '@/components/forms/RHFTextField';
import RHFTextArea from '@/components/forms/RHFTextArea';
import { motion } from 'framer-motion';
import PrimaryButton from '@/components/button/PrimaryButton';
import { useCreateContactMessageMutation } from '@/store/slice/contactApi';
import {
	createContactInititalValues,
	type CreateContactInput,
	CreateContactSchema,
} from '@/lib/modules/contact/contact.validation';
import { zodResolver } from '@hookform/resolvers/zod/dist/zod.js';
import useFormSubmitHandler from '@/hooks/formHandler';
import { useForm } from 'react-hook-form';
import FormProvider from '@/components/forms/FormProvider';

const ContactForm = () => {
	const [createContactMessage, { isLoading }] =
		useCreateContactMessageMutation();

	const methods = useForm<CreateContactInput>({
		defaultValues: createContactInititalValues,
		resolver: zodResolver(CreateContactSchema),
	});

	const handleFleet = useFormSubmitHandler<CreateContactInput>(
		createContactMessage,
		() => {
			methods.reset();
		},
		'Contact message submitted successfully!'
	);

	return (
		<section className="w-full bg-ground py-10 px-4">
			<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-stretch">
				{/* LEFT SIDE — FORM */}
				<div className="flex flex-col justify-center">
					<motion.div
						className="text-center mb-4"
						initial={{ opacity: 0, y: 20 }}
						whileInView={{ opacity: 1, y: 0 }}
						viewport={{ once: true }}
						transition={{ duration: 0.6 }}
					>
						<h2 className="premium-subheading text-2xl">
							Contact Us
						</h2>
						<p className="text-muted-foreground">
							Get in touch for bookings and inquiries
						</p>
					</motion.div>

					<FormProvider
						methods={methods}
						onSubmit={methods.handleSubmit(handleFleet)}
					>
						<div className="space-y-2 pl-10 pr-20">
							<RHFTextField
								name="name"
								label="Name"
								placeholder="Enter your full name"
							/>
							<RHFTextField
								name="email"
								label="Email"
								type="email"
								placeholder="Enter your email address"
							/>
							<RHFTextField
								name="phone"
								label="Phone"
								isRequired={false}
								type="tel"
								placeholder="Enter your phone number"
							/>
							<RHFTextArea
								name="message"
								label="Message"
								placeholder="Write your message..."
								rows={3}
							/>
							<PrimaryButton
								isLoading={isLoading}
								type="submit"
								title="Submit"
							/>
						</div>
					</FormProvider>
				</div>

				{/* RIGHT SIDE — GOOGLE MAP IFRAME */}
				<div className="w-full h-[500] rounded-xl overflow-hidden border border-white/10">
					<iframe
						title="Washington DC Metro Area"
						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3105.001!2d-77.0369!3d38.9072!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b9bc00000001%3A0x1234567890abcdef!2sWashington%20DC%2C%20USA!5e0!3m2!1sen!2sus!4v1696698200000!5m2!1sen!2sus"
						width="100%"
						height="100%"
						style={{ border: 0 }}
						allowFullScreen
						loading="lazy"
					></iframe>
				</div>
			</div>
		</section>
	);
};

export default ContactForm;