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 { getRankingFields } from '@/data/forms/ranking-fields';
import { createRequest } from '@/data/request/create-request';
import { RankingSchema, TRankingData } from '@/schema/ranking-schema';
import { zodResolver } from '@hookform/resolvers/zod';
import { PlusIcon } from '@phosphor-icons/react';
import { useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

export default function AddRank({ refresh }: { refresh: () => void }) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();

  const form = useForm({
    resolver: zodResolver(RankingSchema),
    defaultValues: {
      badge: null,
      level: 1,
      name: '',
      description: '',
      requirement: 0,
      bonus: 0,
      is_active: true,
    },
  });

  const formFields = getRankingFields();

  const onSubmit = (data: TRankingData) => {
    const fd = new FormData();

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    Object.entries(data).forEach(([key, value]: any) => {
      if (Array.isArray(value) && value[0] instanceof File) {
        fd.append(key, value[0]);
        return;
      }

      if (value instanceof File) {
        fd.append(key, value);
        return;
      }

      if (typeof value === 'boolean') {
        fd.append(key, value ? '1' : '0');
        return;
      }

      if (value !== undefined && value !== null) {
        fd.append(key, String(value));
      }
    });

    startTransition(async () => {
      const res = await createRequest({
        url: '/api/admin/rankings',
        formData: fd,
      });

      if (res?.success) {
        toast.success(t(res?.message));
        refresh();
        setIsOpen(false);
        form.reset({
          badge: null,
          level: 1,
          name: '',
          description: '',
          requirement: 0,
          bonus: 0,
          is_active: true,
        });
      }
    });
  };

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