import FormRenderer from '@/components/common/form-renderer';
import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { Separator } from '@/components/ui/separator';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { getPageFields } from '@/data/forms/page-fields';
import { updateRequest } from '@/data/request/update-request';
import { zodResolver } from '@hookform/resolvers/zod';
import { PencilSimpleIcon } from '@phosphor-icons/react';
import { useEffect, useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { z } from 'zod';

export const PageSchema = z.object({
  title: z.string().min(1, 'Title is required'),
  slug: z.string().min(1, 'Slug is required'),
  is_homepage: z.boolean().optional(),
  status: z.boolean().optional(),
});

export type TPageData = z.infer<typeof PageSchema>;

export default function UpdatePage({
  item,
  refresh,
}: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  item: any;
  refresh: () => void;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();

  const form = useForm<TPageData>({
    resolver: zodResolver(PageSchema),
    defaultValues: {
      title: '',
      slug: '',
      is_homepage: false,
      status: false,
    },
  });

  useEffect(() => {
    if (item?.id) {
      form.reset({
        title: item?.title || '',
        slug: item?.slug || '',
        is_homepage: item?.is_homepage || false,
        status: item?.status === 'published' ? true : false,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [item]);

  const fields = getPageFields();

  const onSubmit = (data: TPageData) => {
    const formData = {
      ...data,
      status: data.status ? 'published' : 'draft',
    };

    startTransition(async () => {
      const res = await updateRequest({
        url: `/api/admin/pages/${item?.id}`,
        formData: formData,
      });

      if (res?.success) {
        toast.success(t(res?.message));
        refresh();
        form.reset();
        setIsOpen(false);
      }
    });
  };

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger asChild>
        <Button variant="ghostPrimary">
          <PencilSimpleIcon weight="bold" className="size-4" />
        </Button>
      </SheetTrigger>
      <SheetContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex h-full flex-col justify-between"
          >
            <SheetHeader>
              <SheetTitle>{t('Update Page')}</SheetTitle>
            </SheetHeader>
            <div className="mx-4 space-y-4 rounded-xl border border-black/5 p-4">
              <h4 className="text-lg font-medium">{t('Page Details')}</h4>
              <Separator />
              {fields.map((field) => (
                <FormRenderer key={field.key} item={field} form={form} />
              ))}
            </div>
            <SheetFooter>
              <Button type="submit" loading={isPending} disabled={isPending}>
                {t('Update Page')}
              </Button>
              <SheetClose asChild>
                <Button variant="outline">{t('Close')}</Button>
              </SheetClose>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
}