'use client';
import { useTransition, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/navigation';
import { Loader2 } from 'lucide-react';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { toast } from 'sonner';
import { type User } from 'better-auth';
import { Separator } from '@/components/ui/separator';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form';
import { client } from '@/lib/auth/auth-client';

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

type AccountFormData = z.infer<ReturnType<typeof useAccountSchema>>;

export default function AccountForm({ user }: { user: User }) {
  const [loading, startTransition] = useTransition();
  const router = useRouter();
  const schema = useAccountSchema();

  // Parse the name into first and last name
  const parseName = (fullName: string) => {
    const nameParts = fullName.trim().split(' ');
    return {
      firstName: nameParts[0] || '',
      lastName: nameParts.slice(1).join(' ') || ''
    };
  };

  const { firstName, lastName } = parseName(user.name);

  const form = useForm<AccountFormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      name: user.name,
      email: user.email,
      firstName: firstName,
      lastName: lastName
    }
  });

  // Update form when user data changes
  useEffect(() => {
    const { firstName: newFirstName, lastName: newLastName } = parseName(
      user.name
    );
    form.reset({
      name: user.name,
      email: user.email,
      firstName: newFirstName,
      lastName: newLastName
    });
  }, [user.name, user.email, form]);

  const onSubmit = (data: AccountFormData) => {
    startTransition(async () => {
      try {
        await client.updateUser({
          name: `${data.firstName} ${data.lastName}`.trim(),
          fetchOptions: {
            onSuccess: () => {
              toast.success('Profil opdateret succesfuldt');
              router.refresh();
            },
            onError: (error) => {
              toast.error(
                error.error.message ||
                  'Der opstod en fejl ved opdatering af profilen'
              );
            }
          }
        });
      } catch {
        toast.error('Der opstod en fejl ved opdatering af profilen');
      }
    });
  };
  return (
    <Card className='w-full gap-3 rounded-none border-0 bg-neutral-100 px-5 pt-4 pb-7 font-serif shadow-none'>
      <CardHeader className='p-0'>
        <CardTitle className='text-client-dark text-2xl'>Konto</CardTitle>
        <Separator />
      </CardHeader>
      <CardContent className='p-0'>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-3.5'>
            {/* UserName */}
            <FormField
              control={form.control}
              name='name'
              render={({ field }) => (
                <FormItem className='gap-1'>
                  <FormLabel className='text-base'>Brugernavn</FormLabel>
                  <FormControl>
                    <Input
                      className='border-border h-11 rounded-none bg-white px-4 py-2.5 text-neutral-700 shadow-none'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Email */}
            <FormField
              control={form.control}
              name='email'
              render={({ field }) => (
                <FormItem className='gap-1'>
                  <FormLabel className='text-base'>Email adresse</FormLabel>
                  <FormControl>
                    <Input
                      className='border-border h-11 rounded-none bg-white px-4 py-2.5 text-neutral-700 shadow-none'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* First Name */}
            <FormField
              control={form.control}
              name='firstName'
              render={({ field }) => (
                <FormItem className='gap-1'>
                  <FormLabel className='text-base'>Fornavn</FormLabel>
                  <FormControl>
                    <Input
                      className='border-border h-11 rounded-none bg-white px-4 py-2.5 text-neutral-700 shadow-none'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Last Name */}
            <FormField
              control={form.control}
              name='lastName'
              render={({ field }) => (
                <FormItem className='gap-1'>
                  <FormLabel className='text-base'>Efternavn</FormLabel>
                  <FormControl>
                    <Input
                      className='border-border h-11 rounded-none bg-white px-4 py-2.5 text-neutral-700 shadow-none'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Submit */}
            <Button
              type='submit'
              className='h-11 min-w-42 justify-self-end bg-neutral-900 font-sans text-base'
              disabled={loading}
            >
              {loading ? <Loader2 className='animate-spin' /> : 'gem ændringer'}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}