'use client';

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,
  FormMessage
} from '@/components/ui/form';
import { toast } from 'sonner';
import { useSession } from '@/lib/auth/auth-client';
import { usePathname, useRouter } from 'next/navigation';
import { Routes } from '@/config/routes';
import { api } from '@/lib/trpc/client';

function useSchema() {
  return z.object({
    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 PostNewsletterForm({
  type
}: {
  type?: 'default' | 'button';
}) {
  const schema = useSchema();
  const { data: session } = useSession();
  const router = useRouter();
  const pathName = usePathname();

  const { mutate, isPending } = api.newsletter.subscribe.useMutation({
    onSuccess: () => {
      toast.success('Succes', {
        description: 'Du er blevet succesfuldt tilmeldt.'
      });
    },
    onError: (err) => {
      toast.error(err.message ?? 'Der opstod en fejl.');
    }
  });

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

  const onSubmit = (data: NewsletterFormData) => {
    mutate({ email: data.email });
  };

  const onClick = () => {
    if (!session?.user) {
      return router.push(`${Routes.AUTH.SIGN_IN}?callbackURL=${pathName}`);
    }
    mutate({ email: session.user.email });
  };

  if (type === 'button') {
    return (
      <div className='my-4 flex items-start gap-2 bg-neutral-300 px-4 py-3'>
        <div className='grow'>
          <p className='leading-1.1 font-bold text-neutral-500'>
            SEND MIG EN EMAIL HVIS DER KOMMER NYT OM DETTE PROJEKT
          </p>
          <p className='leading-1.1 font-bold text-white'>
            (KRÆVER AT DU ER REGISTRERET BRUGER)
          </p>
        </div>
        <button
          onClick={onClick}
          disabled={isPending}
          className='bg-client-red hover:bg-client-red/80 flex h-12 w-28 shrink-0 items-center justify-center rounded-md px-6 py-2.5 text-center text-white uppercase transition'
        >
          {isPending ? <Loader2 className='size-4 animate-spin' /> : 'Ja tak'}
        </button>
      </div>
    );
  }

  return (
    <div className='my-3'>
      <span className='mb-1 inline-block text-sm font-bold tracking-wide text-[#666] uppercase'>
        MODTAG KBH’S UGENTLIGE NYHEDSBREV
      </span>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className='relative'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 18 14.14'
            className='fill-client-red absolute top-2 left-2 size-5'
          >
            <g>
              <path
                d='M369,2220.71a2.65,2.65,0,0,1-.49,1.52,4.75,4.75,0,0,1-1.23,1.24l-4.7,3.26-0.43.31-0.54.38-0.52.33a3.09,3.09,0,0,1-.58.27,1.62,1.62,0,0,1-.5.09h0a1.62,1.62,0,0,1-.5-0.09,3.09,3.09,0,0,1-.58-0.27l-0.52-.33-0.54-.38-0.43-.31-2.63-1.83-2.06-1.43a5,5,0,0,1-1.17-1.16,2.35,2.35,0,0,1-.55-1.37,2,2,0,0,1,.42-1.31,1.44,1.44,0,0,1,1.19-.52h14.79A1.62,1.62,0,0,1,369,2220.71Zm0,3v8a1.61,1.61,0,0,1-1.61,1.61H352.57a1.61,1.61,0,0,1-1.61-1.61v-8a5.35,5.35,0,0,0,1,.87q3.64,2.47,5,3.46,0.57,0.42.93,0.66a5.79,5.79,0,0,0,.95.48,2.9,2.9,0,0,0,1.11.25h0a2.9,2.9,0,0,0,1.11-.25,5.79,5.79,0,0,0,.95-0.48q0.36-.24.93-0.66,1.71-1.23,5-3.46A5.57,5.57,0,0,0,369,2223.67Z'
                transform='translate(-350.96 -2219.11)'
              />
            </g>
          </svg>

          <FormField
            control={form.control}
            name='email'
            render={({ field }) => (
              <FormItem className='w-full'>
                <FormControl>
                  <Input
                    placeholder='DIN EMAIL ADRESSE'
                    type='email'
                    autoComplete='email'
                    className='h-9 w-full rounded-none border-neutral-300 bg-transparent pr-22 pl-8 font-bold text-[#b3b3b3] shadow-none placeholder:text-[#b3b3b3]'
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button
            type='submit'
            className='absolute top-1.5 right-1.5 h-6 rounded-sm bg-[#b3b3b3] text-xs uppercase'
            disabled={isPending}
          >
            {isPending ? <Loader2 className='size-4 animate-spin' /> : 'Ja tak'}
          </Button>
        </form>
      </Form>
    </div>
  );
}