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,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { updateRequest } from '@/data/request/update-request';
import { useApiSWR } from '@/hooks/useSWR';
import {
  TUpdateReferralData,
  UpdateReferralSchema,
} from '@/schema/referral-schema';
import { ReferralBonus, ReferralBonusLevel } from '@/types/admin/referral-type';
import { replaceDashesWithSpaces } from '@/utils/strHelpers';
import { zodResolver } from '@hookform/resolvers/zod';
import { router, usePage } from '@inertiajs/react';
import { CheckIcon, PlusIcon, XIcon } 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 UpdateReferrals = () => {
  const page = usePage();
  const [isPending, startTransition] = useTransition();
  const referralId = Number(page.url.split('/')[3]);
  const type = page.url.split('type=')[1];

  const { data, isLoading } = useApiSWR<ReferralBonus>(
    `/admin/referral-bonuses/${referralId}`,
  );

  const { t } = useTranslation();

  const form = useForm({
    resolver: zodResolver(UpdateReferralSchema),
    defaultValues: {
      is_active: data?.is_active,
      referralBonusLevels: [{ level: 0, amount: 0, type: 'percentage' }],
    },
  });

  useEffect(() => {
    if (data?.referral_bonus_levels?.length) {
      form.reset({
        is_active: data.is_active,
        referralBonusLevels: data?.referral_bonus_levels.map(
          (item: ReferralBonusLevel) => ({
            level: Number(item?.level),
            amount: Number(item?.amount),
            type: item.type,
          }),
        ),
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

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

  const onSubmit = (data: TUpdateReferralData) => {
    startTransition(async () => {
      const res = await updateRequest({
        url: `/api/admin/referral-bonuses/${referralId}`,
        formData: data,
      });

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

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

  return (
    <>
      <PageHeading
        title={t('Referral Level Editor')}
        description={t(
          'Update the referral levels and their corresponding bonuses. You can add, edit, or remove referral levels as needed.',
        )}
        backButton
      />
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="w-full 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">
              {replaceDashesWithSpaces(type)}
            </h3>
            <Button type="submit" variant="default" loading={isPending}>
              <CheckIcon weight="bold" />
              {t('Save Changes')}
            </Button>
          </div>

          <Separator />

          <div className="grid gap-2">
            <Label>{t('Activity Status')}</Label>
            <FormField
              control={form.control}
              name="is_active"
              render={({ field }) => (
                <FormItem className="flex h-11 flex-row items-center justify-between rounded-md bg-black/5 px-4">
                  <FormLabel className="cursor-pointer">
                    {t('Status')}
                  </FormLabel>
                  <FormControl>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                </FormItem>
              )}
            />
          </div>

          {fields.map((item, index) => (
            <div key={item.id} className="flex flex-col gap-3 sm:flex-row">
              <FormField
                control={form.control}
                name={`referralBonusLevels.${index}.level`}
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel>{t('Level')}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        inputMode="numeric"
                        placeholder={t('Level')}
                        {...field}
                        value={field.value as string | number}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name={`referralBonusLevels.${index}.amount`}
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel>{t('Bonus Amount')}</FormLabel>
                    <FormControl>
                      <InputGroup>
                        <InputGroupInput
                          type="number"
                          inputMode="numeric"
                          placeholder={t('Enter Bonus Amount')}
                          {...field}
                          value={field.value as string | number}
                        />
                        <InputGroupAddon>
                          <FormField
                            control={form.control}
                            name={`referralBonusLevels.${index}.type`}
                            render={({ field }) => (
                              <Select
                                value={field.value}
                                onValueChange={field.onChange}
                              >
                                <SelectTrigger className="h-9 w-[120px] border-none bg-transparent">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="fixed">
                                    {t('Fixed')}
                                  </SelectItem>
                                  <SelectItem value="percentage">%</SelectItem>
                                </SelectContent>
                              </Select>
                            )}
                          />
                        </InputGroupAddon>
                      </InputGroup>
                    </FormControl>
                    <FormMessage />
                  </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)}
                >
                  <XIcon weight="bold" />
                  {t('Remove')}
                </Button>
              </div>
            </div>
          ))}

          <div className="flex gap-3 pt-4">
            <Button
              type="button"
              variant="secondary"
              className="w-[calc(100%-128px)]"
              onClick={() =>
                append({ level: 0, amount: 0, type: 'percentage' })
              }
            >
              <div>
                <PlusIcon weight="bold" className="size-4" />
              </div>
              {t('Add Level')}
            </Button>
          </div>
        </form>
      </Form>
    </>
  );
};

UpdateReferrals.title = 'Update Referrals';

export default UpdateReferrals;