'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage
} from '@/components/ui/form';
import { useEffect, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { useForm } from 'react-hook-form';
import { Asterisk, Loader2, X } from 'lucide-react';
import { toast } from 'sonner';
import { useSession } from '@/lib/auth/auth-client';
import useCookie from '@/hooks/use-cookie';
import useScrollPercent from '@/hooks/use-scroll-percent';
import { usePathname } from 'next/navigation';
import { Routes } from '@/config/routes';
import { api } from '@/lib/trpc/client';

const popup = 'newsletter-popup';
const expirationDays = 4;
const restrictedPaths = [
  Routes.PAYMENTS.SPONSORSHIP,
  Routes.ADVERTISING,
  Routes.CONTACTS,
  Routes.PAYMENTS.SUCCESS,
  Routes.PAYMENTS.CANCEL,
  Routes.PAYMENTS.PERSONAL
];

function useSchema() {
  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' })
  });
}

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

export default function NewsletterPopup() {
  const [isVisible, setIsVisible] = useState(false);
  const { data: session, isPending } = useSession();
  const { value: showPopup, setCookie: setPopup } = useCookie(popup);
  const scrollPercent = useScrollPercent();
  const pathname = usePathname();

  const schema = useSchema();

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

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

  const onSubmit = (data: FormData) => {
    mutate(data);
  };

  const onClose = () => {
    setIsVisible(false);
    setPopup('1', expirationDays);
  };

  useEffect(() => {
    const isRestricted = restrictedPaths.includes(pathname);

    if (!isPending && !session?.user && !showPopup && !isRestricted) {
      setIsVisible(scrollPercent >= 50);
    }
  }, [isPending, session, scrollPercent, showPopup, pathname]);

  if (!isVisible) {
    return null;
  }

  return (
    <Card className='animate-fadeInUp fixed right-2 bottom-2 z-30 max-h-[calc(100vh-120px)] w-68 overflow-y-auto rounded-none p-4 md:max-h-[calc(100vh-180px)] lg:max-h-[calc(100vh-240px)]'>
      <CardHeader className='p-0'>
        <button
          className='hover:sclale-[1.1] ml-auto transition'
          onClick={onClose}
        >
          <X className='size-5 text-black' />
        </button>
        <CardTitle className='flex flex-col items-center justify-center'>
          <span className='ml-1.5 text-[7px] tracking-[6px] uppercase'>
            Københavner
          </span>
          <span className='text-6xl leading-[50px] font-bold uppercase'>
            NYT
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent className='p-0'>
        <div className='text-center font-serif text-sm leading-[1.2]'>
          <p className='mb-4'>
            Mandag, onsdag og fredag morgen sender vi en nyhedsmail med nyt om
            byens rum og byens liv.
          </p>
          <p className='mb-6'>
            Ikke noget pjat, ikke noget spam, og du kan altid framelde dig igen
            med ét klik fra nyhedsbrevet.
          </p>
          <div className='mb-2 flex items-end justify-end'>
            <Asterisk className='size-5 stroke-red-700' />
            <span className='align-top text-neutral-500'> = skal udfyldes</span>
          </div>
        </div>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-4'>
            <FormField
              control={form.control}
              name='email'
              render={({ field }) => (
                <FormItem className='relative'>
                  <Asterisk className='absolute top-1 right-1 z-1 size-6 stroke-red-700' />
                  <FormControl className='relative'>
                    <Input
                      type='email'
                      placeholder='Din email adresse'
                      autoComplete='email'
                      className='h-10 rounded-none bg-white pr-5'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name='firstName'
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input
                      className='h-10 rounded-none bg-white'
                      placeholder='Fornavn'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name='lastName'
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input
                      className='h-10 rounded-none bg-white'
                      placeholder='Efternavn'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <button
              type='submit'
              className='bg-client-red hover:bg-client-red/80 flex h-10 w-full shrink-0 items-center justify-center px-5 py-2.5 text-center text-white transition'
              disabled={loading}
            >
              {loading ? <Loader2 className='size-4 animate-spin' /> : 'Ja tak'}
            </button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}