import FormRenderer from '@/components/common/form-renderer';
import PageHeading from '@/components/common/page-heading';
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 { createRequest } from '@/data/request/create-request';
import {
  CreateKycFormValues,
  createKycSchema,
} from '@/schema/kyc-module-schema';
import { zodResolver } from '@hookform/resolvers/zod';
import { router } from '@inertiajs/react';
import { CheckIcon, PlusIcon } from '@phosphor-icons/react';
import { useTransition } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

type FieldType = 'file' | 'image' | 'text' | 'number';

type KycFormValues = {
  name: string;
  description: string;
  is_active: boolean;
  fields: {
    name: string;
    type: FieldType;
    required: 'required' | 'optional';
  }[];
};

const CreateKycForm = () => {
  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' }],
    },
  });

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

  const formFields = getKycModuleFields();

  const onSubmit = (values: KycFormValues) => {
    const data = {
      ...values,
      fields: values.fields.map((f) => ({
        name: f.name,
        type: f.type,
        required: f.required === 'required',
      })),
    };

    startTransition(() => {
      startTransition(async () => {
        const res = await createRequest({
          url: '/api/admin/kyc-modules',
          formData: data,
        });

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

  return (
    <>
      <PageHeading
        title={t('Create KYC Module')}
        description={t(
          'Create a new KYC module to collect user information for verification.',
        )}
        backButton
      />

      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-4 rounded-xl bg-white p-4 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('Create Module')}
            </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>
    </>
  );
};

CreateKycForm.title = 'Create KYC Form';

export default CreateKycForm;