"use client";

import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";

const formSchema = z.object({
	firstname: z.string().min(2, { message: "Prénom trop court" }),
	lastname: z.string().min(2, { message: "Nom trop court" }),
	phone: z
		.string()
		.min(10, { message: "Un numéro de téléphone à 10 chiffres" }),
	email: z.string().email({ message: "Invalid email address" }),
	message: z
		.string()
		.min(10, { message: "Message must be at least 10 characters long" }),
});

export default function ContactFormPreview() {
	const form = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
		defaultValues: {
			firstname: "",
			lastname: "",
			phone: "",
			email: "",
		},
	});

	async function onSubmit(values: z.infer<typeof formSchema>) {
		try {
			console.log(values);
			await fetch("/api/users/new", {
				method: "POST",
				body: JSON.stringify(values),
			});
		} catch (error) {
			console.error("Form submission error", error);
		}
		console.log("subimted");
	}

	return (
		<div className="flex min-h-[60vh] h-full w-full items-center justify-center px-4">
			<Card className="mx-auto max-w-md">
				<CardHeader>
					<CardTitle className="text-2xl">Contact Us</CardTitle>
					<CardDescription>
						Please fill out the form below and we will get back to
						you shortly.
					</CardDescription>
				</CardHeader>
				<CardContent>
					<Form {...form}>
						<form
							onSubmit={form.handleSubmit(onSubmit)}
							className="space-y-8"
						>
							<div className="grid gap-4">
								{/* Firstname Field */}
								<FormField
									control={form.control}
									name="firstname"
									render={({ field }) => (
										<FormItem className="grid gap-2">
											<FormLabel htmlFor="name">
												Prénom
											</FormLabel>
											<FormControl>
												<Input
													id="firstname"
													placeholder="John Doe"
													type="text"
													autoComplete="firstname"
													{...field}
												/>
											</FormControl>
											<FormMessage />
										</FormItem>
									)}
								/>
								<div className="grid gap-4">
									{/* Firstname Field */}
									<FormField
										control={form.control}
										name="lastname"
										render={({ field }) => (
											<FormItem className="grid gap-2">
												<FormLabel htmlFor="lastname">
													Nom
												</FormLabel>
												<FormControl>
													<Input
														id="lastname"
														placeholder="John Doe"
														type="text"
														autoComplete="lastname"
														{...field}
													/>
												</FormControl>
												<FormMessage />
											</FormItem>
										)}
									/>

									{/* Email Field */}
									<FormField
										control={form.control}
										name="email"
										render={({ field }) => (
											<FormItem className="grid gap-2">
												<FormLabel htmlFor="email">
													Email
												</FormLabel>
												<FormControl>
													<Input
														id="email"
														placeholder="johndoe@mail.com"
														type="email"
														autoComplete="email"
														{...field}
													/>
												</FormControl>
												<FormMessage />
											</FormItem>
										)}
									/>

									{/* Message Field */}
									<FormField
										control={form.control}
										name="phone"
										render={({ field }) => (
											<FormItem className="grid gap-2">
												<FormLabel htmlFor="phone">
													Phone number
												</FormLabel>
												<FormControl>
													<Input
														id="phone"
														placeholder="0648265441"
														type="number"
														autoComplete="phone"
														{...field}
													/>
												</FormControl>
												<FormMessage />
											</FormItem>
										)}
									/>

									<Button type="submit" className="w-full">
										Add member
									</Button>
								</div>
							</div>
						</form>
					</Form>
				</CardContent>
			</Card>
		</div>
	);
}