"use client";

import { useTransition } from "react";
import { Loader2 } from "lucide-react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";

function useSchema() {
    return z.object({
        firstName: z.string().optional(),
        lastName: z.string().optional(),
        email: z.string().min(1, { message: "Dette felt er påkrævet" }).email({ message: "Indtast en gyldig e-mail" })
    });
}

type NewsletterFormData = z.infer<ReturnType<typeof useSchema>>;

export default function NewsletterForm() {
    const [loading, startTransition] = useTransition();
    const schema = useSchema();

    const form = useForm<NewsletterFormData>({
        resolver: zodResolver(schema),
        defaultValues: {
            firstName: "",
            lastName: "",
            email: ""
        }
    });

    const onSubmit = () => {
        startTransition(async () => {
            // Handle newsletter form submission
        });
    };

    return (
        <div className='my-4 font-serif'>
            <span className='block text-end text-xs'>
                <span className='text-client-red text-lg'>*</span> obligatorisk
            </span>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className='flex flex-col gap-4'>
                    {/* Email */}
                    <FormField
                        control={form.control}
                        name='email'
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='text-base'>
                                    Email<span className='text-client-red text-xl'>*</span>
                                </FormLabel>
                                <FormControl>
                                    <Input
                                        type='email'
                                        autoComplete='email'
                                        className='border-border rounded-none shadow-none md:h-11'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    {/* First Name */}
                    <FormField
                        control={form.control}
                        name='firstName'
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='text-base'>Fornavn</FormLabel>
                                <FormControl>
                                    <Input className='border-border rounded-none shadow-none md:h-11' {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    {/* Last Name */}
                    <FormField
                        control={form.control}
                        name='lastName'
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='text-base'>Efternavn</FormLabel>
                                <FormControl>
                                    <Input className='border-border rounded-none shadow-none md:h-11' {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <Button
                        type='submit'
                        className='min-w-20 self-start bg-neutral-900 font-sans font-medium md:h-11'
                        disabled={loading}
                        size='sm'
                    >
                        {loading ? <Loader2 className='animate-spin md:size-10' /> : "ja tak!"}
                    </Button>
                </form>
            </Form>
        </div>
    );
}