import FormRenderer from '@/components/common/form-renderer';
import PageHeading from '@/components/common/page-heading';
import LoaderIcon from '@/components/icons/loader-icon';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { getKycModuleFields } from '@/data/forms/kyc-module-fields';
import { updateRequest } from '@/data/request/update-request';
import { useApiSWR } from '@/hooks/useSWR';
import {
  CreateKycFormValues,
  createKycSchema,
} from '@/schema/kyc-module-schema';
import { KycModule } from '@/types';
import { zodResolver } from '@hookform/resolvers/zod';
import { router, usePage } from '@inertiajs/react';
import { CheckIcon, PlusIcon } from '@phosphor-icons/react';
import { useEffect, useTransition } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const UpdateKycForm = () => {
  const page = usePage();
  const formId = Number(page.url.split('/')[3]);

  const { data, isLoading, mutate } = useApiSWR<KycModule>(
    `/admin/kyc-modules/${formId}`,
  );
  const [isPending, startTransition] = useTransition();

  const { t } = useTranslation();

  const form = useForm<CreateKycFormValues>({
    resolver: zodResolver(createKycSchema),
    defaultValues: {
      name: '',
      description: '',
      is_active: true,
      fields: [{ name: '', type: 'file', required: 'required' }],
    },
  });

  useEffect(() => {
    if (data) {
      form.reset({
        name: data.name ?? '',
        description: data.description ?? '',
        is_active: Boolean(data.is_active),
        fields:
          data.fields?.length > 0
            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
              data.fields.map((f: any) => ({
                name: f.name,
                type: f.type,
                required: f.required ? 'required' : 'optional',
              }))
            : [{ name: '', type: 'file', required: 'required' }],
      });
    }
  }, [data, form]);

  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: 'fields',
  });

  const formFields = getKycModuleFields();

  const onSubmit = (values: CreateKycFormValues) => {
    const payload = {
      ...values,
      fields: values.fields.map((f) => ({
        name: f.name,
        type: f.type,
        required: f.required,
      })),
    };

    startTransition(async () => {
      const res = await updateRequest({
        url: `/api/admin/kyc-modules/${formId}`,
        formData: payload,
      });

      if (res?.success) {
        toast.success(t(res?.message));
        mutate();
        router.visit('/admin/kyc-form');
      }
    });
  };

  if (isLoading)
    return (
      <div className="flex h-96 w-full items-center justify-center gap-2">
        <LoaderIcon />
        {t('Loading...')}
      </div>
    );

  return (
    <>
      <PageHeading
        title={t('Update KYC Module')}
        description={t('Modify the KYC module details and fields.')}
        backButton
      />

      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-4 rounded-xl bg-white p-6 shadow-box"
        >
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-medium capitalize">
              {t('KYC Module')}
            </h3>
            <Button type="submit" variant="default" loading={isPending}>
              <CheckIcon weight="bold" />
              {t('Save Changes')}
            </Button>
          </div>

          <Separator />

          {formFields.map((field) => (
            <FormRenderer form={form} key={field.id} item={field} />
          ))}

          <Separator />

          <div className="space-y-4">
            <h3 className="text-lg font-medium">{t('KYC Fields')}</h3>

            {fields.map((item, index) => (
              <div key={item.id} className="flex flex-col gap-3 sm:flex-row">
                <FormField
                  control={form.control}
                  name={`fields.${index}.name`}
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel>{t('Field Name')}</FormLabel>
                      <FormControl>
                        <Input placeholder={t('ID Front')} {...field} />
                      </FormControl>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name={`fields.${index}.type`}
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel>{t('Type')}</FormLabel>
                      <FormControl>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder={t('Select Type')} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="file">{t('File')}</SelectItem>
                            <SelectItem value="image">{t('Image')}</SelectItem>
                            <SelectItem value="text">{t('Text')}</SelectItem>
                            <SelectItem value="number">
                              {t('Number')}
                            </SelectItem>
                          </SelectContent>
                        </Select>
                      </FormControl>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name={`fields.${index}.required`}
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel>{t('Requirement')}</FormLabel>
                      <FormControl>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger className="h-11">
                            <SelectValue placeholder={t('Select')} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="required">
                              {t('Required')}
                            </SelectItem>
                            <SelectItem value="optional">
                              {t('Optional')}
                            </SelectItem>
                          </SelectContent>
                        </Select>
                      </FormControl>
                    </FormItem>
                  )}
                />

                <div className="flex sm:items-end">
                  <Button
                    type="button"
                    variant="outline"
                    className="h-11 w-full border-destructive bg-destructive/10 text-destructive sm:w-auto"
                    onClick={() => remove(index)}
                  >
                    {t('Remove')}
                  </Button>
                </div>
              </div>
            ))}
          </div>

          <div className="pt-4">
            <Button
              type="button"
              variant="secondary"
              className="w-[calc(100%-112px)]"
              onClick={() =>
                append({ name: '', type: 'file', required: 'required' })
              }
            >
              <div>
                <PlusIcon weight="bold" className="size-4" />
              </div>
              {t('Add Field')}
            </Button>
          </div>
        </form>
      </Form>
    </>
  );
};

UpdateKycForm.title = 'Update KYC Form';

export default UpdateKycForm;