'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>
						</form>
					</Form>
				</CardContent>
			</Card>
		</div>
	)
}